記事の目的
デザインを元にTOPページの作成を行い、その中で調べたことなどを自分のためにアウトプット
その中で何が有益だったか、
今後時短するために活かせそうかについてまとめました。
CSS設計
命名規則はBEM
Block Element Modifierの略で,
Block => でかい括り
Element => でかい括りの中にいる要素
Modifier => 上記2つの変化球
の3つに分けて考えていくことでCSSを設計･命名していく手法
・BlockとElementの区切りはアンスコ2個（_）
・BlockまたはElementとModifierの区切りはハイフン2個（--）
・ModifierのKeyとValueの区切りはアンスコ1個()
人によってここのルールは違ったりします。
・クラスの命名、特にblockに当たる部分をユニークなクラス名に、elementは使い回しで（"〇〇_area" "〇〇_block"など）
コメントアウトで省略されていないクラス名をメモしておくと、後から修正する際にわかりやすい。
・HTMLのデフォルトスタイルを初期化する場合以外で、HTML要素をセレクタに用いない。
・HTMLのタグによるスタイル適用はなるべくしない
・単語の省略はなるべくしない
・基本的にimportant!は使わない
・CSSのセレクタにidは使わない
sassコンパイル
SCSSを使うことがほぼ必須になっているため、コンパイルする方法を必ず知っておかなければならないと思います。
・gulp
一度定義したタスクやインストールしたプラグインを開発者間で共有でき、チーム内で一定の品質を保った開発ができるようになる
https://ics.media/entry/3290/
・koala
直感的に操作ができるアプリケーションソフト
https://uxmilk.jp/38139
・Live Sass Compiler
VScodeの拡張機能によるコンパイル
ちょっとした開発に便利
https://webdesign-trends.net/entry/9295
flex
クラス名をBEMに乗っ取って管理できていないと訳が分からなくなる。
flexさせるアイテムはModifierとして扱うか、別のクラス名をつけると扱いやすく修正しやすくなった。
チートシートを見ながら進めるとわかりやすい
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
order … 順序の指定
display: flex; が指定された要素の中にある子要素（Flexアイテム）に指定するプロパティー。親要素に display: flex; が指定されていないと動作しないので注意。
Flexアイテムに order: 2; と指定すると、Flexアイテム内で二番目に移動する。
片方可変、片方固定のカラムレイアウト
https://www.nxworld.net/tips/css-variable-width-and-fixed-width-layout.html
slider
プラグインslickを使った実装。
実装の方法からオプションの設定まで説明している記事が出てくるので、ググる力が大切だと感じました。
「arrows」と「dots」の変更は、オプションでそれぞれにクラスを付与し、CSSで調整
https://webdesignday.jp/inspiration/technique/jquery-js/3847/
https://gimmicklog.com/jquery/549/
https://www.jungleocean.com/programming/190201jquery-slick
https://takblog.site/web/?p=117
position
position: absolute;を使う際に
親要素にpaddingがあった場合は、paddingを含めた大きさが親要素の大きさとなるので注意
Photoshop文字設定とCSSプロパティの相互関係
忘れがちなので覚えておきたい
https://sole-color-blog.com/blog/31/
作業スピードを上げるために
VScodeの便利な拡張機能
下記リンクで紹介されている便利な機能使いこなして使いやすくしていきたい
https://qiita.com/sensuikan1973/items/74cf5383c02dbcd82234
https://ics.media/entry/18544/
Clipy
クリップボードにコピーした内容をストックしておけるアプリ
よく使う文章を定型文として保存しておける
https://www.infact1.co.jp/staff_blog/webmarketing/14006/
作業時間を意識する
アプリなど使って作業時間を測って時間を意識する
https://toggl.com/app/timer
よく使うレイアウトなどは、自分の中でテンプレートとして頭の中で準備できているようにしたい
Visual Studio Codeでファイル名の検索
command⌘ + P
今まで知らなくていちいち探していた
ソースマップ
ソースマップがあるとデベロッパーツールでscssの場所が表示されるようになる。
今まではプラグインのインストールが必要だったが
gulp4からソースマップ組み込みサポートが追加。gulp-sourcemapsプラグインはもう必要ない。
https://qiita.com/hibikikudo/items/493fbfbbea183c94b38b
https://magnets.jp/web_design/10404/