CSS チートシート

目次

セレクタ (Selectors)

HTML要素を選択するためのパターンです。

セレクタは、どのHTML要素にスタイルを適用するかを指定するために使用されます。基本的なものから複雑な組み合わせまで様々です。

種類セレクタ説明例
要素セレクタelement指定されたHTML要素（例: p, div）をすべて選択します。p { color: black; }
クラスセレクタ.classname指定されたクラス名を持つすべての要素を選択します。.important { font-weight: bold; }
IDセレクタ#idname指定されたIDを持つ要素を選択します（IDはページ内で一意であるべきです）。#header { background-color: lightblue; }
属性セレクタ[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]		特定の属性を持つ、または属性値が特定の値に一致する要素を選択します。
~=: スペース区切りのリストに値を含む
|=: 値そのものか、ハイフンで始まる
^=: 値で始まる
$=: 値で終わる
*=: 値を含む		a[target="_blank"] { color: green; }
input[type="text"] { border: 1px solid gray; }
ユニバーサルセレクタ*すべての要素を選択します。* { margin: 0; padding: 0; box-sizing: border-box; }
子孫セレクタA B要素Aの子孫である要素Bを選択します。div p { color: gray; }
子セレクタA > B要素Aの直接の子である要素Bを選択します。ul > li { list-style-type: square; }
隣接兄弟セレクタA + B要素Aの直後にある兄弟要素Bを選択します。h2 + p { margin-top: 0; }
一般兄弟セレクタA ~ B要素Aの後にあるすべての兄弟要素Bを選択します。h1 ~ p { font-style: italic; }
グループ化セレクタA, B要素Aと要素Bの両方を選択します。h1, h2, h3 { font-family: sans-serif; }
擬似クラス (状態):hover
:active
:focus
:visited
:link
:checked
:disabled
:enabled
:required
:optional		特定の状態にある要素を選択します。
:hover: マウスカーソルが上にある
:active: アクティブ（クリック中など）
:focus: フォーカスが当たっている
:visited: 訪問済みのリンク
:link: 未訪問のリンク
:checked: チェックされたチェックボックスやラジオボタン
:disabled: 無効化されたフォーム要素
:enabled: 有効なフォーム要素
:required: 必須のフォーム要素
:optional: 任意のフォーム要素		a:hover { text-decoration: underline; }
input:focus { border-color: blue; }
input:checked + label { color: green; }
擬似クラス (構造):first-child
:last-child
:nth-child(n)
:nth-last-child(n)
:first-of-type
:last-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:only-child
:only-of-type
:empty
:root		親要素内の位置や種類に基づいて要素を選択します。
:first-child: 最初の要素
:last-child: 最後の要素
:nth-child(n): n番目の要素 (例: 2n, odd, 3n+1)
:nth-last-child(n): 最後からn番目の要素
:first-of-type: その種類の最初の要素
:last-of-type: その種類の最後の要素
:nth-of-type(n): その種類のn番目の要素
:nth-last-of-type(n): その種類の最後からn番目の要素
:only-child: 兄弟がいない要素
:only-of-type: 同じ種類の兄弟がいない要素
:empty: 子要素（テキストノード含む）を持たない要素
:root: ドキュメントのルート要素 (通常は <html>)		li:first-child { font-weight: bold; }
tr:nth-child(even) { background-color: #f2f2f2; }
p:only-of-type { color: red; }
div:empty { border: 1px dashed red; }
擬似クラス (否定):not(selector)指定されたセレクタに一致しない要素を選択します。p:not(.special) { color: gray; }
input:not([type="submit"]) { padding: 5px; }
擬似要素::before
::after
::first-letter
::first-line
::selection
::placeholder		要素の特定の部分を選択してスタイルを適用します。
::before: 要素の内容の前にコンテンツを挿入
::after: 要素の内容の後にコンテンツを挿入
::first-letter: ブロックレベル要素の最初の文字
::first-line: ブロックレベル要素の最初の行
::selection: ユーザーが選択した部分
::placeholder: フォーム要素のプレースホルダーテキスト		p::before { content: "Note: "; font-weight: bold; }
h1::first-letter { font-size: 2em; color: red; }
::selection { background: yellow; color: black; }
input::placeholder { color: lightgray; }

ボックスモデル (Box Model)

要素のサイズと要素間のスペースを制御します。

すべてのHTML要素は、長方形のボックスとして描画されます。ボックスモデルは、これらのボックスの寸法（コンテンツ、パディング、ボーダー、マージン）を定義します。

プロパティ説明値の例デフォルト値
width要素のコンテンツ領域の幅を設定します。100px, 50%, auto, max-content, min-content, fit-content(percentage|length)auto
height要素のコンテンツ領域の高さを設定します。100px, 50%, auto, max-content, min-content, fit-content(percentage|length)auto
paddingコンテンツ領域とボーダーの間のスペース（内側の余白）を設定します。padding-top, padding-right, padding-bottom, padding-left のショートハンド。10px (全方向)
10px 20px (上下、左右)
10px 20px 30px (上、左右、下)
10px 20px 30px 40px (上、右、下、左)		0
borderボーダーの幅、スタイル、色をまとめて設定します。border-width, border-style, border-color のショートハンド。1px solid black
2px dashed #ccc
medium dotted red		各個別プロパティに依存
border-widthボーダーの幅を設定します。thin, medium, thick または長さ (px, em) を指定できます。medium, 2px, 1px 2px 3px 4px (上右下左)medium
border-styleボーダーの線のスタイルを設定します。none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outsetnone
border-colorボーダーの色を設定します。black, #ff0000, rgba(0,0,255,0.5), transparentcurrentcolor
border-radiusボックスの角を丸めます。5px (全角)
10px 20px (左上/右下、右上/左下)
10px 20px 30px 40px (左上、右上、右下、左下)
50% (楕円/円)		0
marginボーダーの外側のスペース（外側の余白）を設定します。margin-top, margin-right, margin-bottom, margin-left のショートハンド。auto は中央揃えに使われることがあります。10px (全方向)
10px auto (上下10px、左右自動=中央揃え)
10px 20px 30px (上、左右、下)
10px 20px 30px 40px (上、右、下、左)		0
box-sizing要素の幅と高さの計算方法を定義します。
content-box: width/height はコンテンツ領域のみ (デフォルト)
border-box: width/height に padding と border を含める		content-box, border-boxcontent-box
overflow要素のボックス内にコンテンツが収まらない場合の表示方法を指定します。overflow-x と overflow-y で水平・垂直方向を個別に指定可能。visible (はみ出す), hidden (隠す), scroll (常にスクロールバー), auto (必要な場合のみスクロールバー), clip (隠す、スクロール不可)visible
min-width / max-width要素の最小幅 / 最大幅を設定します。レスポンシブデザインでよく使用されます。100px, 50%, none (max-widthのみ)0 (min-width), none (max-width)
min-height / max-height要素の最小高さ / 最大高さを設定します。100px, 50%, none (max-heightのみ)0 (min-height), none (max-height)
Tip: box-sizing: border-box; をグローバルに設定すると、レイアウト計算が直感的になりやすいです。
*,
*::before,
*::after { box-sizing: border-box;
}

レイアウト (Layout)

要素をページ上に配置する方法です。

要素の表示形式や配置方法を制御し、ページの構造を作り上げます。主要なレイアウト手法には、displayプロパティ、positionプロパティ、float、そしてモダンなFlexboxとGridがあります。

基本 (display, position, float)

プロパティ値説明
displayblockブロックレベル要素として表示。前後に改行が入り、幅と高さを指定可能。デフォルトで親要素の幅いっぱいに広がる。例: <div>, <p>, <h1>
inlineインライン要素として表示。前後に改行が入らず、テキストのように流れる。幅と高さは指定できず、内容はコンテンツに応じて決まる。例: <span>, <a>, <strong>
inline-blockインライン要素のように配置されるが、ブロックレベル要素のように幅と高さを指定できる。
none要素を表示せず、レイアウト上も存在しないものとして扱う。
flex要素をブロックレベルのフレックスコンテナとして定義する。 (Flexbox参照)
grid要素をブロックレベルのグリッドコンテナとして定義する。 (Grid参照)
positionstaticデフォルト値。通常のフローに従って配置される。top, right, bottom, left プロパティは影響しない。
relative通常のフローに従って配置されるが、top, right, bottom, left で相対的な位置調整が可能。元の位置にはスペースが残る。
absolute通常のフローから外れ、最も近い position: static 以外の祖先要素を基準に配置される。祖先がなければビューポート基準。top, right, bottom, left で位置を指定。
fixed通常のフローから外れ、ビューポート（ブラウザウィンドウ）を基準に固定位置に配置される。スクロールしても位置が変わらない。top, right, bottom, left で位置を指定。
sticky通常のフローに従うが、スクロール位置が指定された閾値（top などで指定）に達すると、fixed のように振る舞う。最も近いスクロール可能な祖先要素内で固定される。
top, right, bottom, left長さ (px, %, em), autoposition が static 以外の要素の位置を指定する。基準点は position の値による。
z-index整数, autoposition が static 以外の要素の重なり順（スタッキングコンテキスト）を指定する。数値が大きいほど手前に表示される。
floatleft, right, none要素を左または右に寄せて、後続のコンテンツを回り込ませる。主に画像とテキストの回り込みなどに使われたが、レイアウト目的ではFlexboxやGridが推奨される。
clearleft, right, both, none先行する float 要素の回り込みを解除する。指定した側の浮動要素の下に配置されるようにする。
注意: float は複雑なレイアウトには不向きで、clearfixハックが必要になることが多いです。現代的なレイアウトには Flexbox や Grid を使用しましょう。

Flexbox (Flexible Box Layout)

一次元のレイアウトモデルで、コンテナ内のアイテム間のスペース配分や整列を容易にします。

フレックスコンテナ (親要素) のプロパティ

プロパティ値説明
displayflex | inline-flex要素をフレックスコンテナにする。
flex-directionrow | row-reverse | column | column-reverse主軸の方向（アイテムが並ぶ方向）を指定。 (デフォルト: row)
flex-wrapnowrap | wrap | wrap-reverseアイテムを一行に収めるか、複数行に折り返すか指定。 (デフォルト: nowrap)
flex-flow<flex-direction> || <flex-wrap>flex-direction と flex-wrap のショートハンド。
justify-contentflex-start | flex-end | center | space-between | space-around | space-evenly主軸方向のアイテムの揃え方を指定。 (デフォルト: flex-start)
align-itemsstretch | flex-start | flex-end | center | baseline交差軸方向のアイテムの揃え方（単一行の場合）を指定。 (デフォルト: stretch)
align-contentstretch | flex-start | flex-end | center | space-between | space-around | space-evenly複数行の場合の行間の揃え方（交差軸方向）を指定。flex-wrap: wrap が必要。(デフォルト: stretch)
gap, row-gap, column-gap長さ (px, %, em)アイテム間の間隔を指定。gap は行と列の両方、row-gap は行間、column-gap は列間の間隔。

フレックスアイテム (子要素) のプロパティ

プロパティ値説明
order整数アイテムの表示順序を指定。数値が小さいほど先に表示される。(デフォルト: 0)
flex-grow数値 (非負)コンテナ内の余剰スペースに対するアイテムの伸長係数を指定。(デフォルト: 0)
flex-shrink数値 (非負)コンテナ内のスペース不足に対するアイテムの収縮係数を指定。(デフォルト: 1)
flex-basis長さ (px, %, em) | auto | contentスペースが配分される前のアイテムの初期サイズを指定。(デフォルト: auto)
flexnone | [<flex-grow> <flex-shrink>? || <flex-basis>]flex-grow, flex-shrink, flex-basis のショートハンド。推奨値: initial(0 1 auto), auto(1 1 auto), none(0 0 auto), <positive-number> (例: 1 は 1 1 0%)。(デフォルト: 0 1 auto)
align-selfauto | stretch | flex-start | flex-end | center | baseline個々のアイテムに対して交差軸方向の揃え方を指定。コンテナの align-items を上書き。(デフォルト: auto)
Flexboxはナビゲーションバー、カードレイアウト、中央揃えなど、多くのUIパターンで非常に役立ちます。

Grid Layout

二次元のレイアウトシステムで、行と列の両方で要素を配置できます。複雑なレイアウト構造に適しています。

グリッドコンテナ (親要素) のプロパティ

プロパティ値説明
displaygrid | inline-grid要素をグリッドコンテナにする。
grid-template-columnsトラックリスト (例: 100px 1fr 2fr, repeat(3, 1fr), minmax(100px, 1fr))グリッドの列のサイズと名前を定義。fr 単位は利用可能なスペースの比率。
grid-template-rowsトラックリスト (例: auto 1fr minmax(50px, auto))グリッドの行のサイズと名前を定義。
grid-template-areas文字列のリスト (例: "header header" "sidebar main" "footer footer")グリッドエリアに名前を付け、レイアウト構造を視覚的に定義。各文字列が一行を表し、セル名をスペースで区切る。. は空セル。
grid-templatenone | [<grid-template-rows> / <grid-template-columns>] | [<grid-template-areas> <grid-template-rows>? / <grid-template-columns>?]grid-template-rows, grid-template-columns, grid-template-areas のショートハンド。
grid-auto-columnsトラックサイズ (例: 100px, minmax(100px, auto))暗黙的に作成されるグリッド列（明示的に定義されていない列）のサイズを指定。
grid-auto-rowsトラックサイズ (例: auto, minmax(50px, 100px))暗黙的に作成されるグリッド行（明示的に定義されていない行）のサイズを指定。
grid-auto-flowrow | column | dense | row dense | column denseグリッドアイテムが自動配置される際のアルゴリズム（方向と、空きスペースを埋めるかどうか）を指定。(デフォルト: row)
justify-itemsstart | end | center | stretchグリッドアイテムをそのセル内で水平方向に揃える方法を指定。(デフォルト: stretch)
align-itemsstart | end | center | stretch | baselineグリッドアイテムをそのセル内で垂直方向に揃える方法を指定。(デフォルト: stretch)
place-items<align-items> <justify-items>?align-items と justify-items のショートハンド。
justify-contentstart | end | center | stretch | space-around | space-between | space-evenlyグリッドコンテナ内のグリッド全体の水平方向の揃え方を指定（グリッドの合計サイズがコンテナより小さい場合）。(デフォルト: start)
align-contentstart | end | center | stretch | space-around | space-between | space-evenlyグリッドコンテナ内のグリッド全体の垂直方向の揃え方を指定（グリッドの合計サイズがコンテナより小さい場合）。(デフォルト: start)
place-content<align-content> <justify-content>?align-content と justify-content のショートハンド。
gap, row-gap, column-gap長さ (px, %, em)グリッドトラック（行と列）間の間隔を指定。

グリッドアイテム (子要素) のプロパティ

プロパティ値説明
grid-column-startライン番号 | ライン名 | span n | autoアイテムが開始する垂直グリッドラインを指定。
grid-column-endライン番号 | ライン名 | span n | autoアイテムが終了する垂直グリッドラインを指定。
grid-row-startライン番号 | ライン名 | span n | autoアイテムが開始する水平グリッドラインを指定。
grid-row-endライン番号 | ライン名 | span n | autoアイテムが終了する水平グリッドラインを指定。
grid-column<start-line> / [<end-line> | span <number>]grid-column-start と grid-column-end のショートハンド。(例: 1 / 3, 2 / span 2)
grid-row<start-line> / [<end-line> | span <number>]grid-row-start と grid-row-end のショートハンド。
grid-areaエリア名 | <row-start> / <col-start> / <row-end> / <col-end>アイテムを名前付きグリッドエリアに配置するか、行/列の開始/終了ラインをまとめて指定するショートハンド。
justify-selfstart | end | center | stretch個々のグリッドアイテムをそのグリッドエリア内で水平方向に揃える方法を指定。コンテナの justify-items を上書き。(デフォルト: stretch)
align-selfstart | end | center | stretch | baseline個々のグリッドアイテムをそのグリッドエリア内で垂直方向に揃える方法を指定。コンテナの align-items を上書き。(デフォルト: stretch)
place-selfauto | <align-self> <justify-self>?align-self と justify-self のショートハンド。
Grid Layoutはページ全体のレイアウトや、複雑なコンポーネントの構造化に非常に強力です。

テキストスタイリング (Text Styling)

テキストの外観を制御します。

フォント、色、サイズ、行間、配置など、テキストに関する様々なスタイルを設定します。

プロパティ値の例説明
colorred, #ff0000, rgb(255,0,0), rgba(255,0,0,0.5), hsl(0, 100%, 50%), currentcolorテキストの色を設定します。
font-family"Helvetica Neue", Arial, sans-serif, "Times New Roman", Times, serif, monospaceフォントの種類を指定します。複数のフォントをカンマ区切りで指定し、左から順に使用可能なフォントが適用されます。最後に総称フォントファミリー（serif, sans-serif, monospaceなど）を指定するのが一般的です。
font-size16px, 1.2em, 12pt, 120%, medium, larger, smallerテキストのサイズを設定します。相対単位 (em, %, rem) は親要素やルート要素のサイズに基づきます。
font-weightnormal (400), bold (700), lighter, bolder, 100–900フォントの太さを設定します。
font-stylenormal, italic, obliqueフォントのスタイル（斜体など）を設定します。
font-variantnormal, small-caps小型大文字などのフォント変形を指定します。
fontitalic small-caps bold 16px/1.5 "Helvetica", Arial, sans-seriffont-style, font-variant, font-weight, font-size/line-height, font-family をまとめて指定するショートハンド。font-size と font-family は必須です。
line-heightnormal, 1.5 (単位なし), 24px, 150%行の高さを設定します。単位なしの値は font-size に対する倍率となり、継承される際に再計算されるため推奨されます。
text-alignleft, right, center, justify, start, endブロック要素内のインラインコンテンツ（テキストなど）の水平方向の配置を設定します。justify は両端揃え。start/end は書字方向に基づきます。
vertical-alignbaseline, top, middle, bottom, text-top, text-bottom, sub, super, 長さ, %インライン要素やテーブルセル要素の垂直方向の配置を設定します。
text-decorationnone | [underline || overline || line-through] | [ || ]テキストの下線、上線、取り消し線とそのスタイル、色を設定します。例: underline dotted red
text-transformnone, capitalize, uppercase, lowercaseテキストの大文字・小文字を変換します。capitalize は各単語の先頭を大文字に。
text-indent長さ (px, em), %ブロック要素の最初の行のインデント（字下げ）を設定します。
letter-spacingnormal, 長さ (px, em)文字間のスペースを調整します。
word-spacingnormal, 長さ (px, em), %単語間のスペースを調整します。
white-spacenormal, nowrap, pre, pre-wrap, pre-line, break-spaces要素内の空白文字（スペース、タブ、改行）の扱い方を制御します。
normal: 空白をまとめ、行末で折り返す
nowrap: 空白をまとめ、折り返さない
pre: 空白を保持し、折り返さない (<pre>タグと同様)
pre-wrap: 空白を保持し、折り返す
pre-line: 空白をまとめるが、改行は保持し、折り返す
break-spaces: pre-wrap に似ているが、行末のスペースでも改行する
word-breaknormal, break-all, keep-all, break-word (非推奨, overflow-wrap: break-word を使用)単語の途中での改行ルールを指定します。主にCJK言語（中国語、日本語、韓国語）や長いURLの扱いに影響します。
overflow-wrap (旧名: word-wrap)normal, break-word, anywhereボックスからはみ出ることを防ぐために、通常は分割されない単語（長いURLなど）の途中で改行を許可するかどうかを指定します。break-word は単語の途中で改行します。
text-shadownone | [ ? ? ,]* [ ? ?]テキストに影を付けます。複数の影をカンマ区切りで指定できます。(例: 1px 1px 2px black, 0 0 1em blue)

背景とボーダー (Backgrounds & Borders)

要素の背景と境界線のスタイルを設定します。

要素の見た目を豊かにするために、背景色、背景画像、グラデーション、そして境界線のスタイルを細かく設定できます。

背景 (Background)

プロパティ値の例説明
background-colortransparent, lightblue, #f0f0f0, rgba(0, 128, 0, 0.5)要素の背景色を設定します。デフォルトは transparent。
background-imagenone, url("image.jpg"), linear-gradient(red, yellow), radial-gradient(circle, white, black)要素の背景画像またはグラデーションを設定します。複数指定可能（カンマ区切り）。
background-repeatrepeat (縦横), repeat-x (横のみ), repeat-y (縦のみ), no-repeat, space (均等配置), round (引き伸ばし/縮小)背景画像の繰り返し方法を指定します。複数画像に対してカンマ区切りで指定可能。
background-positionleft top, center center, right bottom, 50% 50%, 10px 20px背景画像の初期位置を指定します。キーワード、パーセンテージ、長さで指定可能。複数画像に対してカンマ区切りで指定可能。
background-attachmentscroll (要素と共にスクロール), fixed (ビューポートに固定), local (要素の内容と共にスクロール)背景画像を要素のスクロールに追従させるか、ビューポートに固定するかを指定します。
background-sizeauto, cover (全体を覆う), contain (全体が見えるように収める), 長さ (100px 50px), % (50% auto)背景画像のサイズを指定します。複数画像に対してカンマ区切りで指定可能。
background-originpadding-box (パディング領域基準), border-box (ボーダー領域基準), content-box (コンテンツ領域基準)background-position の基準となる領域を指定します。(デフォルト: padding-box)
background-clipborder-box (ボーダーまで描画), padding-box (パディングまで描画), content-box (コンテンツ領域のみ描画), text (テキストの形状で切り抜く、ベンダープレフィックスが必要な場合あり)背景が描画される領域を指定します。(デフォルト: border-box)
background例: lightblue url("img.png") no-repeat center center / cover scroll padding-box content-box背景関連のプロパティをまとめて指定するショートハンド。任意の順序で指定可能ですが、background-size は background-position の後にスラッシュ区切りで指定する必要があります。

ボーダー (Border)

基本的なボーダープロパティ (border, border-width, border-style, border-color, border-radius) については、「ボックスモデル」セクションを参照してください。

プロパティ値の例説明
border-top, border-right, border-bottom, border-left1px solid black特定の辺のボーダーの幅、スタイル、色をまとめて設定します。
border-top-width, etc.2px特定の辺のボーダーの幅を設定します。
border-top-style, etc.dashed特定の辺のボーダーのスタイルを設定します。
border-top-color, etc.red特定の辺のボーダーの色を設定します。
border-top-left-radius, etc.10px, 50%特定の角の丸みを設定します。
border-image-sourcenone, url("border.png")ボーダーとして使用する画像を指定します。
border-image-slice数値 | % [fill?]ボーダー画像を9つの領域に分割するための内側のオフセットを指定します。fill を付けると中央部分も背景として描画されます。
border-image-width数値 | % | auto | 長さボーダー画像の幅を指定します。
border-image-outset数値 | 長さボーダー画像をボーダーボックスの外側にはみ出させる量を指定します。
border-image-repeatstretch | repeat | round | spaceボーダー画像の辺の部分の繰り返し方法を指定します（水平方向と垂直方向を個別に指定可能）。
border-image例: url("border.png") 30 roundボーダー画像関連のプロパティをまとめて指定するショートハンド。
box-shadownone | [inset? ? ? ? ,]* [inset? ? ? ?]要素のフレーム（ボーダーの外側または内側）に影を付けます。inset で内側の影になります。複数の影をカンマ区切りで指定可能。(例: 5px 5px 10px rgba(0,0,0,0.5), inset 0 0 5px blue)

変形とトランジション (Transforms & Transitions)

要素を視覚的に変形させたり、スタイルの変化を滑らかにアニメーションさせたりします。

transform で要素を移動、回転、拡大縮小、傾斜させ、transition でこれらの変化や他のスタイルの変更に時間的な効果を加えることができます。

変形 (Transform)

プロパティ値（関数）説明
transformnone変形を適用しません。
translate(tx [, ty])
translateX(tx)
translateY(ty)
translateZ(tz)
translate3d(tx, ty, tz)		要素を水平方向 (tx)、垂直方向 (ty)、Z軸方向 (tz) に移動します。長さまたはパーセンテージで指定。
scale(sx [, sy])
scaleX(sx)
scaleY(sy)
scaleZ(sz)
scale3d(sx, sy, sz)		要素を水平方向 (sx)、垂直方向 (sy)、Z軸方向 (sz) に拡大縮小します。数値で指定 (1が等倍)。
rotate(angle)
rotateX(angle)
rotateY(angle)
rotateZ(angle)
rotate3d(x, y, z, angle)		要素を2D（Z軸周り）または指定された軸周りに回転します。角度 (deg, rad, turn) で指定。rotate3d は回転軸ベクトル (x, y, z) と角度を指定。
skew(ax [, ay])
skewX(ax)
skewY(ay)		要素を水平方向 (ax) および/または垂直方向 (ay) に傾斜させます。角度で指定。
matrix(a, b, c, d, tx, ty)2D変形を6つの値で指定する行列。
matrix3d(...)3D変形を16個の値で指定する4×4行列。
perspective(length)3D変形に遠近感を与えます。通常、親要素の perspective プロパティと組み合わせて使われますが、transform 内で個別要素にも指定可能。
(複数の関数)translateX(10px) rotate(45deg) scale(1.2)複数の変形関数をスペース区切りで指定できます。適用される順序は右から左です。
transform-originx-offset y-offset z-offset? (キーワード, 長さ, %)変形の基点（中心点）を指定します。デフォルトは 50% 50% 0 (要素の中心)。(例: left top, 0 0, 20px 50%)
transform-styleflat | preserve-3d子要素が3D空間内でどのように配置されるかを指定します。preserve-3d は子要素が親の3D空間を共有することを意味します。
perspectivenone | 長さ子要素の3D変形に遠近感を与えるための視点からの距離を指定します。これは変形される要素の親要素に設定します。
perspective-originx-offset y-offset? (キーワード, 長さ, %)perspective の消失点の位置を指定します。親要素に設定します。(デフォルト: 50% 50%)
backface-visibilityvisible | hidden要素の裏面（3D変形で裏返った場合）を表示するかどうかを指定します。(デフォルト: visible)

トランジション (Transition)

プロパティ値の例説明
transition-propertynone | all | プロパティ名 (width, color, transform) [, …]トランジション効果を適用するCSSプロパティを指定します。all ですべての適用可能なプロパティが対象になります。(デフォルト: all)
transition-duration時間 (0s, 250ms, 1.5s) [, …]トランジションが完了するまでの時間を指定します。(デフォルト: 0s)
transition-timing-functionease, linear, ease-in, ease-out, ease-in-out, steps(n, start|end), cubic-bezier(n,n,n,n) [, …]トランジションの速度曲線（イージング関数）を指定します。(デフォルト: ease)
transition-delay時間 (0s, 1s, -500ms) [, …]プロパティが変更されてからトランジションが開始されるまでの遅延時間を指定します。(デフォルト: 0s)
transition[property duration timing-function delay] [, …] 例: background-color 0.5s ease-in-out, opacity 0.3s linear 0.1s上記4つのトランジション関連プロパティをまとめて指定するショートハンド。複数のプロパティに異なるトランジションを設定する場合はカンマ区切りで記述します。
インタラクション: トランジションは、:hover や :focus、JavaScriptによるクラスの付け外しと組み合わせることで、スムーズなUIインタラクションを実現します。
.button { background-color: blue; color: white; padding: 10px 20px; border: none; transition: background-color 0.3s ease, transform 0.2s ease-out; /* 変化を滑らかに */
}
.button:hover { background-color: darkblue; transform: translateY(-2px); /* ホバー時に少し上に移動 */
}

アニメーション (Animation)

キーフレームを使って複雑なアニメーションを作成します。

@keyframes ルールでアニメーションの途中経過を定義し、animation プロパティで要素にそのアニメーションを適用します。

キーフレーム定義 (@keyframes)

@keyframes ルールを使って、アニメーションの名前と、そのアニメーション中の特定の時点（キーフレーム）でのスタイルを定義します。

@keyframes slidein { from { /* 0% と同じ */ transform: translateX(-100%); opacity: 0; } 75% { transform: translateX(10px); opacity: 1; } to { /* 100% と同じ */ transform: translateX(0); opacity: 1; }
}
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }
}

アニメーションプロパティ

プロパティ値の例説明
animation-namenone | キーフレーム名 (例: slidein) [, …]適用する @keyframes ルールの名前を指定します。
animation-duration時間 (0s, 3s, 500ms) [, …]アニメーション1サイクルの所要時間を指定します。(デフォルト: 0s)
animation-timing-functionease, linear, steps(n, start|end), cubic-bezier(...) [, …]アニメーションの速度曲線を指定します。(デフォルト: ease)
animation-delay時間 (0s, 1s, -0.5s) [, …]要素が読み込まれてからアニメーションが開始されるまでの遅延時間を指定します。(デフォルト: 0s)
animation-iteration-count数値 (1, 3) | infinite [, …]アニメーションを繰り返す回数を指定します。infinite で無限に繰り返します。(デフォルト: 1)
animation-directionnormal | reverse | alternate | alternate-reverse [, …]アニメーションを再生する方向を指定します。
normal: 順方向
reverse: 逆方向
alternate: 順方向と逆方向を交互に
alternate-reverse: 逆方向と順方向を交互に。(デフォルト: normal)
animation-fill-modenone | forwards | backwards | both [, …]アニメーションが再生されていない時（開始前や終了後）に要素にどのスタイルを適用するかを指定します。
none: スタイルを適用しない
forwards: 終了時のスタイルを保持
backwards: 開始前の遅延中に開始時のスタイルを適用
both: forwards と backwards 両方の効果。(デフォルト: none)
animation-play-staterunning | paused [, …]アニメーションを再生中か一時停止中かを指定します。(デフォルト: running)
animation[name duration timing-function delay iteration-count direction fill-mode play-state] [, …] 例: slidein 3s ease-in-out 1s infinite alternate forwards上記のアニメーション関連プロパティをまとめて指定するショートハンド。

アニメーションはユーザーの注意を引きつけたり、状態変化を分かりやすく伝えたりするのに効果的ですが、過度な使用はパフォーマンスに影響を与えたり、ユーザー体験を損ねたりする可能性があるため注意が必要です。特に transform と opacity を中心にアニメーションさせると、パフォーマンスが良い傾向があります。

レスポンシブデザイン (Responsive Design)

様々なデバイスや画面サイズに適応するレイアウトを作成します。

メディアクエリ (@media) を使用して、特定の条件下（画面幅、画面の向き、解像度など）でのみ適用されるCSSルールを定義します。

メディアクエリ (@media)

@media ルールは、特定のメディアタイプやメディア特性に基づいてスタイルを適用します。

/* 基本的な構文 */
@media media-type and (media-feature) { /* 条件に一致した場合に適用されるCSSルール */ .selector { property: value; }
}
/* 例1: 画面幅が600px以下の場合 */
@media (max-width: 600px) { nav ul { flex-direction: column; /* ナビゲーションを縦並びに */ } .main-content { width: 100%; /* メインコンテンツを全幅に */ } .sidebar { display: none; /* サイドバーを非表示に */ }
}
/* 例2: 画面幅が768px以上の場合 (min-widthは「以上」) */
@media (min-width: 768px) { .container { max-width: 720px; /* コンテナの最大幅を設定 */ margin-left: auto; margin-right: auto; }
}
/* 例3: 画面幅が992px以上、1200px未満の場合 */
@media (min-width: 992px) and (max-width: 1199.98px) { body { font-size: 18px; }
}
/* 例4: 印刷時 (メディアタイプ指定) */
@media print { body { font-family: serif; color: black; } a::after { content: " (" attr(href) ")"; /* リンクのURLを表示 */ } .no-print { display: none; /* 印刷しない要素を非表示 */ }
}
/* 例5: 画面の向きが横向きの場合 */
@media (orientation: landscape) { .photo-gallery { grid-template-columns: repeat(4, 1fr); /* 横向きなら列数を増やす */ }
}
/* 例6: 高解像度ディスプレイ (Retinaなど) */
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) { .logo { background-image: url('logo@2x.png'); background-size: contain; }
}

主要なメディア特性 (Media Features)

特性値の例説明
width (min-width, max-width)長さ (px, em)ビューポートの幅。レスポンシブデザインで最もよく使われるブレークポイント設定。
height (min-height, max-height)長さ (px, em)ビューポートの高さ。
aspect-ratio (min-aspect-ratio, max-aspect-ratio)比率 (例: 16/9)ビューポートの幅と高さの比率。
orientationportrait (縦長) | landscape (横長)ビューポートの向き。
resolution (min-resolution, max-resolution)解像度 (dpi, dpcm, dppx)出力デバイスの解像度（ピクセル密度）。高解像度ディスプレイ向けスタイル指定に使用。
hovernone | hoverプライマリ入力デバイスが要素上にホバーできるか。タッチデバイス (none) とマウス操作デバイス (hover) の区別に利用。
pointernone | coarse | fineプライマリ入力デバイスのポインティング精度。coarse はタッチなど、fine はマウスなど。
prefers-color-schemeno-preference | light | darkユーザーがOSで設定したライトモード/ダークモードの優先設定。ダークモード対応に使用。
prefers-reduced-motionno-preference | reduceユーザーがOSでアニメーションやモーションの削減を要求しているか。過度な動きを抑えるアクセシビリティ対応に使用。

ビューポートメタタグ: レスポンシブデザインを正しく機能させるためには、HTMLの <head> 内にビューポートメタタグを設定することが重要です。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width はページの幅をデバイスの幅に合わせ、initial-scale=1.0 は初期ズームレベルを1に設定します。

モバイルファースト vs デスクトップファースト:
– モバイルファースト: まずモバイル向けのスタイルを基本とし、min-width を使って画面幅が広がるにつれてスタイルを追加・変更していくアプローチ。多くの場合推奨されます。
– デスクトップファースト: まずデスクトップ向けのスタイルを基本とし、max-width を使って画面幅が狭まるにつれてスタイルを調整していくアプローチ。

その他 (Miscellaneous)

上記カテゴリに含まれないが、よく使われる便利なプロパティです。

プロパティ値説明
opacity数値 (0.0 – 1.0)要素の不透明度を設定します。0.0で完全に透明、1.0で完全に不透明。visibility: hidden と異なり、レイアウト上のスペースは占有したままです。
visibilityvisible | hidden | collapse要素を表示するかどうかを指定します。
hidden: 非表示にするが、レイアウト上のスペースは残る。
collapse: テーブルの行や列に使われ、hidden に似ているが、スペースも詰める場合がある（ブラウザ依存）。(デフォルト: visible)
cursorauto, default, none, pointer, wait, text, move, not-allowed, grab, grabbing, help, crosshair, zoom-in, zoom-out, url(...), …要素上にマウスカーソルがある時の形状を指定します。
outline[outline-color || outline-style || outline-width] (例: red solid 2px)要素のボーダーの外側に描画される輪郭線。フォーカス表示などによく使われます。border と異なり、レイアウトに影響を与えません。
outline-offset長さ (px, em)outline を要素の境界線からどれだけ離して描画するかを指定します。
filternone | 関数リスト (例: blur(5px), brightness(0.8), contrast(200%), grayscale(100%), hue-rotate(90deg), invert(75%), opacity(50%), saturate(4), sepia(60%), drop-shadow(...), url(...))要素（画像や背景など）にぼかし、色調変更、ドロップシャドウなどのグラフィカルな効果を適用します。
backdrop-filternone | 関数リスト (filter と同様)要素の背後にある領域にグラフィカルな効果（すりガラス効果など）を適用します。要素自体に背景色や透明度が必要な場合があります。
clip-pathnone | 基本シェイプ (circle(), ellipse(), polygon(), inset()) | url(...)要素の表示領域を指定した形状で切り抜きます（クリッピング）。
mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, mask-composite, mask(各種)要素の表示領域を画像やグラデーションを使ってマスキングします。clip-path より複雑な形状やグラデーションマスクが可能です。mask はショートハンド。
user-selectauto | none | text | allユーザーが要素内のテキストを選択できるかどうかを制御します。none で選択不可にします。
pointer-eventsauto | none | その他SVG用要素がマウスイベント（クリック、ホバーなど）のターゲットになるかどうかを制御します。none を指定すると、要素はイベントを無視し、その下にある要素がイベントを受け取ります。
scroll-behaviorauto | smoothページ内リンク (#hash) や JavaScript によるスクロール操作が、瞬時に移動するかスムーズに行われるかを指定します。通常 <html> 要素に適用します。
accent-colorauto | 色一部のフォームコントロール（チェックボックス、ラジオボタン、プログレスバーなど）のアクセントカラー（強調色）を、OSのデフォルトではなく指定した色で簡単に変更できます。
object-fitfill | contain | cover | none | scale-down置換要素（<img> や <video> など）の内容が、指定された幅と高さにどのようにフィットするかを指定します。background-size に似ています。(デフォルト: fill)
object-position位置 (50% 50%, left top, 10px 20px)object-fit でリサイズされた置換要素の内容の位置を指定します。background-position に似ています。(デフォルト: 50% 50%)
appearancenone | auto | その他特定UI要素要素がプラットフォーム固有のスタイルで表示されるのを無効にし、より自由にスタイルを適用できるようにします。フォーム要素のカスタマイズなどで使われます。（-webkit-appearance, -moz-appearance が必要な場合あり）
resizenone | both | horizontal | vertical | block | inlineユーザーが要素のサイズを変更できるかどうか、またどの方向に変更できるかを指定します。通常 textarea などに適用されます。overflow が visible 以外である必要があります。(デフォルト: none)

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

Markdown記法 チートシート

次の記事

gitコマンド チートシート