CSSプロパティ一覧：主要な設定を実例で学ぶ、文字・余白・レイアウト・動き
CSSの主要プロパティを用途別に解説。文字・背景・余白・Flexbox・Grid・レスポンシブ・動きとアクセシビリティをコード例で確認します。
CSSのプロパティは、HTMLのどの部分をどう表示するかを指定する項目です。この記事は入門からサイト制作でよく使う主要項目のリファレンスです。すべての実験的・ベンダー固有プロパティを網羅した辞書ではありません。目的別にコードを試し、結果を開発者ツールで確かめましょう。 各プロパティ名のリンクから、121項目それぞれの指定値・実例・互換性を詳しく解説する個別記事へ進めます。
CSSを試すための準備
HTMLとCSSを別ファイルにする
index.html の head に次の行を置き、同じフォルダーに styles.css を作ります。保存後にブラウザーを再読み込みすると、変更を確認できます。
<link rel="stylesheet" href="./styles.css">/* styles.css */
body {
margin: 0;
padding: 1.5rem;
font-family: system-ui, sans-serif;
line-height: 1.7;
color: #173d32;
background-color: #f5f8ef;
}body が対象を選ぶセレクター、color がプロパティ、#173d32 が値です。セレクターを変えると適用先が変わり、値を変えると表示が変わります。詳細はセレクターの使い方を参照してください。
単位と全プロパティ共通の値
px：CSSピクセル。細い枠線など、一定の見た目にしたい寸法に使います。rem：ルート要素の文字サイズを基準にした単位。文字や余白を連動させやすくなります。em：文字サイズでは親の文字サイズ、他の長さではその要素の文字サイズが基準です。%：何を基準にするかはプロパティによって違います。幅と高さを同じ感覚で扱わないようにします。vw・vh：ビューポートに対する割合。モバイルのブラウザーUIによる高さの変化に注意します。svh・dvh：小さいビューポート、動的なビューポートに基づく高さ。対応と挙動を対象端末で確認します。inherit：親の計算値を引き継ぎます。initial：仕様上の初期値へ戻します。ブラウザーの既定スタイルと同じとは限りません。unset：継承するプロパティならinherit、それ以外ならinitialとして振る舞います。revert：現在のスタイルの由来を巻き戻します。単に直前の宣言に戻るものではありません。revert-layer：現在のカスケードレイヤーの指定を巻き戻します。
文字と文章の読みやすさ
書体・サイズ・行間
color：文字色。背景とのコントラストも確認します。font-family：候補の書体を優先順に並べます。最後にsans-serifなどの汎用ファミリーを指定します。font-size：文字の大きさ。本文は利用者の拡大を妨げない設計にします。font-weight：文字の太さ。実際に使えるウェイトはフォントによります。font-style：斜体など。意味としての強調はHTMLのemなどで伝えます。line-height：行の高さ。単位なしの値は文字サイズに比例し、継承も扱いやすくなります。letter-spacing：文字間隔。広げ過ぎると長文が読みにくくなります。font：複数のフォント設定の一括指定。省略した関連設定が初期化される点に注意します。
.article {
color: #233a32;
font-family: system-ui, sans-serif;
font-size: 1rem;
line-height: 1.9;
}
.article h1 {
font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem);
font-weight: 700;
line-height: 1.4;
}clamp() は最小値・推奨値・最大値を組み合わせる関数です。画面幅だけの文字サイズにせず、文字拡大時にも読みやすいか確認します。
揃え方・改行・装飾
text-align：行内の文字やインライン内容を揃えます。ブロックそのものの中央配置とは別です。text-decoration：下線など。リンクの下線を消す場合は、リンクだと分かる別の手掛かりが必要です。text-decoration-color・text-decoration-thickness：装飾線の色と太さを分けて指定します。text-underline-offset：下線と文字の間隔です。text-indent：先頭行の字下げです。text-transform：表示上の大文字・小文字の変換。元の文字列を書き換える処理ではありません。white-space：空白や改行をどう扱うか。コードはpre、通常の文章はnormalが基本です。overflow-wrap：長いURLなどを折り返す条件。anywhereは任意の位置での折り返しを許します。word-break：単語境界の改行ルール。break-allを長文へ一律に付けると読みにくくなります。text-overflow：はみ出した文字を省略記号などで示します。これだけで切り詰めは起きません。vertical-align：インラインや表セルなどの縦方向の揃え。通常のdivの中央寄せには効きません。
.file-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.article a {
overflow-wrap: anywhere;
text-underline-offset: 0.2em;
}省略したファイル名が必要な場面では、別途全文を確認する手段を用意します。見えなくするだけで情報を削除しないようにします。
余白・大きさ・枠線
ボックスモデル
box-sizing：widthやheightにpadding・borderを含めるか。border-boxが寸法を管理しやすい設定です。width・height：幅と高さ。内容が増える要素の高さ固定には注意します。min-width・max-width：幅の下限と上限です。min-height・max-height：高さの下限と上限です。margin：外側の余白。上下左右の順で一括指定でき、隣接する縦marginが相殺する場合があります。padding：枠線の内側の余白です。border：枠線の幅・種類・色をまとめて指定します。border-width・border-style・border-color：枠線を個別に設定します。border-radius：角の丸み。内部の画像も切り抜く場合はoverflowの検討が必要です。outline・outline-offset：主にフォーカスなどの外側の線。輪郭線を無条件に消さないでください。box-shadow：要素の影。影だけで境界を表すと高コントラスト表示で分かりにくくなる場合があります。
*, *::before, *::after { box-sizing: border-box; }
.card {
width: 100%;
max-width: 36rem;
margin: 1.5rem auto;
padding: 1.5rem;
border: 1px solid #c8d4c6;
border-radius: 1rem;
background: #fff;
box-shadow: 0 0.5rem 1.5rem #14332314;
}
.card:focus-within { outline: 2px solid #326744; outline-offset: 4px; }書字方向に合わせる指定
inline-size・block-size：書字方向に基づく幅・高さです。min-inline-size・max-inline-size：インライン方向の下限・上限です。margin-inline・margin-block：横書きでは左右・上下に対応する外側余白です。padding-inline・padding-block：書字方向に応じた内側余白です。border-inline・border-block：書字方向に応じた枠線です。
左右固定のデザインではなく、多言語や縦書きにも対応させる場合に便利です。物理方向のmargin-leftなどと混在させると上書きを追いづらくなるため、方針をそろえます。
背景・画像・はみ出し
色と画像を扱う
background-color：背景色です。background-image：背景画像やグラデーション。情報画像の代わりに使うとaltを付けられません。background-size：coverは領域を覆って一部を切り取り、containは全体を収めます。background-position：背景の位置です。background-repeat：背景を繰り返すか指定します。background：背景の一括指定。関連する未記載の値が初期化されることがあります。object-fit：imgやvideoなどの中身の収め方。枠のサイズが決まっている場合に効果が分かります。object-position：切り取る際などの中身の位置です。aspect-ratio：幅と高さの比率。少なくとも一方が自動計算される場面で役立ちます。opacity：子孫も含む全体の不透明度。背景だけを薄くしたいときは背景色のアルファ値を使います。filter：ぼかしや明度など。大量の要素へ使うと描画負荷にも注意が必要です。overflow・overflow-x・overflow-y：はみ出しを表示・切り抜き・スクロールのどれにするか指定します。
.card img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
}
.code-scroll { overflow-x: auto; }画像の重要な部分が切れていないかを確認します。横はみ出しの原因を直さず、bodyにoverflow-x:hiddenを付けるだけでは、内容やフォーカスが見えなくなることがあります。
レイアウトと配置
表示方式・位置・重なり
display：block・inline・flex・grid・noneなど、レイアウト方式を選びます。visibility：hiddenでは通常レイアウト上の場所を保って非表示にします。position：static・relative・absolute・fixed・stickyで配置方式を選びます。top・right・bottom・left：positionなどの条件に応じた位置指定です。inset：top・right・bottom・leftの一括指定です。z-index：重なり順。スタッキングコンテキストを越えて無制限に前面へ出る番号ではありません。float・clear：文章の回り込みと解除。ページ全体のレイアウトはFlexboxやGridを基本にします。
Flexbox
flex-direction：主軸を行・列のどちらにするか指定します。flex-wrap：折り返しの有無です。justify-content：主軸方向の余白の配分です。align-items：交差軸方向の項目の揃え方です。align-content：複数行・複数列になった場合の並び全体の余白の配分です。gap・row-gap・column-gap：項目間の間隔です。flex-grow・flex-shrink・flex-basis：伸びる割合・縮む割合・基準サイズです。flex：上の3つの一括指定です。align-self：1項目だけの交差軸方向の揃え方です。order：見た目の並び順。読み上げやキーボードの順番も変わるわけではありません。
.navigation {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.25rem;
}
.navigation .grow { flex: 1 1 12rem; min-width: 0; }Grid
grid-template-columns・grid-template-rows：列・行のトラックを定義します。grid-template-areas：名前付きの領域で配置を表します。grid-column・grid-row：項目が使う列・行の範囲です。grid-area：名前付き領域や行列の位置を指定します。grid-auto-flow：自動配置の方向や詰め方です。grid-auto-columns・grid-auto-rows：暗黙に作られる列・行のサイズです。justify-items：各セル内のインライン方向の揃えです。place-items：align-itemsとjustify-itemsの一括指定です。
.cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) {
.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}fr は残り空間の配分、repeat() は繰り返し、minmax() はトラックの下限・上限です。Gridの列とHTMLの読み順が矛盾しないようにします。
状態・アニメーション・共通変数
操作の手掛かり
cursor：ポインターの見た目。これだけでは要素がクリック可能になりません。resize：textareaなどの利用者によるサイズ変更を制御します。pointer-events：ポインター操作の対象になるか。キーボードでの無効化を保証するものではありません。user-select：文字を選択できるか。記事やコードのコピーを不必要に禁止しないようにします。accent-color：対応するフォーム部品のアクセント色です。color-scheme：対応する標準UIに明暗テーマの意図を伝えます。scroll-margin-top・scroll-padding-top：アンカー移動時などに固定ヘッダーとの間隔を確保します。scroll-behavior：スクロールの動き。動きを減らす設定も考慮します。
動きと変形
transform：移動・回転・拡大など。通常の文書レイアウトの占有領域をそのまま保ちます。transform-origin：変形の基準位置です。transition-property・transition-duration・transition-timing-function・transition-delay：状態変化の対象、時間、速度変化、遅延です。transition：状態間の変化の一括指定。何でもallにせず対象を絞ります。animation-name・animation-duration・animation-iteration-count：キーフレーム名、時間、繰り返し回数です。animation-timing-function・animation-delay・animation-fill-mode・animation-play-state：進み方、遅延、前後の状態、再生状態です。animation：キーフレームアニメーションの一括指定です。
.button { background: #285c40; color: #fff; border-radius: 0.75rem; }
.button:focus-visible { outline: 3px solid #9b451d; outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
.button { transition: transform 160ms ease, background-color 160ms ease; }
.button:hover { transform: translateY(-2px); }
}カスタムプロパティ
:root { --accent: #285c40; --space: 1rem; }
.card { padding: var(--space); border-color: var(--accent); }
.button { background-color: var(--accent, #285c40); }--accent のような名前は自分で定義できるため、名前の全一覧は存在しません。var() の第2引数は変数が未定義などの場合の代替です。代入された値の型が用途に合わない場合を何でも救済する仕組みではありません。
対応状況とCSSが効かないときの確認
先に安定した表示を用意する
プロパティ名が使えても、特定の値や関数だけ未対応の場合があります。たとえばdisplayへの対応とdisplay:gridへの対応は同じ確認項目ではありません。新しい指定はMDNのプロパティ個別ページの互換性表と、対象ブラウザーで確認します。
.panel { min-height: 100vh; }
@supports (min-height: 100dvh) {
.panel { min-height: 100dvh; }
}開発者ツールで切り分ける
- Networkでstyles.cssが読み込まれているか確認する。
- Elementsでclass名と対象の要素が一致しているか確認する。
- Stylesで打ち消し線や無効な値を確認する。
- Computedで最終的に使われる値と継承元を確認する。
- FlexboxやGridの親に必要なdisplayがあるか確認する。
- 画面幅、拡大、キーボード、動きを減らす設定で再確認する。