命名
セレクタ
レイアウト
基本
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？
- block
- inline
- inline-block
横並び
横並びの方法
- float
- table
- inline-block
- flex
froat で横並び
table で横並び
inline-block で横並び
隙間を埋める
ul letter-spacing: -.5em;
li letter-spacing: 0;
flex で横並び
- 親要素はコンテナ display: flex を指定
- 直接の子要素はアイテム（※孫要素は適用されないので注意）
CSSレイアウトにfloatは古い! 初心者でも始められるFlexbox入門
Flexboxの使い方とクロスブラウザ
Android 4.3以下やIE 10まで対応するにはベンダープレフィックスが必要
→ Autoprefixer で付与
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-
IE 9で対応するにはポリフィル「flexibility.js」を読み込む
パフォーマンス
Flexbox と float なら Flexbox の方が早い。
最適なCSSの横並びはどっち!? Flexboxとfloatのパフォーマンス比較
中央配置
左右
-
text-align: center;（インライン要素） -
margin: 0 auto;（width必須） -
display: inline-block;（widthなしで内容量に応じた量）
上下左右
-
vertical-align: middle; + display: table-cell;（vertical-align はインライン要素とテーブルセルのみ） -
padding: xxpx（高さと幅の指定なしの場合） -
display: table-cell;（marginが効かなくなるので、親要素で囲む） -
position: absolute; + margin: auto;（width と height が必須） -
transform（width と height は成り行き） display: flex;
display: flex;
justify-content: center;
align-items: center;
配置
z-index
- position:static
以外 -
position: relative、absolute、fixedが指定されている要素にしか使えない - スタック文脈と
スタックレベル（同一のスタック文脈内での重なり順）→同じスタック文脈で比較するので注意
チェックボックス
- CSS でチェックボックスとラジオボタンを装飾する方法
- CSSだけでradio chackboxをカスタマイズする内容ってほとんどがHTML構造気持ち悪いよね。
- cssとhtmlのみでフォームのチェックボックスをわかりやすくするデザイン9選
レスポンシブ
.my-element {
height: 100vh; /* 変数をサポートしていないブラウザのフォールバック */
height: calc(var(--vh, 1vh) * 100); /* これ書いとく */
}