ながみえ
本記事には広告(アフィリエイトリンク)が含まれます。リンク経由で申込が発生した場合、当サイトが報酬を受け取る可能性があります。

Webサイト制作を始めたいけれど、「HTML」や「CSS」でよく出てくる用語がわからなくて困ったことはありませんか?
この用語集では、HTMLとCSSに関する基本的な192の用語を、初心者にもわかりやすくやさしく解説しています。
初めてWeb制作を学ぶ方はもちろん、用語をもう一度確認したい方にも役立つ内容になっています。
わからない言葉が出てきたときは、ぜひこのページを活用してください。
HTML基本用語一覧
| 用語 | 定義・使い方の概要 | 解説記事へのリンク |
|---|---|---|
| DOCTYPE宣言 | HTML文書の最初に書き、ブラウザにHTMLのバージョンを伝えます。 | Lesson1-1 |
| Emmet | 短い記述でHTMLやCSSを自動展開できるエディタ向け補助ツールです。 | Lesson1-s3 |
| HTML | Webページの構造を記述するためのマークアップ言語です。 | Lesson1-1 |
| アンカーリンク | ページ内や外部ページへジャンプするリンクです。 | Lesson1-3 |
| インデント | コードの階層や構造を見やすくするための字下げです。 | Lesson1-1 |
| エスケープシーケンス | 特殊文字を記号やコードで表現する方法です。 | Lesson1-2 |
| 外部リンク | 自分のサイト以外の外部ページへのリンクです。 | Lesson1-3 |
| グローバル属性 | どのHTMLタグでも共通して使える属性のことです。 | Lesson1-s1 |
| コメント | コード内に書くメモ。ブラウザには表示されません。 | Lesson1-1 |
| セクションタグ | Webページを意味ごとに分割するためのタグ(例:section, articleなど)。 | Lesson1-7 |
| 絶対リンク | 「http~」から始まる完全なURLを使ったリンクです。 | Lesson1-3 |
| 相対パス | 現在のファイルからの位置関係を指定するパスです。 | Lesson1-3 |
| 相対リンク | 現在位置からのパス指定でリンクする方法です。 | Lesson1-3 |
| 属性 | タグに追加情報や動作を与えるための設定項目です。 | Lesson1-s1 |
| ダウンロードリンク | クリックするとファイルがダウンロードできるリンクです。 | Lesson1-3 |
| タグ | HTMLで要素を定義するための記号(例:<p>、<a>など)です。 | なし |
| テーブル | データを行と列で表にするためのHTML要素です。 | Lesson1-5 |
| 特定属性 | 特定のタグだけで使える固有の属性のことです。 | Lesson1-s1 |
| 内部リンク | 同じページ内の別の場所へ移動するリンクです。 | Lesson1-3 |
| 入力フィールド | ユーザーからデータを受け取るためのフォーム部品です。 | Lesson1-6 |
| ネスト | タグやリストなどを入れ子状に配置することです。 | Lesson1-4 |
| ハイパーリンク | 他のページやファイルに移動できる仕組み(aタグ)です。 | Lesson1-3 |
| ビューポート | ユーザーの画面サイズに合わせて表示を調整する設定領域です。 | Lesson1-7 |
| フォーム | ユーザーが情報を入力して送信するための仕組みです。 | Lesson1-6 |
| フッター | ページの一番下に配置される領域、サイト情報などを記載します。 | Lesson1-7 |
| ヘッダー | ページの最上部にある見出しやナビゲーションなどをまとめた領域です。 | Lesson1-7 |
| ヘッダータグ | 見出しを表すタグ(h1〜h6など)です。 | Lesson1-2 |
| メタキーワード | ページの内容を示すキーワードをmetaタグで指定します。 | Lesson1-7 |
| メタタグ | ページ情報やSEO情報を指定するためのタグです。 | Lesson1-7 |
| メタディスクリプション | ページ概要を説明するためのmetaタグです。 | Lesson1-7 |
| ラベル | フォームの入力欄に名前を付けるための要素です。 | Lesson1-6 |
| リスト | 箇条書きや番号付きリストを作成するHTML要素です。 | Lesson1-4 |
| リンク | 他のページやファイルへ移動するための仕組みです。 | Lesson1-3 |
HTMLのタグ一覧
| 用語 | 定義・使い方の概要 | 解説記事へのリンク |
|---|---|---|
| <a> | リンクを作成するためのタグです。 | Lesson1-3 |
| <article> | 独立した記事やコンテンツのまとまりを示す要素です。 | Lesson1-7 |
| <aside> | 補足情報やサイドバーに使われる要素です。 | Lesson1-7 |
| <blockquote> | 他の場所から引用した文章を示すタグです。 | Lesson1-2 |
| <body> | HTML文書の本文部分を囲む要素です。 | Lesson1-1 |
| <br> | 改行を挿入するための空要素です。 | Lesson1-2 |
| <button> | クリック可能なボタンを作成するタグです。 | Lesson3-7 |
| <col> | テーブルの列の属性を指定する空要素です。 | Lesson1-5 |
| <colgroup> | テーブルの列グループをまとめて設定できるタグです。 | Lesson1-5 |
| <dd> | 定義リストの用語の説明部分を示す要素です。 | Lesson1-4 |
| <div> | 汎用的なブロック要素で、グループ化やレイアウトに使います。 | なし |
| <dl> | 用語とその説明(定義)を並べるリストを作る要素です。 | Lesson1-4 |
| <dt> | 定義リスト内の用語を示す要素です。 | Lesson1-4 |
| <em> | 強調を表すインライン要素です。 | Lesson1-2 |
| <footer> | セクションやページの下部情報を記載する要素です。 | Lesson1-7 |
| <form> | ユーザーからデータを入力・送信するフォームを作成する要素です。 | Lesson1-6 |
| <head> | 文書のメタ情報(タイトルやスタイルなど)を含む領域です。 | Lesson1-1 |
| <header> | セクションやページの冒頭部分、見出し等に使う要素です。 | Lesson1-7 |
| <html> | HTML文書全体を囲む最上位の要素です。 | Lesson1-1 |
| <img> | 画像を表示するための空要素です。 | Lesson1-3 |
| <input> | データ入力用の様々なフィールドを作成する要素です。 | Lesson1-6 |
| <label> | フォーム部品の名前や説明を付けるための要素です。 | Lesson1-6 |
| <li> | リスト(ul/ol)の各項目を示す要素です。 | Lesson1-4 |
| <link> | 外部ファイル(CSS等)を読み込むための空要素です。 | Lesson2-2 |
| <main> | ページの主内容を示す要素です。 | Lesson1-7 |
| <nav> | ナビゲーションリンクのまとまりを表す要素です。 | Lesson1-7 |
| <ol> | 番号付きリストを作成する要素です。 | Lesson1-4 |
| <p> | 段落を示すブロック要素です。 | Lesson1-2 |
| <q> | 短い引用をインラインで表現するタグです。 | Lesson1-2 |
| <section> | 文書内の意味的な区分けを示す要素です。 | Lesson1-7 |
| <span> | インライン要素で、部分的な装飾やグループ化に使います。 | Lesson2-3 |
| <strong> | 重要な強調を表すインライン要素です。 | Lesson1-2 |
| <style> | 文書内にCSSスタイルを直接記述するための要素です。 | Lesson2-2 |
| <table> | 表を作成するための要素です。 | Lesson1-5 |
| <tbody> | テーブルの本体部分(データ行)を囲む要素です。 | Lesson1-5 |
| <td> | テーブルのデータセル(1つのマス)を表します。 | Lesson1-5 |
| <textarea> | 複数行のテキスト入力欄を作る要素です。 | Lesson1-6 |
| <th> | テーブルの見出しセルを表します。 | Lesson1-5 |
| <thead> | テーブルのヘッダー部分を囲む要素です。 | Lesson1-5 |
| <tr> | テーブルの1行を表す要素です。 | Lesson1-5 |
| <ul> | 箇条書きリスト(順不同)を作成する要素です。 | Lesson1-4 |
HTMLの属性一覧
| 用語 | 定義・使い方の概要 | 解説記事へのリンク |
|---|---|---|
| action | フォーム送信時のデータ送信先URLを指定する属性です。 | Lesson1-6 |
| alt | 画像が表示できない場合に表示される代替テキストを指定します。 | Lesson1-3 |
| checkbox | チェックボックス型の入力フィールドを指定する属性・値です。 | Lesson1-6 |
| class | 要素を分類したりCSSやJavaScriptで利用するための属性です。 | Lesson2-4 |
| class | 要素を分類したりCSSやJavaScriptで利用するための属性です。 | Lesson1-s1 |
| colspan | テーブルセルが横方向にまたがる列数を指定する属性です。 | Lesson1-5 |
| cols | textareaの横幅(文字数)を指定する属性です。 | Lesson1-6 |
| data-* | カスタムデータ属性。独自データをHTML要素に持たせるための属性です。 | Lesson1-s1 |
| download | リンククリック時に対象ファイルをダウンロードさせる属性です。 | Lesson1-3 |
| input要素でメールアドレス入力欄を指定するtype値です。 | Lesson1-6 | |
| for | label要素とフォーム部品を関連付けるための属性です。 | Lesson1-6 |
| height | 要素や画像の高さを指定する属性です。 | Lesson1-3 |
| href | リンク先のURLやファイルパスを指定する属性です。 | Lesson1-3 |
| id | HTML要素を一意に識別するための属性です。 | Lesson1-3 |
| method | フォーム送信時のHTTPメソッド(GETまたはPOST)を指定する属性です。 | Lesson1-6 |
| name | フォームデータ送信時の項目名や変数名を指定する属性です。 | Lesson1-6 |
| number | input要素で数値入力欄を指定するtype値です。 | Lesson1-6 |
| password | input要素でパスワード入力欄を指定するtype値です。 | Lesson1-6 |
| placeholder | 入力欄に表示されるヒントや薄文字の例文を指定します。 | Lesson1-6 |
| radio | input要素でラジオボタンを指定するtype値です。 | Lesson1-6 |
| required | 入力必須項目であることを指定する属性です。 | Lesson1-6 |
| rowspan | テーブルセルが縦方向にまたがる行数を指定する属性です。 | Lesson1-5 |
| rows | textareaの行数(縦のサイズ)を指定する属性です。 | Lesson1-6 |
| src | 画像やスクリプトなどの外部ファイルのパスを指定する属性です。 | Lesson1-3 |
| start | olリストの開始番号を指定する属性です。 | Lesson1-4 |
| style | 要素ごとにCSSスタイルを直接指定できる属性です。 | Lesson2-2 |
| submit | inputやbuttonで送信ボタンを指定するtype値です。 | Lesson1-6 |
| text | input要素で1行のテキスト入力欄を指定するtype値です。 | Lesson1-6 |
| title | 要素の補足説明やヒントなどをツールチップで表示する属性です。 | Lesson1-s1 |
| type | input, button, li, ol等で種類や動作、形式などを指定する属性です。 | Lesson1-6 |
| type | input, button, li, ol等で種類や動作、形式などを指定する属性です。 | Lesson1-4 |
| width | 要素や画像の幅を指定する属性です。 | Lesson1-3 |
CSSの基本用語一覧
| 用語 | 定義・使い方の概要 | 解説記事へのリンク |
|---|---|---|
| CSS変数 | CSS内で値を再利用できるように変数として定義する仕組みです。 | Lesson3-9 |
| 一般兄弟セレクタ | 同じ親を持つ要素同士を選択できるセレクタ(~)です。 | Lesson2-s1 |
| インクリメント | 値を1ずつ増やす操作、またはその概念。 | なし |
| インラインCSS | HTMLタグのstyle属性で直接CSSを記述する方法です。 | Lesson2-2 |
| インラインボックス | インライン要素やテキストが生成するボックスのことです。 | Lesson3-1 |
| 外部CSS | CSSファイルをHTMLからリンクして適用する方法です。 | Lesson2-2 |
| カスケード | CSSのルールがどのように優先順位をもって適用されるかの仕組みです。 | Lesson2-7 |
| 疑似クラス | 特定の状態の要素を選択できるセレクタ(例::hoverなど)です。 | Lesson2-4 |
| 疑似要素 | 要素内の一部(例:最初の文字など)を選択できるセレクタ(例:::before)です。 | Lesson2-s1 |
| 兄弟セレクタ | 同じ親要素を持つ隣接や任意の兄弟要素を選択するセレクタです。 | Lesson2-s1 |
| クラスセレクター | class属性の値で要素を選択するためのセレクタです。 | Lesson2-4 |
| グローバル変数 | どのセレクタからも参照できるCSS変数のことです。 | Lesson3-9 |
| 継承 | 親要素のCSSプロパティを子要素が受け継ぐ仕組みです。 | Lesson2-7 |
| 子セレクタ | 特定の親要素の直下の子要素のみを選択するセレクタです。 | Lesson2-s1 |
| 子孫セレクタ | 親要素のすべての子孫要素を選択できるセレクタです。 | Lesson2-s1 |
| スコープ | CSS変数などの適用範囲・有効範囲のことです。 | Lesson3-9 |
| セレクター | CSSでどの要素にスタイルを当てるかを指定するための記述です。 | Lesson2-1 |
| 全称セレクタ | すべての要素を一括で選択するセレクタ(*)です。 | Lesson2-s1 |
| 属性セレクタ | 特定の属性や属性値を持つ要素を選択するセレクタです。 | Lesson2-s1 |
| 内部CSS | HTML内の<style>タグに記述するCSSのことです。 | Lesson2-2 |
| ブロックボックス | ブロックレベル要素が生成するボックスのことです。 | Lesson3-1 |
| プロパティ | CSSで指定するスタイルの内容や項目(例:color, marginなど)です。 | Lesson2-1 |
| ボックスモデル | 要素の幅や高さ、余白、枠線などを管理する仕組みです。 | Lesson2-5 |
| マージン相殺 | 隣接する要素のmarginが合成されて短縮される現象です。 | Lesson2-5 |
| 要素セレクター | HTMLタグ名で要素を選択するセレクタです。 | Lesson2-4 |
| ローカル変数 | 特定の範囲内だけで有効なCSS変数です。 | Lesson3-9 |
CSS指定・値・セレクタ類一覧
| 用語 | 定義・使い方の概要 | 解説記事へのリンク |
|---|---|---|
| !important | CSSのプロパティの優先順位を強制的に上げるための宣言です。 | Lesson2-7 |
| ::after | 指定した要素の直後に仮想的な要素や内容を追加します。 | Lesson2-s1 |
| ::before | 指定した要素の直前に仮想的な要素や内容を追加します。 | Lesson2-s1 |
| :first-child | 親要素の中で最初の子要素を選択する疑似クラスです。 | Lesson2-4 |
| :hover | マウスカーソルが要素上に乗ったときの状態を選択する疑似クラスです。 | Lesson2-4 |
| :nth-child | 親要素のn番目の子要素を選択する疑似クラスです。 | Lesson2-4 |
| :rootセレクター | HTML文書全体(最上位要素)を選択するためのセレクターです。 | Lesson3-9 |
| absolute | 絶対位置指定を行うpositionプロパティの値です。 | Lesson3-3 |
| border box | ボックスモデルのwidth/heightにborderとpaddingを含める設定です。 | Lesson2-5 |
| border-collapse | テーブルの枠線を結合するか分離するかを指定するプロパティです。 | Lesson3-8 |
| border-spacing | テーブルセル間の余白(スペース)を指定するプロパティです。 | Lesson3-8 |
| clearfix | 親要素が浮動(float)した子要素の高さを認識できるようにするテクニックです。 | Lesson3-4 |
| content box | ボックスモデルでwidth/heightが内容部分のみを指す設定です。 | Lesson2-5 |
| CSS | Webページの見た目やレイアウトを指定するスタイルシート言語です。 | Lesson2-1 |
| em | 相対的な文字サイズや余白などを指定する単位(親要素基準)です。 | Lesson3-2 |
| fixed | 画面上の特定位置に固定表示するpositionプロパティの値です。 | Lesson3-3 |
| IDセレクター | 要素のid属性値で1つの要素を選択するためのセレクターです。 | Lesson2-4 |
| inherit | 親要素の値をそのまま引き継ぐ指定方法です。 | Lesson2-7 |
| initial, | プロパティの値を初期値にリセットする指定方法です。 | Lesson2-7 |
| margin box | ボックスモデルでmargin部分を指します。 | Lesson2-5 |
| padding box | ボックスモデルでpadding部分を指します。 | Lesson2-5 |
| px | ピクセル単位でサイズや長さを指定します。 | Lesson3-2 |
| relative | 通常の位置から相対的に移動できるpositionプロパティの値です。 | Lesson3-3 |
| rem | ルート要素(html)のfont-sizeを基準とする相対単位です。 | Lesson3-2 |
| static | 初期状態で要素が普通に配置されるpositionプロパティの値です。 | Lesson3-3 |
| sticky | 指定位置に到達したら固定表示になるpositionプロパティの値です。 | Lesson3-3 |
| unset | 継承または初期値にリセットする指定方法です。 | Lesson2-7 |
| var()関数 | CSS変数の値を参照するための関数です。 | Lesson3-9 |
CSSのプロパティ一覧
| 用語 | 定義・使い方の概要 | 解説記事へのリンク |
|---|---|---|
| background-color | 要素の背景色を指定するプロパティです。 | Lesson2-1 |
| background-image | 要素の背景画像を指定するプロパティです。 | Lesson3-6 |
| background-position | 背景画像の表示位置を指定します。 | Lesson3-6 |
| background-size | 背景画像の表示サイズを指定します。 | Lesson3-6 |
| border-radius | 角を丸くするためのプロパティです。 | Lesson2-6 |
| border | 枠線の太さ・色・スタイルをまとめて指定できます。 | Lesson3-8 |
| box-shadow | 要素に影を付けるためのプロパティです。 | Lesson2-6 |
| box-sizing | widthやheightにpaddingやborderを含めるかどうかを指定します。 | Lesson2-5 |
| clip-path | 要素の表示範囲を切り抜く形で指定できるプロパティです。 | Lesson3-5 |
| color | 文字色を指定するプロパティです。 | Lesson2-1 |
| cursor | マウスカーソルの形状を指定できます。 | Lesson3-7 |
| display | 要素の表示形式やボックスの種類を指定するプロパティです。 | Lesson3-1 |
| ext-align | (誤:text-alignのことと思われます) | Lesson2-3 |
| filter | 画像や要素にぼかしや色変化などのフィルター効果を付けます。 | Lesson3-5 |
| float | 要素を左右に回り込み配置するプロパティです。 | Lesson3-4 |
| font-family | フォントの種類を指定するプロパティです。 | Lesson2-3 |
| font-size | 文字の大きさを指定するプロパティです。 | Lesson2-3 |
| font-weight | 文字の太さを指定するプロパティです。 | Lesson2-3 |
| letter-spacing | 文字間のスペース(字間)を指定できます。 | Lesson2-3 |
| line-height | 行の高さ(行間)を指定します。 | Lesson2-3 |
| object-fit | 画像や動画のはみ出しや伸縮の仕方を制御するプロパティです。 | Lesson3-5 |
| opacity | 要素の透明度を指定できます。 | Lesson3-5 |
| overflow | 内容がはみ出した場合の表示方法を指定します。 | Lesson2-6 |
| position | 要素の配置方法や位置指定の基準を決めるプロパティです。 | Lesson3-3 |
| text-align | テキストやインライン要素の横方向の揃え方を指定します。 | Lesson3-8 |
| text-decoration | 下線や打ち消し線などテキストの装飾を指定します。 | Lesson2-3 |
| transition | プロパティの変化をアニメーションで滑らかにします。 | Lesson3-5 |
| vertical-align | インライン要素やテーブルセルの上下位置を指定します。 | Lesson3-4 |
| z-index | 重なり順序(前後関係)を指定するプロパティです。 | Lesson3-3 |
その他の用語一覧
| 用語 | 定義・使い方の概要 | 解説記事へのリンク |
|---|---|---|
| ブラウザ | Webページを閲覧・操作するためのソフトウェアです。例:ChromeやSafariなど。 | なし |
| SEO | 検索エンジン最適化。Webサイトが検索結果で上位表示されるようにする対策です。 | Lesson1-s2 |
| URL | Web上のリソースやページの住所を示す文字列です。 | なし |
あわせて読みたい

初心者向けHTML/CSS入門|基礎から学べるWebサイト制作講座