何回か書いてきたCSSのまとめネタ的なもの。
- 紙で印刷しておくと生産性が３倍ぐらいになる。思った以上にコーディングがしやすい。
- 良く使うユーティリティ系の操作をまとめる。ベンダープレフィックス以外にもボタン系もまとめてしまっていいかも。
- 良く使う幅なども変数化しておくと非常に良い。ただし2〜3段階必要。
- 基本的なレイアウトもユーティリティ系の一部としてまとめてしまう。こうするとページごとの差異がなくなる。*HTML+CSSデザイン講義を参照。誤植が多いが書いてあることはかなり使えるネタが多い。特にレイアウトに関するネタ。
- 密集地の場合、型落ちしないためにdisplay:tableは結構使えるかも。等間隔系の処理にいい気がする。
- 周期性があるデザインはほぼul>li一択。
- flexは思った以上に使える。特に下記３つは有効範囲広い。
jusify-content:space-between メニュー系などを等間隔に並べたい時。従来だとmarginを適度にとる必要がある。
align-item:center 難しい縦位置の中央ぞろえ。
flex-direction:column 画像＋説明文など - 画像の配置は要研究。縦横比を揃えるか。一部を切り抜くか。中央ぞろえをするのか。小ネタをしっかり用意する必要あり。
- flexショートハンドはwidthのコントロール。特にbasisを0にして、余白でコントロールするのか、%表記にするのか。ブラウザで色々いじって最適な値を決める必要がありそう。
