CURRICULUM  /  APPENDIX B

付録B ─ CSSプロパティ一覧

CSSの主要なプロパティを、用途別にまとめたリファレンスです。

本編で使ったプロパティには、該当する章へのリンクを添えています。

CSSは数百のプロパティがありますが、日常的に使うものは限られています。この一覧はその「よく使うもの」を集めたものです。

テキスト・フォント

プロパティ役割値の例本編
color 文字色 #333, red, rgb(0,0,0), var(--ink) 01-03
font-size 文字サイズ 16px, 1rem, 1.2em, clamp(14px, 3vw, 18px) 01-03
font-weight 文字の太さ 400(通常), 700(太字), bold 01-03
font-family フォントの種類 'Noto Sans JP', sans-serif 01-03
font-style 斜体の指定 normal, italic
line-height 行の高さ(行間) 1.8(単位なしが推奨), 28px 01-03
letter-spacing 文字間隔 0.05em, 1px
text-align テキストの水平方向の揃え left, center, right 01-03
text-decoration 下線・取り消し線などの装飾 none, underline, line-through 01-03
text-transform 大文字・小文字変換 uppercase, lowercase, capitalize
white-space 空白・改行の扱い normal, nowrap, pre, pre-wrap
overflow-wrap 長い単語の折り返し normal, break-word

ボックスモデル(余白・サイズ)

プロパティ役割値の例本編
margin 外側の余白。要素の外側に空間を作る 0, 16px, 0 auto(中央揃え), 16px 24px 01-03
padding 内側の余白。要素の内側に空間を作る 16px, 8px 16px, 24px 32px 24px 32px 01-03
width 要素の幅 100%, 300px, auto 01-03
max-width 最大幅。これを超えると自動的に縮む 720px, 100% 01-03
min-width 最小幅。これより小さくならない 200px
height 要素の高さ auto, 100vh, 300px
min-height 最小の高さ 100vh(画面全体の高さ)
box-sizing 幅・高さの計算方法 content-box(初期値), border-box(padding・borderを含む) 01-03

背景・ボーダー

プロパティ役割値の例本編
background 背景の一括指定(色、画像、グラデーション等) #fff, linear-gradient(to right, #000, #333) 01-03
background-color 背景色 #f0f0f0, transparent 01-03
background-image 背景画像 url('bg.jpg'), linear-gradient(...)
border ボーダー(枠線)の一括指定 1px solid #ccc, 2px dashed red 01-03
border-radius 角の丸み 4px, 50%(円形), 8px 0 0 8px 01-03
border-bottom 下辺のみのボーダー。他の辺も同様に個別指定可能 1px solid #ddd
box-shadow 要素の影 0 2px 8px rgba(0,0,0,0.1)
outline 輪郭線(borderの外側に描かれる。レイアウトに影響しない) 2px solid blue, none

レイアウト(Flexbox)

プロパティ役割値の例本編
display 要素の表示方法 block, inline, flex, grid, none(非表示) 01-03
flex-direction Flex子要素の並び方向 row(横), column(縦)
justify-content Flex主軸方向(横方向)の配置 flex-start, center, space-between, space-around
align-items Flex交差軸方向(縦方向)の配置 stretch, center, flex-start, flex-end
flex-wrap 子要素が親の幅を超えたときの折り返し nowrap(折り返さない), wrap(折り返す)
gap Flex/Grid子要素間の隙間 16px, 8px 16px(行間 列間)
flex 子要素の伸縮率(一括指定) 1(均等に伸びる), 0 0 auto(伸びない)

配置・表示

プロパティ役割値の例本編
position 配置方法 static(初期値), relative, absolute, fixed, sticky
top / right / bottom / left position指定時の位置(上/右/下/左からの距離) 0, 16px, 50%
z-index 重なり順序(大きいほど前面) 1, 100, -1
overflow はみ出た内容の扱い visible(はみ出る), hidden(隠す), scroll(スクロール), auto
visibility 表示/非表示(場所は残る) visible, hidden
opacity 不透明度 1(不透明), 0(透明), 0.5(半透明)
cursor マウスカーソルの形 pointer(指), default, not-allowed

トランジション・アニメーション

プロパティ役割値の例本編
transition プロパティの変化にアニメーションを付ける(一括指定) all 0.3s ease, color 0.2s, background 0.2s 01-03
transform 要素の変形(移動、回転、拡大縮小) translateY(-2px), rotate(45deg), scale(1.1)
animation キーフレームアニメーション(一括指定) fadeIn 0.5s ease both

レスポンシブデザイン

構文 / プロパティ役割値の例本編
@media メディアクエリ。画面幅などの条件に応じてCSSを切り替える @media (max-width: 720px) { ... } 01-03
clamp() 最小値・推奨値・最大値を指定する関数。レスポンシブなフォントサイズに便利 clamp(14px, 3vw, 20px)
vw / vh ビューポート(画面)の幅/高さに対する割合 100vw(画面幅いっぱい), 100vh(画面高さいっぱい)
rem / em rem: ルート要素のフォントサイズ基準。em: 親要素のフォントサイズ基準 1rem = 通常16px, 1.5em = 親の1.5倍

CSS変数(カスタムプロパティ)

構文役割値の例本編
--変数名: 値; CSS変数を定義する。通常 :root セレクタ内で宣言する --ink: #1a1a1a;, --font-body: 'Noto Sans JP'; 01-03
var(--変数名) 定義済みのCSS変数を参照する color: var(--ink); 01-03

セレクタの種類(よく使うもの)

セレクタ意味例本編
要素名 指定した要素すべて p { ... } 01-03
.クラス名 指定したクラスを持つ要素すべて .site-header { ... } 01-03
#ID名 指定したIDを持つ要素(1つだけ) #main-content { ... } 01-03
A B Aの中にあるB(子孫セレクタ) .nav a { ... } 01-03
A > B Aの直下の子要素B(子セレクタ) ul > li { ... }
A:hover マウスが乗ったときのA a:hover { color: blue; } 01-03
A:first-child 親要素の最初の子要素であるA li:first-child { ... }
A:last-child 親要素の最後の子要素であるA li:last-child { ... }
A::before / A::after 要素の前/後に擬似要素を挿入する .label::before { content: '★'; }
* 全ての要素(ユニバーサルセレクタ) * { box-sizing: border-box; } 01-03

使い方のヒント

CSSのプロパティは数百ありますが、日常的に使うのはこの一覧に載っている範囲がほとんどです。

覚えるよりも「こういうプロパティがあったはず」という引き出しを持っておくことが大事です。

具体的な値で迷ったとき、この一覧の「値の例」列を見れば、よくある設定値が分かります。

さらに詳しく知りたい場合は、MDN Web Docs(developer.mozilla.org)が最も信頼できるリファレンスです。