CSS プロパティ一覧
- 1.サイズ
- 2.マージンとパディング
- 3.ボーダーと背景
- 4.テキストとフォント
- 5.フレックスボックス
- 6.グリッドレイアウト
- 7.アニメーションとトランジション
- 8.シャドウとフィルタ
- 9.レイアウト
- 10.テーブル
- 11.リストスタイル
- 12. 生成内容
- 13. その他
- 14. スクロールと表示
- 15. マスク
- 16. オーバーフローとクリッピング
1.サイズ
要素の幅や高さを指定するためのプロパティです。これらのプロパティを使用することで、要素の表示サイズを調整し、レスポンシブなデザインを実現できます。
| 解説ページ | プロパティ名 | 説明 | 例 | 使用可能な値 | 適用される要素 | 関連プロパティ | 備考・非推奨情報 |
|---|---|---|---|---|---|---|---|
| width | 要素の幅を指定します。 | width: 50%; | 任意の長さ（例: 100px, 50%, 100vw, calc(100% - 50px)） | ブロックレベルの要素、インラインブロック要素、置換要素 | height, max-width, min-width | ||
| min-width | 要素の最小幅を指定します。 | min-width: 300px; | 任意の長さ（例: 100px, 50%, 100vh, calc(100vh - 50px)） | ブロックレベルの要素、インラインブロック要素、置換要素 | width, max-width | ||
| max-width | 要素の最大幅を指定します。 | max-width: 90%; | 任意の長さ（例: 100px, 50%, 100vw, calc(100% - 50px), none） | ブロックレベルの要素、インラインブロック要素、置換要素 | width, min-width | ||
| height | 要素の高さを指定します。 | height: 200px; | 任意の長さ（例: 100px, 50%, 100vw, calc(50px + 10%)） | ブロックレベルの要素、インラインブロック要素、置換要素 | width, max-height, min-height | ||
| min-height | 要素の最小高さを指定します。 | min-height: 150px; | 任意の長さ（例: 100px, 50%, 100vh, calc(100vh - 20px), none） | ブロックレベルの要素、インラインブロック要素、置換要素 | height, max-height | ||
| max-height | 要素の最大高さを指定します。 | max-height: 400px; | 任意の長さ（例: 100px, 50%, 100vh, calc(10vh + 50px)） | ブロックレベルの要素、インラインブロック要素、置換要素 | height, min-height |
2.マージンとパディング
要素の外側（マージン）と内側（パディング）の余白を設定するプロパティです。これらを使用することで、要素間のスペースを調整し、見た目のバランスを整えることができます。
| 解説ページ | プロパティ名 | 説明 | 例 | 使用可能な値 | 適用される要素 | 関連プロパティ | 備考・非推奨情報 |
|---|---|---|---|---|---|---|---|
| margin | 要素の外側の余白を一括で指定します。 | margin: 20px auto; | 任意の長さ（例: 10px, 5%, auto, 0, calc(50% - 100px)） | すべての要素 | padding, border, box-sizing | autoはブロック要素で左右の余白を均等に配置する際に使用されます。 | |
| margin-top | 要素の上側の外側の余白を指定します。 | margin-top: 10px; | 任意の長さ（例: 10px, 5%, auto, 0, calc(50% - 100px)） | すべての要素 | margin, padding-top, border-top | - | |
| margin-right | 要素の右側の外側の余白を指定します。 | margin-right: 10px; | 任意の長さ（例: 10px, 5%, auto, 0, calc(50% - 100px)） | すべての要素 | margin, padding-right, border-right | - | |
| margin-bottom | 要素の下側の外側の余白を指定します。 | margin-bottom: 10px; | 任意の長さ（例: 10px, 5%, auto, 0, calc(50% - 100px)） | すべての要素 | margin, padding-bottom, border-bottom | - | |
| margin-left | 要素の左側の外側の余白を指定します。 | margin-left: 10px; | 任意の長さ（例: 10px, 5%, auto, 0, calc(50% - 100px)） | すべての要素 | margin, padding-left, border-left | - | |
| padding | 要素の内側の余白を一括で指定します。 | padding: 15px; | 任意の長さ（例: 10px, 5%） | ブロック要素、インラインブロック要素、インライン要素 | margin, border, box-sizing | インライン要素の場合、上下のpaddingが視覚的に反映されないことがあります。 | |
| padding-top | 要素の上側の内側の余白を指定します。 | padding-top: 15px; | 任意の長さ（例: 10px, 5%） | ブロック要素、インラインブロック要素、インライン要素 | padding, margin-top, border-top | - | |
| padding-right | 要素の右側の内側の余白を指定します。 | padding-right: 15px; | 任意の長さ（例: 10px, 5%） | ブロック要素、インラインブロック要素、インライン要素 | padding, margin-right, border-right | - | |
| padding-bottom | 要素の下側の内側の余白を指定します。 | padding-bottom: 15px; | 任意の長さ（例: 10px, 5%） | ブロック要素、インラインブロック要素、インライン要素 | padding, margin-bottom, border-bottom | インライン要素の場合、上下のpaddingが視覚的に反映されないことがあります。 | |
| padding-left | 要素の左側の内側の余白を指定します。 | padding-left: 15px; | 任意の長さ（例: 10px, 5%） | ブロック要素、インラインブロック要素、インライン要素 | padding, margin-left, border-left | - |
3.ボーダーと背景
要素の枠線（ボーダー）や背景を設定するためのプロパティです。ボーダーをカスタマイズすることで、要素に強調を加えたり、背景を設定することでデザインに深みを持たせることができます。
| 解説ページ | プロパティ名 | 説明 | 例 | 使用可能な値 | 適用される要素 | 関連プロパティ | 備考・非推奨情報 |
|---|---|---|---|---|---|---|---|
| border | 要素の枠線を一括で指定します。 | border: 1px solid #000; | 長さ、スタイル、色（例: 1px solid #000） | すべての要素 | border-width, border-style, border-color | ショートハンドプロパティ | |
| border-width | 要素の枠線の太さを指定します。 | border-width: 2px; | 長さまたはキーワード（例: thin, medium, thick, 1px） | すべての要素 | border, border-style | - | |
| border-style | 要素の枠線のスタイルを指定します。 | border-style: solid; | スタイル（例: none, solid, dashed, dotted, double, groove, ridge, inset, outset） | すべての要素 | border, border-width | - | |
| border-color | 要素の枠線の色を指定します。 | border-color: #333; | 任意の色（例: #000, red, rgba(0,0,0,0.5), transparent） | すべての要素 | border, color | currentColor は要素の color プロパティと同じ色を使用します。 | |
| border-radius | 要素の角を丸めるためのプロパティです。 | border-radius: 10px; | 長さまたはパーセンテージ（例: 5px, 50%） | すべての要素 | border, background-clip | - | |
| background | 要素の背景を一括で設定します。 | background: url(image.jpg) no-repeat center/cover; | 組み合わせ（例: #ffffff url(image.jpg) no-repeat center/cover） | すべての要素 | background-color, background-image, background-repeat | ショートハンドプロパティ | |
| background-color | 要素の背景を一括で設定します。 | background-color: #f0f0f0; | 任意の色（例: #ffffff, rgba(255,255,255,0.8), transparent） | すべての要素 | background, color | - | |
| background-image | 要素の背景画像を指定します。 | background-image: url(image.jpg); | 画像のURLまたはキーワード（例: url(image.jpg), none, linear-gradient(方向, 色, 色)） | すべての要素 | background, background-repeat | - | |
| background-repeat | 背景画像の繰り返し方法を指定します。 | background-repeat: no-repeat; | キーワード（例: repeat, no-repeat, repeat-x, repeat-y, space, round） | すべての要素 | background, background-image | - | |
| background-position | 背景画像の表示位置を指定します。 | background-position: center center; | キーワードまたは長さ（例: left top, center center, right bottom, 50% 50%, 10px 20px） | すべての要素 | background, background-image | - | |
| background-size | 背景画像のサイズを指定します。 | background-size: cover; | キーワードまたは長さ（例: auto, cover, contain, 100px 100px） | すべての要素 | background, background-position | - | |
| background-clip | 背景が描画される範囲を指定します。 | background-clip: padding-box; | キーワード（例: border-box, padding-box, content-box, text） | すべての要素 | background, border-radius | - | |
| background-origin | 背景画像の基準位置を指定します。 | background-origin: content-box; | キーワード（例: border-box, padding-box, content-box） | すべての要素 | background, background-position | - | |
| background-attachment | 背景画像がページのスクロールに対して固定されるか、スクロールするかを指定します。 | background-attachment: fixed; | キーワード（例: scroll, fixed, local） | すべての要素 | background, background-image | - | |
| background-blend-mode | 背景画像と背景色の合成方法を指定します。 | background-blend-mode: multiply; | キーワード（例: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity） | すべての要素 | background, background-image | - |
4.テキストとフォント
テキストの色やフォント、整列方法を設定するプロパティです。これらのプロパティを使うことで、文章の可読性や見た目を大きく向上させることができます。
| 解説ページ | プロパティ名 | 説明 | 例 | 使用可能な値 | 適用される要素 | 関連プロパティ | 備考・非推奨情報 |
|---|---|---|---|---|---|---|---|
| color | テキストの色を指定します。 | color: #333; | 任意の色（例: #000000, rgb(255,0,0), rgba(0,0,255,0.5)） | すべての要素 | background-color, border-color | - | |
| font-family | 使用するフォントの種類を指定します。 | font-family: Arial, sans-serif; | 任意のフォント名、またはフォントファミリー（例: Arial, serif, sans-serif） | すべての要素 | font-size, font-weight | - | |
| font-size | テキストのサイズを指定します。 | font-size: 16px; | 任意の長さまたはキーワード（例: 16px, 1em, 100%, small, large, xx-large） | すべての要素 | line-height, font-family | - | |
| font-weight | テキストの太さを指定します。 | font-weight: bold; | キーワードまたは数値（例: normal, bold, bolder, lighter, 100〜900） | すべての要素 | font-style, font-variant | - | |
| font-style | テキストのスタイルを指定します。 | font-style: italic; | キーワード（例: normal, italic, oblique） | すべての要素 | font-weight, font-variant | - | |
| font-variant | テキストの変形を指定します（小型大文字など）。 | font-variant: small-caps; | キーワード（例: normal, small-caps） | すべての要素 | font-style, font-weight | font-variant-caps, font-variant-numeric などのプロパティが追加されています。 | |
| font-stretch | フォントの幅を指定します。 | font-stretch: expanded; | キーワード（例: normal, condensed, expanded） | すべての要素 | font-weight, font-style | - | |
| font-size-adjust | x-高さに基づいてフォントサイズを調整します。 | font-size-adjust: 0.58; | noneまたは数値（例: 0.5） | すべての要素 | font-size, font-family | - | |
| font-kerning | フォントのカーニング（文字間の間隔調整）を指定します。 | font-kerning: normal; | auto, normal, none | すべての要素 | letter-spacing | - | |
| font-feature-settings | OpenTypeフォントの詳細な機能を指定します。 | font-feature-settings: "liga" off; | normalまたは機能名と値の組み合わせ（例: "kern" on, "liga" off） | すべての要素 | font-variant, font-kerning | - | |
| font-variant-caps | キャピタライゼーション（大文字・小文字）の変形を指定します。 | font-variant-caps: small-caps; | キーワード（例: normal, small-caps, all-small-caps, titling-caps） | すべての要素 | font-variant, text-transform | - | |
| font-variant-numeric | 数字のスタイルを指定します。 | font-variant-numeric: lining-nums; | キーワード（例: normal, lining-nums, oldstyle-nums, proportional-nums, tabular-nums） | すべての要素 | font-variant, font-feature-settings | - | |
| font-variant-alternates | 代替字形を指定します。 | font-variant-alternates: historical-forms; | normalまたは特定の機能設定 | すべての要素 | font-variant, font-feature-settings | - | |
| font-variant-ligatures | リガチャの適用を指定します。 | font-variant-ligatures: no-common-ligatures; | キーワード（例: normal, none, common-ligatures, discretionary-ligatures） | すべての要素 | font-variant, font-feature-settings | - | |
| line-height | テキストの行間を指定します。 | line-height: 1.5; | 長さ、数値、パーセンテージ、キーワード（例: 1.5, 2, normal） | すべての要素 | font-size, vertical-align | - | |
| text-align | テキストの整列方法を指定します。 | text-align: center; | キーワード（例: left, right, center, justify, start, end） | ブロックレベルの要素 | vertical-align | - | |
| text-decoration | テキストの装飾（下線、打ち消し線など）を指定します。 | text-decoration: underline; | text-decoration-line, text-decoration-style, text-decoration-colorの組み合わせ（例: underline solid red） | すべての要素 | text-decoration-line, text-decoration-color | - | |
| text-decoration-color | テキスト装飾の色を指定します。 | text-decoration-color: red; | 任意の色（例: #000000, rgb(255,0,0)） | すべての要素 | text-decoration, color | - | |
| text-decoration-style | テキスト装飾のスタイルを指定します。 | text-decoration-style: dotted; | キーワード（例: solid, double, dotted, dashed, wavy） | すべての要素 | text-decoration, text-decoration-line | - | |
| text-decoration-line | テキスト装飾が適用されるラインを指定します。 | text-decoration-line: underline; | キーワード（例: none, underline, overline, line-through, blink） | すべての要素 | text-decoration, text-decoration-style | blink は非推奨で、ほとんどのブラウザでサポートされていません。 | |
| text-decoration-thickness | テキスト装飾の太さを指定します。 | text-decoration-thickness: 2px; | 長さまたはキーワード（例: auto, from-font, 2px） | すべての要素 | text-decoration, text-decoration-line | - | |
| text-transform | テキストの大文字・小文字の変換を指定します。 | text-transform: uppercase; | キーワード（例: none, capitalize, uppercase, lowercase, full-width） | すべての要素 | font-variant-caps, font-variant | - | |
| text-indent | 段落の最初の行のインデントを指定します。 | text-indent: 2em; | 長さまたはパーセンテージ（例: 10px, 2em, 5%） | ブロックレベルの要素 | text-align, white-space | - | |
| text-shadow | テキストに影を付けるためのプロパティです。 | text-shadow: 2px 2px 5px #333; | キーワードまたは長さと色の組み合わせ（例: 1px 1px 2px #000, none） | すべての要素 | color, box-shadow | - | |
| letter-spacing | 文字間のスペースを指定します。 | letter-spacing: 0.1em; | 長さまたはキーワード（例: normal, 1px, 0.1em） | すべての要素 | word-spacing, font-kerning | - | |
| word-spacing | 単語間のスペースを指定します。 | word-spacing: 0.2em; | 長さまたはキーワード（例: normal, 1px, 0.1em） | すべての要素 | letter-spacing, white-space | - | |
| text-overflow | テキストが要素の範囲を超えた場合の処理方法を指定します。 | text-overflow: ellipsis; | キーワード（例: clip, ellipsis, string） | ブロックレベルの要素 | white-space, overflow | - | |
| white-space | テキスト内の空白や改行の扱いを指定します。 | white-space: nowrap; | キーワード（例: normal, nowrap, pre, pre-wrap, pre-line） | すべての要素 | text-overflow, word-wrap | - | |
| word-break | 単語の途中での改行を許可するかどうかを指定します。 | word-break: break-all; | キーワード（例: normal, break-all, keep-all） | すべての要素 | overflow-wrap, hyphens | - | |
| overflow-wrap | 単語が要素の範囲を超える場合に自動的に折り返すかどうかを指定します。 | overflow-wrap: break-word; | キーワード（例: normal, break-word） | すべての要素 | word-break, white-space | 以前は word-wrap という名前で使用されていました。 | |
| hyphens | 単語の途中でハイフネーション（ハイフンによる区切り）を行うかどうかを指定します。 | hyphens: auto; | キーワード（例: none, manual, auto） | すべての要素 | word-break, white-space | - | |
| writing-mode | テキストの書字方向を指定します（横書き・縦書き）。 | writing-mode: vertical-rl; | キーワード（例: horizontal-tb, vertical-rl, vertical-lr） | すべての要素 | direction, text-orientation | - | |
| direction | テキストの流れの方向を指定します（左から右、右から左）。 | direction: rtl; | キーワード（例: ltr, rtl） | すべての要素 | writing-mode, unicode-bidi | - | |
| unicode-bidi | 埋め込みテキストの双方向アルゴリズムを制御します。 | unicode-bidi: bidi-override; | キーワード（例: normal, embed, bidi-override, isolate, isolate-override, plaintext） | すべての要素 | direction, writing-mode | - | |
| tab-size | タブ文字の幅を指定します。 | tab-size: 4; | 長さまたは数値（例: 8, 4, 2em） | プリフォーマットテキスト () 要素 | white-space | - | |
| vertical-align | インライン要素やテーブルセルの垂直方向の整列方法を指定します。 | vertical-align: middle; | キーワードまたは長さ（例: baseline, top, middle, bottom, text-top, text-bottom, sub, super, 10px） | インライン要素、表セル | line-height, text-align | - | |
| text-rendering | テキストのレンダリング方法を指定します（パフォーマンスや品質に影響）。 | text-rendering: optimizeLegibility; | キーワード（例: auto, optimizeSpeed, optimizeLegibility, geometricPrecision） | すべての要素 | font-feature-settings, letter-spacing | 主にSVGやWebフォントで使用されます。 |
5.フレックスボックス
フレックスボックスレイアウトを管理するプロパティです。これにより、要素のサイズや配置を柔軟に設定し、レスポンシブデザインを簡単に実現できます。
| 解説ページ | プロパティ名 | 説明 | 例 | 使用可能な値 | 適用される要素 | 関連プロパティ | 備考・非推奨情報 |
|---|---|---|---|---|---|---|---|
| display(display:flex;) | 要素をフレックスコンテナにするためのプロパティです。 | display: flex; | flex, inline-flex | すべての要素 | flex-direction, flex-wrap, justify-content | フレックスボックスレイアウトの基礎となるプロパティです。 | |
| flex-direction | フレックスコンテナ内のアイテムの配置方向を指定します。 | flex-direction: row; | row, row-reverse, column, column-reverse | フレックスコンテナ | flex-wrap, justify-content | - | |
| flex-wrap | フレックスアイテムがコンテナ内で折り返しを行うかどうかを指定します。 | flex-wrap: nowrap; | nowrap, wrap, wrap-reverse | フレックスコンテナ | flex-direction, flex-flow | - | |
| flex-flow | flex-direction と flex-wrap を一括で指定します。 | flex-flow: row wrap; | flex-direction と flex-wrap の組み合わせ（例: row nowrap, column wrap） | フレックスコンテナ | flex-direction, flex-wrap | ショートハンドプロパティです。 | |
| justify-content | フレックスアイテムを主軸に沿って配置します。 | justify-content: center; | flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right | フレックスコンテナ | align-items, align-content | - | |
| align-items | フレックスアイテムを交差軸に沿って整列します。 | align-items: flex-start; | stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end | フレックスコンテナ | justify-content, align-content | - | |
| align-self | 個々のフレックスアイテムを交差軸に沿って整列します。 | align-self: flex-end; | auto, flex-start, flex-end, center, baseline, stretch, start, end, self-start, self-end | フレックスアイテム | align-items, justify-content | 特定のフレックスアイテムに対して align-items を上書きします。 | |
| align-content | 複数行のフレックスアイテムを交差軸に沿って整列します（フレックスコンテナの空間配分）。 | align-content: space-between; | stretch, flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, baseline | フレックスコンテナ | align-items, justify-content | コンテナが複数行のフレックスアイテムを含む場合にのみ効果を発揮します。 | |
| order | フレックスアイテムの表示順序を指定します。 | order: 1; | 任意の整数値（例: 0, 1, -1, 2） | フレックスアイテム | flex-grow, flex-shrink | 低い値ほど前に表示されます。 | |
| flex-grow | フレックスアイテムがフレックスコンテナ内の余った空間をどれだけ占有するかを指定します。 | flex-grow: 2; | 任意の数値（例: 0, 1, 2） | フレックスアイテム | flex-shrink, flex-basis | 1以上に設定すると、余白が他のアイテムよりも多く割り当てられます。 | |
| flex-shrink | フレックスアイテムがフレックスコンテナ内でどれだけ縮小されるかを指定します。 | flex-shrink: 1; | 任意の数値（例: 0, 1, 2） | フレックスアイテム | flex-grow, flex-basis | 0に設定すると、アイテムは縮小されません。 | |
| flex-basis | フレックスアイテムの初期サイズを指定します。 | flex-basis: 100px; | 長さ、パーセンテージ、キーワード（例: auto, 100px, 50%, content） | フレックスアイテム | flex-grow, flex-shrink | auto は、アイテムのコンテンツサイズを基に初期サイズを決定します。 | |
| flex | flex-grow, flex-shrink, flex-basis を一括で指定します。 | flex: 1 0 auto; | ショートハンド（例: 1 0 auto, 2 1 0px） | フレックスアイテム | flex-grow, flex-shrink, flex-basis | フレックスアイテムのサイズと成長・縮小特性を一度に設定できます。 | |
| gap | フレックスアイテム間の間隔を指定します。 | gap: 10px; | 長さ（例: 10px, 1em） | フレックスコンテナ, グリッドコンテナ | row-gap, column-gap | 以前は grid-gap として使用されていましたが、現在はフレックスボックスでも使用できます。 |
6.グリッドレイアウト
CSSグリッドレイアウトを管理するプロパティです。複雑なレイアウトも簡単に設定でき、特に複数列や複数行にまたがるデザインに適しています。
| 解説ページ | プロパティ名 | 説明 | 例 | 使用可能な値 | 適用される要素 | 関連プロパティ | 備考・非推奨情報 |
|---|---|---|---|---|---|---|---|
| display(display:grid;) | 要素をグリッドコンテナにするためのプロパティです。 | grid-template-columns: 1fr 2fr; | grid, inline-grid | グリッドコンテナ | grid-template-columns, grid-template-rows, grid-template-areas | グリッドレイアウトの基礎となるプロパティです。 | |
| grid-template-columns | グリッドコンテナの列のサイズと数を定義します。 | grid-template-rows: 100px auto; | 長さ、パーセンテージ、キーワード（例: 100px, 1fr, auto, min-content, max-content, repeat(auto-fill, minmax(100px, 1fr))） | グリッドコンテナ | grid-template-rows, grid-template-areas | - | |
| grid-template-rows | グリッドコンテナの行のサイズと数を定義します。 | grid-template-areas: "header header" "sidebar main" "footer footer"; | 長さ、パーセンテージ、キーワード（例: 100px, 1fr, auto, min-content, max-content, repeat(2, 1fr)） | グリッドコンテナ | grid-template-columns, grid-template-areas | - | |
| grid-template-areas | グリッドコンテナ内のエリアを名前付きで指定します。 | grid-template: "header header" "sidebar main" "footer footer" / 1fr 2fr; | キーワードまたはドット（例: "header header" "sidebar main" "footer footer"） | グリッドコンテナ | grid-template-columns, grid-template-rows | - | |
| grid-template | grid-template-columns, grid-template-rows, grid-template-areas を一括で指定します。 | grid-auto-columns: 100px; | 組み合わせ（例: "100px 200px / 1fr 2fr", "header header" "sidebar main" "footer footer"） | グリッドコンテナ | grid-template-columns, grid-template-rows, grid-template-areas | - | |
| grid-auto-columns | 自動生成される列のサイズを指定します。 | grid-auto-rows: minmax(100px, auto); | 長さまたはキーワード（例: 100px, auto, min-content, max-content, 1fr） | グリッドコンテナ | grid-auto-rows, grid-auto-flow | - | |
| grid-auto-rows | 自動生成される行のサイズを指定します。 | grid-auto-flow: row dense; | 長さまたはキーワード（例: 100px, auto, min-content, max-content, 1fr） | グリッドコンテナ | grid-auto-columns, grid-auto-flow | - | |
| grid-auto-flow | 自動配置されたアイテムの配置順序を指定します。 | grid-column-start: 2; | キーワード（例: row, column, dense, row dense, column dense） | グリッドアイテム | grid-auto-columns, grid-auto-rows | - | |
| grid-column-start | グリッドアイテムの開始列を指定します。 | grid-column-end: 4; | 整数またはキーワード（例: 1, span 2, auto） | グリッドアイテム | grid-column-end, grid-column | - | |
| grid-column-end | グリッドアイテムの終了列を指定します。 | grid-row-start: 1; | 整数またはキーワード（例: 1, span 2, auto） | グリッドアイテム | grid-column-start, grid-column | - | |
| grid-row-start | グリッドアイテムの開始行を指定します。 | grid-row-end: 3; | 整数またはキーワード（例: 1, span 2, auto） | グリッドアイテム | grid-row-end, grid-row | - | |
| grid-row-end | グリッドアイテムの終了行を指定します。 | grid-column: 1 / 3; | 整数またはキーワード（例: 1, span 2, auto） | グリッドアイテム | grid-row-start, grid-row | - | |
| grid-column | grid-column-start と grid-column-end を一括で指定します。 | grid-row: 2 / 4; | ショートハンド（例: 1 / 3, span 2 / auto） | グリッドアイテム | grid-column-start, grid-column-end | - | |
| grid-row | grid-row-start と grid-row-end を一括で指定します。 | grid-area: header; | ショートハンド（例: 1 / 3, span 2 / auto） | グリッドアイテム | grid-row-start, grid-row-end | - | |
| grid-area | グリッドアイテムの名前と位置を指定します。 | justify-items: center; | グリッドエリアの名前または grid-row、grid-column のショートハンド（例: header, 1 / 2 / 3 / 4） | グリッドコンテナ | grid-template-areas, grid-row, grid-column | - | |
| justify-items | グリッドアイテムをグリッドセル内で主軸に沿って整列します。 | align-items: stretch; | キーワード（例: start, end, center, stretch） | グリッドコンテナ | align-items, place-items | - | |
| align-items | グリッドアイテムをグリッドセル内で交差軸に沿って整列します。 | place-items: center; | キーワード（例: start, end, center, stretch） | グリッドコンテナ | justify-items, place-items | - | |
| place-items | align-items と justify-items を一括で指定します。 | justify-self: start; | ショートハンド（例: center, start stretch） | グリッドアイテム | align-items, justify-items | - | |
| justify-self | グリッドアイテムをグリッドセル内で主軸に沿って整列します（アイテムごとに個別に設定）。 | align-self: end; | キーワード（例: start, end, center, stretch） | グリッドアイテム | align-self, place-self | - | |
| align-self | グリッドアイテムをグリッドセル内で交差軸に沿って整列します（アイテムごとに個別に設定）。 | place-self: center; | キーワード（例: start, end, center, stretch） | グリッドアイテム | justify-self, place-self | - | |
| place-self | align-self と justify-self を一括で指定します。 | justify-content: space-between; | ショートハンド（例: center, start stretch） | グリッドコンテナ | align-self, justify-self | - | |
| justify-content | グリッドコンテナ内のグリッドを主軸に沿って整列します。 | align-content: stretch; | キーワード（例: start, end, center, space-between, space-around, space-evenly） | グリッドコンテナ | align-content, place-content | - | |
| align-content | グリッドコンテナ内のグリッドを交差軸に沿って整列します。 | place-content: center; | キーワード（例: start, end, center, space-between, space-around, space-evenly, stretch） | グリッドコンテナ | justify-content, place-content | - | |
| place-content | align-content と justify-content を一括で指定します。 | gap: 10px; | ショートハンド（例: center, space-between stretch） | グリッドコンテナ | align-content, justify-content | - | |
| gap | グリッドアイテム間のギャップ（間隔）を指定します。 | row-gap: 20px; | 長さ（例: 10px, 1em） | フレックスコンテナ, グリッドコンテナ | row-gap, column-gap | grid-gap の代わりに使用します。 | |
| row-gap | グリッドの行間のギャップ（間隔）を指定します。 | column-gap: 30px; | 長さ（例: 10px, 1em） | グリッドコンテナ | gap, grid-gap, column-gap | gap プロパティで一括指定も可能です。 | |
| column-gap | グリッドの列間のギャップ（間隔）を指定します。 | css div { column-gap: 20px; } | 長さ（例: 10px, 1em） | グリッドコンテナ | gap, grid-gap, row-gap | gap プロパティで一括指定も可能です。 |
7.アニメーションとトランジション
要素にアニメーション効果を追加したり、状態変化の遷移を滑らかにするプロパティです。これにより、ページに動きやインタラクションを加えることができます。
| 解説ページ | プロパティ名 | 説明 | 例 | 使用可能な値 | 適用される要素 | 関連プロパティ | 備考・非推奨情報 |
|---|---|---|---|---|---|---|---|
| animation | |||||||
| animation | アニメーションに関連するすべてのプロパティを一括で指定します。 | animation: slidein 3s ease-in-out 1s infinite alternate both; | animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state の組み合わせ | すべての要素 | animation-name, animation-duration, transition | ショートハンドプロパティです。 | |
| animation-name | 使用するアニメーションの名前を指定します。 | animation-name: slidein; | アニメーション名または none | すべての要素 | animation, @keyframes | - | |
| animation-duration | アニメーションの再生時間を指定します。 | animation-duration: 2s; | 時間（例: 2s, 500ms） | すべての要素 | animation, transition-duration | - | |
| animation-timing-function | アニメーションの進行速度を指定します。 | animation-timing-function: ease-in-out; | キーワードまたは関数（例: ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(4, start), cubic-bezier(0.25, 0.1, 0.25, 1.0)） | すべての要素 | animation, transition-timing-function | - | |
| animation-delay | アニメーションが開始されるまでの遅延時間を指定します。 | animation-delay: 1s; | 時間（例: 2s, 500ms） | すべての要素 | animation, transition-delay | - | |
| animation-iteration-count | アニメーションの繰り返し回数を指定します。 | animation-iteration-count: infinite; | 数値またはキーワード（例: 1, infinite） | すべての要素 | animation, animation-duration | - | |
| animation-direction | アニメーションの再生方向を指定します。 | animation-direction: alternate; | キーワード（例: normal, reverse, alternate, alternate-reverse） | すべての要素 | animation, animation-iteration-count | - | |
| animation-fill-mode | アニメーションが終了した後の要素の状態を指定します。 | animation-fill-mode: forwards; | キーワード（例: none, forwards, backwards, both） | すべての要素 | animation, animation-direction | - | |
| animation-play-state | アニメーションの再生状態（再生中または一時停止）を指定します。 | animation-play-state: paused; | キーワード（例: running, paused） | すべての要素 | animation, animation-direction | - | |
| transition | トランジションに関連するすべてのプロパティを一括で指定します。 | transition: opacity 1s ease-in-out 0.5s; | transition-property, transition-duration, transition-timing-function, transition-delay の組み合わせ | すべての要素 | transition-property, transition-duration | ショートハンドプロパティです。 | |
| transition-property | トランジションを適用するプロパティを指定します。 | transition-property: opacity; | プロパティ名または all, none | すべての要素 | transition, transition-duration | - | |
| transition-duration | トランジションの持続時間を指定します。 | transition-duration: 2s; | 時間（例: 1s, 500ms） | すべての要素 | transition, animation-duration | - | |
| transition-timing-function | トランジションの進行速度を指定します。 | transition-timing-function: ease-in; | キーワードまたは関数（例: ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(4, start), cubic-bezier(0.25, 0.1, 0.25, 1.0)） | すべての要素 | transition, animation-timing-function | - | |
| transition-delay | トランジションが開始されるまでの遅延時間を指定します。 | transition-delay: 0.5s; | 時間（例: 1s, 500ms） | すべての要素 | transition, animation-delay | - |
8.シャドウとフィルタ
要素に影をつけたり、視覚的なフィルタ効果を追加するプロパティです。これらを活用することで、デザインに深みと立体感を加えることができます。
| 解説ページ | プロパティ名 | 説明 | 例 | 使用可能な値 | 適用される要素 | 関連プロパティ | 備考・非推奨情報 |
|---|---|---|---|---|---|---|---|
| box-shadow | 要素の周囲にシャドウ（影）を追加します。 | box-shadow: 5px 5px 15px rgba(0,0,0,0.3); | オフセット（水平、垂直）、ぼかしの強さ、拡散距離、色（例: 10px 10px 5px 0px rgba(0,0,0,0.5)） | すべての要素 | text-shadow, filter | 複数のシャドウをカンマで区切って指定することも可能です。 | |
| text-shadow | テキストにシャドウ（影）を追加します。 | text-shadow: 2px 2px 5px #333; | オフセット（水平、垂直）、ぼかしの強さ、色（例: 2px 2px 3px rgba(0,0,0,0.5)） | すべての要素 | box-shadow, filter | 複数のシャドウをカンマで区切って指定することも可能です。 | |
| filter | 要素にフィルタ効果（例: ぼかし、彩度変更）を適用します。 | filter: blur(5px) brightness(0.8); | キーワードまたは関数の組み合わせ（例: blur(5px), brightness(0.8), contrast(150%), grayscale(100%), sepia(50%), invert(100%), opacity(50%), drop-shadow(2px 4px 6px black)） | すべての要素 | backdrop-filter, box-shadow, text-shadow | フィルタ効果を組み合わせて使用できます。 | |
| backdrop-filter | 要素の背後にあるコンテンツに対してフィルタ効果を適用します。 | backdrop-filter: blur(10px); | キーワードまたは関数の組み合わせ（例: blur(5px), brightness(0.8), contrast(150%), grayscale(100%), sepia(50%), invert(100%), opacity(50%)） | すべての要素 | filter, box-shadow, text-shadow | 背後の要素にフィルタ効果を適用します。主にモダンなブラウザでサポートされています。 |
9.レイアウト
要素の表示方法や配置を管理するためのプロパティです。これらのプロパティを使用することで、要素がどのように配置されるか、重なり順がどうなるかをコントロールできます。
| 解説ページ | プロパティ名 | 説明 | 例 | 使用可能な値 | 適用される要素 | 関連プロパティ | 備考・非推奨情報 |
|---|---|---|---|---|---|---|---|
| display | 要素の表示形式を指定します。ブロック、インライン、フレックス、グリッドなどのレイアウトモデルを選択できます。 | display: flex; | block, inline, inline-block, flex, inline-flex, grid, inline-grid, table, inline-table, none | すべての要素 | position, float, visibility | - | |
| position | 要素の配置方法を指定します。要素を文書の通常のフロー内に配置するか、フロー外に配置するかを決定します。 | position: absolute; | static, relative, absolute, fixed, sticky | すべての要素 | top, right, bottom, left, z-index | - | |
| top | 要素の上端と、配置コンテナの上端との距離を指定します（positionが relative, absolute, fixed, stickyの場合に使用）。 | top: 10px; | 長さまたはパーセンテージ（例: 10px, 50%） | 位置指定された要素 (positionが relative, absolute, fixed, sticky の要素) | bottom, left, right | - | |
| right | 要素の右端と、配置コンテナの右端との距離を指定します（positionが relative, absolute, fixed, stickyの場合に使用）。 | right: 20px; | 長さまたはパーセンテージ（例: 10px, 50%） | 位置指定された要素 (positionが relative, absolute, fixed, sticky の要素) | top, bottom, left | - | |
| bottom | 要素の下端と、配置コンテナの下端との距離を指定します（positionが relative, absolute, fixed, stickyの場合に使用）。 | bottom: 10px; | 長さまたはパーセンテージ（例: 10px, 50%） | 位置指定された要素 (positionが relative, absolute, fixed, sticky の要素) | top, left, right | - | |
| left | 要素の左端と、配置コンテナの左端との距離を指定します（positionが relative, absolute, fixed, stickyの場合に使用）。 | left: 20px; | 長さまたはパーセンテージ（例: 10px, 50%） | 位置指定された要素 (positionが relative, absolute, fixed, sticky の要素) | top, bottom, right | - | |
| float | 要素を左右に浮かせ、後続のテキストや要素がその周囲を回り込むようにします。 | float: left; | left, right, none | ブロックレベルの要素 | clear | 現在では、フレックスボックスやグリッドレイアウトが推奨されています。 | |
| clear | 浮動要素の影響を受けないように、次の要素が回り込まないようにします。 | clear: both; | left, right, both, none | すべての要素 | float | - | |
| z-index | 要素のスタッキング順序（重なり順序）を指定します。positionが static以外の場合にのみ有効です。 | z-index: 10; | 整数（例: 0, 1, -1） | 位置指定された要素 (positionが relative, absolute, fixed, sticky の要素) | position | - | |
| overflow | 要素の内容がボックスをはみ出した場合の表示方法を指定します。 | overflow: hidden; | visible, hidden, scroll, auto | すべての要素 | overflow-x, overflow-y | - | |
| overflow-x | ボックスの水平方向における内容の表示方法を指定します。 | overflow-x: scroll; | visible, hidden, scroll, auto | すべての要素 | overflow, overflow-y | - | |
| overflow-y | ボックスの垂直方向における内容の表示方法を指定します。 | overflow-y: scroll; | visible, hidden, scroll, auto | すべての要素 | overflow, overflow-x | - | |
| visibility | 要素の表示・非表示を指定します。要素が非表示でも、レイアウトに影響を与えます。 | visibility: hidden; | visible, hidden, collapse | すべての要素 | display, opacity | collapse は、テーブル要素に使用されます。 | |
| box-sizing | 要素の幅や高さを計算する際に、paddingやborderを含めるかどうかを指定します。 | box-sizing: border-box; | content-box, border-box | すべての要素 | width, height | border-box にすると、padding や border を含めたサイズになります。 |
10.テーブル
テーブルレイアウトをカスタマイズするためのプロパティです。表のセルやボーダー、キャプションのスタイルを調整することで、データの可読性を高めることができます。
| 解説ページ | プロパティ名 | 説明 | 例 | 使用可能な値 | 適用される要素 | 関連プロパティ | 備考・非推奨情報 |
|---|---|---|---|---|---|---|---|
| table-layout | テーブルのレイアウトアルゴリズムを指定します。 | table-layout: fixed; | auto, fixed | テーブル要素 () | width, border-collapse | fixed は列幅をセル内容に依存せず固定します。 | |
| border-collapse | テーブルの枠線がどのように表示されるかを指定します。 | border-collapse: collapse; | collapse, separate | テーブル要素 () | border-spacing, table-layout | collapse は枠線を統合し、separate は枠線を分離します。 | |
| border-spacing | セルの間のスペースを指定します（枠線が分離されている場合）。 | border-spacing: 10px; | 長さ（例: 0, 10px） | テーブル要素 () | border-collapse, table-layout | border-collapse: separate の場合にのみ適用されます。 | |
| caption-side | テーブルキャプションの位置を指定します。 | caption-side: bottom; | top, bottom, left, right | テーブルキャプション () | table-layout, border-collapse | left と right は、モダンブラウザでのサポートが限定的です。 | |
| empty-cells | 枠線がある空セルを表示するか非表示にするかを指定します。 | empty-cells: hide; | show, hide | テーブルセル (, ) | border-collapse, table-layout | border-collapse: separate の場合にのみ適用されます。 |
11.リストスタイル
リストのスタイルを設定するプロパティです。リスト項目のデザインを調整することで、ナビゲーションや目次の視認性を向上させることができます。
| 解説ページ | プロパティ名 | 説明 | 例 | 使用可能な値 | 適用される要素 | 関連プロパティ | 備考・非推奨情報 |
|---|---|---|---|---|---|---|---|
| list-style | リストのマーカー（箇条書きのマーク）を一括で指定します。 | リスト要素 (, , ) | disc outside none | list-style: square inside; | list-style-type, list-style-position, list-style-image | ||
| list-style-type | リストマーカーの種類を指定します。 | リスト要素 (, , ) | disc | list-style-type: disc; | list-style, list-style-position, list-style-image | ||
| list-style-position | リストマーカーがリスト項目内か外かを指定します。 | リスト要素 (, , ) | outside | list-style-position: inside; | list-style, list-style-type, list-style-image | ||
| list-style-image | カスタムリストマーカーの画像を指定します。 | リスト要素 (, , ) | none | list-style-image: url('image.png'); | list-style, list-style-type, list-style-position |
12. 生成内容
生成内容は、要素の前後にコンテンツを追加したり、カウンターや引用符の管理を行うプロパティです。
| 解説ページ | プロパティ名 | 説明 | 例 | 使用可能な値 | 適用される要素 | 関連プロパティ | 備考・非推奨情報 |
|---|---|---|---|---|---|---|---|
| content | 要素の前後に追加される生成内容を指定します。 | 擬似要素 (::before, ::after) | normal | content: "Note: "; | quotes, counter-increment | ||
| counter-increment | カウンタを増加させる方法を指定します。 | すべての要素 | none | counter-increment: section; | content, counter-reset | ||
| counter-reset | カウンタのリセット方法を指定します。 | すべての要素 | none | counter-reset: section; | content, counter-increment | ||
| quotes | content プロパティで使用される引用符のスタイルを指定します。 | すべての要素 | normal | quotes: "«" "»"; | content, counter-increment |
13. その他
その他は、カーソルや選択、リサイズなど、特定のカテゴリーに属さない一般的なプロパティを扱います。
| 解説ページ | プロパティ名 | 説明 | 例 | 使用可能な値 | 適用される要素 | 関連プロパティ | 備考・非推奨情報 |
|---|---|---|---|---|---|---|---|
| cursor | 要素上にカーソルが乗った際のカーソルの形状を指定します。 | すべての要素 | auto | cursor: pointer; | pointer-events, user-select | ||
| pointer-events | 要素がポインタイベント（クリック、ホバーなど）を受けるかどうかを指定します。 | すべての要素 | auto | pointer-events: none; | cursor, user-select | ||
| resize | 要素のサイズをユーザーがリサイズできるかどうかを指定します。 | ブロック要素 | none | resize: both; | overflow, min-width, min-height | ||
| user-select | ユーザーが要素内のテキストを選択できるかどうかを指定します。 | すべての要素 | auto | user-select: none; | cursor, pointer-events | ||
| will-change | 要素が将来変更される可能性のあるプロパティを指定します。 | すべての要素 | auto | will-change: transform; | transform, opacity |
14. スクロールと表示
スクロールと表示は、スクロールの挙動や要素の表示領域に関連するプロパティを扱います。
| 解説ページ | プロパティ名 | 説明 | 例 | 使用可能な値 | 適用される要素 | 関連プロパティ | 備考・非推奨情報 |
|---|---|---|---|---|---|---|---|
| scroll-behavior | ページ内リンクやスクロール操作のスムーズさを指定します。 | スクロール可能な要素 | auto | scroll-behavior: smooth; | overflow, overflow-x, overflow-y | ||
| scroll-margin | スクロール操作時に要素の周囲に追加されるマージンを指定します。 | スクロール可能な要素 | 0 | scroll-margin: 20px; | scroll-padding, scroll-margin-top, scroll-margin-right, scroll-margin-bottom, scroll-margin-left | ||
| scroll-margin-top | スクロール操作時に要素の上部に追加されるマージンを指定します。 | スクロール可能な要素 | 0 | scroll-margin-top: 10px; | scroll-margin, scroll-padding-top | ||
| scroll-margin-right | スクロール操作時に要素の右部に追加されるマージンを指定します。 | スクロール可能な要素 | 0 | scroll-margin-right: 10px; | scroll-margin, scroll-padding-right | ||
| scroll-margin-bottom | スクロール操作時に要素の下部に追加されるマージンを指定します。 | スクロール可能な要素 | 0 | scroll-margin-bottom: 10px; | scroll-margin, scroll-padding-bottom | ||
| scroll-margin-left | スクロール操作時に要素の左部に追加されるマージンを指定します。 | スクロール可能な要素 | 0 | scroll-margin-left: 10px; | scroll-margin, scroll-padding-left | ||
| scroll-padding | スクロール操作時に要素の周囲に追加されるパディングを指定します。 | スクロール可能な要素 | 0 | scroll-padding: 20px; | scroll-margin, scroll-padding-top, scroll-padding-right, scroll-padding-bottom, scroll-padding-left | ||
| scroll-padding-top | スクロール操作時に要素の上部に追加されるパディングを指定します。 | スクロール可能な要素 | 0 | scroll-padding-top: 10px; | scroll-padding, scroll-margin-top | ||
| scroll-padding-right | スクロール操作時に要素の右部に追加されるパディングを指定します。 | スクロール可能な要素 | 0 | scroll-padding-right: 10px; | scroll-padding, scroll-margin-right | ||
| scroll-padding-bottom | スクロール操作時に要素の下部に追加されるパディングを指定します。 | スクロール可能な要素 | 0 | scroll-padding-bottom: 10px; | scroll-padding, scroll-margin-bottom | ||
| scroll-padding-left | スクロール操作時に要素の左部に追加されるパディングを指定します。 | スクロール可能な要素 | 0 | scroll-padding-left: 10px; | scroll-padding, scroll-margin-left |
15. マスク
マスクは、要素に対して部分的な表示や隠蔽を行うためのプロパティを扱います。
| 解説ページ | プロパティ名 | 説明 | 例 | 使用可能な値 | 適用される要素 | 関連プロパティ | 備考・非推奨情報 |
|---|---|---|---|---|---|---|---|
| mask | 要素にマスクを適用するためのすべてのプロパティを一括で指定します。 | すべての要素 | none | mask: url(mask.png) no-repeat center/contain; | mask-image, mask-size, mask-composite | ||
| mask-image | 要素に適用するマスク画像を指定します。 | すべての要素 | none | mask-image: url(mask.png); | mask, mask-position, mask-size | ||
| mask-mode | マスク画像がどのように適用されるかを指定します。 | すべての要素 | alpha | mask-mode: luminance; | mask, mask-image | ||
| mask-repeat | マスク画像の繰り返し方法を指定します。 | すべての要素 | no-repeat | mask-repeat: repeat-x; | mask, mask-image, mask-position | ||
| mask-position | マスク画像の表示位置を指定します。 | すべての要素 | center | mask-position: top left; | mask, mask-image, mask-repeat | ||
| mask-clip | マスクが適用される範囲を指定します。 | すべての要素 | border-box | mask-clip: content-box; | mask, mask-image, mask-repeat | ||
| mask-origin | マスク画像の基準位置を指定します。 | すべての要素 | border-box | mask-origin: padding-box; | mask, mask-image, mask-position | ||
| mask-size | マスク画像のサイズを指定します。 | すべての要素 | auto | mask-size: cover; | mask, mask-image, mask-position | ||
| mask-composite | 複数のマスク画像がどのように合成されるかを指定します。 | すべての要素 | add | mask-composite: intersect; | mask, mask-image, mask-repeat |
16. オーバーフローとクリッピング
オーバーフローとクリッピングは、要素の表示領域を制御し、はみ出したコンテンツの表示方法を指定するプロパティを扱います。
| 解説ページ | プロパティ名 | 説明 | 例 | 使用可能な値 | 適用される要素 | 関連プロパティ | 備考・非推奨情報 |
|---|---|---|---|---|---|---|---|
| clip | 要素の表示領域をクリップ（切り抜き）する領域を指定します。 | すべての要素 | auto | clip: rect(0, 100px, 100px, 0); | overflow, clip-path | ||
| clip-path | 要素の表示領域をクリップする形状を指定します。 | すべての要素 | none | clip-path: circle(50%); | overflow, clip | ||
| overflow-anchor | ページ内リンクやスクロール操作時に要素がどのように固定されるかを指定します。 | スクロール可能な要素 | auto | overflow-anchor: none; | overflow, scroll-behavior | ||
| overflow-wrap | 要素内のテキストが長い場合に、テキストを折り返す方法を指定します。 | すべての要素 | normal | overflow-wrap: break-word; | word-wrap, white-space |