CSSプロパティ154個の辞典
それぞれのプロパティが何をするか、よく使う値は何か、子に受け継がれるかを一行でまとめました。
レイアウト11
要素をどんな箱として扱うか、はみ出したときどうするかを決める属性です。
display要素をどんな箱として扱うかを決めます。レイアウトの出発点になる属性です。visibility見せるか隠すかを決めます。hiddenで隠しても場所はそのまま残ります。float要素を片側に寄せて文章を横に流します。今はflexやgridが担います。clear先行するfloatの下に回り込ませます。overflowはみ出した内容を切るかスクロールさせるかを決めます。overflow-x横にはみ出したときだけを別に決めます。overflow-y縦にはみ出したときだけを別に決めます。box-sizing幅に内側の余白と枠線を含めるかを決めます。border-boxのほうが計算が楽です。aspect-ratio縦横比を固定します。片方を決めればもう片方が追従します。container-type画面ではなく親の箱の大きさに応じてスタイルを変えられるようにします。isolationブレンドが外に漏れないよう層を分けます。
フレックスとグリッド24
要素を並べ、格子に配置する属性です。今日のレイアウトはほとんどこの二つで組みます。
flex-directionフレックス項目を横に並べるか縦に並べるかを決めます。flex-wrap一行に収まらないとき折り返すかを決めます。flex余った場所の分け方をまとめて決めます。flex: 1なら均等に分けます。flex-grow余った場所をどれだけ取るかを決めます。flex-shrink場所が足りないときどれだけ縮むかを決めます。0なら縮みません。flex-basis伸び縮みする前の基準の大きさです。justify-content主軸の方向に項目をどう並べるかを決めます。align-items交差軸の方向に項目をどう揃えるかを決めます。centerが縦の中央です。align-self一つの項目だけ別に揃えたいときに使います。align-content行が複数あるとき、行同士の間隔を決めます。gap項目のあいだの間隔です。余白と違って外側にはつきません。row-gap行と行のあいだの間隔だけを決めます。column-gap列と列のあいだの間隔だけを決めます。orderHTMLの順序はそのままに、見える順番だけ変えます。grid-template-columnsグリッドの列を何本、どんな幅で作るかを決めます。grid-template-rowsグリッドの行を何本、どんな高さで作るかを決めます。grid-template-areasマス目に名前を付けて、配置を絵のように書けます。grid-column一つの項目が横に何マス分を占めるかを決めます。grid-row一つの項目が縦に何マス分を占めるかを決めます。grid-auto-flow位置を指定していない項目をどの向きに詰めるかを決めます。grid-auto-rows自動でできる行の高さを決めます。place-items縦横の揃え方をまとめて決めます。centerひとつで中央になります。place-content内容のかたまり自体を縦横のどこに置くかを決めます。justify-items各マスの中で項目を横のどこに置くかを決めます。
箱と余白16
大きさと余白です。外の余白は重なって一つになり、内の余白には背景色が塗られます。
width横の大きさです。100%は親を、100vwは画面を基準にします。height縦の大きさです。autoなら内容の分だけになります。min-widthこれより狭くならないようにします。フレックスでは0にすると縮められます。max-widthこれより広くならないようにします。行の長さを抑えるのによく使います。min-heightこれより低くならないようにします。max-heightこれより高くならないようにします。あふれた分はoverflowが扱います。margin外側の余白です。上下は互いに重なって一つにまとまります。margin-top上側の外の余白です。margin-right右側の外の余白です。autoにすると左に寄ります。margin-bottom下側の外の余白です。margin-left左側の外の余白です。左右をautoにすると中央揃えになります。padding内側の余白です。背景色はここまで塗られます。padding-top上側の内の余白です。padding-right右側の内の余白です。padding-bottom下側の内の余白です。割合で指定すると高さを作るのにも使えます。padding-left左側の内の余白です。
文字25
書体や行間、揃え方など読まれる形を決めます。多くは子に受け継がれます。
font-size文字の大きさです。remはルートの文字サイズの倍数なので、拡大設定に追従します。font-family書体を決めます。前のものがなければ次に移るので、最後に総称を書きます。font-weight文字の太さです。400が標準、700が太字です。font-style斜体にするかどうかを決めます。font書体まわりの値をまとめて指定します。省いた値は既定に戻ります。line-height行間です。1.5のように単位なしで書くほうが継承時に安全です。letter-spacing文字と文字のあいだの間隔です。大きな見出しでは少し詰めると整って見えます。word-spacing語と語のあいだの間隔です。text-align文章の左右の揃え方を決めます。text-decoration下線や取り消し線を付けます。リンクの既定の下線を消すときにも使います。text-decoration-lineどの線を引くかだけを決めます。text-decoration-colorその線の色だけを別に決めます。text-decoration-style線の形を決めます。wavyは校正記号のような波線です。text-transform大文字小文字を強制的に変えます。表示だけが変わり、元の文字はそのままです。text-indent最初の行を字下げします。text-overflowあふれた文章を三点リーダーで切って見せます。overflowとnowrapが必要です。text-shadow文字に影を付けます。明るい背景の上の白い文字を読ませたいときに使います。white-space空白と改行の扱いを決めます。nowrapなら一行につながります。word-break長い語をどこで切るかを決めます。keep-allは韓国語で語が割れないようにします。overflow-wrap折り返せない長い文字列を強制的に折り返します。長いURLに使います。writing-mode文章の流れる向きを変えます。縦書きに使います。vertical-align一行の中で上下のどこに揃えるかを決めます。表のセルでも使います。font-variant-numeric数字の形を選びます。tabular-numsは幅を揃えて表がぶれないようにします。hyphens行末で語をハイフンで分けるかを決めます。言語の指定が必要です。text-wrap行の分け方を決めます。balanceは見出しの行の長さを揃えます。
色と背景13
文字色と背景色、グラデーションと透明度です。
color文字の色です。currentColorはこの値をそのまま受け継ぎます。background-color背景色です。内側の余白まで塗られます。background-image背景に画像やグラデーションを敷きます。複数枚を重ねることもできます。background-size背景画像の大きさです。coverは隙間なく埋め、containは全体が見えるように入れます。background-position背景画像をどこに置くかを決めます。background-repeat背景画像を繰り返すかを決めます。background-attachment背景がスクロールに追従するか固定されるかを決めます。background背景まわりの値をまとめて指定します。省いた値は既定に戻ります。background-clip背景をどこまで塗るかを決めます。textにすると文字の形に切り抜かれます。opacity全体の透明度です。子要素まで一緒に薄くなります。mix-blend-mode下の要素と色を混ぜる方法を決めます。accent-colorチェックボックスやラジオなど、ブラウザーが描く部分の色を決めます。color-scheme明るい画面と暗い画面のどちらに対応するかを伝えます。
枠線13
枠線と角、影です。outlineは場所を取りません。
border枠線の太さ・形・色を一行で書きます。border-width枠線の太さだけを決めます。border-style枠線の形だけを決めます。この値がないと枠線は見えません。border-color枠線の色だけを決めます。border-top上の枠線だけを決めます。border-bottom下の枠線だけを決めます。一覧の区切り線によく使います。border-radius角を丸くします。50%なら円、9999pxなら丸薬のような形になります。outline枠線の外に描く線です。場所を取らないのでキーボード焦点の表示に使います。outline-widthその線の太さだけを決めます。outline-styleその線の形だけを決めます。outline-colorその線の色だけを決めます。outline-offsetその線を要素からどれだけ離すかを決めます。box-shadow箱に影を付けます。insetを付けると内側に入ります。
効果7
描き終えたあとにかける効果です — ぼかし、切り抜き、塗りつぶし。
filterぼかし・白黒・明るさなどの効果をかけます。複数つなげられます。backdrop-filter要素の後ろにある画面に効果をかけます。すりガラスの見た目を作るのに使います。clip-path要素を決めた形に切り抜きます。mask-image画像の明るさに応じて要素を隠します。端をなめらかに消すのに使います。object-fit画像や動画を箱にどう収めるかを決めます。coverは切り取って埋めます。object-position切り取られるときどこを残すかを決めます。人物写真で顔を残したいときに使います。image-rendering拡大時になめらかにするか輪郭を残すかを決めます。ドット絵にはpixelatedを使います。
変形と動き14
動かし、回し、なめらかにつなぎます。レイアウトに触れないので画面が揺れにくくなります。
transform移動・回転・拡大をします。占める場所はそのままなので配置がずれません。transform-origin回転や拡大の基準となる点です。transition値が変わるときになめらかにつなぎます。何をどれだけどう変えるかを一行で書きます。transition-propertyどの属性をなめらかに変えるかを決めます。allは楽ですが重くなることがあります。transition-delay始まりをどれだけ遅らせるかを決めます。transition-duration変化にかかる時間です。0.2秒前後が自然に感じられます。transition-timing-function速さの流れを決めます。easeは始まりと終わりがなめらかです。animation決めておいたキーフレームを再生します。名前・時間・繰り返しを一行で書きます。animation-name再生するキーフレームの名前です。animation-timing-function動きの速さの流れです。stepsにすると段階的に進みます。animation-duration一回りにかかる時間です。animation-iteration-count何回繰り返すかを決めます。infiniteなら止まりません。will-changeまもなく変わる属性を前もって伝え、ブラウザーに備えさせます。使いすぎると逆に重くなります。perspective三次元変形の遠近感を決めます。値が小さいほど誇張されます。
位置7
要素を流れから外して置きます。前後はz-indexで決めます。
表4
表の枠線と列幅を扱う属性です。
一覧4
目印の形と置き場所を決めます。
操作9
マウスや指、スクロールにどう応じるかを決めます。
cursorマウスポインターの形を決めます。押せるものにはpointerを使います。pointer-eventsマウス入力を受けるかを決めます。noneならクリックが後ろへ通り抜けます。user-select文字をドラッグして選べるかを決めます。touch-actionタッチ操作をブラウザーが処理するかを決めます。manipulationはダブルタップ拡大をなくします。scroll-behaviorスクロールをなめらかにするかを決めます。scroll-snap-typeスクロールを決めた位置にぴたりと止めます。横並びの一覧によく使います。overscroll-behavior端まで滑らせたとき親まで動くかを決めます。containなら中で止まります。resize利用者が大きさを変えられるかを決めます。textareaでよく使います。caret-color入力欄で点滅するカーソルの色を決めます。
印刷とその他7
印刷や自動採番など、残りの用途です。
読み方
- 継承する属性は親に一度書けば子がすべて受け継ぎます。文字に関する属性はたいていそうです。
- 一括指定は書かなかった値を既定に戻します。background: red だけ書くと、先に入れた背景画像も一緒に消えます。
- 同じ要素で規則がぶつかると、より具体的なセレクターが勝ちます。具体性が同じときにだけ後に書いたほうが勝ちます。
- 動きはtransformとopacityで作るとなめらかです。widthやtopを変えるとレイアウトを計算し直すことになります。
よくある質問
Q. CSSプロパティは全部でいくつありますか。
標準に載っているものだけで500を超えますが、実際に手が伸びるのはその一部です。ここでは画面を作るとき繰り返し使う154個を分類ごとに載せています。
Q. 継承するとはどういう意味ですか。
親に書けば子は書かなくても同じ値を使う、という意味です。書体・文字色・行間など文章に関する属性はたいてい継承し、余白や枠線は継承しません。
Q. 一括指定を使うと何が変わりますか。
一行で複数の値を決められますが、書かなかった値は既定に戻ります。background: red だけ書くと先に入れた背景画像も消えるのはそのためです。
Q. 同じ属性を二度書いたらどちらが勝ちますか。
まずセレクターの具体性を見ます。idはclassより、classはタグより強いです。具体性が同じときにだけ後に書いたほうが勝ちます。!importantはそれを覆しますが、使わないに越したことはありません。
Q. pxとremのどちらを使うべきですか。
remはルートの文字サイズの倍数なので、利用者がブラウザーで文字を大きくすると一緒に大きくなります。文字と余白にはremが安全で、細い枠線のように常に同じであるべき値にはpxが向きます。