ながみえ

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サイト制作講座