ながみえ

Webサイト制作を始めたいけれど、「HTML」や「CSS」でよく出てくる用語がわからなくて困ったことはありませんか?

この用語集では、HTMLとCSSに関する基本的な192の用語を、初心者にもわかりやすくやさしく解説しています。

初めてWeb制作を学ぶ方はもちろん、用語をもう一度確認したい方にも役立つ内容になっています。

わからない言葉が出てきたときは、ぜひこのページを活用してください。

HTML基本用語一覧

用語定義・使い方の概要解説記事へのリンク
DOCTYPE宣言HTML文書の最初に書き、ブラウザにHTMLのバージョンを伝えます。Lesson1-1
Emmet短い記述でHTMLやCSSを自動展開できるエディタ向け補助ツールです。Lesson1-s3
HTMLWebページの構造を記述するためのマークアップ言語です。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
colstextareaの横幅(文字数)を指定する属性です。Lesson1-6
data-*カスタムデータ属性。独自データをHTML要素に持たせるための属性です。Lesson1-s1
downloadリンククリック時に対象ファイルをダウンロードさせる属性です。Lesson1-3
emailinput要素でメールアドレス入力欄を指定するtype値です。Lesson1-6
forlabel要素とフォーム部品を関連付けるための属性です。Lesson1-6
height要素や画像の高さを指定する属性です。Lesson1-3
hrefリンク先のURLやファイルパスを指定する属性です。Lesson1-3
idHTML要素を一意に識別するための属性です。Lesson1-3
methodフォーム送信時のHTTPメソッド(GETまたはPOST)を指定する属性です。Lesson1-6
nameフォームデータ送信時の項目名や変数名を指定する属性です。Lesson1-6
numberinput要素で数値入力欄を指定するtype値です。Lesson1-6
passwordinput要素でパスワード入力欄を指定するtype値です。Lesson1-6
placeholder入力欄に表示されるヒントや薄文字の例文を指定します。Lesson1-6
radioinput要素でラジオボタンを指定するtype値です。Lesson1-6
required入力必須項目であることを指定する属性です。Lesson1-6
rowspanテーブルセルが縦方向にまたがる行数を指定する属性です。Lesson1-5
rowstextareaの行数(縦のサイズ)を指定する属性です。Lesson1-6
src画像やスクリプトなどの外部ファイルのパスを指定する属性です。Lesson1-3
startolリストの開始番号を指定する属性です。Lesson1-4
style要素ごとにCSSスタイルを直接指定できる属性です。Lesson2-2
submitinputやbuttonで送信ボタンを指定するtype値です。Lesson1-6
textinput要素で1行のテキスト入力欄を指定するtype値です。Lesson1-6
title要素の補足説明やヒントなどをツールチップで表示する属性です。Lesson1-s1
typeinput, button, li, ol等で種類や動作、形式などを指定する属性です。Lesson1-6
typeinput, button, li, ol等で種類や動作、形式などを指定する属性です。Lesson1-4
width要素や画像の幅を指定する属性です。Lesson1-3

CSSの基本用語一覧

用語定義・使い方の概要解説記事へのリンク
CSS変数CSS内で値を再利用できるように変数として定義する仕組みです。Lesson3-9
一般兄弟セレクタ同じ親を持つ要素同士を選択できるセレクタ(~)です。Lesson2-s1
インクリメント値を1ずつ増やす操作、またはその概念。なし
インラインCSSHTMLタグのstyle属性で直接CSSを記述する方法です。Lesson2-2
インラインボックスインライン要素やテキストが生成するボックスのことです。Lesson3-1
外部CSSCSSファイルを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
内部CSSHTML内の<style>タグに記述するCSSのことです。Lesson2-2
ブロックボックスブロックレベル要素が生成するボックスのことです。Lesson3-1
プロパティCSSで指定するスタイルの内容や項目(例:color, marginなど)です。Lesson2-1
ボックスモデル要素の幅や高さ、余白、枠線などを管理する仕組みです。Lesson2-5
マージン相殺隣接する要素のmarginが合成されて短縮される現象です。Lesson2-5
要素セレクターHTMLタグ名で要素を選択するセレクタです。Lesson2-4
ローカル変数特定の範囲内だけで有効なCSS変数です。Lesson3-9

CSS指定・値・セレクタ類一覧

用語定義・使い方の概要解説記事へのリンク
!importantCSSのプロパティの優先順位を強制的に上げるための宣言です。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
CSSWebページの見た目やレイアウトを指定するスタイルシート言語です。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-sizingwidthや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
URLWeb上のリソースやページの住所を示す文字列です。なし
あわせて読みたい
初心者向けHTML/CSS入門|基礎から学べるWebサイト制作講座
初心者向けHTML/CSS入門|基礎から学べるWebサイト制作講座
記事URLをコピーしました