タイポグラフィ
※テキストに関わるプロパティです。
- 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;
- height
- →要素の高さを指定。例: height: 300px;
- 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;
- width
- →要素の幅を指定。例: width: 500px;
レイアウト
※要素の表示モードや位置指定、回り込みなどのレイアウト構造に関わるプロパティです。
- 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;
- flex-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;