タイポグラフィ
テキストに関わるプロパティです。
- direction
- 文字の方向を指定（LTR/RTL）。例: direction: rtl;
- font-family
- フォントファミリーを指定。例: font-family: Arial, sans-serif;
- font-kerning
- カーニング（文字間の微調整）の有効／無効を指定。例: font-kerning: normal;
- font-size
- 文字の大きさを指定。例: font-size: 16px;
- font-style
- イタリックなどフォントのスタイルを指定。例: font-style: italic;
- font-stretch
- フォントの幅を拡大／縮小。例: font-stretch: expanded;
- font-variant
- スモールキャップなどフォントの異体を指定。例: font-variant: small-caps;
- font-variant-ligatures
- 合字などリガチャの扱いを指定。例: font-variant-ligatures: common-ligatures;
- font-weight
- フォントの太さを指定。例: font-weight: bold;
- hyphens
- テキストのハイフン区切りを自動化。例: hyphens: auto;
- letter-spacing
- 文字間のスペースを指定。例: letter-spacing: 2px;
- line-height
- 行の高さを指定。例: line-height: 1.5;
- overflow-wrap
- 単語途中での折り返しを制御。例: overflow-wrap: break-word;
- tab-size
- タブ文字の幅を指定。例: tab-size: 4;
- text-align
- テキストの水平揃え。例: text-align: center;
- text-decoration
- 下線などテキスト装飾を指定。例: text-decoration: underline;
- text-emphasis
- 縦書き・東アジア向けテキストの強調記号。例: text-emphasis: circle;
- text-indent
- 段落の1行目インデント。例: text-indent: 2em;
- text-orientation
- 縦書き時の文字向きを指定。例: text-orientation: upright;
- text-overflow
- テキストがあふれた時の省略表示。例: text-overflow: ellipsis;
- text-rendering
- 文字レンダリングを最適化。例: text-rendering: optimizeLegibility;
- text-shadow
- 文字に影を付ける。例: text-shadow: 1px 1px 2px #999;
- text-transform
- 大文字・小文字変換。例: text-transform: uppercase;
- unicode-bidi
- 複雑な文字方向を制御。例: unicode-bidi: bidi-override;
- vertical-align
- インライン要素の縦揃え。例: vertical-align: middle;
- white-space
- 空白や改行の扱いを指定。例: white-space: nowrap;
- word-break
- 単語の改行ルールを制御。例: word-break: break-all;
- word-spacing
- 単語間のスペースを指定。例: word-spacing: 5px;
- writing-mode
- 縦書き／横書きを指定。例: writing-mode: vertical-rl;
色・背景
テキストや背景色、背景画像などの色や背景装飾に関わるプロパティです。
- accent-color
- フォーム要素などの強調色を指定。例: accent-color: #007BFF;
- background-attachment
- 背景画像を固定するかどうか。例: background-attachment: fixed;
- background-blend-mode
- 背景画像や背景色の合成モード。例: background-blend-mode: multiply;
- background-clip
- 背景の描画範囲を指定。例: background-clip: content-box;
- background-color
- 要素の背景色。例: background-color: #fff;
- background-image
- 背景画像を指定。例: background-image: url("bg.png");
- background-origin
- 背景画像の原点を指定。例: background-origin: border-box;
- background-position
- 背景画像の表示位置。例: background-position: center;
- background-repeat
- 背景画像の繰り返し設定。例: background-repeat: no-repeat;
- background-size
- 背景画像の拡大・縮小。例: background-size: cover;
- color
- 文字の色を指定。例: color: #333;
- object-fit
- 画像や動画を要素枠にフィット。例: object-fit: cover;
- object-position
- object-fit時の画像の表示位置。例: object-position: center;
ボックスモデル
要素の幅・高さ・余白・枠線など、ボックスモデルに関わるプロパティです。
- aspect-ratio
- 要素の縦横比を指定。例: aspect-ratio: 16/9;
- border
- 枠線を一括指定。例: border: 1px solid #ccc;
- border-bottom
- 下辺の枠線を指定。例: border-bottom: 2px dashed #000;
- border-color
- 枠線の色を指定。例: border-color: #f00;
- border-image
- 画像を枠線として適用。例: border-image: url("border.png") 30 round;
- border-image-outset
- 画像枠線を要素外にはみ出させる量。例: border-image-outset: 5px;
- border-image-repeat
- 画像枠線の繰り返し方法。例: border-image-repeat: round;
- border-image-slice
- 画像枠線の分割位置。例: border-image-slice: 30;
- border-image-source
- 画像枠線に使う画像。例: border-image-source: url("border.png");
- border-image-width
- 画像枠線の幅。例: border-image-width: 10px;
- border-left
- 左辺の枠線を指定。例: border-left: 2px solid #000;
- border-radius
- 角を丸める。例: border-radius: 10px;
- border-right
- 右辺の枠線を指定。例: border-right: 2px solid #000;
- border-style
- 枠線のスタイルを指定。例: border-style: dotted;
- border-top
- 上辺の枠線を指定。例: border-top: 2px solid #000;
- border-width
- 枠線の太さを指定。例: border-width: 2px;
- box-sizing
- 幅・高さの計算方法を指定。例: box-sizing: border-box;
- margin
- 外側余白を一括指定。例: margin: 10px;
- margin-bottom
- 下側の余白を指定。例: margin-bottom: 10px;
- margin-left
- 左側の余白を指定。例: margin-left: 20px;
- margin-right
- 右側の余白を指定。例: margin-right: 20px;
- margin-top
- 上側の余白を指定。例: margin-top: 10px;
- max-height
- 要素の最大高さを指定。例: max-height: 400px;
- max-width
- 要素の最大幅を指定。例: max-width: 800px;
- min-height
- 要素の最小高さを指定。例: min-height: 100px;
- min-width
- 要素の最小幅を指定。例: min-width: 200px;
- padding
- 内側余白を一括指定。例: padding: 10px 20px;
- padding-bottom
- 下側の内側余白。例: padding-bottom: 10px;
- padding-left
- 左側の内側余白。例: padding-left: 20px;
- padding-right
- 右側の内側余白。例: padding-right: 20px;
- padding-top
- 上側の内側余白。例: padding-top: 10px;
レイアウト
要素の表示モードや位置指定、回り込みなどのレイアウト構造に関わるプロパティです。
- bottom
- 絶対／固定配置時の下位置。例: bottom: 10px;
- break-inside
- 要素内での分割を回避。例: break-inside: avoid;
- clear
- 浮動要素との回り込み解除。例: clear: both;
- display
- 表示方式を指定。例: display: block;
- float
- 要素を左右に回り込ませる。例: float: left;
- left
- 絶対／固定配置時の左位置。例: left: 20px
- position
- 要素の配置方法。例: position: absolute;
- resize
- 要素をリサイズ可能にする。例: resize: both;
- right
- 絶対／固定配置時の右位置。例: right: 20px;
- top
- 絶対／固定配置時の上位置。例: top: 10px;
- z-index
- 要素の重なり順序。例: z-index: 999;
テーブルレイアウト
HTMLテーブルの装飾や表示を制御するためのプロパティです。
- border-collapse
- 隣接セルの枠線を結合するか指定。例: border-collapse: collapse;
- border-spacing
- セル間のスペースを指定。例: border-spacing: 5px;
- caption-side
- テーブルキャプションの位置。例: caption-side: bottom;
- empty-cells
- 空セルの表示を制御。例: empty-cells: show;
- table-layout
- テーブルのレイアウト方法。例: table-layout: fixed;
フレックスボックス
Flexboxを制御するプロパティです。
- align-content
- 複数行のFlexアイテムの配置。例: align-content: space-between;
- align-items
- 交差軸方向（縦）の配置。例: align-items: center;
- align-self
- 特定アイテムの交差軸方向配置。例: align-self: flex-end;
- flex
- フレキシブルなサイズを一括指定。例: flex: 1 1 auto;
- flex-basis
- アイテムの基本サイズ。例: flex-basis: 200px;
- lex-direction
- アイテムの配置方向。例: flex-direction: row-reverse;
- flex-flow
- flex-directionとflex-wrapをまとめて指定。例: flex-flow: row wrap;
- flex-grow
- 利用可能な空きスペースの拡大比率。例: flex-grow: 2;
- flex-shrink
- 要素が縮む比率。例: flex-shrink: 0;
- flex-wrap
- アイテムを折り返すか。例: flex-wrap: wrap;
- gap
- Flexアイテム間の隙間を指定。例: gap: 10px;
- justify-content
- メイン軸方向（横）の配置。例: justify-content: center;
- order
- アイテムの表示順序を指定。例: order: 2;
グリッドレイアウト
Gridレイアウトを制御するプロパティです。
- align-content
- グリッド全体の縦方向の揃え。例: align-content: center;
- align-items
- 各グリッドアイテムの縦方向整列。例: align-items: stretch;
- gap
- グリッドの行や列の間隔。例: gap: 20px;
- grid-auto-columns
- 自動生成される列のサイズ。例: grid-auto-columns: 100px;
- grid-auto-flow
- 自動配置の流れを指定。例: grid-auto-flow: row dense;
- grid-auto-rows
- 自動生成される行のサイズ。例: grid-auto-rows: 50px;
- grid-column
- 要素の開始列／終了列をまとめて指定。例: grid-column: 2 / 4;
- grid-column-end
- 要素が終了する列。例: grid-column-end: 4;
- grid-column-start
- 要素が開始する列。例: grid-column-start: 2;
- grid-row
- 要素の開始行／終了行をまとめて指定。例: grid-row: 1 / 3;
- grid-row-end
- 要素が終了する行。例: grid-row-end: 3;
- grid-row-start
- 要素が開始する行。例: grid-row-start: 1;
- grid-template-areas
- グリッドエリアの配置。
- grid-template-rows
- 行の定義。例: grid-template-rows: 100px auto;
- justify-content
- グリッド全体の横方向の揃え。例: justify-content: space-between;
- justify-items
- 各アイテムの横方向整列。例: justify-items: center;
- justify-self
- 特定アイテムの横方向整列。例: justify-self: end;
- place-content
- align-content と justify-content をまとめて指定。例: place-content: center space-between;
- place-items
- align-items と justify-items をまとめて指定。例: place-items: center stretch;
- place-self
- align-self と justify-self をまとめて指定。例: place-self: end center;
アニメーション関連
要素を動かしたり変化させたりするアニメーションやトランジションに関わるプロパティです。
- animation
- アニメーションを一括指定。例: animation: slide 2s infinite;
- animation-delay
- アニメーション開始の遅延時間。例: animation-delay: 0.5s;
- animation-direction
- 再生方向を指定。例: animation-direction: alternate;
- animation-duration
- アニメーション継続時間。例: animation-duration: 1s;
- animation-fill-mode
- 終了後の状態を保持するか。例: animation-fill-mode: forwards;
- animation-iteration-count
- 繰り返し回数。例: animation-iteration-count: infinite;
- animation-name
- 使用するキーフレーム名。例: animation-name: fadeIn;
- animation-play-state
- 再生／一時停止を制御。例: animation-play-state: paused;
- animation-timing-function
- アニメーションの進行速度カーブ。例: animation-timing-function: ease-in-out;
- transition
- トランジションを一括指定。例: transition: all 0.3s ease;
- transition-delay
- トランジション開始の遅延。例: transition-delay: 0.2s;
- transition-duration
- トランジションの継続時間。例: transition-duration: 0.5s;
- transition-property
- トランジション対象のプロパティ。例: transition-property: opacity;
- transition-timing-function
- 速度カーブを指定。例: transition-timing-function: linear;
変形・視覚効果
要素を回転・拡大縮小・透過させたり、視覚的な特殊効果を付与するプロパティです。
- box-shadow
- 要素に影をつける。例: box-shadow: 0 4px 6px rgba(0,0,0,0.2);
- filter
- 要素にフィルタ効果（ぼかし等）を適用。例: filter: blur(5px);
- isolation
- ブレンド効果を要素内で完結させる。例: isolation: isolate;
- mix-blend-mode
- 重なった要素同士の合成モード。例: mix-blend-mode: multiply;
- transform
- 要素を変形。例: transform: rotate(45deg);
- transform-origin
- 変形の基準点。例: transform-origin: 50% 50%;
リスト装飾
ulやolなどのリスト表示を制御するためのプロパティです。
- counter-increment
- カウンターを増分。例: counter-increment: section;
- counter-reset
- カウンターをリセット。例: counter-reset: section;
- list-style
- リストマーカーの一括指定。例: list-style: square inside;
- list-style-image
- マーカーとして使用する画像。例: list-style-image: url("marker.png");
- list-style-position
- マーカーの表示位置。例: list-style-position: inside;
- list-style-type
- マーカーの種類を指定。例: list-style-type: disc;
スクロール関連
要素のオーバーフロー（はみ出し）やスクロール挙動を制御するプロパティです。
- overflow
- 要素からはみ出した部分の表示制御。例: overflow: hidden;
- overflow-x
- 水平方向のオーバーフローを制御。例: overflow-x: scroll;
- overflow-y
- 垂直方向のオーバーフローを制御。例: overflow-y: auto;
- scroll-behavior
- スクロール時のアニメーションを指定。例: scroll-behavior: smooth;
- scroll-margin
- スクロールスナップ時の外側余白。例: scroll-margin: 20px;
- scroll-margin-bottom
- 下方向のスクロール余白。例: scroll-margin-bottom: 10px;
- scroll-margin-left
- 左方向のスクロール余白。例: scroll-margin-left: 10px;
- scroll-margin-right
- 右方向のスクロール余白。例: scroll-margin-right: 10px;
- scroll-margin-top
- 上方向のスクロール余白。例: scroll-margin-top: 10px;
- scroll-padding
- スクロールスナップ時の内側余白。例: scroll-padding: 15px;
- scroll-snap-align
- スナップ位置を指定。例: scroll-snap-align: start;
- scroll-snap-stop
- ユーザーの強制スクロール停止可否。例: scroll-snap-stop: always;
- scroll-snap-type
- スクロールスナップの設定。例: scroll-snap-type: x mandatory;
- scrollbar-color
- スクロールバーの色（Firefox限定）。例: scrollbar-color: #000 #ccc;
- scrollbar-width
- スクロールバーの幅（Firefox限定）。例: scrollbar-width: thin;
- touch-action
- タッチ操作時の挙動を制御。例: touch-action: pan-y;