フォント関連のプロパティ
| プロパティ | よく使う値 | 説明 |
|---|---|---|
| font-family | ‘Arial’, ‘sans-serif’ | フォントの種類を指定 |
| font-size | 16px, 1rem | フォントの大きさを指定 |
| font-weight | normal, bold, 400 | フォントの太さを指定 |
| font-style | normal, italic | フォントのスタイル（斜体など） |
| line-height | 1.5, 150% | 行間の高さを指定 |
| letter-spacing | 0.05em | 文字間のスペースを指定 |
見た目・装飾系のプロパティ
| プロパティ | よく使う値 | 説明 |
|---|---|---|
| color | #333, red | テキストの色を指定 |
| background-color | #fff, rgba(0,0,0,0.5) | 背景色を指定 |
| background-image | url(‘image.jpg’) | 背景画像を指定 |
| background-size | cover, contain | 背景画像の大きさを指定 |
| background-position | center, top left | 背景画像の表示位置 |
| background-repeat | no-repeat, repeat-x | 背景の繰り返し方法 |
| border | 1px solid #ccc | 枠線のスタイルを指定 |
| border-radius | 8px, 50% | 角を丸くする |
| box-shadow | 0 4px 8px rgba(0,0,0,0.3) | 影をつける（外側） |
| text-shadow | 1px 1px 2px #000 | テキストに影をつける |
| opacity | 0.5, 1 | 透明度を指定（0 = 完全に透明） |
| object-fit | cover, contain | 画像や動画の収まり方 |
| filter | blur(4px), grayscale(100%) | 視覚効果を追加（画像に） |
テキスト・タイポグラフィ関連のプロパティ
| プロパティ | よく使う値 | 説明 |
|---|---|---|
| font-family | ‘Arial’, ‘Noto Sans’, sans-serif | フォントの種類を指定 |
| font-size | 16px, 1.2rem, clamp() | 文字サイズを指定（相対値や関数も可） |
| font-weight | normal, bold, 400, 700 | 太さ（数値 or キーワード） |
| font-style | normal, italic | 通常 or イタリック体 |
| line-height | 1.5, 150% | 行間の高さ |
| letter-spacing | 0.05em, 2px | 文字間のスペース |
| word-spacing | 0.2em, 4px | 単語間のスペース |
| text-align | left, center, right | テキストの整列 |
| text-decoration | none, underline | 下線や取り消し線 |
| text-transform | uppercase, capitalize | 文字の変換（大文字など） |
| white-space | nowrap, pre-wrap | 空白や改行の扱い方法 |
| overflow-wrap | break-word | 単語の途中でも改行可能に |
| direction | ltr, rtl | 文章の方向（左→右など） |
背景関連のプロパティ
| プロパティ | よく使う値 | 説明 |
|---|---|---|
| background-color | #fff, transparent | 背景色を設定 |
| background-image | url(‘image.jpg’), none | 背景画像を設定 |
| background-size | cover, contain | 背景画像のサイズ調整 |
| background-repeat | repeat, no-repeat | 背景の繰り返し方法 |
| background-position | center, top left | 背景画像の表示位置 |
| background-attachment | fixed, scroll | 背景のスクロール動作 |
ボックスモデル関連のプロパティ
| プロパティ | よく使う値 | 説明 |
|---|---|---|
| width | auto, 100%, 300px | 要素の横幅を指定 |
| height | auto, 100vh, 200px | 要素の高さを指定 |
| max-width | 100%, 800px | 最大幅を制限 |
| min-width | 200px, 50% | 最小幅を指定（これ以下にならない） |
| max-height | 100vh, 600px | 最大の高さを制限 |
| min-height | 300px, 50vh | 最小の高さを指定（これ以下にならない） |
| aspect-ratio | 16 / 9, 1 / 1 | 幅と高さの比率を固定（画像やカードで活用） |
| padding | 10px, 1rem | 内側の余白（コンテンツとの距離） |
| margin | 0 auto, 16px | 外側の余白（他要素との距離） |
| border | 1px solid #ccc | 枠線を指定（太さ・種類・色） |
| border-radius | 8px, 50% | 角を丸くする（円形にも） |
| box-sizing | content-box, border-box | 幅や高さの算出方法を指定 |
レイアウト・配置のプロパティ
| プロパティ | よく使う値 | 説明 |
|---|---|---|
| display | block, inline, flex, grid | 要素の表示形式を決める |
| position | static, relative, absolute, fixed | 要素の位置指定の基準を決める |
| top / right / bottom / left | 0, 10px, 50% | 要素の位置（positionとセットで使用） |
| z-index | 1, 1000 | 要素の重なり順序を指定 |
| overflow | visible, hidden, scroll | はみ出た内容の表示方法を指定 |
表・リスト関連のプロパティ
| プロパティ | よく使う値 | 説明 |
|---|---|---|
| border-collapse | collapse, separate | 表のセルの境界線の扱いを指定 |
| border-spacing | 0, 8px | セル間のスペース（separate時） |
| table-layout | auto, fixed | テーブルの列幅の決定方法 |
| caption-side | top, bottom | 表のキャプションの表示位置 |
| list-style-type | disc, decimal, none | リストマークの種類 |
| list-style-position | inside, outside | リストマークの表示位置 |
| list-style-image | url(‘mark.png’) | カスタム画像でリストマークを指定 |
Flexbox（フレックスボックス）関連のプロパティ
| プロパティ | よく使う値 | 説明 |
|---|---|---|
| display | flex | Flexboxを有効にする |
| flex-direction | row, column | 子要素の並び方向を指定 |
| justify-content | center, space-between | 主軸方向の並び方 |
| align-items | center, stretch | 交差軸方向の位置揃え |
| flex-wrap | nowrap, wrap | 折り返しの有無を指定 |
| gap | 1rem, 20px | 要素間のすき間 |
Gridレイアウト関連のプロパティ
| プロパティ | よく使う値 | 説明 |
|---|---|---|
| display | grid | Gridレイアウトを有効にする |
| grid-template-columns | 1fr 1fr, repeat(3, 1fr) | 列の数と幅を指定 |
| grid-template-rows | auto, 100px 200px | 行の高さを指定 |
| gap | 1rem, 10px | 行・列のすき間 |
| place-items | center, start | 縦横方向の揃え方を一括指定 |
アニメーション・変化系のプロパティ
| プロパティ | よく使う値 | 説明 |
|---|---|---|
| transition | all 0.3s ease | スムーズな変化の設定 |
| transition-property | opacity, transform | 変化の対象プロパティ |
| transition-duration | 0.5s | アニメの長さを指定 |
| transition-timing-function | ease, linear | 変化の速さのカーブ |
| transform | scale(1.2), rotate(45deg) | 要素の拡大・回転など |
| animation-name | fadein, slideup | 定義済みのアニメ名を指定 |
| animation-duration | 1s, 2s | アニメーションの再生時間 |
| animation-timing-function | ease-in, linear | アニメーションの速度カーブ |
| animation-delay | 0.5s, 2s | 開始の遅延時間 |
| animation-iteration-count | 1, infinite | 繰り返し回数 |
| animation-direction | normal, alternate | 再生方向（行ったり来たり等） |
| @keyframes | from → to | アニメーションの動きの定義（セットで使用） |
メディアクエリ・レスポンシブ対応系のプロパティ
| プロパティ / 構文 | よく使う値 / 例 | 説明 |
|---|---|---|
| @media | (max-width: 768px) | 条件付きスタイルの開始 |
| width（%/vw） | 100%, 80vw | ビューポート幅に応じた設定 |
| height（vh） | 100vh, 50vh | ビューポート高さに応じた設定 |
| max-width / min-width | 600px, 100% | 最大・最小幅の調整 |
| clamp() | clamp(1rem, 2vw, 2rem) | 最小・最大・推奨サイズを組み合わせて指定 |
| aspect-ratio | 16 / 9, 1 / 1 | 固定比率を維持した要素サイズ |
| container queries | @container (min-width: 500px) | コンテナに応じてスタイルを切り替え（対応ブラウザ限定） |
| flex-wrap / grid-auto-flow | wrap, dense | レスポンシブ時の要素配置制御 |
| object-fit | cover, contain | 画像のトリミング制御（レスポンシブで活躍） |
| picture / source | media属性を併用 | 画像の切り替え（HTML側の補足） |
アクセシビリティ関連のプロパティ・属性
| プロパティ / 属性 | よく使う値 | 説明 |
|---|---|---|
| visibility | visible, hidden | 視覚的に非表示にする（レイアウトは維持） |
| aria-label | テキスト | 画面読み上げ用のラベルを指定 |
| aria-hidden | true, false | アクセシビリティツールに見せるか |
| alt属性（img） | 説明文 | 画像の代替テキスト（HTML属性） |
| tabindex | 0, -1 | フォーカス移動の順序を制御 |
| :focus-visible | スタイル指定 | キーボード操作時のみスタイル適用（視覚的配慮） |
| role | button, navigation など | 要素の意味・役割を補足（音声読み上げ用） |
開発補助・デバッグ系プロパティ
| プロパティ | よく使う値 | 説明 |
|---|---|---|
| outline | 1px solid red | 要素の枠線（デバッグ用によく使う） |
| cursor | pointer, not-allowed | マウスポインタの形状 |
| user-select | none, text | テキストの選択可否を指定 |
| pointer-events | none, auto | クリックなどの操作の可否 |
| resize | none, both, horizontal | 要素のサイズ変更（textareaなど） |
| caret-color | auto, red | テキスト入力時のカーソルの色 |
| will-change | transform, opacity | アニメや変化前に最適化ヒントを与える |