2024年11月10日
これでOK！フレックスボックスとグリッドの使い分け
2025年11月29日 / WEBデザインTIPS
【逆引き・検索OK】HTML / CSS 一覧早見表（タグ・プロパティ辞典、リファレンス）
※この記事は 6 分程度でお読みいただけます。
代表的なHTMLタグ、CSSプロパティをまとめました（使用頻度が低いもの、非推奨、実験的なものは省いています）。並べ替えやフリーワード検索も可能です。コーディングの学習に、忘れたときの見直し用に、ご自由にお使いください！
タグ・プロパティ名からは、WEB開発者向けサイト「MDN」の詳細ページへリンクしています。詳しい指定方法などをお知りになりたい方は「MDN」にてご確認ください。
目次
HTMLタグ一覧早見表
「※」マークのついたタグは、頻繁に使う重要なタグです。
フリーワード検索で「※」を入力すると、重要なタグだけ表示されます。
| HTMLタグ | 分類 | 終了 タグ |
初期display値 | 主な属性 | 概要 |
|---|---|---|---|---|---|
| html※ | メイン | あり | block | lang | HTML文書を定義 |
| head※ | メタ | あり | none | - | ページタイトルや外部CSSファイルの読み込みなど、ページのメタ情報（画面には表示されない内容）を含むエリア |
| meta※ | メタ | なし | none | charset name content |
文字コードやディスクリプション、OGPなどの、ページのメタ情報 |
| title※ | メタ | あり | none | - | ページタイトル（ブラウザのタブや検索結果で表示） |
| link※ | メタ | なし | none | href rel type media |
CSSファイルやファビコンなど、関連する外部ファイルを指定 |
| style※ | メタ | あり | none | media | 内部CSSを記述するエリア |
| base | メタ | なし | none | href target |
相対パスの基点のURLを指定（指定しない場合は現在のURLを参照） |
| body※ | 区分 | あり | block | - | ページのコンテンツ（画面に表示される内容）を記述するエリア |
| header※ | 区分 | あり | block | - | ナビゲーションやロゴなど、ヘッダー情報を含むエリア |
| footer※ | 区分 | あり | block | - | コピーライトや著作者情報など、フッター情報を含むエリア（セクションごとの著作者情報としても使える） |
| nav※ | 区分 | あり | block | - | グローバルメニューなど、主要なナビゲーション情報を含むエリア |
| main※ | 区分 | あり | block | - | ページの主要な内容を含むエリア |
| article※ | 区分 | あり | block | - | 記事など、ページで完結するコンテンツのエリア |
| section※ | 区分 | あり | block | - | ページ内で内容ごとのセクションを分ける区切り（section内には見出しタグが必要） |
| aside | 区分 | あり | block | - | ページのメインコンテンツと間接的に関係する補足情報エリア |
| address | 区分 | あり | block | - | 連絡先情報を含むエリア |
| search | 区分 | あり | block | - | 文書やWEBサイト内の検索フォームを含むエリア |
| hgroup | 区分 | あり | block | - | 見出し＋導入文、など、グループ化された見出しのエリア |
| h1～h6※ | テキスト・ ブロック |
あり | block | - | 見出し（h1が最上位、h6が最下位。必ず段階的に指定） |
| div※ | テキスト・ ブロック |
あり | block | - | 汎用的なブロック要素 |
| p※ | テキスト・ ブロック |
あり | block | - | テキストの段落 |
| ul※ | テキスト・ ブロック |
あり | block | - | 項目の順序に意味合いの無いリスト |
| ol※ | テキスト・ ブロック |
あり | block | - | 項目の順序に意味合いのあるリスト |
| li※ | テキスト・ ブロック |
あり | list-item | - | リストの項目（ul / ol 内で使用） |
| dl※ | テキスト・ ブロック |
あり | block | - | 説明リスト（用語＋説明、の2つセットのリスト） |
| dt※ | テキスト・ ブロック |
あり | block | - | 説明リストの用語（dl内で使用） |
| dd※ | テキスト・ ブロック |
あり | block | - | 説明リストの説明（dl内で使用） |
| figure※ | テキスト・ ブロック |
あり | block | - | 写真や図、グラフなど、自己完結したコンテンツ |
| figcaption※ | テキスト・ ブロック |
あり | block | - | figure内にあるコンテンツのキャプション（figure内で使用） |
| blockquote※ | テキスト・ ブロック |
あり | block | - | 引用のブロック（citeで引用元情報を記述可） |
| pre | テキスト・ ブロック |
あり | block | - | 整形済みテキスト（ソースコードの改行やスペースがそのまま表示される） |
| hr※ | テキスト・ ブロック |
なし | block | - | テーマの区切り（区切り線） |
| span※ | インライン | あり | inline | - | 汎用的なインライン要素 |
| a※ | インライン | あり | inline | href target rel |
リンク（ページ、ファイル、メールアドレス、電話番号なども指定可） |
| br※ | インライン | なし | inline | - | テキスト内での改行 |
| strong※ | インライン | あり | inline | - | 重要性や緊急性が高いテキスト要素 |
| mark | インライン | あり | inline | - | 文章内で目立たせたいテキスト要素 |
| em | インライン | あり | inline | - | 強調したいテキスト要素（emを入れ子にすることで、より強い強調ができる） |
| i | インライン | あり | inline | - | 他とは区別されるテキスト要素（一般的にはイタリック書体で表示されることが多い） |
| sup | インライン | あり | inline | - | 上付き文字 |
| sub | インライン | あり | inline | - | 下付き文字 |
| small※ | インライン | あり | inline | - | 著作権表示や法的表記のような注釈（コピーライトで使う人もいる） |
| cite※ | インライン | あり | inline | - | 引用元情報（blockquote内で使用） |
| q | インライン | あり | inline | cite | インラインの引用（属性citeで引用元情報を記述可） |
| s | インライン | あり | inline | - | 取り消したテキスト要素（取り消し線） |
| del | インライン | あり | inline | - | 取り消したテキスト要素（insで追加したテキストを指定可） |
| ins | インライン | あり | inline | - | 追加したテキスト要素（delで削除したテキストを指定可） |
| ruby | インライン | あり | ruby | - | ルビ（注釈） |
| rt | インライン | あり | ruby-text | - | ルビとして表示するテキスト（ruby内で使用） |
| rp | インライン | あり | inline | - | ブラウザがルビ表示に対応していないときに表示（ruby内で使用、ルビ前後の括弧を表記することが多い） |
| time | インライン | あり | inline | datetime | 日時情報（datetime属性で検索エンジンなどに正しい情報を伝えられる） |
| img※ | 画像・ メディア |
なし | inline | src alt |
画像コンテンツ |
| svg | 画像・ メディア |
あり | inline | - | SVG画像コンテンツ（外部ファイルではなく、ソースコードにパスを直接記述する際に使用。詳しくはこちら） |
| map | 画像・ メディア |
あり | inline | name | 画像内の特定個所にリンクを設定（areaと組み合わせて使用） |
| area | 画像・ メディア |
なし | inline | href alt shape coords |
画像内の特定個所にリンクを設定（mapと組み合わせて使用） |
| video | 画像・ メディア |
あり | inline | src controls autoplay loop muted |
動画コンテンツ（sourceでファイルを指定） |
| audio | 画像・ メディア |
あり | inline | src controls autoplay loop muted |
音声コンテンツ |
| picture | 画像・ メディア |
あり | inline | - | 画面サイズなど閲覧環境で切り替える画像コンテンツ（sourceでファイルを指定） |
| object | 画像・ メディア |
あり | inline | type data |
プラグインなどの埋め込みコンテンツ |
| source | 画像・ メディア |
なし | none | src type media |
メディアファイルを指定（picture、audio、video内で使用） |
| table※ | 表 | あり | table | - | 表（表の要素全体） |
| caption | 表 | あり | table-caption | - | 表のキャプション（table内で使用） |
| thead※ | 表 | あり | table-header-group | - | 表の見出しエリア（table内で使用） |
| tfoot | 表 | あり | table-footer-group | - | 表の情報エリア（table内で使用） |
| tbody※ | 表 | あり | table-row-group | - | 表のメイン内容エリア（table内で使用） |
| tr※ | 表 | あり | table-row | - | 表の行（table内で使用） |
| th※ | 表 | あり | table-cell | colspan rowspan scope |
表の見出しセル（tr内で使用） |
| td※ | 表 | あり | table-cell | colspan rowspan |
表の通常セル（tr内で使用） |
| form※ | フォーム | あり | block | action method |
フォーム（一連のフォームの要素全体） |
| input※ | フォーム | なし | inline-block | type name value required checked |
テキスト入力欄、ラジオボタン、チェックボックス、送信・リセットボタンなど（form内で使用） |
| textarea※ | フォーム | あり | inline-block | name | 複数行入力欄（form内で使用） |
| select※ | フォーム | あり | inline-block | name required |
選択式メニュー（form内で使用） |
| option※ | フォーム | あり | block | value selected |
選択式メニューの選択項目（select内などで使用） |
| optgroup | フォーム | あり | block | label | 選択式メニューの選択項目のグループ化（select内などで使用） |
| label※ | フォーム | あり | inline | for | 入力欄などのキャプション（forとidで対象の入力欄を紐づけ。labelでキャプションと入力欄をまとめて囲っても可） |
| button※ | フォーム | あり | inline-block | type | 送信、リセットボタンなどの、操作可能な要素 |
| iframe※ | 埋め込み | あり | inline | src title |
他のページの読み込み、表示（Google Maps などの埋め込みコンテンツで使用） |
| details | インタラク ティブ |
あり | block | - | 詳細折りたたみ要素 |
| summary | インタラク ティブ |
あり | block | - | 詳細折りたたみ要素の要約（details内で使用。初期状態で表示する要素） |
| dialog | インタラク ティブ |
あり | none / block | open closedby |
非表示可能な要素（dialog内のbuttonで非表示にできる） |
| script※ | スクリプト | あり | none | src | JavaScriptファイルの読み込み、またはJavaScriptのコードを記述 |
| noscript | スクリプト | あり | none | - | ブラウザでJavaScriptを無効にしているときに表示 |
| canvas | スクリプト | あり | inline | - | グラフィックやアニメーションを描画 |
分類は、公式のものではなく、用途が分かりやすいようにジャンル分けしたものです。初期display値は、Google Chrome（バージョン 142）のユーザーエージェントスタイルシートの情報を元にしています。
CSSプロパティ一覧早見表
「※」マークのついたプロパティは、頻繁に使う重要なプロパティです。
フリーワード検索で「※」を入力すると、重要なプロパティだけ表示されます。
| CSSプロパティ | 分類 | 初期値 | 子への 継承 |
概要 |
|---|---|---|---|---|
| display※ | ブロック | HTMLタグに よって変わる |
しない | 要素の種類（ブロック要素、インライン要素、グリッド、フレックスボックス、非表示など） |
| visibility※ | ブロック | visible | する | 要素の表示、非表示（display:noneと違い、要素があった領域はそのまま残る） |
| width※ | ブロック | auto | しない | 要素の幅 |
| height※ | ブロック | auto | しない | 要素の高さ |
| max-width※ | ブロック | none | しない | 要素の最大幅 |
| max-height※ | ブロック | none | しない | 要素の最大高さ |
| min-width※ | ブロック | auto | しない | 要素の最小幅 |
| min-height※ | ブロック | auto | しない | 要素の最小高さ |
| margin※ | ブロック | 個別の初期値 | しない | 要素のマージンの一括指定（要素の外側のスペース） |
| margin-left※ | ブロック | 0 | しない | 要素の左のマージン |
| margin-right※ | ブロック | 0 | しない | 要素の右のマージン |
| margin-top※ | ブロック | 0 | しない | 要素の上のマージン |
| margin-bottom※ | ブロック | 0 | しない | 要素の下のマージン |
| padding※ | ブロック | 個別の初期値 | しない | 要素のパディングの一括指定（要素の内側の余白） |
| padding-left※ | ブロック | 0 | しない | 要素の左のパディング |
| padding-right※ | ブロック | 0 | しない | 要素の右のパディング |
| padding-top※ | ブロック | 0 | しない | 要素の上のパディング |
| padding-bottom※ | ブロック | 0 | しない | 要素の下のパディング |
| border-radius※ | ブロック | 個別の初期値 | しない | 角丸のサイズの一括指定（正円や、左右角丸の長方形などは100vhを指定すると便利） |
| border-top-left-radius※ | ブロック | 0 | しない | 左上の角丸のサイズ |
| border-top-right-radius※ | ブロック | 0 | しない | 右上の角丸のサイズ |
| border-bottom-left-radius※ | ブロック | 0 | しない | 左下の角丸のサイズ |
| border-bottom-right-radius※ | ブロック | 0 | しない | 右下の角丸のサイズ |
| aspect-ratio※ | ブロック | auto | しない | 要素の縦横比（画像に指定する場合はobject-fitを忘れずに指定） |
| backdrop-filter※ | ブロック | none | しない | 要素の背後にある領域のぼかしなどの効果 |
| z-index※ | ブロック | auto | しない | 要素の重なり順（数値が大きいほど前面に表示。positionが初期値のstaticだと効かない） |
| position※ | ブロック | static | しない | 要素の配置方法（ブラウザ上部への固定表示、親要素内の指定の位置への固定表示など。absoluteを指定する際は、親要素にstatic以外の何かしらの指定が必須） |
| left※ | ブロック | auto | しない | 要素の左からの位置（position指定によって基準の位置が変化） |
| right※ | ブロック | auto | しない | 要素の右からの位置（position指定によって基準の位置が変化） |
| top※ | ブロック | auto | しない | 要素の上からの位置（position指定によって基準の位置が変化） |
| bottom※ | ブロック | auto | しない | 要素の下からの位置（position指定によって基準の位置が変化） |
| inset | ブロック | 個別の初期値 | しない | 要素のtop、bottom、left、rightの一括指定 |
| overflow※ | ブロック | visible | しない | 要素からはみ出したコンテンツの表示（非表示、スクロールで表示など） |
| overflow-x※ | ブロック | visible | しない | 要素からはみ出したコンテンツの横方向の表示 |
| overflow-y※ | ブロック | visible | しない | 要素からはみ出したコンテンツの縦方向の表示 |
| box-shadow※ | ブロック | none | しない | 要素の影（文字要素はtext-shadowで指定。透過画像はfilterを使用すると透過部分を除いた影を指定可） |
| box-sizing※ | ブロック | content-box | しない | 要素のサイズの計算方法（パディング、マージン、罫線を含めるかどうか。border-boxが使いやすい） |
| float | ブロック | none | しない | 要素の回り込み設定（画像のテキスト左右への回り込みなど） |
| clear | ブロック | none | しない | 回り込みを指定した要素の回り込み解除（左右別に指定可） |
| opacity※ | ブロック | 1 | しない | 要素の透明度 |
| mix-blend-mode※ | ブロック | normal | しない | 重なりあった要素の色の混ぜ方（オーバーレイ、乗算、ソフトライト、など。背面にある要素への混ぜ方） |
| filter※ | ブロック | none | しない | 要素の視覚効果（ぼかし、彩度、明度など。透過画像は透過部分を除いた影を指定可） |
| transform※ | ブロック | none | しない | 要素の変形（拡大縮小、回転、移動など。周囲の要素の配置には影響を与えない） |
| transform-origin | ブロック | 50% 50% 0 | しない | 要素の変形の基準位置 |
| scale | ブロック | none | しない | 要素の拡大縮小（周囲の要素の配置には影響を与えない。transformでも指定可） |
| zoom | ブロック | 1 | しない | 要素の拡大縮小（周囲の要素の配置には影響を与える） |
| rotate | ブロック | none | しない | 要素の回転（transformでも指定可） |
| translate | ブロック | none | しない | 要素の移動（transformでも指定可） |
| resize | ブロック | none | しない | 要素をユーザーの操作で拡大縮小させるかどうか |
| border※ | 罫線 | 個別の初期値 | しない | 罫線の一括指定 |
| border-width※ | 罫線 | 個別の初期値 | しない | 罫線の太さの一括指定 |
| border-style※ | 罫線 | 個別の初期値 | しない | 罫線の線種の一括指定 |
| border-color※ | 罫線 | currentcolor | しない | 罫線の色の一括指定 |
| border-left※ | 罫線 | 個別の初期値 | しない | 左罫線の一括指定 |
| border-left-width※ | 罫線 | medium | しない | 左罫線の太さ |
| border-left-style※ | 罫線 | none | しない | 左罫線の線種 |
| border-left-color※ | 罫線 | currentcolor | しない | 左罫線の色 |
| border-right※ | 罫線 | 個別の初期値 | しない | 右罫線の一括指定 |
| border-right-width※ | 罫線 | medium | しない | 右罫線の太さ |
| border-right-style※ | 罫線 | none | しない | 右罫線の線種 |
| border-right-color※ | 罫線 | currentcolor | しない | 右罫線の色 |
| border-top※ | 罫線 | 個別の初期値 | しない | 上罫線の一括指定 |
| border-top-width※ | 罫線 | medium | しない | 上罫線の太さ |
| border-top-style※ | 罫線 | none | しない | 上罫線の線種 |
| border-top-color※ | 罫線 | currentcolor | しない | 上罫線の色 |
| border-bottom※ | 罫線 | 個別の初期値 | しない | 下罫線の一括指定 |
| border-bottom-width※ | 罫線 | medium | しない | 下罫線の太さ |
| border-bottom-style※ | 罫線 | none | しない | 下罫線の線種 |
| border-bottom-color※ | 罫線 | currentcolor | しない | 下罫線の色 |
| border-image | 罫線 | 個別の初期値 | しない | 画像を使った罫線の一括指定 |
| border-image-source | 罫線 | none | しない | 画像を使った罫線の画像指定 |
| border-image-slice | 罫線 | 100% | しない | 画像を使った罫線の分割方法（上下左右、4つの角、中央の9エリア） |
| border-image-width | 罫線 | 1 | しない | 画像を使った罫線の太さ |
| border-image-outset | 罫線 | 0 | しない | 画像を使った罫線のはみ出し（要素からのはみ出し） |
| border-image-repeat | 罫線 | stretch | しない | 画像を使った罫線の繰り返し |
| outline | 罫線 | 個別の初期値 | しない | アウトラインの一括指定（要素の外側に描画。borderは内側） |
| outline-width | 罫線 | medium | しない | アウトラインの太さ |
| outline-style | 罫線 | none | しない | アウトラインの線種 |
| outline-color | 罫線 | auto | しない | アウトラインの色 |
| outline-offset | 罫線 | 0 | しない | アウトラインの位置（要素からどれくらい離れた位置に描画するか） |
| background※ | 背景 | 個別の初期値 | しない | 背景の一括指定 |
| background-color※ | 背景 | transparent | しない | 背景色 |
| background-image※ | 背景 | none | しない | 背景画像のファイル指定 |
| background-size※ | 背景 | auto auto | しない | 背景画像のサイズ |
| background-position※ | 背景 | 0% 0% | しない | 背景画像の位置の一括指定 |
| background-position-x※ | 背景 | 0% | しない | 背景画像の横方向の位置 |
| background-position-y※ | 背景 | 0% | しない | 背景画像の縦方向の位置 |
| background-origin | 背景 | padding-box | しない | 背景画像の位置の基準点 |
| background-repeat※ | 背景 | repeat | しない | 背景画像の繰り返し |
| background-attachment | 背景 | scroll | しない | 背景画像の固定表示（一部のスマホでは効かない） |
| background-clip | 背景 | border-box | しない | 背景を表示する領域（すべてのエリア、パディングを除いたエリアなど） |
| background-blend-mode | 背景 | normal | しない | 背景画像や背景色の色の混ぜ方 |
| grid | グリッド・ フレックス |
個別の初期値 | しない | グリッドの一括指定 |
| grid-template※ | グリッド・ フレックス |
個別の初期値 | しない | グリッドの分割方法 |
| grid-template-columns※ | グリッド・ フレックス |
none | しない | グリッドの横方向の分割方法 |
| grid-template-rows※ | グリッド・ フレックス |
none | しない | グリッドの縦方向の分割方法 |
| grid-column※ | グリッド・ フレックス |
個別の初期値 | しない | グリッドの横方向の範囲指定（グリッドのアイテムに指定） |
| grid-column-start | グリッド・ フレックス |
auto | しない | グリッドの横方向の範囲の始点（グリッドのアイテムに指定） |
| grid-column-end | グリッド・ フレックス |
auto | しない | グリッドの横方向の範囲の終点（グリッドのアイテムに指定） |
| grid-row※ | グリッド・ フレックス |
個別の初期値 | しない | グリッドの縦方向の範囲指定（グリッドのアイテムに指定） |
| grid-row-start | グリッド・ フレックス |
auto | しない | グリッドの縦方向の範囲の始点（グリッドのアイテムに指定） |
| grid-row-end | グリッド・ フレックス |
auto | しない | グリッドの縦方向の範囲の終点（グリッドのアイテムに指定） |
| grid-area | グリッド・ フレックス |
個別の初期値 | しない | グリッドのエリア指定（エリアで指定、または、エリア名を指定。グリッドのアイテムに指定） |
| grid-template-areas | グリッド・ フレックス |
none | しない | グリッドのエリア名を使ったエリア指定 |
| flex-direction※ | グリッド・ フレックス |
row | しない | フレックスボックスのアイテムの並ぶ方向（横方向、縦方向） |
| flex-wrap※ | グリッド・ フレックス |
nowrap | しない | フレックスボックスのアイテムの改行（要素のサイズにアイテムが収まりきらなかった際の挙動） |
| flex-flow | グリッド・ フレックス |
個別の初期値 | しない | フレックスボックスのflex-directionとflex-wrapの一括指定 |
| align-content※ | グリッド・ フレックス |
normal | しない | グリッド・フレックスボックスのアイテムの縦方向の配置（要素全体に対する配置） |
| align-items※ | グリッド・ フレックス |
normal | しない | グリッド・フレックスボックスのアイテムの縦方向の配置（行に対する配置） |
| align-self | グリッド・ フレックス |
auto | しない | グリッド・フレックスボックスでalign-itemsを指定した際の、アイテムの個別の縦方向の配置（グリッド・フレックスボックスのアイテムに指定） |
| justify-content※ | グリッド・ フレックス |
normal | しない | グリッド・フレックスボックスのアイテムの横方向の配置指定（左寄せ、右寄せ、中央配置、均等配置など。主にフレックスボックスで使用） |
| justify-items | グリッド・ フレックス |
legacy | しない | グリッドのアイテムの横方向の配置指定（左寄せ、右寄せ、中央配置など） |
| justify-self | グリッド・ フレックス |
auto | しない | グリッドでjustify-itemsを指定した際の、アイテムの個別の横方向の配置指定（グリッドのアイテムに指定） |
| place-content | グリッド・ フレックス |
個別の初期値 | しない | フレックスボックスのalign-contentとjustify-contentの一括指定 |
| place-items | グリッド・ フレックス |
個別の初期値 | しない | フレックスボックスのalign-itemsとjustify-itemsの一括指定 |
| place-self | グリッド・ フレックス |
個別の初期値 | しない | フレックスボックスのalign-selfとjustify-selfの一括指定 |
| gap※ | グリッド・ フレックス |
個別の初期値 | しない | グリッド・フレックスボックスの要素の間隔 |
| column-gap※ | グリッド・ フレックス |
normal | しない | グリッド・フレックスボックスの要素の横方向の間隔 |
| row-gap※ | グリッド・ フレックス |
normal | しない | グリッド・フレックスボックスの要素の縦方向の間隔 |
| order※ | グリッド・ フレックス |
0 | しない | グリッド・フレックスボックスの要素の並び順（数値が大きいほど後に表示） |
| color※ | テキスト | canvastext | する | 文字の色 |
| font※ | テキスト | 個別の初期値 | する | 文字の一括指定 |
| font-family※ | テキスト | デバイス・ ブラウザの 初期値 |
する | 文字の種類（フォントファミリー） |
| font-size※ | テキスト | medium | する | 文字の大きさ |
| font-weight※ | テキスト | normal | する | 文字の太さ（400、700など、数値でも指定可） |
| font-style | テキスト | normal | する | 文字のスタイル（通常体、筆記体、斜体） |
| text-decoration※ | テキスト | 個別の初期値 | しない | 文字の装飾の一括指定 |
| text-decoration-line※ | テキスト | none | しない | 文字の装飾の種類 |
| text-decoration-style | テキスト | solid | しない | 文字の装飾の線の種類（二重線、点線など） |
| text-decoration-thickness | テキスト | auto | しない | 文字の装飾の線の太さ |
| text-decoration-skip-ink | テキスト | auto | する | 文字の装飾でアンダーラインなどが文字と被ったときの表示 |
| text-decoration-color | テキスト | currentcolor | しない | 文字の装飾の色 |
| text-underline-position | テキスト | auto | する | 文字のtext-decorationで指定した下線の位置（基準の指定） |
| text-underline-offset | テキスト | auto | する | 文字のtext-decorationで指定した下線の位置（基準からの位置） |
| line-height※ | テキスト | normal | する | 文字の行間設定（1.6、2.0など、単位を使用せずに相対的な値で指定すると便利） |
| text-indent※ | テキスト | 0 | する | 文字要素内の行頭につける余白 |
| letter-spacing※ | テキスト | normal | する | 文字間の設定 |
| text-shadow※ | テキスト | none | する | 文字の影 |
| text-transform | テキスト | none | する | 文字の大文字、小文字の表示（英数文字の大文字、小文字の表示を一括で変更することができる） |
| writing-mode※ | テキスト | horizontal-tb | する | 文字の縦書き、横書きの指定 |
| text-orientation | テキスト | mixed | する | 縦書きの文字内で、英数を縦横どのように表示するかの指定 |
| text-combine-upright | テキスト | none | する | 縦書きの文字内で、1文字分に横書きで納める（年号や日付など、一部の数字だけ1文字分のエリアに横書きで表示したい際などに使用） |
| text-emphasis | テキスト | 個別の初期値 | する | 文字の傍点の一括指定（強調したい文字の上部についた点） |
| text-emphasis-style | テキスト | none | する | 文字の傍点の種類 |
| text-emphasis-position | テキスト | auto | する | 文字の傍点の位置 |
| text-emphasis-color | テキスト | currentcolor | する | 文字の傍点の色 |
| ruby-align | テキスト | space-around | する | ルビの横方向の表示位置 |
| ruby-position | テキスト | alternate | する | ルビの上下の表示位置 |
| white-space | テキスト | normal | する | 要素内の文字の空白文字と改行の扱い（連続した半角スペースと統合するか、文字が要素幅を超えた際に改行するかなど。preタグと同様に整形済みテキストにすることも可） |
| word-break | テキスト | normal | する | 要素内の単語の改行指定（以前よく使われていたword-break:break-wordは非推奨） |
| overflow-wrap※ | テキスト | normal | する | 要素内の長い文字列の改行指定（URLなどの英数の長い文字列が要素からはみ出ることを防げる。overflow-wrap:anywhereが便利） |
| text-wrap | テキスト | wrap | する | 要素内の文字の改行の体裁（すべての行が同じになるように自動で改行を調整するなどができる） |
| line-clamp | テキスト | none | しない | 文字の行数制限（overflow:hiddenとあわせて使用されることが多い。行数を超えた場合は省略文字が表示される） |
| text-overflow | テキスト | clip | しない | 文字が要素をはみ出した際に表示する省略記号（overflow:hiddenとあわせて使用されることが多い） |
| line-break | テキスト | auto | する | 文字の禁則設定（句点、句読点で改行をかけるかなど） |
| quotes | テキスト | デバイス・ ブラウザの 初期値 |
する | qタグを指定した際の引用符設定 |
| text-align※ | テキスト | start (left) | する | 要素内の文字、画像などインライン要素の横方向の配置（左寄せ、右寄せ、センタリングなど） |
| text-align-last | テキスト | auto | する | 要素の最後の行の文字揃え |
| text-justify | テキスト | auto | する | 要素にtext-align:justifyが指定されている際の文字の配置設定 |
| list-style※ | リスト | 個別の初期値 | する | リストのスタイルの一括指定 |
| list-style-type | リスト | disc | する | リストの行頭記号の種類 |
| list-style-position | リスト | outside | する | リストの行頭記号の位置 |
| list-style-image | リスト | none | する | リストの行頭に表示する画像を指定 |
| object-fit※ | 画像 | fill | しない | 画像のサイズと表示させるサイズが異なっている場合の画像の配置方法（画像のトリミングなどで使える。レスポンシブデザインではかなり使う） |
| object-position | 画像 | 50% 50% | する | 要素のobject-fitの位置指定 |
| shape-outside | 画像 | none | しない | 透過pngやsvg画像で、図形の形に添った文字の回り込み設定 |
| shape-margin | 画像 | 0 | しない | shape-outsideの文字との間隔設定 |
| fill | 画像 | black | する | svg画像の塗りつぶし設定（埋め込みSVGのみ有効） |
| border-collapse※ | 表 | separate | する | テーブルの罫線の分離設定（border-collapse:collapseで隣接した罫線は1本として扱われる） |
| border-spacing | 表 | 0 | する | テーブルの罫線の分離時の間隔 |
| table-layout | 表 | auto | しない | テーブルのセル幅の計算方法（table-layout:autoで、すべての列が均等に調整される） |
| caption-side | 表 | top | する | テーブルのキャプションの位置 |
| empty-cells | 表 | show | する | テーブル内のセルが空欄だった場合の表示設定 |
| mask | マスク | 個別の初期値 | しない | マスクの一括指定（pngやsvg画像を使用した要素の切り抜き） |
| mask-image | マスク | none | しない | マスクとして使用される画像指定 |
| mask-position | マスク | 0% 0% | しない | マスクとして使用される画像の位置 |
| mask-repeat | マスク | repeat | しない | マスクとして使用される画像の繰り返し |
| mask-size | マスク | auto | しない | マスクとして使用される画像のサイズ |
| clip-path※ | マスク | none | しない | クリップ（図形）でのマスク効果 |
| animation※ | アニメー ション |
個別の初期値 | しない | アニメーション関連の一括指定 |
| animation-name※ | アニメー ション |
none | しない | アニメーションのキーフレーム名 |
| animation-duration※ | アニメー ション |
0s | しない | アニメーションの再生時間 |
| animation-timing-function※ | アニメー ション |
ease | しない | アニメーションのイージング（ease、linear、ease-in-out、stepsなど。cubic-bezierで細かい変化方法を指定可能） |
| animation-delay※ | アニメー ション |
0s | しない | アニメーションの遅延時間 |
| animation-iteration-count※ | アニメー ション |
1 | しない | アニメーションの再生回数 |
| animation-direction※ | アニメー ション |
normal | しない | アニメーションの再生の向き（順方向、逆方向、順逆繰り返しなど） |
| animation-fill-mode※ | アニメー ション |
none | しない | アニメーションの再生後の挙動（最初の状態に戻す、最後のまま停止するなど） |
| animation-range | アニメー ション |
個別の初期値 | しない | アニメーションの始点と終点の一括指定 |
| animation-range-start | アニメー ション |
normal | しない | アニメーションの始点 |
| animation-range-end | アニメー ション |
normal | しない | アニメーションの終点 |
| transition※ | アニメー ション |
個別の初期値 | しない | hover時など、要素の変化時のイージングの一括指定 |
| transition-property※ | アニメー ション |
すべて | しない | 要素の変化時のイージングの対象（対象のプロパティを指定。allで、すべてのプロパティに対して指定を行うことも可能） |
| transition-duration※ | アニメー ション |
0s | しない | 要素の変化時のイージングの時間 |
| transition-timing-function※ | アニメー ション |
ease | しない | 要素の変化時のイージングの変化の仕方（ease、linear、ease-in-out、stepsなど。cubic-bezierで細かい変化方法を指定可能） |
| transition-delay※ | アニメー ション |
0s | しない | 要素の変化時のイージングの遅延時間 |
| transition-behavior | アニメー ション |
normal | しない | 要素の変化時、離散プロパティに対してのアニメーションの挙動（displayなど、これまでtransitionが効かなかったプロパティに対しての指定） |
| vertical-align※ | その他 | baseline | しない | 要素の縦方向の位置指定（画像などインライン要素の場合は隣接する要素との縦方向の位置、テーブルの場合はセル内の縦方向の位置指定） |
| content※ | その他 | normal | しない | 疑似要素で挿入する要素（疑似要素をブロック要素として使う場合は、content=''と空白を指定） |
| cursor | その他 | auto | する | 要素の上にマウスポインターがあるときの、マウスカーソルの種類 |
| user-select | その他 | auto | しない | 要素内の文字要素の選択可、不可の設定 |
| pointer-events | その他 | auto | する | 要素のクリック・タップ時の挙動設定（aタグにnoneを指定するとリンクが無効になる） |
| caret-color | その他 | auto | する | テキスト入力欄の入力カーソルの色指定 |
| break-after | 印刷 | auto | しない | 印刷時、要素の後方の改頁指定（指定した要素の後の箇所で改頁がかかる） |
| break-before | 印刷 | auto | しない | 印刷時、要素の前方の改頁指定（指定した要素の前の箇所で改頁がかかる） |
| break-inside | 印刷 | auto | しない | 印刷時、要素内の改頁指定（指定した要素の前後の箇所で改頁がかかる） |
リセットCSSを読み込んでいる場合は、CSSの初期値がリセットCSSによって変更されていることがあります（例：一部のリセットCSSは、box-sizingにborder-boxが追加で指定されているなど）。詳しくは、各リセットCSSの設定でご確認ください。
全部覚えなくてもぜんぜんOK！
一覧早見表に掲載したもので、HTMLタグが83種類（※マークが48種類）、CSSが205種類（※マークが114種類）ありますが、このすべてを覚える必要はまったくありません。※マークをつけたよく使うもののなかでも、HTMLタグは、head内で毎回使い回せるものやフォームのパーツ系を除けば60種類程度になりますし、CSSプロパティも一括で指定できるものやアニメーション系を除けば70種類程度になります。
実際のコーディングの際は、使う数はずっと少なくなります。HTMLタグであれば、10〜20種類くらい、CSSプロパティであれば20〜30種類くらいがなんとなく頭に入っていれば、WEBサイトのコーディングはぜんぜんできます！数に圧倒されずに、まずは自身でよく使うタグ、プロパティをしっかりと覚えるようにしてください。
探しているものが見つからない場合は
今回、使用頻度が低いものと、使用方法がかなり難しいものは、一覧から省いています。実際には、HTMLタグは表の1.3倍程度、CSSプロパティは表の2倍程度の数があります。
もしお探しのものが見つからない場合は、HTMLタグはこちら、CSSプロパティはこちらで探してみてください。
いつでもご相談ください！
ナカナカデザインラボでは、WEBサイト制作に必要なスキルが学べる「WEBデザインスキル講座」や、WEBにまつわることなら何でも相談OK「フリーレッスン」を、随時受け付けています。
フリーランス歴約20年の現役WEBデザイナー兼WEBデザイン講師が、分かりやすく解説をしながら、マンツーマンでレッスンを行います。プログラミングは苦手だけどWEBデザインをしてみたい、ひとりで書籍や動画教材を見てもよく分からない、自分のペースで学習を進めたい。どんな方でも大丈夫！ぜひ一度ご相談ください。
マツヤマ ヤスヒサ
