実務でCSSをゴリゴリ書く機会があり、力不足を感じたので、メモを。
- ライブラリlessやsassを使うとスコープを設定できるのでかなり楽
- 大まかな幅設定 スマホデザインの場合、幅を基本的に%で指定。pxだと横ずれの対処がきついときが結構あり。これはpositionなどでも同じ
- リンクボタンでの画像系のワンポイントマーク(あまり幅がない系) 同一ブロック内にてbackgroundでずらしてサイズや位置の調整 あるいは before after系の要素に画像を入れる
- リンクボタンでの画像系のワンポイントマーク(主に幅がある程度ある系)display:table とdisplay:table-cellでpositionで調整
- 横中央寄せ ブロック margin:auto インライン text-align:center
- 縦中央寄せ ブロック position margin系内部が非画像＆インラインかつ一行 line-height
- 縦中央寄せ 画像があったり複数行 inline-block＆vertical-align middle
- 縦中央寄せ cssで縦方向中央に配置する方法（5つのケース＋1）
- 均等サイズブロック 完全にサイズが同じものならdisplay table ＆display table-cell。[CSS] display:tableを学ぶ
- ヘッダーのロゴ+メニューなどは普通にブロック+float+ リストのinline-blockで幅指定。
- メニューの枠線などはborderで記述。
- 最後の幅サイズなどを調整するためにlast-childは結構使える
- 画像の可変を使う場合にはimg要素に100%を付ける。※アイキャッチ系など常に100%のものを使うとき
- 画像＋複数行(物件のサムネ画像＋複数行説明など)の説明はdisplay tableで分けて説明の部分を div,li,tableで分ける
- div 項目間のバランスが違うときに便利 li 項目が同一の場合に有利 テーブル テーブルらしいものがるときに便利
- background 位置やサイズをいろいろ変えられるので便利
- displayごとの特性をよく理解しておく必要あり。
要素の種類の指定のプロパティ（display）
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？
display:tableを活用してみよう
