タイポグラフィ
テキストに関わるプロパティです。
- 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-emphasis
- 縦書き・東アジア向けテキストの強調記号。例: text-emphasis: circle;
- 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
- 特定のFlexアイテムに対して交差軸方向の配置を指定します。例：align-self: flex-end;
- flex
- Flexアイテムの成長・縮小・基本サイズを一括で指定します。例：flex: 1 1 auto;
- flex-basis
- Flexアイテムの基本サイズを指定します。例：flex-basis: 200px;
- flex-direction
- Flexアイテムの配置方向（主軸）を指定します。例：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アイテムを折り返すかどうかを指定します。例：flex-wrap: wrap;
- gap
- Flexアイテム間の隙間（間隔）を指定します。例：gap: 10px;
- justify-content
- メイン軸方向（横）の配置を指定します。例：justify-content: center;
- order
- Flexアイテムの表示順序を指定します。例：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
- リストマーカーの種類（disc, circle, square など）を指定します。例：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;