Vue.js
【Vue】1つのコンポーネントに複数のtemplate
デザインカンプからのコーディング【練習】
デザインカンプからのコーディング【練習】 
デザインカンプからのコーディング【練習】 デザインカンプからのコーディング練習-ピクセルパーフェクトチェック-
デザインカンプからのコーディング練習で、作業も大詰めを迎えるころ、ピクセルパーフェクトを目指してデザインと見比べて細かな調整をしていくと思います。コーディングの練習をここまでしてきて、少しずつ慣れてきましたが、中級編を終えるころ、私の中で2...
デザインカンプからのコーディング【練習】 作業環境への留意～ブラウザ編～
しょーごさんのコーディング課題【中級編】に取り組んでいる最中は、ブラウザのタブを開きすぎたり、どこからどこまで作業を終えているのか分かりにくかったりしていました。作業のしづらさも覚えてストレスも感じていました。なかなか作業効率が良いとは思え...
CSS CSSのクラス名にはいつも迷わされます
毎回、コーディングする時にどんなクラス名にしようか迷ってしまいます。とりあえず、皆さんがつけているクラス名を参考にしながら、できるだけ分かりやすいクラス名をつけていこうと思います。今回のコーディング課題【中級Ex編】でクラス名をつけるのに参...
CSS 命名規則はBEM/mindBEMdingをベースに行ってみる
前回の記事でFLOCSS設計思想に基づいて、CSS設計を行っていくという話をしました。そちらで参考サイトの方は、命名規則をBEMMindBEMdingで行っているとのことでしたので、早速調べてみました。下記サイトが分かりやすかったので参考に...
CSS CSS設計について、今回（【中級Ex編】）はFLOCSSでやってみます
前回のコーディング課題【中級編】では、初めて設計思想というものを導入し、メジャーなBEMに基づいて行いました。ただ、やりながら使いづらさを感じていました。今回、【中級Ex編】までに、gulp導入ついでにpugも取り入れたこと、参考にしたのせ...
pug Pugの導入にあたって参考にしたサイト
のせっちさんのBrainにはGulp導入で大変お世話になりました。そんなのせっちさんのブログでPugについて、その構成の仕方などを詳しく解説してくれていましたので、ブログにて共有しておきます。こちら↓また、gulpfile.jsにたった1行...
Web制作全般 しょーごさんのコーディング課題【中級編】完走しました！
レビュー2回目まで指摘された箇所（フォントのtransform）を修正して、ポートフォリオとして活用させて頂きたいと思います。以下となります。よろしければご覧ください。ユーザー名、パスワードともに「tanatiyo-01」です。参考までに、...
Web制作全般 しょーごさんのコーディング課題【中級編】レビュー依頼が返ってきました②
GW中にも関わらず、2回目のレビュー依頼では半日と待たずレビューが返ってきました！早くレビューが頂けるから、フィードバックも早くできます！今回の記事では2回目のレビュー内容と反省点を振り返ります。中級編の反省はまた翌日以降の記事にてまとめま...
Web制作全般 しょーごさんのコーディング課題【中級編】レビュー依頼が返ってきました①
ようやく、一通りのチェックも終わり、提出することができました。GW中にも関わらずレビュー依頼を提出した翌日にはもうお返事がありました。今回も早くて驚きました＾＾；今回の記事では修正内容と反省をしながら進めていきたいと思います。ちなみに、参考...
デザインカンプからのコーディング【練習】 各モジュールの細かな調整は別のクラスを割り当ててそこで管理
よくあるブログカードやメディア（画像1枚とテキスト部分からなる）の構成は、CSS設計で勉強したことを踏まえてモジュールと捉え、拡張・保守・運用しやすいようにSassファイルを別で分けてコーディングを行っていました。ところが、デザインをよく見...
CSS flexboxを用いた時の子要素の幅を均一にしたい
flexboxは奥が深いので、まだまだ勉強しなければならないことが多いですが、ここではデザインカンプからのコーディング課題時によく悩んだことの一つ、「子要素の幅を均一にする」ことについて( ..)φメモを残しておきます。【コード例】HTML...
CSS 文字を細くする方法～transformを使った方法～
デザインカンプからのコーディングを行っている時に、文字のサイズや行間、文字間は指定通りなのに、なぜか文字がデザイン通りに合わない、ということが出てきました。その解決方法を備忘録がてら( ..)φメモしておきます。結論からいうと、プロパティは...
CSS table2列複数行タイプをレスポンシブで1列にする方法
tableのレスポンシブ対応をする際に、忘れていたので( ..)φメモしておきます。いろんなパターンが考えられますが、ここでは2列複数行タイプのtableをレスポンシブ対応で1列（複数行）にする方法を書いておきます。簡単にHTML構造を書い...
Web制作全般 ヘッダー上部固定でレスポンシブが崩れた件③～原因はヘッダーじゃなかった⁉～
ヘッダーの上部を固定してから、レスポンシブが崩れた件で、前回は原因探しを行っていました。一つ一つ、コンテンツやモジュールなどを確認していくと、それぞれに原因があることが分かってきました。原因は一か所ではありませんでした(-_-;)例えば、表...