CSSプロパティ一覧と概要
CSSの基本プロパティを一覧形式でまとめました。テキストスタイル、背景、ボックスモデル、レイアウト、Flexbox、グリッド、アニメーション、レスポンシブデザインなど、Webデザインに欠かせないプロパティを網羅。初心者から中級者まで、スタイリングを効率よく学びたい方に最適な参考資料です。
| *（全選択）、element（タグ名）、.class（クラス）、#id（ID）。 | セレクタ: スタイルを適用する要素を指定。 |
| color, font-size, background-color。 | プロパティ: 要素の特性を定義。 |
| red, 16px, #000000。 | 値: プロパティの設定内容。 |
テキストスタイル
| color | テキストの色。 |
| font-size | フォントサイズ。 |
| font-family | フォントの種類。 |
| font-weight | フォントの太さ（例: normal, bold, 100, 900）。 |
| font-style | フォントのスタイル（例: normal, italic）。 |
| text-align | テキストの位置揃え（例: left, center, right, justify）。 |
| line-height | 行間の調整。 |
| letter-spacing | 文字間のスペース。 |
| text-decoration | テキストの装飾（例: none, underline, line-through）。 |
| text-transform | テキストの変形（例: uppercase, lowercase, capitalize）。 |
背景と色
| background-color | 背景色。 |
| background-image | 背景画像（例: url('image.jpg')）。 |
| background-size | 背景画像のサイズ（例: cover, contain）。 |
| background-repeat | 背景画像の繰り返し（例: repeat, no-repeat）。 |
| background-position | 背景の位置（例: center, top, bottom）。 |
| opacity | 不透明度（値: 0 ～ 1）。 |
ボックスモデル
外側
| margin | 要素の外側の余白（例: 10px）。 |
| margin-top, margin-right, margin-bottom, margin-left | 個別の余白。 |
内側
| padding | 内側の余白（例: 10px）。 |
| padding-top, padding-right, padding-bottom, padding-left | 個別の内側余白。 |
サイズと枠線
| width | 幅 |
| height | 高さ |
| max-width, min-width | 幅の制限 |
| max-height, min-height | 高さの制限 |
| border | 枠線（例: 1px solid black）。 |
| border-radius | 角の丸み（例: 50% で円形）。 |
レイアウト
| display | レイアウトの種類（例: block, inline, flex, grid, none） |
| position | 要素の位置 例: static, relative, absolute, fixed, sticky）。 |
| top, right, bottom, left | 配置位置。 |
| z-index | : 要素の重なり順。 |
| overflow | コンテンツのはみ出し時の処理（例: visible, hidden, scroll, auto）。 |
| float | 要素を左または右に寄せる。 |
| clear | フロートの解除。 |
Flexbox
| display: flex | Flexboxを有効化。 |
| justify-content | 主軸方向の配置（例: flex-start, center, space-between）。 |
| align-items | 交差軸方向の配置（例: stretch, center） |
| flex-wrap | 子要素の折り返し（例: nowrap, wrap）。 |
| flex-direction | 配置方向（例: row, column）。 |
| gap | 子要素間のスペース。 |
グリッドレイアウト
| display: grid | グリッドを有効化。 |
| grid-template-columns | 列のサイズを指定（例: 1fr 2fr）。 |
| grid-template-rows | 行のサイズを指定（例: 100px auto）。 |
| gap | グリッド間のスペース。 |
アニメーションとトランジション
| transition | プロパティの変化を指定（例: all 0.3s ease）。 |
| animation | アニメーションを定義（例: animation: fadeIn 2s infinite）。 |
| @keyframes | アニメーションの定義。 |
レスポンシブデザイン
| @media | メディアクエリを使用（例: @media (max-width: 768px) { ... }）。 |
| width: 100% | 幅を親要素に合わせる。 |
| max-width | 最大幅を制限。 |
| vh, vw | ビューポートの高さ・幅の割合。 |