【決定版】CSSリファレンス：プロパティの定義、値、例を網羅

CSS（Cascading Style Sheets）は、ウェブページの見た目を制御するために使用されるスタイルシート言語です。HTMLで構造化されたコンテンツを、どのようにブラウザに表示させるかを指示する役割を担います。色、フォント、レイアウトなど、ウェブサイトのデザインを細かく制御することで、ユーザーエクスペリエンスを向上させ、ブランドイメージを確立する上で不可欠な技術です。

本記事では、CSSの主要なプロパティを網羅的に解説し、それぞれの定義、有効な値、そして具体的な使用例を紹介します。このリファレンスを活用することで、CSSの理解を深め、より洗練されたウェブデザインを実現できるようになるでしょう。

CSSの基本
- CSSの構文
- セレクタの種類
- カスケードと継承
- CSSの適用方法
テキスト関連プロパティ
- font-family
- font-size
- font-weight
- font-style
- line-height
- text-align
- text-decoration
- text-transform
- letter-spacing
- word-spacing
- white-space
- color
ボックスモデル関連プロパティ
- width
- height
- padding
- margin
- border
- box-sizing
背景関連プロパティ
- background-color
- background-image
- background-repeat
- background-position
- background-size
- background-attachment
- background (ショートハンド)
レイアウト関連プロパティ
- display
- position
- top, right, bottom, left
- float
- clear
- z-index
- overflow
- visibility
- Flexbox
  - display: flex
  - flex-direction
  - justify-content
  - align-items
  - flex-wrap
  - flex-grow, flex-shrink, flex-basis
- Grid Layout
  - display: grid
  - grid-template-columns
  - grid-template-rows
  - grid-gap
  - grid-column, grid-row
変形（Transform）関連プロパティ
- transform
- transform-origin
- scale
- rotate
- translate
- skew
アニメーション関連プロパティ
- transition
- animation
- @keyframes
その他の重要なプロパティ
- cursor
- opacity
- list-style
- table-layout
- clip (非推奨)
- clip-path
- filter
- pointer-events

1. CSSの基本

CSSを効果的に使用するには、その基本概念を理解することが不可欠です。

CSSの構文: CSSのルールは、セレクタと宣言ブロックで構成されます。セレクタはスタイルを適用するHTML要素を指定し、宣言ブロックはスタイルを定義するプロパティと値のペアを中括弧 {} で囲んだものです。

css セレクタ { プロパティ: 値; プロパティ: 値; }

例：

css h1 { color: blue; font-size: 32px; }
セレクタの種類: CSSにはさまざまな種類のセレクタがあり、特定の要素や要素のグループをターゲットにできます。
- 要素セレクタ: HTML要素の名前（例：p, h1, div）
- クラスセレクタ: . で始まる、HTML要素に適用された class 属性の値（例：.highlight, .important）
- IDセレクタ: # で始まる、HTML要素に適用された id 属性の値（例：#header, #footer）
- 属性セレクタ: HTML要素の属性に基づいて選択（例：[type="text"], [href^="https://"]）
- 疑似クラスセレクタ: 要素の状態に基づいて選択（例：:hover, :active, :focus）
- 疑似要素セレクタ: 要素の一部のスタイルを設定（例：::before, ::after, ::first-letter）
- 結合子: 複数のセレクタを組み合わせて選択（例：p > strong, div + p, ul li)
カスケードと継承: CSSは「カスケード」の仕組みによって、複数のスタイルルールが競合する場合の優先順位を決定します。一般的に、後から定義されたスタイルルールが優先されますが、!important 宣言を使用すると、そのルールが最優先されます。

「継承」とは、親要素に適用されたスタイルの一部が、子要素に自動的に引き継がれることです。例えば、color や font-family などのプロパティは通常、子要素に継承されます。
CSSの適用方法: CSSは、主に以下の3つの方法でHTMLドキュメントに適用できます。
- インラインスタイル: HTML要素の style 属性内に直接記述します。（例：<p style="color: red;">This is a paragraph.</p>) これは、特定の要素にのみスタイルを適用する場合に便利ですが、保守性が低くなります。
- 内部スタイルシート: HTMLドキュメントの <head> セクション内に <style> タグを使って記述します。ページ全体にスタイルを適用する場合に適していますが、複数のページでスタイルを共有することはできません。
- 外部スタイルシート: .css という拡張子を持つ別のファイルにCSSを記述し、HTMLドキュメントの <head> セクションで <link> タグを使ってファイルをリンクします。（例：<link rel="stylesheet" href="style.css">) これは、最も推奨される方法であり、コードの再利用性、保守性、構造化を向上させます。

2. テキスト関連プロパティ

これらのプロパティは、テキストの表示方法を制御します。

font-family: フォントの種類を指定します。複数のフォントをカンマ区切りで指定し、ブラウザはリストの最初のフォントが見つからない場合、次のフォントを試します。
- 値: フォント名、serif, sans-serif, monospace, cursive, fantasy (総称フォント)
- 例: font-family: "Helvetica Neue", Arial, sans-serif;
font-size: フォントのサイズを指定します。
- 値: px, em, rem, %, small, medium, large, x-large, xx-large, smaller, larger
- 例: font-size: 16px; または font-size: 1.2em;
font-weight: フォントの太さを指定します。
- 値: normal, bold, bolder, lighter, 100 – 900 (100刻み)
- 例: font-weight: bold; または font-weight: 600;
font-style: フォントのスタイルを指定します。
- 値: normal, italic, oblique
- 例: font-style: italic;
line-height: 行の高さを指定します。
- 値: px, em, rem, %, 数値 (数値はフォントサイズに対する乗数)
- 例: line-height: 1.5; または line-height: 24px;
text-align: テキストの水平方向の配置を指定します。
- 値: left, right, center, justify
- 例: text-align: center;
text-decoration: テキストの装飾を指定します。
- 値: none, underline, overline, line-through
- 例: text-decoration: underline;
text-transform: テキストの文字変換を指定します。
- 値: none, uppercase, lowercase, capitalize
- 例: text-transform: uppercase;
letter-spacing: 文字間隔を指定します。
- 値: px, em, rem
- 例: letter-spacing: 2px;
word-spacing: 単語間隔を指定します。
- 値: px, em, rem
- 例: word-spacing: 5px;
white-space: 空白文字の扱い方を指定します。
- 値: normal, nowrap, pre, pre-wrap, pre-line
- 例: white-space: nowrap; (改行を禁止)
color: テキストの色を指定します。
- 値: カラー名 (例: red), 16進数コード (例: #FF0000), RGB値 (例: rgb(255, 0, 0)), RGBA値 (例: rgba(255, 0, 0, 0.5)), HSL値 (例: hsl(0, 100%, 50%)), HSLA値 (例: hsla(0, 100%, 50%, 0.5))
- 例: color: blue;

3. ボックスモデル関連プロパティ

ボックスモデルは、HTML要素をコンテンツ、パディング、ボーダー、マージンで構成される長方形のボックスとして扱います。

width: 要素のコンテンツ領域の幅を指定します。
- 値: px, em, rem, %, auto
- 例: width: 300px; または width: 50%;
height: 要素のコンテンツ領域の高さを指定します。
- 値: px, em, rem, %, auto
- 例: height: 200px; または height: 100vh; (viewport height)
padding: 要素のコンテンツ領域とボーダーの間のスペースを指定します。
- 値: px, em, rem, % (上、右、下、左の順、省略可)
- 例: padding: 10px; (全方向), padding: 10px 20px; (上下 10px, 左右 20px), padding: 10px 20px 30px 40px; (上 10px, 右 20px, 下 30px, 左 40px)
margin: 要素のボーダーと隣接する要素の間のスペースを指定します。
- 値: px, em, rem, %, auto (上、右、下、左の順、省略可)
- 例: margin: 20px; (全方向), margin: 0 auto; (左右中央揃え)
border: 要素のボーダーのスタイル、幅、色を指定します。
- 値: border-width border-style border-color (ショートハンド)
- 例: border: 1px solid black; (1px の実線、黒色)
- 個別のプロパティ: border-width, border-style, border-color, border-top, border-right, border-bottom, border-left, border-radius
box-sizing: 要素の幅と高さの計算方法を指定します。
- 値: content-box (デフォルト、幅と高さはコンテンツ領域のみ), border-box (幅と高さはコンテンツ、パディング、ボーダーを含む)
- 例: box-sizing: border-box; (これが推奨される方法)

4. 背景関連プロパティ

これらのプロパティは、要素の背景の表示方法を制御します。

background-color: 背景色を指定します。
- 値: カラー名, 16進数コード, RGB値, RGBA値, HSL値, HSLA値
- 例: background-color: #f0f0f0;
background-image: 背景画像を指定します。
- 値: url(画像ファイルパス), none
- 例: background-image: url("image.jpg");
background-repeat: 背景画像の繰り返し方法を指定します。
- 値: repeat (水平方向と垂直方向に繰り返す), repeat-x (水平方向に繰り返す), repeat-y (垂直方向に繰り返す), no-repeat (繰り返さない)
- 例: background-repeat: no-repeat;
background-position: 背景画像の配置位置を指定します。
- 値: px, em, rem, %, top, bottom, left, right, center (水平方向垂直方向の順、省略可)
- 例: background-position: center center; または background-position: 20px 50%;
background-size: 背景画像のサイズを指定します。
- 値: px, em, rem, %, auto, cover (要素全体を覆うように拡大縮小), contain (要素内に完全に収まるように拡大縮小)
- 例: background-size: cover;
background-attachment: 背景画像のスクロール動作を指定します。
- 値: scroll (要素と一緒にスクロール), fixed (固定されたまま)
- 例: background-attachment: fixed;
background (ショートハンド): 上記のすべての背景プロパティをまとめて指定できます。
- 値: background-color background-image background-repeat background-position background-size background-attachment (順不同)
- 例: background: #f0f0f0 url("image.jpg") no-repeat center center cover fixed;

5. レイアウト関連プロパティ

これらのプロパティは、要素の配置方法を制御します。

display: 要素の表示形式を指定します。
- 値: block (ブロックレベル要素), inline (インライン要素), inline-block (インラインブロック要素), none (非表示), flex (フレキシブルボックス), grid (グリッドレイアウト)
- 例: display: block; (要素をブロックレベルにする)
position: 要素の配置方法を指定します。
- 値: static (デフォルト、通常のフロー), relative (相対配置), absolute (絶対配置), fixed (固定配置), sticky (スクロール位置に基づいて固定)
top, right, bottom, left: position プロパティが relative, absolute, fixed, sticky の場合に、要素の位置を調整するために使用します。
- 値: px, em, rem, %, auto
float: 要素を左または右にフロートさせ、他の要素がその周りを回り込むようにします。
- 値: left, right, none
- 例: float: left; (要素を左にフロートさせる)
clear: フロートされた要素の影響を受けないようにします。
- 値: left, right, both, none
- 例: clear: both; (両側のフロートをクリアする)
z-index: 要素の重なり順を指定します。数値が大きいほど前面に表示されます。position プロパティが static 以外の要素にのみ有効です。
- 値: 整数
- 例: z-index: 10;
overflow: 要素のコンテンツがボックスからはみ出す場合の表示方法を指定します。
- 値: visible (デフォルト、はみ出す), hidden (はみ出した部分を隠す), scroll (常にスクロールバーを表示), auto (必要な場合にスクロールバーを表示)
visibility: 要素の表示/非表示を切り替えます。display: none; とは異なり、要素の領域は確保されます。
- 値: visible, hidden

Flexbox

Flexboxは、複雑なレイアウトを簡単に作成できる強力なレイアウトモデルです。

display: flex: 要素をフレキシブルコンテナにします。
flex-direction: フレキシブルアイテムの配置方向を指定します。
- 値: row (横方向), column (縦方向), row-reverse, column-reverse
justify-content: フレキシブルコンテナ内のアイテムの水平方向の配置を指定します。
- 値: flex-start, flex-end, center, space-between, space-around, space-evenly
align-items: フレキシブルコンテナ内のアイテムの垂直方向の配置を指定します。
- 値: flex-start, flex-end, center, baseline, stretch
flex-wrap: フレキシブルアイテムがコンテナからはみ出す場合に折り返すかどうかを指定します。
- 値: nowrap, wrap, wrap-reverse
flex-grow, flex-shrink, flex-basis: フレキシブルアイテムのサイズ調整方法を制御します。flex ショートハンドプロパティを使用することもできます。
- 例: flex: 1 1 auto; (grow: 1, shrink: 1, basis: auto)

Grid Layout

Grid Layoutは、複雑な二次元レイアウトを簡単に作成できる強力なレイアウトモデルです。

display: grid: 要素をグリッドコンテナにします。
grid-template-columns: グリッドの列のサイズと数を指定します。
- 値: px, em, rem, %, fr (fractional unit, 余ったスペースの割合), auto
- 例: grid-template-columns: 1fr 2fr 1fr; (3つの列、中央の列が2倍の幅)
grid-template-rows: グリッドの行のサイズと数を指定します。
- 値: px, em, rem, %, fr, auto
- 例: grid-template-rows: 100px auto 100px; (3つの行、中央の行はコンテンツに合わせて自動調整)
grid-gap: グリッドアイテム間のギャップを指定します。
- 値: px, em, rem
- 例: grid-gap: 10px;
grid-column, grid-row: グリッドアイテムの配置場所を指定します。grid-column-start, grid-column-end, grid-row-start, grid-row-end を使用することもできます。
- 例: grid-column: 1 / 3; (グリッド列の1から3までを占める)

6. 変形（Transform）関連プロパティ

これらのプロパティは、要素の形状や位置を変形させることができます。

transform: 要素に変形を適用します。複数の変形関数を組み合わせることができます。
transform-origin: 変形の中心点を指定します。
- 値: px, em, rem, %, top, bottom, left, right, center (水平方向垂直方向の順、省略可)
scale: 要素を拡大または縮小します。
- 値: 数値 (1は元のサイズ)
- 例: transform: scale(1.2); (1.2倍に拡大)
rotate: 要素を回転させます。
- 値: deg (度), rad (ラジアン), turn (回転数)
- 例: transform: rotate(45deg); (45度回転)
translate: 要素を移動させます。
- 値: px, em, rem, % (水平方向垂直方向の順、省略可)
- 例: transform: translate(20px, 30px); (水平方向に20px, 垂直方向に30px移動)
skew: 要素を傾斜させます。
- 値: deg (度) (水平方向垂直方向の順、省略可)
- 例: transform: skew(30deg); (水平方向に30度傾斜)

7. アニメーション関連プロパティ

これらのプロパティは、要素のアニメーションを制御します。

transition: プロパティの値が変化する際にアニメーション効果を適用します。
- 値: property duration timing-function delay (ショートハンド)
- 例: transition: all 0.3s ease-in-out; (すべてのプロパティの変化を0.3秒でイーズインアウトでアニメーション)
- 個別のプロパティ: transition-property, transition-duration, transition-timing-function, transition-delay
animation: キーフレームアニメーションを適用します。
- 値: name duration timing-function delay iteration-count direction fill-mode play-state (ショートハンド)
- 個別のプロパティ: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state
@keyframes: キーフレームアニメーションを定義します。

css @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

8. その他の重要なプロパティ

cursor: マウスカーソルの形状を指定します。
- 値: auto, default, pointer, wait, text, move, zoom-in, zoom-out, grab, grabbing など
- 例: cursor: pointer; (リンクにホバーしたときに指の形にする)
opacity: 要素の透明度を指定します。
- 値: 数値 (0は完全に透明、1は完全に不透明)
- 例: opacity: 0.5; (半透明にする)
list-style: リストのスタイルを指定します。
- 値: list-style-type list-style-position list-style-image (ショートハンド)
- 例: list-style: disc inside url("bullet.png");
- list-style-type: リストマーカーの種類 (例: disc, circle, square, decimal, lower-alpha, upper-alpha, none)
- list-style-position: リストマーカーの位置 (例: inside, outside)
- list-style-image: リストマーカーとして使用する画像
table-layout: テーブルのレイアウトアルゴリズムを指定します。
- 値: auto, fixed
- 例: table-layout: fixed; (列の幅を固定する)
clip (非推奨): 要素の一部分だけを表示します。代わりに clip-path の使用が推奨されます。
clip-path: 要素の一部分だけを表示します。clip よりも柔軟な形状を指定できます。
- 値: polygon(), circle(), ellipse(), inset() など
- 例: clip-path: circle(50%); (要素を円形に切り抜く)
filter: 要素に視覚効果を適用します。
- 値: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), drop-shadow() など
- 例: filter: blur(5px); (要素をぼかす)
pointer-events: 要素がマウスイベントのターゲットになるかどうかを指定します。
- 値: auto, none
- 例: pointer-events: none; (要素をマウスイベントから除外する)

本記事では、CSSの主要なプロパティを網羅的に解説しました。それぞれのプロパティの定義、有効な値、そして具体的な使用例を参考に、CSSの理解を深め、より洗練されたウェブデザインを実現してください。CSSは奥深く、常に新しい技術やプロパティが登場しています。常に学習を続け、最新の情報に触れることで、より高度なウェブデザインスキルを習得できるでしょう。