HTML-CSS 入門講座

HTML-CSS 入門講座

こんにちは!
今日も頑張ろう

Lesson-2
HTML での記述を始めましょう

目次

L2.1 はじめに

L2.1.1 概要

  • HTML(Hyper Text Markup Language:ハイパーテキスト・マークアップ・ランゲージ)は、Web ページ内の各要素の意味や文書構造を定義します。
  • ハイパーテキストとは、Web ページから別の Web ページへのリンクを作成したり画像、動画、音声などの埋め込みを行います。
  • マークアップとは、文章の各要素が、どんな役割(見出し・段落・表・リストなど)を持っているかの目印を付けます。
  • マークアップでは、目印を付けるために < >(小なり大なり)の記号で囲ったタグを使用します。
  • HTML は文章を書くものでありスタイル(見栄え)を定義するものではありません。
  • HTML では基本的に(意識して書く場合を除いて)空白や改行は無視されます。
  • 初期状態ではタグによってブラウザが決めたスタイルが設定されています。(ブラウザによって異なります)
  • タグには、「領域の種類を定義(セクション)、文章の種類を定義(グルーピングコンテンツ)、文字の種類を定義(テキストレベルセマンティクス)」などがあります。

タグは下記の構成になります。


<要素名> 内容(コンテンツ) </要素名>
<要素名 属性="属性値"> 内容(コンテンツ) </要素名>
<要素名 属性="属性値">
要素名
タグの種別を指定します。タグ名とも言われます。タグの終了(閉じタグ)を示す場合は、要素名の前にスラッシュ(/)を指定することで終了タグを定義することができます。要素によって終了タグの有無が異なります。
属性
要素名に対して設定する属性名を指定します。属性が複数ある場合は、属性と属性値の組合せを空白で区切って複数指定することができます。属性には、どのタグでも使用可能なグローバル属性とタグによって使用方法がことなる固有属性があります。
属性値
属性に対する値を指定します。一般的には、ダブルクォーテーション(")で囲んで指定しますが シングルクォーテーション(')で囲むことも可能です。属性値がない時は、イコール(=)以降が省略されます。複数の属性を指定する時は、スペースで区切って指定します。

L2.2 HTML の基本構造

L2.2.1 HTML の構造

HTML の構造

注意事項

  • タグを別のタグで囲むことを入れ子といいます。入れ子構造を作成することで親子関係を明確することができます。囲っている側を親要素、囲われている側を子要素と呼びます。
  • HTML の記述を行う場合には、子要素は、親要素に影響を受けることがありますので親子関係を理解して記述することが必要です。
  • 入れ子構造を作成する時に開始タグと終了タグ(閉じタグ)がクロスしないように注意してください。
  • 入れ子構造を作成する時に囲っても良いタグと囲ってはいけないタグがあります。例えば、h1 タグを div タグで囲うことはできますが、h1 タグを p タグで囲うことはできません。

HTML の例

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="サイトの説明文">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web ページのタイトル</title>
<link href="スタイルシートファイルのパス名" rel="stylesheet"  type="text/css">
<link href="ファビコンファイルのパス名" rel="icon">
</head>
<body>
	Web ページの内容を記述
</body>
</html>
!DOCTYPE 宣言
ドキュメントタイプ宣言は、この文書のバージョンを宣言するメタ情報です。HTML5 であれば<!DOCTYPE html>と記述します。
html 要素
html 要素は、この文書が HTML の文書であることを表します。「lang="ja"」の "ja" は日本語で書かれた文書であることを表します。
head 要素
head 要素は、この文書のメタデータを記述します。例えば、<title>~</title>でその文書のタイトルを記述することができます。
body 要素
body 要素は、この文書の本文を記述します。この body 要素で囲まれた領域が Web ページとして表示されます。

【HTML/CSS テンプレート】

HTML/CSS の勉強には、実際にコードを書いて、どんな表示になるかを試して見るのが近道です。

HTML/CSS 書くための練習用テンプレートを用意しましたので、本テンプレートを使って勉強した HTML や CSS の記述を追加して表示確認を行ってください。

HTML/CSS テンプレートは、以下をクリックしてダウンロードしてください。

ダウンロードしたファイルは圧縮されていますので解凍してから使ってください。

HTML は、index.html に記述し、CSS は、css フォルダに格納されている style.css に記述します。

L2.2.2 コンテンツ・モデル

HTML のタグには、各要素の特徴に合わせたコンテンツ・モデルが設定されています。コンテンツ・モデルは、そのタグがマークアップされた時に、何を意味して、どのような挙動を示すかを分類するものです。そのモデルごとに分類したものがカテゴリになります。

各コンテンツ・モデルには、自身の振る舞いの他に、どの要素を子要素として配置できるかの制限も設定されています。

各タグが、どのコンテンツ・モデルを持っているかはカテゴリで把握します。カテゴリは一つに限定されるものではなく、一つのタグが複数のカテゴリに割り当てられることもあります。カテゴリは、大まかな分類を表すものなので、個別の特徴はタグの詳細を確認する必要があります。

コンテンツ・モデルごとにタグを分類したものがカテゴリになりますが、カテゴリの種類は、以下の三つに大別されますが、さらに細かなカテゴリが各要素に与えられています。

メイン・コンテンツ・カテゴリ
多くの要素で共通のルールを定義するカテゴリです。
フォーム関連コンテンツ
入力・送信フォーム関連の要素に共通のルールを定義するカテゴリです。
固有のコンテンツ・カテゴリ
特定の要素や特定の文脈に対して与えられる固有のカテゴリです。

メイン・コンテンツ・カテゴリ

メイン・コンテンツ・カテゴリ
メタデータ・コンテンツ(Metadata content)

メタデータ・コンテンツには、文書に関連する情報や外部ファイルの参照先を指定する要素などが含まれます。

所属する要素: base | link | meta | noscript | script | style | title

フロー・コンテンツ(Flow content)

フロー・コンテンツには、文書を構成するテキストや埋め込まれるメディアが含まれます。

所属する要素: a | abbr | address | article | aside | audio | b | bdi | bdo | blockquote | br | button | canvas | cite | code | datalist | del | dfn | div | dl | em | embed | fieldset | figure | footer | form | h1〜h6 | header | hr | i | iframe | img | input | ins | kbd | keygen | label | main | map | mark | math | meter | nav | noscript | object | ol | output | p | pre | progress | q | ruby | s | samp | script | section | select | small | span | strong | sub | sup | svg | table | template | textarea | time | u | ul | var | video | wbr | テキスト

条件付きで所属する要素: area(この要素が map 要素の中にある場合)

セクショニング・コンテンツ(Sectioning content)

セクショニング・コンテンツには、文書の階層構造のアウトラインを決定する要素が含まれます。この要素によって生成されたスコープが、h1 〜 h6 | header | footer の影響範囲を決めます。

所属する要素: article | aside | nav | section

ヘッディング・コンテンツ(Heading content)

ヘッディング・コンテンツには、文書の見出しを表す要素が含まれます。これは見出し自身によって生成される暗黙的なアウトラインとセクショニング・コンテンツによって定義される明示的なアウトラインの見出しを意味します。

所属する要素: h1 〜 h6

フレージング・コンテンツ(Phrasing content)

フレージング・コンテンツには、文書の内容をマークアップする要素が含まれます。これらはコンテンツをグループ化したり文字列に意味を与えて段落を構成するための要素です。

所属する要素: a | abbr | audio | b | bdo | br | button | canvas | cite | code | datalist | del | dfn | em | embed | i | iframe | img | input | ins | kbd | keygen | label | map | mark | math | meter | noscript | object | output | progress | q | ruby | s | samp | script | select | small | span | strong | sub | sup | svg | template | textarea | time | u | var | video | wbr | テキスト

条件付きで所属する要素: area(この要素が map 要素の中にある場合)

エンベッデッド・コンテンツ(Embedded content)

エンベッデッド・コンテンツには、文書の中に他のリソースやメディアファイル、他のマークアップ言語や名前空間を挿入する要素が含まれます。

所属する要素: audio | canvas | embed | iframe | img | math | object | svg | video

インタラクティブ・コンテンツ(Interactive content)

インタラクティブ・コンテンツには、ユーザーが干渉可能な機能やインターフェイスを持つ要素が含まれます。

所属する要素: a | button | embed | iframe | keygen | label | select | textarea

条件付きで所属する要素: audio( controls 属性が指定された場合) | img( usemap 属性が指定された場合) | input( type 属性の値が hidden でない場合) | object( usemap 属性が指定された場合) | video( controls 属性が指定された場合)

パルパブル・コンテンツ(Palpable content)

パルパブル・コンテンツは、コンテンツが空でも非表示でもない時の状態を表すカテゴリです。フロー・コンテンツとフレージング・コンテンツに属する要素は、知覚可能なノードを少なくとも一つ持ちます。

L2.2.3 主要な要素

HTML の要素は多数ありますが、Web ページを作成するにあたっては、まずは、以下の要素を中心に構成してください。

必ず使う要素

body
画面に表示させるページ内容を定義します。
head
ドキュメントのヘッダーを定義します。
html
HTML 文書の開始を宣言してドキュメントルートを定義します。
link
外部ファイルへのリンクを埋め込みを指定します。
meta
ドキュメントに関するメタ情報を指定します。
title
ウェブページのタイトルを指定します。

文書構造を組み立てる要素

article
自己完結した記事を定義します。
aside
本筋から分離しても問題のない余談や補足を定義します。
footer
セクションのフッターを定義します。
header
セクションの先頭となるグループを定義します。
main
文章の中で主要な内容を定義します。
nav
ページ上の主要なナビゲーションを表します。
section
文書構造におけるセクションを定義します。

基本的な構成に必要な要素

a
リンクを指定します。
div
ブロックレベル要素としての範囲を指定します。
h1 ~ h6
文書やセクションの見出しを指定します。
img
画像を指定します。
li
リストの項目を指定します。
p
文章の段落を指定します。
span
インライン要素としての範囲を指定します。
ul
順序のないリストを指定します。

L2.2.4 ページ構成例

HTML の記述では、適切な要素を使用できるようにページの構成をイメージしてください。

header

nav

main

section

section

section

article

article

article

aside

header
ページの先頭部であり一般的には各ページで共通のコンテンツが格納されます。Web サイトのロゴやタイトル、問い合わせボタン、SNS ボタン、グローバルナビゲーション(各ページ共通メニュー)などを配置します。
nav
ページの主要なナビゲーションが格納されます。ヘッダーのグローバルナビゲーションやサイドバーのコンテンツナビゲーションなどが該当します。必ずしもヘッダー部に格納されている必要ははなく場所を特定しないでコンテンツ内容によって使用可否を決めてください。
aside
親要素に含まれる情報の中で余談や補足および本筋から分離しても問題のない内容のコンテンツを定義します。必ずしもサイドバーに使うことを推奨されているわけではありません。コンテンツ内容に従って適切に使用してください。このブロックを切り出した時に本筋の文脈が失われてしまう部分には適用できません。
main
文章の中で主要な部分を定義します。ヘッダーやフィッターを除く文章の中の主要コンテンツになります。
section
章(セクション)のブロックを定義します。一つのまとまりとして見なすことができる節目となります。
article
単独で成り立つコンテンツのブロックを定義します。独立した意味のある記事であると明示できる範囲に対して使用できます。このブロックを切り出した時に前後の文脈が読み取れなくなってしまう部分には適用できません。
footer
ページの最下部であり一般的には各ページで共通のコンテンツが格納されます。例えば、連絡先や著作権表示などを配置します。

L2.2.5 アウトライン

文章は、見出し、章、節、項などから構成されます。人間は、認識や解釈を行う能力により文章の構造を理解することができますが機械は、この構造を理解できません。

HTML のマークアップ作業を通して機械が理解できる文書構造を明確加することができます。ここで明確化された文書構造をアウトラインと呼びます。HTML を使用して明確化するアウトラインには、暗黙的なアウトラインと明示的なアウトラインがあります。

暗黙的なアウトライン

見出し(h1 ~ h6 要素)と文書段落(p 要素)を使用して文章を組み立てます。この場合に見出し(h1 ~ h6 要素)を適切に使用することで文章構造を明確にすることができます。

例えば、以下の例では、見出し(h1 ~ h3 要素)を使用して文章の階層を明確化しています。

HTML


<!--

文書タイトル
 前書き

1章の見出し
 1章の内容を表す文章

 1.1 節の見出し
  1.1 節の内容を表す文章

 1.2 節の見出し
  1.2 節の内容を表す文章

2章の見出し
 2章の内容を表す文章

 2.1 節の見出し
  2.1 節の内容を表す文章

 2.2 節の見出し
  2.2 節の内容を表す文章

-->

<body>
	<h1>文書タイトル</h1>
	<p>前書き</p>

	<h2>1章の見出し</h2>
	<p>1章の内容を表す文章</p>

	<h3>1.1 節の見出し</h3>
	<p>1.1 節の内容を表す文章</p>

	<h3>1.2 節の見出し</h3>
	<p>1.2 節の内容を表す文章</p>

	<h2>2章の見出し</h2>
	<p>2章の内容を表す文章</p>

	<h3>2.1 節の見出し</h3>
	<p>2.1 節の内容を表す文章</p>

	<h3>2.2 節の見出し</h3>
	<p>2.2 節の内容を表す文章</p>

</body>

明示的なアウトライン

暗黙のアウトラインでは、前後の見出しや文章から文章構造を作り出していますが、この方法では、どの文書段落がどの見出しに属するかが曖昧な部分が残ります。セクショニング・コンテンツ(section 要素や article 要素)を使用して各階層に属する要素を囲むことで、より文書構造を明確化することができます。

例えば、以下の例では、セクショニング・コンテンツ(section 要素や article 要素)と見出し(h1 ~ h3 要素)を使用して文章の階層を明確化しています。

HTML


<!--

文書タイトル
 前書き

1章の見出し
 1章の内容を表す文章

 1.1 節の見出し
  1.1 節の内容を表す文章

 1.2 節の見出し
  1.2 節の内容を表す文章

2章の見出し
 2章の内容を表す文章

 2.1 節の見出し
  2.1 節の内容を表す文章

 2.2 節の見出し
  2.2 節の内容を表す文章

-->

<body>

<article>
	<h1>文書タイトル</h1>
	<p>前書き</p>
	<section>
		<h2>1章の見出し</h2>
		<p>1章の内容を表す文章</p>
		<section>
			<h3>1.1 節の見出し</h3>
			<p>1.1 節の内容を表す文章</p>
		</section>
		<section>
			<h3>1.2 節の見出し</h3>
			<p>1.2 節の内容を表す文章</p>
		</section>
	</section>
	<section>
		<h2>2章の見出し</h2>
		<p>2章の内容を表す文章</p>
		<section>
			<h3>2.1 節の見出し</h3>
			<p>2.1 節の内容を表す文章</p>
		</section>
		<section>
			<h3>2.2 節の見出し</h3>
			<p>2.2 節の内容を表す文章</p>
		</section>
	</section>
</article>

</body>

L2.2.6 グローバル属性

属性には、全ての要素に指定可能なグローバル属性と要素単位に決められている固有属性があります。本項では、主要なグローバル属性について記述します。

accesskey
その要素にアクセスするキーボードショートカットの文字を指定します。この値は、空白区切りの文字のリストで指定します。ブラウザは、この文字リストの中からコンピューターのキーボードに存在する最初の文字を採用します。
autocapitalize
ユーザーの文字入力に対して、自動的に大文字化を行うか、どこを大文字化するかを制御します。
off / none
大文字化を行いません。全ての文字は小文字のままです。
on / sentences
先頭の文字を大文字にします。それ以外の文字は小文字のままです。
words
単語ごとに最初の文字を大文字にします。それ以外の文字は小文字のままです。
characters
全ての文字を大文字にします。
autofocus
ページの読み込み時、または dialog が表示された時点で、その要素が自動的にフォーカスされるように設定します。初期値は、false です。この属性は論理値です。
class
要素にクラス名を指定します。この値は空白区切りのリスト形式で、任意の文字列を与えられます。スタイルシート(CSS)や JavaScript の適応名称として使えます。クラス名は、複数箇所に同一の名称を付与することができます。スタイルシート(CSS)のセレクタでクラス名を使用する場合は、先頭にピリオド(.)を付与して指定します。
contenteditable
ユーザーによる編集を可能にするかどうかを指定します。編集可能な場合、ブラウザはその要素を編集可能なものにします。この属性の値は以下のものが有効です。
true
要素が編集可能であることを示します。空文字列の場合も同様です。
false
要素が編集不可であることを示します。
data-*
カスタムデータを定義します。HTML と DOM の間で、特定の情報を交換できるようにします。全てのカスタムデータは、その属性を設定した要素の HTML Element インターフェイスを通して使用できます。そして、HTML Element.dataset プロパティでカスタムデータにアクセスできます。
dir
テキストの記述方向を指定します。この属性では以下の値が使用できます。
ltr
「left to right」を表します。左から右へ書かれる言語に対応します。
rtl
「right to left」を表します。右から左へ書かれる言語に対応します。
auto
ユーザーエージェントの判別を優先します。要素に書かれた文字を解析し記述方向を決定する要因を基準にアルゴリズムを定めます。
draggable
Drag and Drop API を使用して要素をドラッグできるかどうかを指定します。この属性には以下の値が用意されています。
true
要素がドラッグ可能であることを示します。
false
要素がドラッグ不可であることを示します。
enterkeyhint
仮想キーボードの Enter キーに、どのようなラベルまたはアイコンを表示するかを指定します。
hidden
要素を隠します。この属性が指定されている間、その要素は閲覧中のページとは関係がないものとみなされます。本来、表示されても問題のない正当な要素を隠す目的で使用してはいけません。
id
ドキュメントの中で一意となる識別子(id 名)を指定します。リンクのジャンプ先として指定する URL フラグメント、スタイルシート(CSS)や JavaScript の適応名称として使えます。id 名は、ページ内に一箇所しか同一の名称を付与することができません。スタイルシート(CSS)のセレクタで id 名を使用する場合は、先頭にハッシュ(#)を付与して指定します。
spellcheck
要素の中でスペルチェックを行うかどうかを指定します。この属性では以下の値が使用できます。
true
スペルチェックを行うことを示します。
false
スペルチェックを行わないことを示します。
style
要素に対して直接スタイルシートを記述したい場合に使います。特定のページで共通のファイルから呼び出したスタイルではなく固有のスタイルを与えたい時に有効な属性です。
tabindex
要素がフォーカス状態を受け入れる場合、キーボードナビゲーションに参加するかどうかを指定します。整数値を値に入れて順番的なキーボードナビゲーションの参加の方法を定義します。
負の数
フォーカスを受け入れつつ、順次キーボードナビゲーションでは到達できないようにします。
0
フォーカスを受け入れ、順次キーボードナビゲーションで到達可能にします。
正の数
フォーカスを受け入れ、順次キーボードナビゲーションは他の要素に与えられた tabindex 属性の値の昇順で移動可能にします。
title
要素に関する補足情報を指定します。対応している環境ではツールチップに情報が表示されます。
translate
ページを翻訳する祭に要素の内容を翻訳対象に含めるか除外するかを指定します。
yes
翻訳可能とみなします。空文字列の場合も同様です。
no
翻訳不可とみなします。

L2.2.7 MIME タイプ

メディアの種別を定義する情報として MIME(Multipurpose Internet Mail Extensions)タイプが用いられます。MIME タイプは、文書、ファイル、バイト列などの性質や形式を示します。

MIME タイプは、タイプとサブタイプをスラッシュ(/)で区切った形式である「タイプ/サブタイプ」と記述します。タイプは、全般的なカテゴリーを示し text(テキスト)や video(動画)などを記述します。サブタイプは、データの正確な種類を示します。例えば、タイプが text(テキスト)の場合には、サブタイプに plain(プレインテキスト)や html(HTML ソースコード)などを記述します。

また、MIME タイプには、任意で引数を追加して「タイプ/サブタイプ;引数=値」の形式で詳細情報を提供することができます。例えば、「text/plain;charset=UTF-8 」と指定してプレインテキストの文字コードが UTF-8 であることを示します。

以下は、Web サイト開発者が使用する主要な MIME タイプです。

text/plain
プレインテキスト
text/css
カスケーティングスタイルシート(CSS)
text/html
ハイパーテキストマークアップランゲージ(HTML)
text/xml
XML 文書)
text/javascript
JavaScript
text/csv
カンマ区切り値(CSV)
image/gif
GIF 画像
image/jpeg
JPEG 画像
image/png
PNG 画像
image/svg+xml
SVG 画像
image/webp
WEBP 画像
audio/wav
Waveform 音声
audio/mp4
MP4 音声
audio/webm
WEBM 音声
audio/ogg
OGG コンテナー形式の音声ファイル
video/mp4
MP4 動画
video/webm
WEBM 動画
video/ogg
OGG コンテナー形式の動画ファイル
applecation/ogg
OGG コンテナー形式を使用する音声または動画のファイル
multipart/form-data
HTML フォームからの送信データ
application/octet-stream
バイナリー形式
application/pdf
PDF 形式
application/zip
ZIP アーカイブファイル

L2.2.8 親子関係チェックツール

要素の親子関係(入れ子)を作る場合に親要素の配下に、どの要素が子要素として配置できるかが制限されています。どの要素で親子関係を作れるかは、以下のチェックツールで確認してください。

L2.2.9 特殊文字

HTML のコードを記述する時に特別な書き方をする必要のある特殊文字で主要なものは以下の通りです。

文字名称記述10進数記述16進数記述名称
"&quot;&#34;&#x22;ダブルクォーテーション
&&amp;&#38;&#x26;アンパサンド
<&lt;&#60;&#x3C;小なり
>&gt;&#62;&#x3E;大なり
(スペース)&nbsp;&#160;&#xA0;ノーブレークスペース
©&copy;&#169;&#xA9;著作権記号(コピーライト)
®&reg;&#174;&#xAE;登録商標

特殊文字変換ツール

HTML に HTML コードを記述する時に使用する変換ツールです。「変換前文字列」に記述する HTML を張り付けて「変換」ボタンを押下後に「変換後文字列」をコピーしてください。対象の文字は、アンパサンド(&)、小なり(<)、大なり(>)です。

変換前文字列
変換後文字列

L2.2.10 インデンテーション(字下げ)

HTMLを記述する時は、可読性を向上させるためにインデンテーション(字下げ)を意識しましょう。

(1) インデンテーション無し

HTML


<main>
<h1>タイトル</h1>
<div>
<h2>サブタイトル</h2>
<p>段落</p>
<ul>
<li>リスト</li>
<li>リスト</li>
</ul>
</div>
</main>

(2) インデンテーション有り

HTML


<main>
	<h1>タイトル</h1>
	<div>
		<h2>サブタイトル</h2>
		<p>段落</p>
		<ul>
			<li>リスト</li>
			<li>リスト</li>
		</ul>
	</div>
</main>

L2.3 ルート要素・その他

L2.3.1 !DOCTYPE 宣言(ドキュメントタイプ宣言)

<!DOCTYPE html>

作成した HTML が、どのバージョンで記述されているかを宣言します。HTML5 以降では、<!DOCTYPE html> と記述するだけで良くなりました。

昔に作成された Web サイトでは、!DOCTYPE 宣言の書き方が異なっているかもしれません。この場合は、HTML の書き方や使用できるタグが異なる場合がありますので注意してください。

使用上の注意事項

  • !DOCTYPE 宣言は、HTML ドキュメントの一行目に記述してください。
  • 厳密には !DOCTYPE 宣言は、HTML の要素ではありません。
  • DOCTYPE の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML


<!DOCTYPE html>
<html>
<head>
<title>ドキュメントタイトル</title>
</head>
<body>
	<h1>タイトル</h1>
	<p>ドキュメント内容</p>
</body>
</html>

L2.3.2 コメント

<!-- (コメント) -->

ソースコード中に画面には表示されないコメントを定義します。<!-- で始まって、--> が出現されるまでをコメントとして扱われますので複数行をコメントのコメントも記述できます。head 要素と body 要素の、どちらにも記述できます。

使用上の注意事項

  • コメントは、ブラウザのレンダリングに一切影響しません。
  • 画面には表示されませんがソースコードを開けば、誰でも見ることができますので、公開してはいけない情報をコメントで記述してはいけません。

使用例

HTML


<!-- 一行コメントです。 -->

<!--
	複数行のコメントです。
	複数行のコメントです。
	複数行のコメントです。
	複数行のコメントです。
-->

L2.3.3 html 要素(HTML 文書の開始)

<html lang="言語"> ドキュメント </html>

HTML 文章の開始を宣言します。html 要素は、HTML 文章の起点となり「ルート」(一番上の階層)と呼ばれます。

主な固有属性

lang
記述している言語を指定します。日本語:ja、英語:en などのように各国の言語を表す略語を指定します。

使用上の注意事項

  • 全ての要素のルートです。HTML を構成する全ての要素は、このタグの間に書かなければいけません。
  • HTML は、HyperText Markup Language の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<title>ドキュメントタイトル</title>
</head>
<body>
	<h1>タイトル</h1>
	<p>ドキュメント内容</p>
</body>
</html>

L2.4 文書メタデータ

L2.4.1 head 要素(ドキュメントヘッダー)

<head> ドキュメントヘッダコンテンツ </head>

ブラウザの画面に表示されない領域で、文章のメタデータ、スクリプト、スタイルシートなどを記述します。ここに書かれた内容は、ブラウザの画面には表示されなく機械が処理するために必要となる情報です。

使用上の注意事項

  • ここに書かれる内容はブラウザの画面には表示されませんが表示される内容に間接的に寄与します。
  • html は、HyperText Markup Language の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドキュメントタイトル</title>
</head>
<body>
	<h1>タイトル</h1>
	<p>ドキュメント内容</p>
</body>
</html>

L2.4.2 title 要素(ドキュメントタイトル)

<title> ドキュメントタイトルコンテンツ </title>

ドキュメントのタイトルを記述します。ここに書かれた内容は、ブラウザのウィンドウタブ、ブックマークの名称、検索結果の表題などで使用されます。ページに書かれている内容を示すものになるので分かりやすい名称を付けるように心がけましょう。

使用上の注意事項

  • この要素はブラウザのページに直接表示されないためレイアウトには影響を与えません。
  • ドキュメントタイトルは SEO(検索エンジン最適化)に影響を与えることで知られています。ページ内容を適切に表すと同時に適度な長さの文字列が有効だとされています。一般的には以下のような形式が良く使われています。
    • ページの記載内容 | サイト名
    • HTML title要素の説明 | HTML-CSS入門講座
    • titleタグ | HTMLリファレンス | HTML-CSS入門講座
    • title要素 - HTML-CSS入門講座
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドキュメントタイトル</title>
</head>
<body>
	<h1>タイトル</h1>
	<p>ドキュメント内容</p>
</body>
</html>

L2.4.3 base 要素(ページ基準 URL)

<base href="基準リンク先" target="基準表示先">

ドキュメントの基準となる URL をヘッダ内に記述します。指定されたページの中で、その内容に準じた相対パスを使用することができます。

主な固有属性

href
リンクの基準となる URL を指定します。
target
基準となる表示先を指定します。a 要素または form 要素が明示的に target 属性を持たない場合に移動の結果を表示する先として使用されます。以下のキーワードは特別な意味を持ちます。
_self
同じウィンドウで開く(初期値)
_blank
新しいタブまたはウィンドウで開く

使用上の注意事項

  • この要素はブラウザのページに直接表示されないためレイアウトには影響を与えません。
  • この要素は空要素です。終了タグはありません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドキュメントタイトル</title>
<base href="https://hamaya2020.com/" target="_blank">
</head>
<body>
	<h1>タイトル</h1>
	<p>ドキュメント内容</p>
</body>
</html>

L2.4.4 link 要素(外部ファイルリンク)

<link href="URL" rel="リンク先との関係">

外部ファイルとの関連付けを行います。外部ファイルは、スタイルシートやアイコン(ファビコン)ファイルになります。

主な固有属性

href
外部ファイルの URL を相対パスまたは絶対パスで指定します。
rel
外部ファイルの種別を以下の値で指定します。
stylesheet
外部スタイルシートファイルを指定します。
icon
アイコン(ファビコン)ファイルを指定します。一般的に、ファビコンファイルのファイル名は、favicon.ico が使用されます。

使用上の注意事項

  • この要素はブラウザのページに直接表示されないためレイアウトには影響を与えません。
  • この要素は空要素です。終了タグはありません。
  • type 属性を使用してリンク先のファイル属性を明示的に指定する(「type="text/css"」など)ことも可能ですがスタイルシートやアイコンの場合はリンク先のファイル属性が明確なので省略可能です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドキュメントタイトル</title>
<link href="css/style.css" rel="stylesheet">
<link href="images/favicon.ico" rel="icon">
</head>
<body>
	<h1>タイトル</h1>
	<p>ドキュメント内容</p>
</body>
</html>

L2.4.5 meta 要素(メタ情報)

<meta charset="文字コード" name="メタデータ名" content="メタデータ" property="OGP属性">

ドキュメントに必要なメタデータを指定します。

主な固有属性

charset
ドキュメントで使用する文字のエンコーディング方式を指定します。この値は、ファイルを保存した時のエンコーディング方式と一致している必要があります。通常は「UTF-8」を使用します。
name
メタデータの名前を指定します。内容は、content 属性で指定します。通常は、http-equiv 属性、charset 属性、property 属性と同時には指定しません。
property
OGP(Open Graph Protcol)を使う場合に採用される属性です。現時点では、OGP 指定は、HTML の標準仕様ではありませんが一般的に使用されています。
content
name 属性、property 属性で定義されたメタデータの値を表します。

使用上の注意事項

  • この要素はブラウザのページに直接表示されないためレイアウトには影響を与えません。
  • この要素は空要素です。終了タグはありません。
  • meta は、META-information の略称です。メタは「高次の」や「超越的な」という意味を持っていますが、ここではメタデータとして「あるデータについての内容や性質を記述」と理解してください。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

meta 要素は、指定する項目によって記述パターンで理解してください。

文字エンコード方式

ドキュメントで使用する文字のエンコーディング方式を指定します。

HTML


<meta charset="UTF-8">
ドキュメントの概要

ドキュメントの説明文を指定します。この値は、検索結果やブラウザのブックマーク時の説明文などで利用されます。

HTML


<meta name="description" content="ドキュメントの説明文">
ビューポートの設定

ユーザーエージェントに合わせて適切なレンダリングが行えるように、viewport と呼ばれる値を指定します。

下記の「width=device-width」は、デバイスの表示幅に合わせた表示領域を使用することを示し「initial-scale=1.0"」は 1.0 倍の倍率で表示することを示します。 viewport を指定していない Web ページをスマートフォンで表示すると PC 用の画面が縮小されて表示されます。 viewport を指定して複数の装置のデザインを実装することをレスポンシブ Web デザインといいますが正しく実装するには、HTML に viewport を記述すると同時に CSS にレイアウト調整を行う記述が必要となります。レスポンシブ Web デザインについては「Lesson-11 RWD 対応のサイトを作りましょう」を参照してください。

HTML


<meta name="viewport" content="width=device-width,initial-scale=1.0">
検索クローラーの制御

検索サービスのインデックスを作成するために巡回しているロボットに振る舞いを要求します。検索対象に含んで欲しいページと、そうでないページを指定できます。

index
インデックスを許可
noindex
インデックスを禁止
follow
リンク先の参照を許可
nofollow
リンク先の参照を禁止

HTML


<meta name="robots" content="index,follow">
<meta name="robots" content="noindex,nofollow">
OGP の設定

SNS などで利用されている(Open Graph Protcol)という仕組みを設定できます。OGP 指定は、HTML の標準仕様ではありませんが一般的に使用されています。

HTML


<meta property="og:url" content="ページのURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの概要">
<meta property="og:site_name" content="サイト名">
<meta property="og:type" content="ページの種類">
<meta property="og:image" content="アイキャッチ画像のURL">

L2.4.6 style 要素(スタイルシート)

<style> スタイルシートコンテンツ </style>

HTML ファイル内にスタイルシート(CSS)を記述します。通常は、head 要素内に記述します。

一般的にスタイルシートは、スタイルシート(CSS)ファイルに記述して link 要素を使って紐付けを行いますが、ページ固有のスタイルを定義する場合は、HTML ファイルに記述した方が良い場合があります。状況によって使い分けれるようにしましょう。

使用上の注意事項

  • この要素はブラウザのページに直接表示されないためレイアウトには影響を与えませんがスタイルシートとして記述した内容は、各要素のスタイルに影響を与えます。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドキュメントタイトル</title>
<style>
h1 {
	font-size: 32px;
	color: green;
}
p {
	font-size: 20px;
	color: blue;
}
</style>
</head>
<body>
	<h1>タイトル</h1>
	<p>ドキュメント内容</p>
</body>
</html>

L2.5 セクション

L2.5.1 body 要素(表示内容)

<body> 表示内容コンテンツ </body>

ブラウザの画面に表示される領域で、この要素の範囲が HTML 文章コンテンツ領域を意味します。

使用上の注意事項

使用例

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<title>ドキュメントタイトル</title>
</head>
<body>
	ここに記述された内容がブラウザの画面に表示されます。
</body>
</html>

L2.5.2 article 要素(自己完結記事)

<article> 自己完結記事コンテンツ </article>

単独で成り立つコンテンツのブロックを定義します。独立した意味のある記事であると明示できる範囲に対して使用できます。このブロックを切り出した時に前後の文脈が読み取れなくなってしまう部分には適用できません。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • セクショニング・コンテンツなので文章構造のアウトラインに影響を与えます。
  • 原則として見出しを含むことを想定しています。必ず子要素に h1 ~ h6 を設置しましょう。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<article>
	<h1>タイトル</h1>
	<p>コンテンツ内容</p>
	<p>コンテンツ内容</p>
	<p>コンテンツ内容</p>
</article>

L2.5.3 section 要素(文書構造セクション)

<section> 文書構造セクションコンテンツ </section>

章(セクション)のブロックを定義します。一つのまとまりとして見なすことができる節目となります。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • セクショニング・コンテンツなので文章構造のアウトラインに影響を与えます。
  • 原則として見出しを含むことを想定しています。必ず子要素に h1 ~ h6 を設置しましょう。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<section>
	<h1>タイトル</h1>
	<p>コンテンツ内容</p>
	<p>コンテンツ内容</p>
	<p>コンテンツ内容</p>
</section>

L2.5.4 nav 要素(ナビゲーション)

<nav> ナビゲーションコンテンツ </nav>

ページ上の主要なナビゲーションを定義します。良く使われる場所としてヘッダーのグローバルナビゲーションやサイドバーのコンテンツナビゲーションなどがあります。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • セクショニング・コンテンツなので文章構造のアウトラインに影響を与えます。
  • nav は、navigation の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<nav>
	<ul>
		<li><a href="リンク先">ナビゲーション項目</a></li>
		<li><a href="リンク先">ナビゲーション項目</a></li>
		<li><a href="リンク先">ナビゲーション項目</a></li>
		<li><a href="リンク先">ナビゲーション項目</a></li>
	</ul>
</nav>

L2.5.5 aside 要素(余談や補足)

<aside> 余談や補足コンテンツ </aside>

親要素に含まれる情報の中で余談や補足および本筋から分離しても問題のない内容のコンテンツを定義します。必ずしもサイドバーに使うことを推奨されているわけではありません。コンテンツ内容に従って適切に使用してください。このブロックを切り出した時に本筋の文脈が失われてしまう部分には適用できません。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • セクショニング・コンテンツなので文章構造のアウトラインに影響を与えます。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<aside>
	<h1>タイトル</h1>
	<p>コンテンツ内容</p>
	<p>コンテンツ内容</p>
	<p>コンテンツ内容</p>
</aside>

L2.5.6 h1 ~ h6 要素(見出し)


<h1> レベル1 見出しコンテンツ </h1>
<h2> レベル2 見出しコンテンツ </h2>
<h3> レベル3 見出しコンテンツ </h3>
<h4> レベル4 見出しコンテンツ </h4>
<h5> レベル5 見出しコンテンツ </h5>
<h6> レベル6 見出しコンテンツ </h6>

h1 ~ h6 要素は、文章やセクションなどの見出しを定義します。レベル 1 から レベル 6 の 6 段階の見出しが定義できます。見出しは、文章のアウトラインに影響を与える重要な要素です。h1 要素から順に使用するようにしてください。h1 要素の後に h3 要素が出てくるような途中を飛ばすような使い方は避けてください。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • ヘディング・コンテンツとしてセクショニング・コンテンツで区分された要素の中で見出しを定義します。
  • 文章構造のアウトラインに影響を与えます。
  • 親要素が定義したセクションに定義できる h1 要素は一か所です。h2 要素以降は複数箇所で定義できます。
  • h は、heading の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<section>
	<h1>タイトル</h1>
	<p>コンテンツ内容</p>
	<p>コンテンツ内容</p>
	<h2>章の見出し</h2>
	<p>コンテンツ内容</p>
	<p>コンテンツ内容</p>
</section>

L2.5.7 header 要素(セクション先頭部)

<header> ヘッダーコンテンツ </header>

セクションの先頭となるグループを定義します。body 要素直下や article 要素の開始直後などで使用されます。例えば、body 要素直後に記載にサイト全体に共通するヘッダーとしてロゴ画像・サイトタイトルやグローバルナビゲーションなどを配置します。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • セクショニング・コンテンツではないので文章構造のアウトラインに影響を与えません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<body>
	<header>
		<h1>タイトル</h1>
		<nav>
			<ul>
				<li><a href="リンク先">ナビゲーション項目</a></li>
				<li><a href="リンク先">ナビゲーション項目</a></li>
				<li><a href="リンク先">ナビゲーション項目</a></li>
				<li><a href="リンク先">ナビゲーション項目</a></li>
			</ul>
		</nav>
	</header>
	その他のページコンテンツ
</body>

L2.5.8 footer 要素(セクション最終部)

<footer> フッターコンテンツ </footer>

セクションの終了となるグループを定義します。body 要素の最下部や article 要素の文末などで使用されます。例えば、body 要素最下部に記載しサイト全体に共通するフッターとして連絡先や著作権表示などを配置します。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • セクショニング・コンテンツではないので文章構造のアウトラインに影響を与えません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<body>
	その他のページコンテンツ
	<footer>
		<small>著作権表示</small>
	</footer>
</body>

L2.5.9 address 要素(連絡先)

<address> 連絡先コンテンツ </address>

連絡先や問い合わせ先の情報を定義します。例えば、サイト運営者の住所やメールアドレスなどが記載されている範囲を示します。article 要素の中に address 要素を配置した場合は、直近の article 要素に書かれた文書に関する連絡先であることを表します。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>ご意見・ご質問は下記までお送りください。</p>
<address>
	Mail:メールアドレス<br>
	URL:サイトアドレス<br>
</address>

L2.6 グルーピングコンテンツ

L2.6.1 p 要素(文書段落)

<p> 文書段落コンテンツ </p>

文章段落を定義します。段落の中には、テキストだけでなく画像も配置できます。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • 段落の中で改行したい場合は、br 要素を使用します。
  • p は、paragraph の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<section>
	<h1>タイトル</h1>
	<p>段落を表すテキスト</p>
	<p>段落を表すテキスト</p>
	<p>段落を表すテキスト</p>
</section>

L2.6.2 hr 要素(区切り)

<hr>

段落と段落の間に区切りを定義します。規定値では、話題やテーマの区切りを示す要素として水平線が引かれます。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • この要素は空要素です。終了タグはありません。
  • アウトラインに影響を与えませんが、段落に一区切りを付けるという意味があります。
  • hr は、horizontal rule の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<article>
	<h1>タイトル</h1>
	<p>段落を表すテキスト 1</p>
	<p>段落を表すテキスト 2</p>
	<hr>
	<p>段落を表すテキスト 3</p>
	<p>段落を表すテキスト 4</p>
</article>

表示例

タイトル

段落を表すテキスト 1

段落を表すテキスト 2


段落を表すテキスト 3

段落を表すテキスト 4

L2.6.3 pre 要素(整形済みテキスト)

<pre> 整形済みテキストコンテンツ </pre>

整形済みテキストを定義します。ソースコードなどの改行やスペースが、そのままの状態で表示されます。但し、< 、>、& は、HTML タグと解釈されてしまうので &lt;、&gt;、&amp; と記述する必要があります。一般的にソースコードを表示させる場合は、pre 要素と code 要素を入れ子構造で使用します。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • pre は、preformatted text(整形済みテキスト)の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<pre>
改行やスペースが、そのままで表示されます。
br 要素がなくても改行されます。
          スペースも、そのまま表示されます。
</pre>

表示例

改行やスペースが、そのままで表示されます。
br 要素がなくても改行されます。
          スペースも、そのまま表示されます。

HTML例


<pre><code>&lt;script&gt;
function sample(a) {
    console.log(a);
}
&lt;/script&gt;
</code></pre>

表示例

<script>
function sample(a) {
    console.log(a);
}
</script>

L2.6.4 blockquote 要素(複数行の長文の引用)

<blockquote> 複数行の長文の引用コンテンツ </blockquote>

書籍やニュース記事などの第三者が書いたものから比較的に長文の引用を定義します。一行程度の引用は、q 要素を使用してください。

主な固有属性

cite
引用の出典を提示します。URL や書籍情報、補足事項などを記述することができます。cite 属性に関する情報を表示する場合は、cite 要素を使用します。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • 規定値では、インデント(字下げ)された状態で表示されます。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


自分で書いたテキスト
<blockquote>
引用したテキスト 1<br>
引用したテキスト 2<br>
引用したテキスト 3<br>
</blockquote>
自分で書いたテキスト

表示例

自分で書いたテキスト
引用したテキスト 1
引用したテキスト 2
引用したテキスト 3
自分で書いたテキスト

HTML例


自分で書いたテキスト
<blockquote site="https://html-css.hamaya2020.com">
引用したテキスト 1<br>
引用したテキスト 2<br>
引用したテキスト 3<br>
引用したサイト名:<cite>HTML-CSS 入門講座</cite>
</blockquote>
自分で書いたテキスト

表示例

自分で書いたテキスト
引用したテキスト 1
引用したテキスト 2
引用したテキスト 3
引用したサイト名:HTML-CSS 入門講座
自分で書いたテキスト

L2.6.5 ul 要素(順序性のないリスト)

<ul> 順序性のないリストコンテンツ </ul>

順序性のないリストを定義します。リスト項目は、li 要素を使って定義します。規定値では、リスト項目の先頭にマーカーが表示されます。リスト項目の中にリスト要素を配置して入れ子構造を作ることもできます。順序性のあるリストを定義する場合は、ol 要素を使用してください。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • マーカーの種類は、スタイルシート(CSS)で変更することができます。
  • ul は、unorderd list(順序がないリスト)の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<ul>
	<li>リスト項目テキスト 1</li>
	<li>リスト項目テキスト 2</li>
	<li>リスト項目テキスト 3</li>
</ul>

表示例

  • リスト項目テキスト 1
  • リスト項目テキスト 2
  • リスト項目テキスト 3

HTML例


<ul>
	<li>リスト項目テキスト 1</li>
	<li>
		リスト項目テキスト 2
		<ol>
			<li>リスト項目テキスト 2-1</li>
			<li>リスト項目テキスト 2-2</li>
			<li>リスト項目テキスト 2-3</li>
		</ol>
	</li>
	<li>リスト項目テキスト 3</li>
</ul>

表示例

  • リスト項目テキスト 1
  • リスト項目テキスト 2
    1. リスト項目テキスト 2-1
    2. リスト項目テキスト 2-2
    3. リスト項目テキスト 2-3
  • リスト項目テキスト 3

L2.6.6 ol 要素(順序性のあるリスト)

<ol start="開始値" reversed> 順序性のあるリストコンテンツ </ol>

順序性のあるリストを定義します。リスト項目は、li 要素を使って定義します。規定値では、リスト項目の先頭にマーカーが表示されます。リスト項目の中にリスト要素を配置して入れ子構造を作ることもできます。順序性のないリストを定義する場合は、ul 要素を使用してください。

主な固有属性

start
リスト項目のリーダーの開始値を整数で指定します。
reversed
リーダーを逆順で表示します。項目は大きい順に番号付けされます。本属性は値のない論理属性です。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • マーカーの種類は、スタイルシート(CSS)で変更することができます。
  • ol は、orderd list(順序のあるリスト)の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<ol>
	<li>リスト項目テキスト 1</li>
	<li>リスト項目テキスト 2</li>
	<li>リスト項目テキスト 3</li>
</ol>

表示例

  1. リスト項目テキスト 1
  2. リスト項目テキスト 2
  3. リスト項目テキスト 3

HTML例


<ol start="5" reversed>
	<li>リスト項目テキスト 1</li>
	<li>リスト項目テキスト 2</li>
	<li>リスト項目テキスト 3</li>
</ol>

表示例

  1. リスト項目テキスト 1
  2. リスト項目テキスト 2
  3. リスト項目テキスト 3

HTML例


<ol>
	<li>リスト項目テキスト 1</li>
	<li>
		リスト項目テキスト 2
		<ul>
			<li>リスト項目テキスト 2-1</li>
			<li>リスト項目テキスト 2-2</li>
			<li>リスト項目テキスト 2-3</li>
		</ul>
	</li>
	<li>リスト項目テキスト 3</li>
</ol>

表示例

  1. リスト項目テキスト 1
  2. リスト項目テキスト 2
    • リスト項目テキスト 2-1
    • リスト項目テキスト 2-2
    • リスト項目テキスト 2-3
  3. リスト項目テキスト 3

L2.6.7 li 要素(リスト項目)

<li> リスト項目コンテンツ </li>

リストのリスト項目を定義します。li は list item を短縮したものです。ul 要素(順序性のないリスト)、ol 要素(順序性のあるリスト)の子要素として使用します。リスト項目の先頭にマーカーが表示されます。

主な固有属性

value
ol 要素(順序性のあるリスト)の場合にマーカーの値を整数で指定します。通常は、1 から始まる値を途中で変更することができます。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • li 要素の display の値は、list-item になります。。
  • マーカーの規定値は、親要素の規定値になります。
  • マーカーの種類は、スタイルシート(CSS)で変更することができます。
  • li は、list item の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<ul>
	<li>順序性のないリスト項目テキスト 1</li>
	<li>順序性のないリスト項目テキスト 2</li>
	<li>順序性のないリスト項目テキスト 3</li>
</ul>

表示例

  • 順序性のないリスト項目テキスト 1
  • 順序性のないリスト項目テキスト 2
  • 順序性のないリスト項目テキスト 3

HTML例


<ol>
	<li>順序性のあるリスト項目テキスト 1</li>
	<li>順序性のあるリスト項目テキスト 2</li>
	<li>順序性のあるリスト項目テキスト 3</li>
</ol>

表示例

  1. 順序性のあるリスト項目テキスト 1
  2. 順序性のあるリスト項目テキスト 2
  3. 順序性のあるリスト項目テキスト 3

L2.6.8 dl 要素(定義リスト)

<dl> 定義リストコンテンツ </dl>

定義する用語と用語の説明や解説を組み合わせた定義リストを定義します。定義リストコンテンツには、用語を表す dt 要素と説明を表す dd 要素を組み合わせて記述します。dt 要素と dd 要素の組み合わせは、複数記述することができます。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • dl は、definition list(定義リスト)の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<dl>
	<dt>定義する用語</dt>
	<dd>用語の説明や解説</dd>
	<dt>定義する用語</dt>
	<dd>用語の説明や解説</dd>
</dl>

表示例

定義する用語
用語の説明や解説
定義する用語
用語の説明や解説
float プロパティを使用した横並び

HTML例


<dl class="dl-01">
	<dt>定義する用語</dt>
	<dd>用語の説明や解説</dd>
	<dt>定義する用語</dt>
	<dd>用語の説明や解説</dd>
</dl>

CSS例


dl.dl-01 dt {
	float: left;
}
dl.dl-01 dd {
	margin-left: 120px;
}

表示例

定義する用語
用語の説明や解説
定義する用語
用語の説明や解説
flexbox(フレックスレイアウト)を使用した横並び

HTML例


<dl class="dl-02">
	<dt>定義する用語</dt>
	<dd>用語の説明や解説</dd>
	<dt>定義する用語</dt>
	<dd>用語の説明や解説</dd>
</dl>

CSS例


dl.dl-02 {
	display: flex;
	flex-wrap: wrap;
}
dl.dl-02 dt {
	width: 120px;
}
dl.dl-02 dd {
	margin-left: 0;
	width: calc(100% - 120px);
}

表示例

定義する用語
用語の説明や解説
定義する用語
用語の説明や解説

L2.6.9 dt 要素(定義リストの用語)

<dt> 定義リストの用語コンテンツ </dt>

定義する用語と用語の説明や解説を組み合わせた定義リストの用語を定義します。dt は definition team を短縮したものです。dt 要素は、dl 要素の子要素で使用します。また、用語の説明や解説には dd 要素を使用します。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • dt は、definition team の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<dl>
	<dt>定義する用語</dt>
	<dd>用語の説明や解説</dd>
	<dt>定義する用語</dt>
	<dd>用語の説明や解説</dd>
</dl>

表示例

定義する用語
用語の説明や解説
定義する用語
用語の説明や解説

L2.6.10 dd 要素(定義リストの説明)

<dd> 定義リストの用語の説明や解説コンテンツ </dd>

定義する用語と用語の説明や解説を組み合わせた定義リストの用語の説明や解説を定義します。dd 要素は、dl 要素の子要素で使用します。また、用語には dt 要素を使用します。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • dd は、definition description の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<dl>
	<dt>定義する用語</dt>
	<dd>用語の説明や解説</dd>
	<dt>定義する用語</dt>
	<dd>用語の説明や解説</dd>
</dl>

表示例

定義する用語
用語の説明や解説
定義する用語
用語の説明や解説

L2.6.11 figure 要素(写真・図表)

<figure> 写真・図表コンテンツ </figure>

写真や図表などの自己完結した情報を定義します。figure 要素で定義する内容は、別の場所に移動しても前後のコンテンツに影響を与えないものとされています。写真や図表のキャプションを指定する場合は、figcaption 要素を figure 要素の一番最初または一番最後の子要素として指定します。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<figure>
	<figcaption>画像のキャプション</figcaption>
	<img src="images/sample1.jpg" alt="Sample Image" width="600" height="400">
</figure>

L2.6.12 figcaption 要素(写真・図表のキャプション)

<figcaption> 写真・図表のキャプションコンテンツ </figcaption>

写真や図表などキャプションを定義します。figcaption 要素は、figure 要素の子要素として使用します。キャプションを指定する場合は、figcaption 要素を figure 要素の一番最初または一番最後の子要素として指定します。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<figure>
	<figcaption>画像のキャプション</figcaption>
	<img src="images/sample1.jpg" alt="Sample Image" width="600" height="400">
</figure>

L2.6.13 div 要素(ブロックレベル要素の範囲)

<div> ブロックレベル要素コンテンツ </div>

汎用的なブロックレベルのコンテナを定義します。div 要素は、文章の意味や文脈には影響を与えないで見た目をスタイルシートで設定する場合などで使用します。文章の意味や文脈に影響を与える部分には適切な要素を使用してください。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • 文章のアウトラインには影響を与えません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<div>
	<img src="images/sample1.jpg" alt="Sample Image" width="600" height="400">
	<p>段落を表すテキスト</p>
</div>

L2.6.14 main 要素(主要文書)

<main> 主要文書コンテンツ </main>

文章の中で主要な部分を定義します。ヘッダーやフィッターを除く文章の中の主要コンテンツになります。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • 文章のアウトラインには影響を与えません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<body>
	<header>
		<h1>タイトル</h1>
	</header>
	<main>
		<h2>見出し</h2>
		<p>段落テキスト</p>
	</main>
	<footer>
		<p>フッターテキスト</p>
	</footer>
</body>

L2.7 テキストレベルセマンティクス

L2.7.1 a 要素(リンク)

<a href="リンク先URL" target="リンク先を開く環境" rel="リンク先との関係"> リンクコンテンツ </a>

リンクコンテンツに対してリンク(ハイパーリンク)を定義します。a は anchor を短縮したものです。リンクコンテンツには、テキストだけでなく画像などを指定することもできます。

主な固有属性

href
リンク先 URL を指定します。リンク先がページ内の特定の場所になる場合は、ハッシュ(#)に続けて id 名を指定します。メールアドレスや電話番号を指定することもできます。
target
リンク先を開くフレーム名やウィンドウ名を指定します。以下の名前は特別な意味を持ちます。
_self
同じウィンドウで開きます。(初期値)
_blank
新しいタブまたは新しいウィンドウで開きます。
rel
リンク先との関係を指定します。
noopener
外部サイトへ移動する場合に発信元の文章改ざんを防ぎます。リンク先が信頼できない場合は指定してください。
noreferrer
Referer ヘッダー情報を発信したくない場合に指定します。リンク先が信頼できない場合は指定してください。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • 規定値では、文字の色やアンダーラインと訪問済み効果などが設定されています。
  • target 属性に _blank を使用した時に悪意ある外部サイトを指定しまうと外部サイトから自サイトを操作されるという脆弱性があります。これを回避するために外部サイトを指定する時は rel 属性に noopener と noreferrer を同時に指定して外部サイトからの参照を無効にしてください。
  • a は、anchor の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p><a href="URL">通常のリンク先</a></p>
<p><a href="URL" target="_blank">リンク先を新しタブまたは新しいウィンドウで開く</a></p>
<p><a href="URL" target="_blank" rel="noopner noreferrer">
	信頼できないリンク先を新しタブまたは新しいウィンドウで開く
</a></p>
<p><a href="#id名">自ページ内の id 名へのリンク</a></p>
<p><a href="mailto:test@sample.com">メールアドレスへのリンク</a></p>
<p><a href="tel:03-0000-0000">電話番号へのリンク</a></p>

L2.7.2 em 要素(強調)

<em> 強調コンテンツ </em>

文章の中で強調したい文字列を定義します。ここでの強調は、主張や力説というニュアンスを含みます。似たような要素に strong 要素がありますが、こちらは重要性、重大性、緊急性が高い場合に適しています。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • 規定値では、斜体文字(イタリック体)が設定されています。
  • em は、emphasis の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>前後の文章 <em>強調する文字列</em> 前後の文章</p>

表示例

前後の文章 強調する文字列 前後の文章

L2.7.3 strong 要素(重要情報)

<strong> 重要情報コンテンツ </strong>

文章の中で重要性、重大性、緊急性が高い文字列を定義します。読者に一番最初に伝えたい情報や優先して覚えてほしい情報などを示します。似たような要素に em 要素がありますが、こちらは主張や力説したい場合に適しています。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • 規定値では、太字(ボールド)が設定されています。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>前後の文章 <strong>重要な文字列</strong> 前後の文章</p>

表示例

前後の文章 重要な文字列 前後の文章

L2.7.4 small 要素(付帯注釈)

<small> 付帯注釈コンテンツ </small>

主要なコンテンツに付随する短いコメントや保尊を定義します。免責事項や著作権表記、注意事項、警告文などを示します。数行に渡る文章や、それ自体が主体となる文章には適しません。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • 規定値では、一回り小さい文字サイズが設定されています。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<article>
	<h1>牛丼価格</h1>
	<ul>
		<li>並盛り ¥400 <small>(税込み)</small></li>
		<li>大盛り ¥500 <small>(税込み)</small></li>
	</ul>
</article>
<footer>
	<small>&copy; 2024 Gyuudon-ya.Co.,Ltd.</small>
</footer>

表示例

牛丼価格

  • 並盛り ¥400 (税込み)
  • 大盛り ¥500 (税込み)
© 2024 Gyuudon-ya.Co.,Ltd.

L2.7.5 s 要素(不正確内容)

<s> 不正確内容コンテンツ </s>

文章の中で正確ではなくなった内容、最新のものではなくなった情報を定義します。時系列で情報が更新された場合に過去情報を残していきたい場合などに適しています。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • 規定値では、打消し線が設定されています。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>
	<span><s>通常価格:900円</s></span> <span>セール価格:700円</span>
</p>

表示例

通常価格:900円 セール価格:700円

L2.7.6 cite 要素(創作物タイトル)

<cite> 創作物のタイトルコンテンツ </cite>

引用された創作物のタイトルを定義します。引用は内容ではなくタイトルに適用します。短い引用には、q 要素、複数行の長文の引用には、blockquote 要素を使用してください。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • 規定値では、斜体文字(イタリック体)が設定されています。
  • cite は、citation の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>HTML/CSSの勉強には、<cite>HTML-CSS 入門講座</cite> という Web サイトを活用すると良いです。</p>

表示例

HTML/CSSの勉強には、HTML-CSS 入門講座 という Web サイトを活用すると良いです。

L2.7.7 q 要素(短い引用)

<q cite="引用情報URL"> 短い引用コンテンツ </q>

行に収まる程度の短い引用を定義します。複数行に渡る引用の場合は blockquote 要素、引用元のタイトルの場合は cite 要素を使用してください。

主な固有属性

cite
引用した情報に関する URL を指定します。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • 規定値では、対象の文字列が引用符(“”)またはカギカッコ(「」)などで囲まれます。どの文字で囲まれるかは言語設定(html 要素の lang 属性)によります。
  • q は、quotation の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>引用前後の文章<q>引用文字列</q>引用前後の文章</p>

表示例

引用前後の文章引用文字列引用前後の文章

L2.7.8 dfn 要素(用語定義)

<dfn title="正式名称"> 用語定義コンテンツ </dfn>

用語を定義します。この要素を使用する場合は、直近の親要素(セクションや段落)には、定義される用語の説明文が含まれなければいけません。用語の定義を行うのは最初の一度だけで二回目以降は必要がありません。

本要素に title 属性を指定した場合は、その値が定義する用語の正式名称になります。また、本要素の子要素に abbr 要素(略語の定義)を配置した場合は、abbr 要素の title 属性に指定した値が定義する用語の正式名称になります。

主な固有属性

title
定義する用語の正式名称を指定します。
  1. dfn 要素に title 属性が指定されていれば、その値が正式名称になります。
  2. dfn 要素の子要素に abbr 要素が配置されていて、その abbr 要素に title 属性が指定されていれば、その値が正式名称になります。
  3. 上記に該当しない場合は、dfn 要素で定義した用語が正式名称とみなされます。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • 規定値では、斜体文字(イタリック体)が設定されています。
  • dfn は、definition の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>Webページの作成は、<dfn>HTML</dfn>(HyperText Markup Language)を使用してマークアップします。</p>

表示例

Webページの作成は、HTML(HyperText Markup Language)を使用してマークアップします。

HTML例


<p>Webページの作成は、<dfn title="HyperText Markup Language">HTML</dfn> を使用してマークアップします。</p>

表示例

Webページの作成は、HTML を使用してマークアップします。

HTML例


<p>Webページの作成は、<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> を使用してマークアップします。</p>

表示例

Webページの作成は、HTML を使用してマークアップします。

L2.7.9 abbr 要素(略語定義)

<abbr title="正式名称"> 略語定義コンテンツ </dfn>

略語を定義します。本要素に title 属性を指定することで正式名称を指定できます。ここで指定した正式名称は、マウスオーバーすると(マウスカーソルを合わせると)ツールチップとして表示します。

dfn 要素と abbr 要素を組み合わせて使用することで用語の定義と略語の定義を同時に行うことができます。

主な固有属性

title
定義する略語の正式名称を指定します。マウスオーバーするとツールチップとして表示します。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • title 属性を指定した場合には、規定値で破線のアンダーラインが設定されています。
  • abbr は、abbreviation の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>Webページの作成は、<abbr>HTML</abbr>(HyperText Markup Language)を使用してマークアップします。</p>

表示例

Webページの作成は、HTML(HyperText Markup Language)を使用してマークアップします。

HTML例


<p>Webページの作成は、<abbr title="HyperText Markup Language">HTML</abbr> を使用してマークアップします。</p>

表示例

Webページの作成は、HTML を使用してマークアップします。

HTML例


<p>Webページの作成は、<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> を使用してマークアップします。</p>

表示例

Webページの作成は、HTML を使用してマークアップします。

L2.7.10 data 要素(識別情報)

<data value="識別情報"> 識別情報付与コンテンツ </dfn>

識別情報付与コンテンツに対して value 属性を使用して識別情報を定義します。例えば、商品名に対して商品コードを付与する場合などで使用します。与えるデータが日付や時間の場合は、time 要素を使用します。

主な固有属性

value
付与する識別情報を指定します。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<ul>
	<li><data value="S1001">商品A</data></li>
	<li><data value="S1002">商品B</data></li>
	<li><data value="S1003">商品C</data></li>
</ul>

表示例

  • 商品A
  • 商品B
  • 商品C

L2.7.11 time 要素(日付・時刻)

<time datetime="日付時刻情報"> 日付・時刻コンテンツ </dfn>

日付や時刻を定義します。日付・時刻コンテンツに日付時刻情報を記述する場合と、日付・時刻コンテンツには日付や時刻に関連する事項を記述して datetime 属性に実際の日付時刻情報を記述する場合があります。

主な固有属性

datetime
日付時刻情報を指定します。指定する情報に応じたフォーマットで指定します。以下はフォーマットの例です。
2024
年月
2024-09
月日
09-10
年月日
2024-09-10
時刻
10:12
時刻秒
10:12:30

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<time>2024-09-10</time>

表示例

HTML例


<time datetime="12:00:00">ランチタイム</time>

表示例

L2.7.12 code 要素(ソースコード)

<code> ソースコードコンテンツ </code>

プログラムやスクリプトのソースコードを定義します。対応しているブラウザでは均等フォントで表示します。一般的にソースコードを表示させる場合は、pre 要素と code 要素を入れ子構造で使用します。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • 規定値では、均等フォントが設定されています。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<code>console.log("テキスト");</code>

表示例

console.log("テキスト");

HTML例


<pre><code>&lt;script&gt;
function sample(a) {
    console.log(a);
}
&lt;/script&gt;
</code></pre>

表示例

<script>
function sample(a) {
    console.log(a);
}
</script>

L2.7.13 var 要素(変数・引数)

<var> 変数・引数コンテンツ </var>

プログラムで使用する変数や引数を定義します。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • 規定値では、斜体文字(イタリック体)が設定されています。
  • var は、variable(変数)の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p><var>y</var> = <var>a</var> * <var>x</var> + <var>b</var> ;</p>

表示例

y = a * x + b ;

HTML例


<pre><code>&lt;script&gt;
function sample(<var>a</var>) {
    console.log(<var>a</var>);
}
&lt;/script&gt;
</code></pre>

表示例

<script>
function sample(a) {
    console.log(a);
}
</script>

L2.7.14 samp 要素(出力サンプル)

<samp> 出力サンプルコンテンツ </samp>

プログラムの出力結果のサンプルを定義します。プログラムによる計算結果を表示させる場合は、output 要素を使用してください。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • 規定値では、均等フォントが設定されています。
  • samp は、sample の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>サーバーからの出力メッセージ:<samp>処理が正常に終了しました。</samp></p>

表示例

サーバーからの出力メッセージ:処理が正常に終了しました。

L2.7.15 kbd 要素(キーボード入力文字)

<kbd> キーボード入力文字コンテンツ </kbd>

キーボードからの入力文字を定義します。キーボードを操作した時に得られる効果などを説明する時に使用します。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • 規定値では、均等フォントが設定されています。
  • kbd は、keyboard の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>文字列のコピー操作</p>
<ul>
	<li>Windowsの場合:<kbd>Ctrl</kbd> + <kbd>C</kbd></li>
	<li>MacOSの場合:<kbd>Command</kbd> + <kbd>C</kbd></li>
</ul>

表示例

文字列のコピー操作

  • Windowsの場合:Ctrl + C
  • MacOSの場合:Command + C

L2.7.16 sub 要素(下付き文字)

<sub> 下付き文字コンテンツ </sub>

下付き文字を定義します。数式や化学式など表記上の理由がある場合に有効です。同じような目的で上付き文字を定義したい場合は、sup 要素を使用します。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • 規定値では、文字が小さくなりベースラインよりも低い位置に表示されるように設定されています。
  • sub は、subscript の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>水の分子式は、H<sub>2</sub>O です。</p>

表示例

水の分子式は、H2O です。

L2.7.17 sup 要素(上付き文字)

<sup> 上付き文字コンテンツ </sup>

上付き文字を定義します。数式や化学式など表記上の理由がある場合に有効です。同じような目的で下付き文字を定義したい場合は、sub 要素を使用します。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • 規定値では、文字が小さくなりベースラインよりも高い位置に表示されるように設定されています。
  • sup は、superscript の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>y = x<sup>2</sup></p>

表示例

y = x2

HTML例


<p>Webサイトの作成には、HTML<sup>*1</sup> を使用します。</p>
<p>*1 HTML:HyperText Markup Language</p>

表示例

Webサイトの作成には、HTML*1 を使用します。

*1 HTML:HyperText Markup Language

L2.7.18 i 要素(慣用句・特定用語)

<i> 慣用句・特定用語コンテンツ </i>

慣用句や特定用語などで前後の言葉と区別したい用語を定義します。例えば、技術的な専門用語、学術的な言葉、あるいは誰かが言ったことわざや慣用句などです。

以前は、文字列を斜体文字(イタリック体)にするための要素として使用されていましたが、現在は文脈上の意味が定義されていますので斜体文字(イタリック体)にするために使用しないでください。

類似の要素として、em 要素(強調)、strong 要素(重要情報)、dfn 要素(定義語)などがありますので文章により適切な要素を使用するようにしてください。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • 規定値では、斜体文字(イタリック体)が設定されています。
  • i は、italic の略称です。(意味づけが変更になっています)
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>Webサイトは、HTML を使用して <i>ハイパーリンク</i> を設定します。</p>

表示例

Webサイトは、HTML を使用して ハイパーリンク を設定します。

L2.7.19 b 要素(太字)

<b> 太字コンテンツ </b>

文章の中で意味的な重要性を与えずに注目してほしい箇所を定義します。規定値では太字(ボールド体)になりますが意味的な変化はありません。

言葉の意味を強調したり重要性を伝えるために使用してはいけません。協調したい場合は em 要素、重要性や緊急度を表す場合は strong 要素を使用してください。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • 規定値では、太字(ボールド体)が設定されています。
  • b は、bold の略称です。(意味づけが変更になっています)
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>前後の文章 <b>注目してほしい箇所</b> 前後の文章</p>

表示例

前後の文章 注目してほしい箇所 前後の文章

L2.7.20 u 要素(注釈)

<u> 注釈コンテンツ </u>

指定した範囲に非言語的な注釈があることを定義します。非言語的な注釈とは文脈的に注意を促したい文字列で、例えば英語で表記した場合のスペルミスや誤解を招きかねない固有名詞などです。

以前は、文字列に下線(アンダーライン)を引くための要素として使用されていましたが、現在は文脈上の意味が定義されていますので下線(アンダーライン)を引くために使用しないでください。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • 規定値では、下線(アンダーライン)が設定されています。
  • u は、under line の略称です。(意味づけが変更になっています)
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>Webサイトが正しく表示されないのは、header 要素の綴りが <u>head</u> になっているためです。</p>

表示例

Webサイトが正しく表示されないのは header 要素の綴りが head になっているためです。

L2.7.21 mark 要素(マーキング)

<mark> マーキングコンテンツ </mark>

文脈の中で関連性のある文字列のマーキングを定義します。これは重要性がある箇所ではなく使用者の操作に関連している箇所に使用します。例えば、検索結果の画面で検索ワードに一致している部分をハイライトにする場合などに適しています。

対象の文字列を強調したい場合は em 要素、重要性や緊急性を与えたい場合は strong 要素を使用してください。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • 規定値では、背景のハイライト表示が設定されています。
  • mark は、marking の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>文章の中で <mark>ハイライトしたい部分</mark> に設定します。</p>

表示例

文章の中で ハイライトしたい部分 に設定します。

L2.7.22 ruby 要素(ルビ文字の範囲)

<ruby> ルビ文字の範囲コンテンツ </ruby>

ルビを振る対象の文字列を定義します。ルビは漢字などの特定の文字列に対してふりがなや発音などを小さな文字で表示するものです。対象の文字列の後ろにカッコ付きでふりがなを記述する方法もありますがルビを使用することで可動性や視認性を向上させることもできます。

ルビに関連する要素として、ruby 要素(ルビ文字の範囲)、rt 要素(ルビの内容)、rp 要素(ルビ非対応時の読みがな)などがあります。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • 規定値では、ruby 要素で指定した文字列の上に rt 要素で指定したルビが均等に表示されます。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>ruby 要素は、;<ruby>漢字<rt>かんじ</rt></ruby> のようにふりがなを表示します。</p>
<p>ふりがなが長い場合は、;<ruby>5<rt>ファイブ</rt></ruby> のように表示されます。</p>
<p>ふりがなが短い場合は、;<ruby>シックス<rt>6</rt></ruby> のように表示されます。</p>

表示例

ruby 要素は、漢字かんじ のようにふりがなを表示します。

ふりがなが長い場合は、5ファイブ のように表示されます。

ふりがなが短い場合は、シックス6 のように表示されます。

L2.7.23 rt 要素(ルビの内容)

<rt> ルビの内容コンテンツ </rt>

ルビの内容を定義します。ルビ文字の範囲は、ruby 要素で指定します。

ルビに関連する要素として、ruby 要素(ルビ文字の範囲)、rt 要素(ルビの内容)、rp 要素(ルビ非対応時の読みがな)などがあります。

使用上の注意事項

  • ルビは対象となる文字列の半分の大きさに縮小され対象文字列の上部に表示されます。
  • rt は、ruby text の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>ruby 要素は、;<ruby>漢字<rt>かんじ</rt></ruby> のようにふりがなを表示します。</p>
<p>ふりがなが長い場合は、;<ruby>5<rt>ファイブ</rt></ruby> のように表示されます。</p>
<p>ふりがなが短い場合は、;<ruby>シックス<rt>6</rt></ruby> のように表示されます。</p>

表示例

ruby 要素は、漢字かんじ のようにふりがなを表示します。

ふりがなが長い場合は、5ファイブ のように表示されます。

ふりがなが短い場合は、シックス6 のように表示されます。

L2.7.24 rp 要素(ルビ非対応時のよみがな)

<rp> ルビ非対応時のよみがなコンテンツ </rp>

ruby 要素が非対応の環境だった場合の代替文字として表示するカッコ記号などを定義します。

ルビに関連する要素として、ruby 要素(ルビ文字の範囲)、rt 要素(ルビの内容)、rp 要素(ルビ非対応時の読みがな)などがあります。

使用上の注意事項

  • 多くのブラウザは、ruby 要素に対応しているため rp 要素の内容は可視化されません。
  • rp 要素は、rt 要素の直前あるいは直後にだけ配置してください。
  • rp は、ruby parentheses の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>ruby 要素は、;<ruby>漢字<rp>(</rp><rt>かんじ</rt></rp>)</rp></ruby> のようにふりがなを表示します。</p>

表示例

ruby 要素は、漢字かんじ のようにふりがなを表示します。

もし、使用しているブラウザが ruby 要素に対応していない場合は、以下のように表示されます。

表示例

ruby 要素は、漢字(かんじ) のようにふりがなを表示します。

L2.7.25 bdi 要素(別の書字方向)

<bdi> 別の書式方向コンテンツ </bdi>

ページに指定されている書字方向と分離させて別の書字方向を与えたい範囲を定義します。bdi は Bi-Directional Isolation を短縮したもので分離双方向要素という意味を持っています。

書字方向とは、文字を書き始める方向の事であり、通常は、左横書き(LTR:Left To Right)を想定していますので英語や日本語を使う場合は、特に意識する必要はありません。しかし、文章の一部にアラビア語などの右横書き(RTL:Right To Left)が存在する場合は、その部分を分離する必要があります。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>Player <bdi>ارقام عربية</bdi> 123 points.</p>

表示例

bdi 要素なし:Player ارقام عربية 123 points.

bdi 要素あり:Player ارقام عربية 123 points.

L2.7.26 bdo 要素(書字方向指定)

<bdo dir="書字方向"> 書字方向指定コンテンツ </bdo>

ページの基本的な書字方向を左横書き(LTR:Left To Right)か右横書き(RTL:Right To Left)を定義します。文字列の並び方が変わるだけで文字自体が反転するわけではありません。

主な固有属性

dir
書字方向を指定します。
ltr
左横書き(LTR:Left To Right)を指定(初期値)
rtl
右横書き(RTL:Right To Left)を指定

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>今日は晴天です。Happy!</p>
<p><bdo dir="rtl">今日は晴天です。Happy!</bdo></p>

表示例

今日は晴天です。Happy!

今日は晴天です。Happy!

L2.7.27 span 要素(インライン要素の範囲)

<span> インライン要素の範囲コンテンツ </span>

汎用的なインラインレベルのコンテナを定義します。これ自体はコンテンツに対する意味の持たせるものではありませんが特定の範囲をまとめてスタイルシート(CSS)を適用したい場合などに使用します。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>前後の文字列 <span style="color: red;">特定の文字列</span> 前後の文字列</p>

表示例

前後の文字列 特定の文字列 前後の文字列

L2.7.28 br 要素(改行)

<br>

文章の中の改行位置を定義します。一つの段落の中で改行を行いたい場合に使用します。

文章の見た目(スタイル)を整える目的で連続した改行を行ったり、段落を変える意味で改行を行うことは推奨されていません。視覚的な調整を行う場合はスタイルシート(CSS)を用いてください。

使用上の注意事項

  • レイアウトの初期値はインラインレベルですが文章の改行に影響を与えます。
  • この要素は空要素です。終了タグはありません。
  • br は、break の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>東京都千代田区1-1-1<br>TEL:03-0000-0000<br>Mail:abc@sample.com</p>

表示例

東京都千代田区1-1-1
TEL:03-0000-0000
Mail:abc@sample.com

L2.7.29 wbr 要素(改行可能位置)

<wbr>

文章の中の改行して良い位置を定義します。要素の幅が足りている時は改行しないで、足りなくなった時に改行する位置になります。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えるかどうかは要素の幅とコンテンツの内容によります。
  • この要素は空要素です。終了タグはありません。
  • wbr は、word break の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
<p>abcdefghijklmnopqrstuvwxyz<wbr>abcdefghijklmnopqrstuvwxyz<wbr>abcdefghijklmnopqrstuvwxyz<wbr>abcdefghijklmnopqrstuvwxyz<wbr>abcdefghijklmnopqrstuvwxyz<wbr>abcdefghijklmnopqrstuvwxyz<wbr>abcdefghijklmnopqrstuvwxyz<wbr>abcdefghijklmnopqrstuvwxyz<wbr>abcdefghijklmnopqrstuvwxyz</p>

表示例

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

L2.8 編集

L2.8.1 ins 要素(追加部分)

<ins cite="追加情報の参照先URL" datetime="情報を追加した日時"> 追加部分コンテンツ </ins>

文章の中で新たに追加された範囲を定義します。公開済みのドキュメントを編集して新しく書き加えられた箇所を明示するために使用します。

属性を使用して追加された情報に関する具体的な参照先 URL や日時を指定することができます。文章から削除された箇所には、del 要素を使用してください。

主な固有属性

cite
追加情報に関する具体的な参照先 URL を指定します。
datetime
情報を追加した日時を指定します。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • 規定値では、アンダーラインが設定されています。
  • ins は、insert の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>前後の文字列 <del>削除したの文字列</del> <ins>追加した文字列</ins> 前後の文字列</p>

表示例

前後の文字列 削除した文字列 追加した文字列 前後の文字列

L2.8.2 del 要素(削除部分)

<del cite="削除情報の参照先URL" datetime="情報を削除した日時"> 削除部分コンテンツ </del>

文章の中で削除された範囲を定義します。公開済みのドキュメントで削除した箇所を残したい場合に使用します。

属性を使用して追加された情報に関する具体的な参照先 URL や日時を指定することができます。文章に追加した箇所には、ins 要素を使用してください。

主な固有属性

cite
削除情報に関する具体的な参照先 URL を指定します。
datetime
情報を削除した日時を指定します。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • 規定値では、消し線が設定されています。
  • del は、delete の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>前後の文字列 <del>削除したの文字列</del> <ins>追加したの文字列</ins> 前後の文字列</p>

表示例

前後の文字列 削除した文字列 追加した文字列 前後の文字列

L2.9 埋め込み型コンテンツ

L2.9.1 picture 要素(複数メディアリソース)

<picture> 複数メディアリソースコンテンツ </picture>

特定の画像に対して複数のリソースを提供可能なコンテナを配置します。具体的には、一つの img 要素に対して複数の source 要素を割り当てる親要素になります。表示する環境によって最適な画像を選択するために使用します。picture 要素に対応していない環境では、img 要素の src 属性で指定された画像ファイルのパスが優先されます。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

ビューポートの幅が 640px 以下の場合は、source 要素で指定した画像が読み込まれ、それ以外の場合は、img 要素で指定した画像が読み込まれます。

HTML例


<picture>
	<img src="images/sample1.jpg" alt="Sample Image" width="600" height="400">
	<source srcset="images/sample2.jpg" media="(max-width: 640px)">
</picture>

L2.9.2 img 要素(画像)

<img src="画像ファイルのパス" 
	alt="代替テキスト" 
	width="横方向ピクセル値" 
	height="縦方向ピクセル値" 
	loading="画像の読み込み方" 
	decoding="画像デコード時のヒント" 
	srcset="画像選択リスト" 
	sizes="画像サイズリスト">

ページの中に画像の埋め込みを定義します。src 属性で表示する画像ファイルを指定し、alt 属性で代替テキストを指定します。代替テキストは、なんらかの原因で画像が表示できない場合に代わりに表示する文字列になります。代替テキストはアクセシビリティの観点で必ず指定するようにしてください。

width 属性と height 属性を使用して画像の縦横比を明示しておくことが推奨されています。縦横比を明示しておくことでブラウザが早期に画像を表示する領域を確保することが可能になります。また、実際に表示される大きさは、スタイルシート(CSS)で指定することができます。この場合は、画像の縦横比が変更されるのを防ぐために高さに auto を指定する必要があります。

sizes 属性と srcset 属性を使用してビューポート幅によって表示する画像ファイルの切り替えが可能になります。表示する画像の切り替えは、picture 要素と source 要素を使用しても実現可能なので状況によって使い分けてください。

主な固有属性

src
表示する画像ファイルのパスを指定します。
alt
表示する画像ファイルの代替テキストを指定します。代替テキストは、なんらかの原因で画像が表示できない場合に代わりに表示する文字列になります。
width
画像の横方向の単位なしのピクセル値を指定します。この値を指定しておくことでブラウザは画像を読み込む前に縦横比を計算し表示領域を確保することができます。
height
画像の縦方向の単位なしのピクセル値を指定します。この値を指定しておくことでブラウザは画像を読み込む前に縦横比を計算し表示領域を確保することができます。
loading
画像の読み込み方を指定します。
eager
画像の配置箇所が表示領域に入る前から読み込みを開始します。(初期値)
lazy
画像の配置箇所が表示領域に入るまで読み込みを遅延します。
decoding
画像をデコードする時のヒントを指定します。
sync
他のコンテンツと同期的にデコードします。
async
他のコンテンツと非同期的にデコードします。
auto
ブラウザの規定値に従います。
srcset
利用可能な画像のソースセットを指定します。画像ファイルへのパスとサイズを並べて指定することで、sizes 属性で指定した条件に一致したものを採用させることができます。
sizes
srcset 属性で指定されたソースの中から表示するのに相応しいサイズを提案します。値はメディア環境と採用するソースを指定します。複数を列挙することで条件に一致するものをブラウザが採用します。
usemap
イメージマップを作成する時に map 要素と紐付けるイメージマップ名を指定します。イメージマップ名は、map 要素の name 属性で指定した名前にハッシュ(#)を付与して指定してください。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • この要素は空要素です。終了タグはありません。
  • img は、image の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<img src="images/sample1.jpg" alt="Sample Image" width="600" height="400">

高解像度ディスプレイ(Retina)の場合に解像度の高い画像ファイルを選択できるようになります。以下の例は、srcset 属性の画像ファイルのパスの後ろに指定されている 2x は二倍の解像度が条件のファイルであることを示します。

HTML例


<img src="images/sample1.jpg" srcset="images/sample2.jpg 2x" alt="Sample Image">

ビューポートの幅によって画像ファイルを選択できるようになります。以下の例は、400px 以下であれば 200px の画像を表示し、それ以外の場合は、400px の画像を表示するように sizes 属性で指定しています。srcset 属性の画像ファイルのパスの後ろに指定されている 200w や 400w は、ソースの幅を示します。

HTML例


<img src="images/sample1.jpg" 
	srcset="images/sample2.jpg 200w, images/sample3.jpg 400w" 
	sizes="(max-width: 400px) 200px, 400px" alt="Sample Image">

L2.9.3 iframe 要素(インラインフレーム)

<iframe src="インラインフレーム表示ファイルのパス" 
	width="横方向ピクセル値" 
	height="縦方向ピクセル値" 
	srcdoc="インラインフレームに表示するHTML" 
	name="インラインフレームの名前"> 
	iframe要素が未サポート時の代替テキスト </iframe>

ページの中にインラインフレームの作成を定義します。インラインフレームとは、表示しているページの中に別のページを埋め込むための機能です。

開始タグと終了タグの間に「iframe要素が未サポート時の代替テキスト」を指定することができます。これは、iframe 要素をサポートしていないブラウザの時に表示される文字列になりますが、現時点では主要なブラウザは iframe 要素をサポートしていますので未記載で問題ありません。

主な固有属性

src
インラインフレームに表示するページファイルのパスを指定します。
width
インラインフレームの横方向の単位なしのピクセル値を指定します。規定値は、300 です。この値はスタイルシート(CSS)で上書きすることができます。
height
インラインフレームの縦方向の単位なしのピクセル値を指定します。規定値は、150 です。この値はスタイルシート(CSS)で上書きすることができます。
srcdoc
インラインフレームに表示する HTML を直接指定します。本属性が指定された場合は、src 属性で指定したページ内容は上書きされます。また、ブラウザが本属性をサポートしていない場合は、src 属性で指定したページ内容が有効になります。本属性で HTML を指定する場合に、HTML 内に二重引用符(")が含まれる場合は、特殊文字(&quot;)での指定が必要になります。。
name
インラインフレームの名前を指定します。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • iframe は、inline frame の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<iframe src="https://html-css.hamaya2020.com/" width="600" height="400"></iframe>

L2.9.4 embed 要素(外部コンテンツの埋め込み)

<embed src="外部コンテンツファイルのパス" 
	type="MIMEタイプ" 
	width="横方向ピクセル値" 
	height="縦方向ピクセル値">

ページの中に外部コンテンツの埋め込みを定義します。指定された外部コンテンツは、ブラウザにインストールされているプラグインによって再生されるため表示する環境によって対応していない場合があるので注意が必要です。

表示する環境の差異を最小限にするためには、embed 要素よりも object 要素や iframe 要素の採用を検討すべきかもしれません。

主な固有属性

src
外部コンテンツファイルのパスを指定します。
type
再生する外部コンテンツファイルの MIME タイプを指定します。
width
外部コンテンツの横方向の単位なしのピクセル値を指定します。
height
外部コンテンツの縦方向の単位なしのピクセル値を指定します。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • この要素は空要素です。終了タグはありません。
  • embed は、embedding の略称です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<embed src="video/sample1.mp4" type="video/mp4" width="600" height="400">

L2.9.5 object 要素(外部リソースオブジェクトの埋め込み)

<object data="外部リソースファイルのパス" 
	type="MIMEタイプ" 
	width="横方向ピクセル値" 
	height="縦方向ピクセル値" 
	form="form要素との関連付け" 
	name="外部リソースの名前">
	object 要素が未サポート時の代替テキスト </object>

ページの中に外部リソースの埋め込みを定義します。本要素は、img 要素や embed 要素と違って終了タグを持っているため、本要素を未サポートのブラウザで表示した時の代替テキストを指定することができます。

外部リソースとして想定されているのは、画像、動画、音声といったメディアファイルや PDF や HTML 以外の文書ファイルなどです。外部リソースの埋め込みは、data 属性と type 属性で指定しますがプラグインを介して操作するようなリソースの場合は、本要素の配下に param 要素を配置して適切なパラメーターの設定を行います。

開始タグと終了タグの間に「object 要素が未サポート時の代替テキスト」を指定することができます。これは、object 要素をサポートしていないブラウザの時に表示される文字列になりますが、現時点では主要なブラウザは object 要素をサポートしていますので未記載で問題ありません。

主な固有属性

data
外部リソースファイルのパスを指定します。data 属性と type 属性は、どちらかひとつが必須となります。
type
data 属性で読み込む外部リソースの種別を MIME タイプで指定します。data 属性と type 属性は、どちらかひとつが必須となります。
width
外部リソースの横方向の単位なしのピクセル値を指定します。
height
外部リソースの縦方向の単位なしのピクセル値を指定します。
form
form 要素と関連付けられる場合に対象の id 名と一致する名前を指定します。
name
外部リソースの名前を指定します。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<object data="video/sample1.mp4" type="video/mp4" width="600" height="400"></object>

object 要素をサポートしていないブラウザ用の代替テキストには画像ファイルを指定することもできます。

HTML例


<object data="video/sample1.mp4" type="video/mp4" width="600" height="400">
	<img src="images/sample1.jpg" alt="Video Title" width="600" height="400">
</object>

PDF ファイルなどを埋め込む場合は、以下のように指定します。

HTML例


<figure>
	<object data="docs/sample1.pdf" type="application/pdf" width="600" height="400"></object>
	<figcaption>〇〇〇〇報告書</figcaption>
</figure>

L2.9.6 video 要素(動画コンテンツ)

<video src="動画ファイルのパス" 
	width="横方向ピクセル値" 
	height="縦方向ピクセル値" 
	controls 
	poster="画像ファイルのパス" 
	autoplay 
	loop 
	muted 
	playsinline 
	preload="動画ファイル読み込み時の動作">
	video 要素が未サポート時の代替テキスト </video>

ページの中に動画の埋め込みを定義します。src 属性で表示する動画ファイルを指定します。

動画を再生する条件を controls 属性(動画の再生、停止などを制御するコントール表示)、poster 属性(動画が再生可能になるまでに表示する画像)、autoplay 属性(自動再生)、loop 属性(繰り返し再生)、muted 属性(初期消音)、playsinline 属性(インライン再生)、preload 属性(動画読み込み時の振る舞い)で指定します。

開始タグと終了タグの間に「video 要素が未サポート時の代替テキスト」を指定することができます。これは、video 要素をサポートしていないブラウザの時に表示される文字列を指定します。また、ブラウザが動画ファイルのファイル形式に対応していない場合を想定して、video 要素の子要素に source 要素を指定して複数のメディア形式を提供することもできます。ブラウザは、上から順に再生可能な形式を探して表示メディアを決定します。

主な固有属性

src
動画ファイルのパスを指定します。
width
動画再生フレームの横方向の単位なしのピクセル値を指定します。
height
動画再生フレームの縦方向の単位なしのピクセル値を指定します。
controls
動画の再生、一時停止、音量などの制御インタフェースを表示します。値のない論理値です。
poster
動画が再生可能になるまでに表示する画像ファイルのパスを指定します。本属性を指定しなかった場合は、再生可能になるまで何も表示されません。
autoplay
動画が再生可能になった時点で自動的に再生を開始します。値のない論理値です。
loop
動画を最後まで再生した後に自動的に先頭に戻ります。値のない論理値です。
muted
動画再生時の初期状態が無音になります。値のない論理値です。
playsinline
動画をインラインで再生します。多くのブラウザは規定値でインライン再生を行いますがブラウザによってはフルスクリーンで再生されるものもあります。値のない論理値です。
preload
動画ファイルを読み込みに関するブラウザの振る舞いを指定します。
none
事前の読み込みを行いません。
metadata
メタデータだけを読み込みます
auto
事前の読み込みを行います。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<video src="video/sample1.mp4" controls></video>

動画を自動で再生させ、自動で繰り返し再生します。

HTML例


<video src="video/sample1.mp4" controls autoplay loop></video>

video 要素をサポートしていないブラウザ用の代替テキストには画像ファイルを指定することもできます。

HTML例


<video src="video/sample1.mp4" controls width="600" height="400">
	<img src="images/sample1.jpg" alt="Video Title" width="600" height="400">
</object>

複数のメディア形式を指定する場合、以下のように指定します。

HTML例


<video controls>
	<source src="video/sample1.webm" type="video/webm">
	<source src="video/sample1.mp4" type="video/mp4">
	<source src="video/sample1.mov" type="video/quicktime">
	<p>お使いのブラウザでは、この動画を再生できません。</p>
</video>

L2.9.7 audio 要素(音声コンテンツ)

<audio src="音声ファイルのパス" 
	controls 
	autoplay 
	loop 
	muted 
	preload="音声ファイル読み込み時の動作">
	audio 要素が未サポート時の代替テキスト </audio>

ページの中に音声の埋め込みを定義します。src 属性で再生する音声ファイルを指定します。

動画を再生する条件を controls 属性(音声の再生、停止などを制御するコントール表示)、autoplay 属性(自動再生)、loop 属性(繰り返し再生)、muted 属性(初期消音)、preload 属性(音声読み込み時の振る舞い)で指定します。

開始タグと終了タグの間に「audio 要素が未サポート時の代替テキスト」を指定することができます。これは、audio 要素をサポートしていないブラウザの時に表示される文字列を指定します。また、ブラウザが音声ファイルのファイル形式に対応していない場合を想定して、audio 要素の子要素に source 要素を指定して複数のメディア形式を提供することもできます。ブラウザは、上から順に再生可能な形式を探して再生メディアを決定します。

主な固有属性

src
音声ファイルのパスを指定します。
controls
音声の再生、一時停止、音量などの制御インタフェースを表示します。値のない論理値です。
autoplay
音声が再生可能になった時点で自動的に再生を開始します。値のない論理値です。
loop
音声を最後まで再生した後に自動的に先頭に戻ります。値のない論理値です。
muted
音声再生時の初期状態が無音になります。値のない論理値です。
preload
音声ファイルを読み込みに関するブラウザの振る舞いを指定します。
none
事前の読み込みを行いません。
metadata
メタデータだけを読み込みます
auto
事前の読み込みを行います。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<audio src="audio/sample1.mp3" controls></audio>

音声を自動で再生させ、自動で繰り返し再生します。

HTML例


<audio src="audio/sample1.mp3" controls autoplay loop></audio>

複数のメディア形式を指定する場合、以下のように指定します。

HTML例


<audio controls>
	<source src="audio/sample1.m4a" type="audio/aac">
	<source src="audio/sample1.ogg" type="audio/ogg">
	<source src="audio/sample1.mp3" type="audio/mpeg">
	<p>お使いのブラウザでは、この音声を再生できません。</p>
</audio>

L2.9.8 source 要素(メディアソース)

<source src="動画・音声ファイルのパス" 
	type="MIMEタイプ" 
	srcset="画像ファイルのパスリスト" 
	sizes="画像表示幅" 
	media="メディア・クエリー" 
	width="横方向ピクセル値" 
	height="縦方向ピクセル値">

画像・動画・音声などのメディアリソースを定義します。picture 要素、video 要素、audio 要素の子要素として配置し条件によって使用するメディアを選択可能にします。

一般的には、複数のメディアを列挙しておき、表示する端末・ブラウザの種類や画面の幅などのユーザー環境によって使用するメディアを切り替えることができます。

主な固有属性

src
動画・音声ファイルのパスを指定します。親要素が video 要素、audio 要素の場合は必須です。親要素が picture の場合は指定できません。
type
メディアファイルの種別を MIME タイプで指定します。
srcset
利用可能な画像のソースをカンマ(,)で区切って指定します。画像ファイルへのパスとサイズを並べて指定することで表示する条件に一致したものを採用させることができます。親要素が picture の場合に指定できます。
sizes
最終的に画像が表示される幅をカンマ(,)で区切って指定します。この値は、srcset 属性で指定した画像を使用する時にブラウザがページのレイアウトを行うために使用します。親要素が picture の場合に指定できます。
media
ソースが意図したメディア・クエリーを指定します。メディア・クエリーは、端末の特性を指定することで表示する画像の選択を可能にします。親要素が picture の場合に指定できます。
width
画像の横方向の単位なしのピクセル値を指定します。この値を指定しておくことでブラウザは画像を読み込む前に縦横比を計算し表示領域を確保することができます。親要素が picture の場合に指定できます。
height
画像の縦方向の単位なしのピクセル値を指定します。この値を指定しておくことでブラウザは画像を読み込む前に縦横比を計算し表示領域を確保することができます。親要素が picture の場合に指定できます。

使用上の注意事項

  • この要素は可視化されません。親要素で読み込まれるメディアの候補を示すだけです。
  • この要素は空要素です。終了タグはありません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

ビューポートの幅が 640px 以下の場合は、source 要素で指定した画像が読み込まれ、それ以外の場合は、img 要素で指定した画像が読み込まれます。

HTML例


<picture>
	<img src="images/sample1.jpg" alt="Sample Image" width="600" height="400">
	<source srcset="images/sample2.jpg" media="(max-width: 640px)">
</picture>

複数の画像の中から画面の幅によって条件に合致する画像が読み込まれます。

HTML例


<picture>
	<source srcset="images/sample1.jpg" media="(max-width: 400px)">
	<source srcset="images/sample2.jpg" media="(max-width: 600px)">
	<source srcset="images/sample3.jpg" media="(max-width: 800px)">
	<img src="images/sample4.jpg" alt="Sample Image">
</picture>

複数の動画ファイルから条件に合うメディアを選択して再生します。

HTML例


<video controls>
	<source src="video/sample1.webm" type="video/webm">
	<source src="video/sample1.mp4" type="video/mp4">
	<source src="video/sample1.mov" type="video/quicktime">
	<p>お使いのブラウザでは、この動画を再生できません。</p>
</video>

複数の音声ファイルから条件に合うメディアを選択して再生します。

HTML例


<audio controls>
	<source src="audio/sample1.m4a" type="audio/aac">
	<source src="audio/sample1.ogg" type="audio/ogg">
	<source src="audio/sample1.mp3" type="audio/mpeg">
	<p>お使いのブラウザでは、この音声を再生できません。</p>
</audio>

L2.9.9 track 要素(字幕・キャプション)

<track src="テキストトラックファイルのパス" 
	kind="テキストデータ種別" 
	srclang="テキストデータ言語" 
	label="テキストトラックの名前" 
	default="優先トラック">

動画・音声などのコンテンツにテキストトラックを定義します。メディアの埋め込み要素にキュー、字幕、キャプション、メタデータなどを追加します。video 要素、audio 要素の子要素として配置します。

テキストトラックは、WebVTT(.vtt)形式で保存されたファイルのパスを src 属性で指定します。

主な固有属性

src
テキストトラックファイル(.vtt)のパスを指定します。
kind
テキストデータの種別を指定します。
subtitles
翻訳字幕を提供します。字幕には追加コンテンツや付加的な背景情報を含む場合があります。
captions
書写あるいは音声の字幕を提供します。音楽のキューやサウンドエフェクトといった非言語情報を含む場合があります。
descriptions
動画コンテンツの説明を提供します。目が不自由な場合や動画を視聴できない場合に適しています。
chapters
チャプタータイトルを提供します。ユーザーがメディアリソースを操作する場合に使用することを意図としています。
metadata
スクリプトが使用するトラック情報です。ユーザーには見えません。
srclang
テキストデータの言語を指定します。kind 属性に subtitles を指定した場合は必須です。
label
テキストトラックの一覧表示時にユーザーに見せるテキストトラックのタイトルを指定します。
default
複数のテキストトラックが存在する場合に優先的に使用するものを指定します。メディア要素ごとに一つだけ指定でき、ユーザーが別のとタックを指定している場合は無効になります。

使用上の注意事項

  • レイアウトには影響を与えません。メディアソースに対してテキストデータを与えます。
  • この要素は空要素です。終了タグはありません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<video src="video/sample1.mp4" controls>
	<track src="track/sample1.vtt" kind="chapters" srclang="en" label="Chapter1">
</video>

L2.9.10 map 要素(複数リンク)

<map name="イメージマップ名"> 複数リンクコンテンツ </map>

一つの画像に複数のリンク先を定義します。イメージマップなどを作る時に使用します。map 要素は、イメージマップの名称を指定します。

イメージマップは、以下の手順で作成します。

  1. map 要素の name 属性を使用してでイメージマップの名称を決めます。
  2. map 要素の子要素にリンク先の数分の area 要素を配置します。
  3. area 要素でリンク先とリンク領域の形状・位置座標を指定します。
  4. img 要素 の src 属性と usemap 属性で使用する画像と適用するイメージマップ名を指定します。

主な固有属性

name
イメージマップ名を指定します。

使用上の注意事項

  • レイアウトの初期値はインラインです。文章の改行には影響を与えません。
  • この要素は可視化されません。img 要素に与える仮想マップを定義するのみです。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<img src="images/map.png" usemap="#map1" width="450" height="50" alt="map1">
<map name="map1">
	<area href="#area1" shape="rect" coords="20,3,70,47" alt="area1">
	<area href="#area2" shape="rect" coords="90,3,165,47" alt="area2">
	<area href="#area3" shape="rect" coords="193,3,257,47" alt="area3">
	<area href="#area4" shape="rect" coords="285,3,337,47" alt="area4">
	<area href="#area5" shape="rect" coords="358,3,425,47" alt="area5">
</map>

L2.9.11 area 要素(イメージマップ領域)

<area href="リンク先URL" 
	target="リンク先を開く環境" 
	rel="リンク先との関係" 
	usemap="マップ名" 
	shape="エリア形状" 
	coords="エリア範囲" 
	alt="代替テキスト" 
	download 
	hreflang="リンク先言語">

一つの画像に複数のリンク先を定義します。イメージマップなどを作る時に使用します。area 要素は、リンク先とリンク領域の形状・位置座標を指定します。

イメージマップは、以下の手順で作成します。

  1. map 要素の name 属性を使用してでイメージマップの名称を決めます。
  2. map 要素の子要素にリンク先の数分の area 要素を配置します。
  3. area 要素でリンク先とリンク領域の形状・位置座標を指定します。
  4. img 要素 の src 属性と usemap 属性で使用する画像と適用するイメージマップ名を指定します。

主な固有属性

href
リンク先 URL を指定します。リンク先がページ内の特定の場所になる場合は、ハッシュ(#)に続けて id 名を指定します。メールアドレスや電話番号を指定することもできます。
target
リンク先を開くフレーム名やウィンドウ名を指定します。以下の名前は特別な意味を持ちます。
_self
同じウィンドウで開きます。(初期値)
_blank
新しいタブまたは新しいウィンドウで開きます。
rel
リンク先との関係を指定します。
noopener
外部サイトへ移動する場合に発信元の文章改ざんを防ぎます。リンク先が信頼できない場合は指定してください。
noreferrer
Referer ヘッダー情報を発信したくない場合に指定します。リンク先が信頼できない場合は指定してください。
usemap
マップ名を設定する時に名前を指定します。
shape
エリア形状を指定します。
default
全体を指定します。
rect
四角形を指定します。
circle
円形を指定します。
poly
多角形を指定します。
coords
shape 属性で指定した形状に従ったマップアリアの座標範囲を単位なしのピクセル値で指定します。
default
指定できません。
rect
x1,y1,x2,y2 の形式で長方形の左上と右下の座標を指定します。
circle
x,y,radius の形式で円の中央の座標と半径を指定します。
poly
x1,y1,x2,y2,..,xn,yn の形式で多角形の角の座標を指定します。先頭と末尾の座標が同じでない場合は最後に座標を追加して多角形を閉じます。
alt
代替テキストを指定します。
download
リンク先のファイルがダウンロードするものである場合に指定します。
hreflang
リンク先の言語を表す場合に指定します。

使用上の注意事項

  • レイアウトの初期値はインラインです。文章の改行には影響を与えません。
  • この要素は可視化されません。img 要素に与える仮想マップを定義だけです。
  • この要素は空要素です。終了タグはありません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<img src="images/map.pngf" usemap="#map1" width="450" height="50" alt="map1">
<map name="map1">
	<area href="#area1" shape="rect" coords="20,3,70,47" alt="area1">
	<area href="#area2" shape="rect" coords="90,3,165,47" alt="area2">
	<area href="#area3" shape="rect" coords="193,3,257,47" alt="area3">
	<area href="#area4" shape="rect" coords="285,3,337,47" alt="area4">
	<area href="#area5" shape="rect" coords="358,3,425,47" alt="area5">
</map>

L2.9.12 math 要素(MathML レンダリング)

<math display="レンダリング方法"> MathMLコンテンツ </math>

数式を記述するための MathML を定義します。MathML を使用することでページ上に数式を記述することができます。

本項では、MathML の詳細説明(子要素を含む)は省略しますので関連サイトや関連図書を参照してください。

主な固有属性

display
MathML マークアップをレンダリングする方法を指定します。初期値は、inline です。
block
定義した数式をテキストのスパンの外にある独自ブロックに表示します。また、math-style プロパティは、normal に設定されます。
inline
定義した数式をテキストのスパンの中に表示します。また、math-style プロパティは、comoact に設定されます。

使用上の注意事項

使用例

HTML例


<p>
	The infinite sum:
	<math display="block">
		<mrow>
			<munderover>
				<mo>∑</mo>
				<mrow>
					<mi>n</mi>
					<mo>=</mo>
					<mn>1</mn>
				</mrow>
				<mrow>
					<mo>+</mo>
					<mn>∞</mn>
				</mrow>
			</munderover>
			<mfrac>
				<mn>1</mn>
				<msup>
					<mi>n</mi>
					<mn>2</mn>
				</msup>
			</mfrac>
		</mrow>
	</math>
</p>
<p>
	is equal to the real number:
	<math display="inline">
		<mfrac>
			<msup>
				<mi>π</mi>
				<mn>2</mn>
			</msup>
			<mn>6</mn>
		</mfrac>
	</math>
</p>

表示例

The infinite sum: n = 1 + 1 n 2

is equal to the real number: π 2 6

L2.9.13 svg 要素(SVG レンダリング)

<svg viewBox="描画領域定義" 
	width="要素の幅" 
	height="要素の高さ" 
	x="X軸の相対位置" 
	y="Y軸の相対位置" 
	preserveAspectRatio="アスペクト比" 
	fill="塗りつぶしの色" 
	fill-opacity="塗りつぶしの透明度" 
	stroke="線の色" 
	stroke-opacity="線の透明度" 
	stroke-width="線の幅" 
	stroke-dasharray="線の破線パターン" 
	stroke-linecap="線の終端形状" 
	stroke-linejoin="線のつなぎめ形状"> 
	SVGコンテンツ </svg>

スケーラブルベクターグラフィックス(SVG)を定義します。SVG を使用することで拡大・縮小しても画像品質を損なうことなく表示することができます。

SVG での描画を行うための領域には、ビューボックス(描画エリア)とビューポート(表示エリア)があります。ビューボックスは、viewBox 属性で定義し、ビューポートは、width 属性と height 属性で定義します。

本項では、SVG の詳細説明(子要素を含む)は省略しますので関連サイトや関連図書を参照してください。

主な固有属性

viewBox
ビューボックス(描画エリア)を定義します。「X軸最小値 Y軸最小値 エリアの幅 エリアの高さ」の順で指定します。
width
ビューポート(表示エリア)の幅を定義します。スタイルシート(CSS)と同様に単位付きの値で指定できます。単位を省略するとピクセル値と解釈されます。
height
ビューポート(表示エリア)の高さを定義します。スタイルシート(CSS)と同様に単位付きの値で指定できます。単位を省略するとピクセル値と解釈されます。
x
親要素に svg 要素がある場合に X 軸の相対位置を指定します。
y
親要素に svg 要素がある場合に Y 軸の相対位置を指定します。
preserveAspectRatio
svg 要素を描画する時に、どのようなアスペクト比で描画するかを指定します。値は、配置値とオプションを組み合わせて指定します。配置値は「none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid(初期値) | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax」で指定します。オプションは、ビューポートに対して、どのように拡大縮小するかを指定します。meet(初期値)を指定するとアスペクト比を維持したままビューボックス全体がビューポート内に表示します。slice を指定するとアスペクト比を維持したままビューポート全体をビューボックスで覆います。
fill
領域を塗りつぶす色を指定します。初期値は、black です。
fil-opacity
領域を塗りつぶす時の透明度を指定します。0 が完全な透明、1 が完全な不透明で、初期値は 1 です。
stroke
線の色を指定します。初期値は、none です。
stroke-opacity
線の透明度を指定します。0 が完全な透明、1 が完全な不透明で、初期値は 1 です。
stroke-width
線の幅を指定します。初期値は 1 です。
stroke-dasharray
線の破線パターンを指定します。「破線の長さ,空白の長さ」で指定します。初期値は、none です。
stroke-linecap
線の終端形状を以下の値で指定します。
butt
線と同時に直角で終わります。(初期値)
round
線の終端から半円で終わります。
square
線の終端から線幅の半分だけ出て直角で終わります。
stroke-linejoin
線のつなぎめ形状を以下の値で指定します。
miter
直角でつなぎます。(初期値)
round
丸でつなぎます。
bevel
射角でつなぎます。

使用上の注意事項

  • レイアウトの初期値はインラインレベルです。文章の改行に影響を与えません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。
  • SVG の詳細情報は、mdn web docs(SVG)サイトで確認してください。

使用例

HTML例


<div>
	<svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg' height='300' width='300'>
		<rect x='0' y='0' width='50%' height='50%' fill='red' opacity='0.6' />
		<circle cx='50%' cy='50%' r='25%' fill='lime' opacity='0.6' />
		<rect x='50%' y='50%' width='50%' height='50%' fill='blue' opacity='0.6' />
		<rect x='0' y='0' width='100%' height='100%' stroke='steelblue' stroke-width='0.5%' fill='none' />
	</svg>
</div>

表示例

L2.10 テーブル

L2.10.1 table 要素(テーブル作成)

<table> テーブルコンテンツ </table>

テーブルを定義します。テーブルとは、行と列の組み合わせで構成されたセルを用いて作成する表組です。表計算ソフトウェアなどをイメージして頂けると良いかと思います。

テーブルを作成するための先頭要素(親要素)は、table 要素になりますが、子要素として以下の各要素を組み合わせてテーブル構成を作成します。

caption
キャプション設定
colgroup
縦列グループ設定
col
テーブル縦列属性設定
tbody
テーブル本体設定
thead
テーブルヘッダー設定
tfoot
テーブルフッター設定
tr
テーブル横一行設定
th
テーブル見出しセル設定
td
テーブルセル設定

一般的にテーブルを作成するためは以下の手順になります。下記の手順に出現しない要素については必要に応じて使用してください。

  1. table 要素を使用してテーブル作成を開始します。
  2. tr 要素を使用して一行(横軸)の作成を開始します。
  3. 見出しが必要な場合は、一行に格納するセルの個数分の th 要素を使用して見出しを指定してください。
  4. 一行に格納するセルの個数分の td 要素を使用して個別データ(セルデータ)を指定してください。
  5. 行数分、tr 要素の定義から繰り返してください。

具体的なテーブル作成方法やテーブルの作成例を「Lesson-7 テーブルを活用しましょう」で説明していますので合わせて確認してください。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • display プロパティ値は、規定値で table になります。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<table>
	<caption>商品在庫</caption>
	<tr><th>商品名</th><th>単価</th><th>個数</th></tr>
	<tr><td>りんご</td><td>80</td><td>10</td></tr>
	<tr><td>みかん</td><td>40</td><td>20</td></tr>
	<tr><td>いちご</td><td>50</td><td>80</td></tr>
</table>

表示例

商品在庫
商品名単価個数
りんご8010
みかん4020
いちご5080

L2.10.2 caption 要素(テーブルキャプション)

<caption> テーブルキャプションコンテンツ </caption>

テーブルのタイトルを定義します。タイトルを指定する場合は、table 要素の直後に子要素として caption 要素を配置します。表の作成方法は、table 要素を参照してください。

使用上の注意事項

  • caption 要素は、table 要素の開始直後にだけ配置できます。
  • display プロパティ値は、規定値で table-caption になります。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

L2.10.3 colgroup 要素(テーブル縦列グループ)

<colgroup span="列数"> テーブル縦列グループコンテンツ </colgroup>

テーブルの縦列グループを定義します。複数の列を関連ある列としてグループ化する場合に使用します。表の作成方法は、table 要素を参照してください。

似たような機能に col 要素があります。列を構造的な意味でグループ化したい場合は、colgroup 要素を使用して、見栄えだけを調整したい場合は、col 要素を使用してください。併用も可能です。

主な固有属性

span
colgroup 要素が影響を及ぼす列の数を指定します。初期値は、1です。

使用上の注意事項

  • この要素は可視化されません。テーブルのセルに対して間接的に効果を提供します。
  • colgroup は、column group の略称です。
  • display プロパティ値は、規定値で table-column-group になります。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

L2.10.4 col 要素(テーブル縦列属性)

<col span="列数">

テーブルの縦に対してスタイルや属性を定義します。col 要素は、colgroup 要素の子要素として配置します。表の作成方法は、table 要素を参照してください。

似たような機能に colgroup 要素があります。列を構造的な意味でグループ化したい場合は、colgroup 要素を使用して、見栄えだけを調整したい場合は、col 要素を使用してください。併用も可能です。

主な固有属性

span
col 要素が影響を及ぼす列の数を指定します。初期値は、1です。

使用上の注意事項

  • この要素は可視化されません。テーブルのセルに対して視覚的に効果を提供します。
  • この要素は空要素です。終了タグはありません。
  • colgroup 要素の子要素として配置しますが col 要素単体でも機能します。
  • display プロパティ値は、規定値で table-column になります。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

L2.10.5 tbody 要素(テーブル本体)

<tbody> テーブル本体コンテンツ </tbody>

テーブルのデータ本体部分を定義します。ここでの本体は、ヘッダー行とフッター行を除いた部分を示します。表の作成方法は、table 要素を参照してください。

thead 要素(ヘッダー)、tbody 要素(テーブル本体)、tfoot 要素(フッター)はテーブル構造の明確化を必要としないテーブルでは省略されることが多い要素です。但し、各要素を使用してテーブルの構造を明確化しておくことで可視性の良いテーブルを作成することもできます。例えば、行数が多いテーブルの場合にヘッダーとフッターを固定化しておいてテーブル本体だけをスクロール表示できるようにすることで可視性を向上させることができます。

使用上の注意事項

  • レイアウトには影響を与えません。
  • tbody は、table body の略称です。
  • display プロパティ値は、規定値で table-row-group になります。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

L2.10.6 thead 要素(テーブルヘッダー)

<thead> テーブルヘッダーコンテンツ </thead>

テーブルのヘッダー部分を定義します。一般的には、th 要素を使用してヘッダーを定義しますが、それを thead 要素でグループ化します。表の作成方法は、table 要素を参照してください。

thead 要素(ヘッダー)、tbody 要素(テーブル本体)、tfoot 要素(フッター)はテーブル構造の明確化を必要としないテーブルでは省略されることが多い要素です。但し、各要素を使用してテーブルの構造を明確化しておくことで可視性の良いテーブルを作成することもできます。例えば、行数が多いテーブルの場合にヘッダーとフッターを固定化しておいてテーブル本体だけをスクロール表示できるようにすることで可視性を向上させることができます。

使用上の注意事項

  • レイアウトには影響を与えません。
  • thead は、table header の略称です。
  • display プロパティ値は、table-header-group になります。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

L2.10.7 tfoot 要素(テーブルフッター)

<tfoot> テーブルフッターコンテンツ </tfoot>

テーブルのフッター部分を定義します。一般的には、td 要素を使用してフッターを定義しますが、それを tfoot 要素でグループ化します。表の作成方法は、table 要素を参照してください。

thead 要素(ヘッダー)、tbody 要素(テーブル本体)、tfoot 要素(フッター)はテーブル構造の明確化を必要としないテーブルでは省略されることが多い要素です。但し、各要素を使用してテーブルの構造を明確化しておくことで可視性の良いテーブルを作成することもできます。例えば、行数が多いテーブルの場合にヘッダーとフッターを固定化しておいてテーブル本体だけをスクロール表示できるようにすることで可視性を向上させることができます。

使用上の注意事項

  • レイアウトには影響を与えません。
  • tfoot は、table footer の略称です。
  • display プロパティ値は、table-footer-group になります。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

L2.10.8 tr 要素(テーブル一行)

<tr> テーブル一行コンテンツ </tr>

テーブルの一行を定義します。一般的には、tr 要素の子要素に複数の th 要素や td 要素を配置し一行のデータを作成します。表の作成方法は、table 要素を参照してください。

使用上の注意事項

  • レイアウトには影響を与えません。
  • tr は、table row の略称です。
  • display プロパティ値は、table-row になります。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

L2.10.9 th 要素(テーブル見出しセル)

<th colspan="列方向のセル結合数" 
	rowspan="行方向のセル結合数" 
	scope="見出しの対象セル" 
	headers="セルの対象ヘッダー" 
	abbr="セルの説明"> 
	テーブル見出しセルコンテンツ </th>

テーブルの見出しとなるヘッダーセルを定義します。tr 要素の子要素として配置します。見出しが行と列のどちらの方向を対象にしているかは、scope 属性で指定します。通常のセルを作成する場合は、td 要素を使用してください。表の作成方法は、table 要素を参照してください。

主な固有属性

colspan
列方向にセルを結合する数を指定します。初期値は 1 で、最大値は 1000 です。
rowspan
行方向にセルを結合する数を指定します。初期値は 1 で、最大値は 1000 です。
scope
見出しの対象となるセルを指定します。scope 属性が指定されていない場合は、自動的に見出しセルが適用されるセルの集合を選択します。
row
同じ行に属するセルが対象になります。
col
同じ列に属するセルが対象になります。
rowgroup
行のグループに属するセルが対象になります。
colgroup
列のグループに属するセルが対象になります。
headers
セルが対象にしているヘッダーを明示します。th 要素の id 属性が持つ値を空白区切りのリストで指定します。
abbr
セルの内容に関する簡単な説明を指定します。

使用上の注意事項

  • th は、table header の略称です。
  • display プロパティ値は、table-cell になります。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

L2.10.10 td 要素(テーブルセル)

<td colspan="列方向のセル結合数" 
	rowspan="行方向のセル結合数" 
	headers="セルの対象ヘッダー"> 
	テーブルセルコンテンツ </td>

テーブルのデータセルを定義します。tr 要素の子要素として配置します。見出しセルを作成する場合は、th 要素を使用してください。表の作成方法は、table 要素を参照してください。

主な固有属性

colspan
列方向にセルを結合する数を指定します。初期値は 1 で、最大値は 1000 です。
rowspan
行方向にセルを結合する数を指定します。初期値は 1 で、最大値は 1000 です。
headers
セルが対象にしているヘッダーを明示します。th 要素の id 属性が持つ値を空白区切りのリストで指定します。

使用上の注意事項

  • td は、table data の略称です。
  • display プロパティ値は、table-cell になります。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

L2.11 フォーム

L2.11.1 form 要素(フォーム作成)

<form action="処理プログラムURL" 
	method="フォーム送信時のHTTPメソッド" 
	target="レスポンス表示位置" 
	enctype="送信MIMEタイプ" 
	novalidate 
	accept-charset="サーバー文字エンコーディング" 
	autocomplete="入力補完有無" 
	name="フォーム名称" 
	rel="送信先リソースとの関係"> 
	フォームコンテンツ </form>

Web サーバーに情報を送信するための入力フォームを定義します。子要素にパーツを組み込むことでユーザーが操作可能なページを提供します。この機能を使いこなすには、クライアントのリクエストとサーバーのレスポンスを理解する必要があります。

主な固有属性

action
フォームデータを処理する送信先の処理プログラムの URL を指定します。この値は、button 要素や input(type="submit")要素などの formaction 属性で上書きできます。また、method 属性に dialog が指定されている場合は無視されます。
method
フォームデータを送信する時に使用する HTTP メソッドを以下の値で指定します。この値は、button 要素や input(type="submit")要素などの formmethod 属性で上書できます。初期値は、get です。
get
GET メソッドで送信します。フォームデータは、action 属性の URL の後ろにクエスチョン(?)で区切って追加されます。
post
POST メソッドで送信します。フォームデータは、リスエスト本体として送信されます。
dialog
dialog 要素の子要素として form 要素を記述した時に有効で、送信を行うとダイアログを閉じて submit イベントを発行します。データを送信したりクリアしたりはしません。
target
フォーム送信後に受け取ったレスポンスを開くフレーム名やウィンドウ名を指定します。以下の名前は特別な意味を持ちます。
_self
同じウィンドウで開きます。(初期値)
_blank
新しいタブまたは新しいウィンドウで開きます。
enctype
method 属性が post の場合にサーバーに送信するデータの MIME タイプを以下の値で指定します。この値は、button 要素や input(type="submit")要素などの formenctype 属性で上書できます。
application/x-www-form-urlencoded
通常の MIME タイプです。(初期値)
multipart/form-data
子要素に input(type="file")要素が含まれている時に指定します。
text/plain
デバック時に有用な MIME タイプです。
novalidate
フォームデータを送信する時に検証しないことを指定します。論理値で値はありません。この属性を指定していない場合は、既定の設定を button 要素や input(type="submit")など の formnovalidate 属性で上書きすることが可能です。
accept-charset
フォームデータを送信するサーバーが受け付ける文字エンコーディングを指定を空白区切りのリストで指定します。初期値は、ページのエンコーディングと同じです。
autocomplete
input 要素がブラウザによる値の入力補完を受け付けるか否かを以下の値で指定します。本指定値は、必ず動作するわけではなくブラウザの仕様に依存します。
off
ブラウザは自動的に項目を補完しません。
on
ブラウザは自動的に項目を補完することがあります。
name
フォームの名前を指定します。
rel
フォームが存在する文章と送信先のリソースの関係を指定します。注釈を表す値には external | nofollow | opener | noopener | noreferrer があります。リンク種別を表す値には help | prev | next | search | license があります。これらの値を空白区切りのリストで指定します。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<form action="#" method="post">
	<p>問い合わせフォーム</p>
	<div>
		名前:<br>
		<input type="text" name="name" size="38">
	</div>
	<div>
		メールアドレス:<br>
		<input type="text" name="mail" size="38">
	</div>
	<div>
		性別:
		<input type="radio" name="gender" value="m">男
		<input type="radio" name="gender" value="w">女
	</div>
	<div>
		端末:
		<input type="checkbox" name="device" value="p">PC
		<input type="checkbox" name="device" value="s">スマホ
		<input type="checkbox" name="device" value="t">タブレット
	</div>
	<div>
		種別:
		<select name="kind">
			<option value="kind-a">報告</option>
			<option value="kind-b">連絡</option>
			<option value="kind-c">相談</option>
			<option value="kind-d">その他</option>
		</select>
	</div>
	<div>
		内容:<br>
		<textarea name="comment" rows="4" cols="40"> 問い合わせ内容を書いて下さい。</textarea>
	</div>
	<div>
		<input type="submit" value="送信">
		<input type="reset" value="リセット">
	</div>
</form>

表示例

問い合わせフォーム

名前:
メールアドレス:
性別:
端末: PC スマホ タブレット
種別:
内容:

L2.11.2 label 要素(入力項目キャプション)

<label for="関連付けるid属性"> 入力項目キャプションコンテンツ </label>

入力項目などのキャプションを定義します。主に、form 要素の中に配置された input 要素や textarea 要素などにラベルを付与するために使用します。

label 要素と他の要素を関連付けるには、label 要素の子要素に対象要素を配置する方法(暗黙的なラベル付け)と label 要素の for 属性を使用して対象要素の id 属性を指定する方法(明示的なラベル付け)があります。

label 要素には、関連付けられた要素の入力作業を補助する機能がありラベル領域をクリックする関連付けられている要素にフォーカスが当たります。

主な固有属性

for
関連付ける要素の id 名を指定します。

使用上の注意事項

  • レイアウトの初期値はインラインです。文章の改行には影響を与えません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<div>
	<p>ラベルなし:<input type="text"  placeholder="ラベルなし"></p>
	<p><label>ラベルあり:<input type="text" placeholder="暗黙的なラベル付け"></label></p>
	<p>
		<label for="label-name-1">ラベルあり:</label>
		<input type="text" id="label-name-1" placeholder="明示的なラベル付け">
	</p>
</div>

表示例

ラベルなし:

L2.11.3 input 要素(フォーム構成部品)

<input type="入力項目の型" 
	form="form要素のid名" 
	name="項目の名前" 
	readonly 
	required 
	value="入力項目に埋め込む値" 
	autocomplete="自動補完機能の種類" 
	autofocus 
	disable 
	max="入力の最大値" 
	maxlength="入力の最大長" 
	min="入力の最小値" 
	minlength="入力の最小長" 
	multiple 
	pattern="正規表現値" 
	checked 
	dirname="文字方向" 
	size="表示項目の幅" 
	accept="ファイル形式ヒント" 
	capture="キャプチャメソッド" 
	placeholder="入力時の候補内容" 
	list="入力候補のdatalist要素のid名" 
	src="画像のURL" 
	width="画像の幅" 
	height="画像の高さ" 
	alt="代替テキスト" 
	step="数字の刻み値" 
	formaction="処理プログラムURL" 
	formmethod="フォーム送信時のHTTPメソッド" 
	formtarget="レスポンス表示位置" 
	formenctype="送信MIMEタイプ" 
	formnovalidate>

入力項目を定義します。入力する内容は type 属性で指定します。

主な固有属性

type
入力項目の型を以下の値で指定します。実際に入力するためのコントローラー形状や入力時のチェック機能はブラウザによって異なります。
button
汎用ボタンを指定します。
checkbox
選択式のチェックボックスを指定します。
color
色の入力項目を指定します。ブラウザによってはカラーピッカー表示になります。
date
日付(年月日)の入力項目を指定します。ブラウザによってはカレンダーやホイール表示になります。
datetime-local
日付と時刻(年月日・時分)の入力項目を指定します。ブラウザによってはカレンダーやホイール表示になります。
email
メールアドレスの入力項目を指定します。
file
ローカル環境に保存されているファイルの選択を指定します。
hidden
可視化されない項目を指定します。使用者には可視化されませんが送信対象になります。
image
画像を使ったボタンを指定します。
month
日付(年月)の入力項目を指定します。ブラウザによってはカレンダーやホイール表示になります。
number
数値の入力項目を指定します。
password
パスワードなどの入力項目を指定します。入力された文字は隠された表示になります。
radio
選択可能なラジオボタンを指定します。複数の選択肢からひとつを選択することができます。
range
スライド式の範囲を指定可能な項目を指定します。最小値から最大値の範囲で任意の値を入力できます。
reset
入力フォームの値を初期化するボタンを指定します。
search
検索キーワードの入力項目を指定します。
submit
送信ボタンを指定します。
tel
電話番号の入力項目を指定します。
text
任意のテキストの入力項目を指定します。(初期値)
time
時刻(時分)の入力項目を指定します。ブラウザによってはホイール表示になります。
url
URL の入力項目を指定します。
week
週間(年週番号)の入力項目を指定します。ブラウザによってはカレンダー表示になります。
form
項目を関連付ける form 要素の id 名を指定します。form 要素の子要素以外の場所に input 要素を定義する場合に使用します。
name
項目の名前を指定します。送信される値の識別子として使用されます。
readonly
使用者は編集できない項目であることを指定します。type 属性が hidden | range | color | checkbox | radio | ボタン以外の時に指定できます。論理値で値はありません。
required
入力必須の項目であることを指定します。type 属性が hidden | range | color | ボタン以外の時に指定できます。論理値で値はありません。
value
項目に埋め込まれる値を指定します。
autocomplate
入力欄の自動補完機能の種類を空白区切りリストで指定します。type 属性が checkbox | radio | ボタン以外の時に指定できます。
autofource
ページが表示された時にフォーカスを設定することを指定します。論理値で値はありません。
disable
項目が無効であることを指定します。論理値で値はありません。
max
最大値を指定します。type 属性が date | month | week | time | datetime-local | range の時に指定できます。
maxlength
値の最大長(文字数)を指定します。type 属性が text | search | url | tel | email | password の時に指定できます。
min
最小値を指定します。type 属性が date | month | week | time | datetime-local | range の時に指定できます。
minlength
値の最短長(文字数)を指定します。type 属性が text | search | url | tel | email | password の時に指定できます。
multiple
複数の値を許可することを指定します。type 属性が email | file の時に指定できます。論理値で値はありません。
pattern
値が有効になるパターンを正規表現で指定します。type 属性が text | search | url | tel | email | password | number の時に指定できます。
checked
項目がチェックされていることを指定します。type 属性が checkbox | radio の時に指定できます。論理値で値はありません。
size
項目の大きさを指定します。type 属性が text | search | url | tel | email | password の時に指定できます。
accept
ファイルのアップロード時に選択可能なファイル形式(拡張子)をカンマ(,)区切りリストで指定します。type 属性が file の時に指定できます。
capture
キャプチャーするメディアを指定します。type 属性が file の時に指定できます。
placeholder
項目が空の時に表示される内容を指定します。type 属性が text | search | url | tel | email | password | number の時に指定できます。
list
自動補完の選択子が入った datalist 要素の id 名を指定します。type 属性が hidden | password | checkbox | radio | ボタン以外の時に指定できます。
src
画像ファイルのパスを指定します。type 属性が image の時に指定できます。
width
画像の幅を指定します。type 属性が image の時に指定できます。
height
画像の高さを指定します。type 属性が image の時に指定できます。
alt
画像の代替テキストを指定します。type 属性が image の時に指定できます。
step
数値の刻み値を指定します。type 属性が date | month | week | time | datetime-local | range の時に指定できます。
formaction
フォームデータを処理する送信先の処理プログラムの URL を指定します。type 属性が image | submit の時に指定できます。
formmethod
フォームデータを送信する時に使用する HTTP メソッドを指定します。指定値は、form 要素を参照してください。type 属性が image | submit の時に指定できます。
formtarget
フォーム送信後に受け取ったレスポンスを開くフレーム名やウィンドウ名を指定します。指定値は、form 要素を参照してください。type 属性が image | submit の時に指定できます。
formenctype
formmethod 属性が post の場合にサーバーに送信するデータの MIME タイプを指定します。指定値は、form 要素を参照してください。type 属性が image | submit の時に指定できます。
formnovalidate
フォームデータを送信する時に検証しないことを指定します。type 属性が image | submit の時に指定できます。論理値で値はありません。

使用上の注意事項

  • レイアウトの初期値はインラインです。文章の改行には影響を与えません。
  • この要素は空要素です。終了タグはありません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

input 要素は、type 属性によって入力内容や表示形式が異なります。

type 属性:button(汎用ボタン)

HTML例


<p>
	<input type="button" name="button1" value="button">
</p>

表示例

type 属性:checkbox(チェックボックス)

HTML例


<p>
	<label><input type="checkbox" name="checkbox1" value="1" checked>項目1</label>
	<label><input type="checkbox" name="checkbox1" value="2">項目2</label>
	<label><input type="checkbox" name="checkbox1" value="3">項目3</label>
</p>

表示例

type 属性:color(色)

HTML例


<p>
	<input type="color" name="color1">
</p>

表示例

type 属性:date(年月日)

HTML例


<p>
	<input type="date" name="date1">
</p>

表示例

type 属性:datetime-local(年月日・時分)

HTML例


<p>
	<input type="datetime-local" name="datetime-local1">
</p>

表示例

type 属性:email(メールアドレス)

HTML例


<p>
	<input type="email" name="email1">
</p>

表示例

type 属性:file(ファイル)

HTML例


<p>
	<input type="file" name="file1">
</p>

表示例

type 属性:hidden(非表示)

HTML例


<p>
	<input type="hidden" name="hidden1">
	<small>※この項目は非表示になりますが送信対象です。</small>
</p>

表示例

※この項目は非表示になりますが送信対象です。

type 属性:image(画像ボタン)

HTML例


<p>
	<input type="image" name="image1" src="images/hamaya.png" alt="代替テキスト" width="100" height="100">
</p>

表示例

type 属性:month(年月)

HTML例


<p>
	<input type="month" name="month1">
</p>

表示例

type 属性:number(数値)

HTML例


<p>
	<input type="number" name="number1" min="1" max="10" value="1">
</p>

表示例

type 属性:password(パスワード)

HTML例


<p>
	<input type="password" name="password1" minlength="8" maxlength="16">
</p>

表示例

type 属性:radio(ラジオボタン)

HTML例


<p>
	<label><input type="radio" name="radio1" value="1" checked>項目1</label>
	<label><input type="radio" name="radio1" value="2">項目2</label>
	<label><input type="radio" name="radio1" value="3">項目3</label>
</p>

表示例

type 属性:range(範囲)

HTML例


<p>
	<input type="range" name="range1" min="1" max="100" value="50">
</p>

表示例

type 属性:reset(リセットボタン)

HTML例


<p>
	<input type="reset" name="reset1" value="reset">
</p>

表示例

type 属性:search(検索キーワード)

HTML例


<p>
	<input type="search" name="search1" value="search">
</p>

表示例

type 属性:submit(送信ボタン)

HTML例


<p>
	<input type="submit" name="submit1" value="submit">
</p>

表示例

type 属性:tel(電話番号)

HTML例


<p>
	<input type="tel" name="tel1" placeholder="03-0000-0000">
</p>

表示例

type 属性:text(テキスト)

HTML例


<p>
	<input type="text" name="text1" minlength="8" maxlength="32" size="28" placeholder="8~32文字">
</p>

表示例

type 属性:time(時分)

HTML例


<p>
	<input type="time" name="time1" value="10:00">
</p>

表示例

type 属性:url(URL)

HTML例


<p>
	<input type="url" name="url1" placeholder="https://sample.com">
</p>

表示例

type 属性:week(年週番号)

HTML例


<p>
	<input type="week" name="week1" value="2024-W01">
</p>

表示例

L2.11.4 button 要素(ボタン)

<button type="入力項目の型" 
	form="form要素のid名" 
	name="項目の名前" 
	value="入力項目に埋め込む値" 
	autofocus 
	disable 
	formaction="処理プログラムURL" 
	formmethod="フォーム送信時のHTTPメソッド" 
	formtarget="レスポンス表示位置" 
	formenctype="送信MIMEタイプ" 
	formnovalidate> 
	ボタンコンテンツ </button>

ボタンを定義します。多くのボタンは、form 要素に関連付けて使用されますが、この button 要素は、文章の中に自由に配置することもできます。また、JavaScript と組み合わせることで色々な用途に使用することもできます。

button 要素でサーバーへの送信を行う場合は、form 要素の子要素として配置されているか form 要素に関連付けられている必要があります。

button 要素で定義するボタンは、input 要素で定義するボタンと類似していますが、input 要素で定義するボタンよりもスタイルシート(CSS)での適用がしやすくなっていますし疑似要素の適用も可能です。

主な固有属性

type
入力項目の型を以下の値で指定します。
submit
送信ボタンを指定します。
reset
入力フォームの値を初期化するボタンを指定します。
button
汎用ボタンを指定します。
form
項目を関連付ける form 要素の id 名を指定します。form 要素の子要素以外の場所に button 要素を定義する場合に使用します。
name
項目の名前を指定します。送信される value 属性の値の識別子として使用されます。
value
項目に埋め込まれる値を指定します。送信時に name 属性と関連付けて送信されます。
autofource
ページが表示された時にフォーカスを設定することを指定します。論理値で値はありません。
disable
項目が無効であることを指定します。
formaction
フォームデータを処理する送信先の処理プログラムの URL を指定します。form 要素の action 属性よりも優先されます。
formmethod
フォームデータを送信する時に使用する HTTP メソッドを指定します。指定値は、form 要素を参照してください。form 要素の method 属性よりもお優先されます。
formtarget
フォーム送信後に受け取ったレスポンスを開くフレーム名やウィンドウ名を指定します。指定値は、form 要素を参照してください。form 要素の target 属性よりも優先されます。
formenctype
formmethod 属性が post の場合にサーバーに送信するデータの MIME タイプを指定します。指定値は、form 要素を参照してください。form 要素の enctype 属性よりも優先されます。
formnovalidate
フォームデータを送信する時に検証しないことを指定します。form 要素の novalidate 属性よりも優先されます。論理値で値はありません。

使用上の注意事項

  • レイアウトの初期値はインラインです。文章の改行には影響を与えません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>
	<button type="button">ボタン</button>
</p>

表示例

L2.11.5 select 要素(セレクトボックス)

<select form="form要素のid名" 
	name="項目の名前" 
	required 
	autocomplete="自動補完機能の種類" 
	autofocus 
	disable 
	multiple 
	size="表示項目の幅">
	セレクトコンテンツ </select>

選択式のメニュー(セレクトボックス)を定義します。複数の項目を並べて、その中から任意の項目を選択することができます。

選択項目は、select 要素の子要素に option 要素を使用して定義します。option 要素を配置する時に optgroup 要素を使用して項目をグループ化することもできます。

主な固有属性

form
項目を関連付ける form 要素の id 名を指定します。form 要素の子要素以外の場所に select 要素を定義する場合に使用します。
name
項目の名前を指定します。
required
入力必須の項目であることを指定します。論理値で値はありません。
autocomplate
入力欄の自動補完機能の種類を空白区切りリストで指定します。
autofource
ページが表示された時にフォーカスを設定することを指定します。論理値で値はありません。
disable
項目が無効であることを指定します。
multiple
複数の値を許可することを指定します。指定されてない場合は、一つの項目だけが選択できます。論理値で値はありません。
size
項目を表示するセレクトボックスの大きさ(行数)を指定します。指定されていない場合は、一行で表示されます。

使用上の注意事項

  • レイアウトの初期値はインラインです。文章の改行には影響を与えません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>
	<select name="select1">
		<option value="1">メニュー項目1</option>
		<option value="2">メニュー項目2</option>
		<option value="3">メニュー項目3</option>
	</select>
</p>

表示例

複数行の選択肢を表示

HTML例


<p>
	<select name="select2" size="4">
		<option value="1">メニュー項目1</option>
		<option value="2">メニュー項目2</option>
		<option value="3">メニュー項目3</option>
		<option value="4">メニュー項目4</option>
		<option value="5">メニュー項目5</option>
		<option value="6">メニュー項目6</option>
	</select>
</p>

表示例

選択項目をグループ化して表示

HTML例


<p>
	<select name="select3">
		<optgroup label="メニューグループ1">
			<option value="11">メニュー項目1-1</option>
			<option value="12">メニュー項目1-2</option>
			<option value="13">メニュー項目1-3</option>
		</optgroup>
		<optgroup label="メニューグループ2">
			<option value="21">メニュー項目2-1</option>
			<option value="22">メニュー項目2-2</option>
			<option value="23">メニュー項目2-3</option>
		</optgroup>
		<optgroup label="メニューグループ3">
			<option value="31">メニュー項目3-1</option>
			<option value="32">メニュー項目3-2</option>
			<option value="33">メニュー項目3-3</option>
		</optgroup>
	</select>
</p>

表示例

複数の選択肢を選択可能

HTML例


<p>
	<select name="select4" multiple>
		<option value="1">メニュー項目1</option>
		<option value="2">メニュー項目2</option>
		<option value="3">メニュー項目3</option>
		<option value="4">メニュー項目4</option>
		<option value="5">メニュー項目5</option>
		<option value="6">メニュー項目6</option>
	</select>
</p>

表示例

L2.11.6 datalist 要素(入力候補選択肢)

<datalist> 入力候補選択肢コンテンツ </datalist>

入力項目の選択肢候補になる選択肢やオプションを定義します。複数の項目を並べて、その中から任意の項目を選択することができます。

選択項目は、datalist 要素の子要素に option 要素を使用して定義します。datalist 要素で作成した選択肢候補は、datalist 要素の id 属性で定義した id 名を対象の input 要素の list 属性で指定することで関連付けを行います。

使用上の注意事項

  • レイアウトの初期値はインラインです。文章の改行には影響を与えません。
  • 視覚的な効果はありませんが入力項目を操作した時にポップアップリストとして表示されます。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

テキスト入力項目の選択肢候補

HTML例


<p>
	<input type="text" list="datalist1">
	<datalist id="datalist1">
		<option value="テキスト項目1">テキスト項目1</option>
		<option value="テキスト項目2">テキスト項目2</option>
		<option value="テキスト項目3">テキスト項目3</option>
	</datalist>
</p>

表示例

検索キーワード入力項目の選択肢候補

HTML例


<p>
	<input type="search" list="datalist2">
	<datalist id="datalist2">
		<option value="キーワード項目1">キーワード項目1</option>
		<option value="キーワード項目2">キーワード項目2</option>
		<option value="キーワード項目3">キーワード項目3</option>
	</datalist>
</p>

表示例

時刻(時分)入力項目の選択肢候補

HTML例


<p>
	<input type="time" list="datalist3">
	<datalist id="datalist3">
		<option value="06:00">06:00</option>
		<option value="07:00">07:00</option>
		<option value="08:00">08:00</option>
	</datalist>
</p>

表示例

スライド式の範囲の選択肢候補

HTML例


<p>
	<input type="range" list="datalist4" min="0" max="100">
	<datalist id="datalist4">
		<option value="20">20</option>
		<option value="40">40</option>
		<option value="60">60</option>
		<option value="80">80</option>
	</datalist>
</p>

表示例

色の選択肢候補

HTML例


<p>
	<input type="color" list="datalist5">
	<datalist id="datalist5">
		<option value="#ff0000">#ff0000</option>
		<option value="#00ff00">#00ff00</option>
		<option value="#0000ff">#0000ff</option>
	</datalist>
</p>

表示例

L2.11.7 optgroup 要素(セレクトボックス選択肢グループ)

<optgroup label="グループ見出し" disabled> セレクトボックス選択肢グループコンテンツ </optgroup>

入力項目の選択肢候補になる選択肢のグループを定義します。select 要素の子要素として配置する option 要素をグループ化してグループ見出しを指定することができます。

主な固有属性

label
グループ化した項目のグループ見出しを指定します。
disabled
項目が無効であることを指定します。

使用上の注意事項

  • レイアウトには影響を与えません。選択肢の一覧にグループを定義します。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>
	<select name="optgroup1">
		<optgroup label="メニューグループ1">
			<option value="11">メニュー項目1-1</option>
			<option value="12">メニュー項目1-2</option>
			<option value="13">メニュー項目1-3</option>
		</optgroup>
		<optgroup label="メニューグループ2">
			<option value="21">メニュー項目2-1</option>
			<option value="22">メニュー項目2-2</option>
			<option value="23">メニュー項目2-3</option>
		</optgroup>
		<optgroup label="メニューグループ3">
			<option value="31">メニュー項目3-1</option>
			<option value="32">メニュー項目3-2</option>
			<option value="33">メニュー項目3-3</option>
		</optgroup>
	</select>
</p>

表示例

L2.11.8 option 要素(セレクトボックス選択肢)

<option value="送信値" label="選択肢表示項目" disabled selected> セレクトボックス選択肢コンテンツ </option>

入力項目の選択肢候補になる選択肢を定義します。select 要素や datalist 要素の子要素として配置します。option 要素の使用例は、select 要素や datalist 要素を参照してください。

主な固有属性

value
選択した時に送信される値を指定します。省略時は option 要素の中に含まれる文字列が値になります。
label
選択肢として表示される値を指定します。省略時は option 要素の中に含まれる文字列が表示されます。
disabled
項目が無効であることを指定します。論理値で値はありません。
selected
あらかじめ選択されている項目であることを指定します。論理値で値はありません。

使用上の注意事項

  • レイアウトには影響を与えません。項目の一覧表を展開した時にメニューとして表示されます。
  • 選択肢として表示する値を label 属性で指定することもできます。構文を守ることで終了タグを省略することができます。この場合は、空要素になりますので送信される値を value 属性で指定するようにしてください。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

L2.11.9 textarea 要素(複数行テキスト編集項目)

<textarea form="form要素のid名" 
	name="項目の名前" 
	cols="一行の文字数" 
	rows="行数" 
	readonly 
	required 
	autocomplete="自動補完機能" 
	autocapitalize="文字変換" 
	soellcheck="スペルチェック" 
	warp="折り返し方法" 
	autofocus 
	disable 
	maxlength="入力の最大数" 
	minlength="入力の最小数" 
	placeholder="入力時の候補内容">
	複数行テキスト編集項目コンテンツ </textarea>

複数行の文字入力項目を定義します。一行の入力項目を定義する場合は、input 要素でも定義可能です。

主な固有属性

form
項目を関連付ける form 要素の id 名を指定します。form 要素の子要素以外の場所に textarea 要素を定義する場合に使用します。
name
項目の名前を指定します。送信される値の識別子として使用されます。
cols
一行当たりの最大文字数を指定します。初期値は 20 です。
rows
テキストリアの行数を指定します。初期値は 2 です。
readonly
使用者は編集できない項目であることを指定します。論理値で値はありません。
required
入力必須の項目であることを指定します。type 属性が hidden | range | color | ボタン以外の時に指定できます。論理値で値はありません。
autocomplate
入力欄の自動補完機能の種類を以下の値で指定します。
on
以前に入力した値を元に自動補完を行うことを許可します。
off
自動補完を行いません。毎回、再入力になります。
autocapitalize
入力した文字を自動的に大文字変換するか否かを以下の値で指定します。
none
自動的に大文字変換を行いません。
sentences
文の先頭文字を自動的に大文字化します。
words
単語の先頭を自動的に大文字化します。
characters
すべての文字を自動的に大文字化します。
spellcheck
スペルチェックや文法チェックを行うか否かを以下の値で指定します。
true
スペルチェックや文法チェックを行います。
false
スペルチェックや文法チェックを行いません。
default
親から継承した値または既定の動作を行います。
warp
テキストの折り返しに関する制御方法を以下の値で指定します。
hard
行の長さがテキストエリアの幅を超えたら自動で改行をします。cols 属性の指定が必須です。
soft
入力値に含まれる改行を維持しますが自動での改行は行いません。
off
折り返しを行いません。行の長さがテキストエリアの幅を超えたら水平方向のスクロールが可能になります。
autofource
ページが表示された時にフォーカスを設定することを指定します。論理値で値はありません。
disable
項目が無効であることを指定します。論理値で値はありません。
maxlength
値の最大長(文字数)を指定します。
minlength
値の最短長(文字数)を指定します。
placeholder
項目が空の時に表示される内容を指定します。

使用上の注意事項

  • レイアウトの初期値はインラインです。文章の改行には影響を与えません。
  • textarea 要素の display の値は、inline-block になります。。
  • テキストエリアは、cols 属性と rows 属性で指定された大きさになります。変更する場合は、スタイルシート(CSS)で指定します。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>
	<textarea cols="40" rows="5" placeholder="ここに文字を入力してください。">
</p>

表示例

テキストエリアのサイズ変更を無効に設定

HTML例


<p>
	<textarea class="textarea1" placeholder="ここに文字を入力してください。">
</p>

CSS例


textarea.textarea1 {
	width: 300px;
	height: 100px;
	resize: none;
}

表示例

L2.11.10 output 要素(計算結果の出力欄)

<output form="form要素のid名" 
	for="入力項目のid名" 
	name="項目の名前"> 
	計算結果の出力欄コンテンツ </output>

計算や処理結果を格納する項目を定義します。output 要素の値、名前、内容は送信対象にはなりません。類似要素に samp 要素がありますが、こちらは、あらかじめ実行結果がわかっている内容を表示する場合に使用します。

主な固有属性

form
項目を関連付ける form 要素の id 名を指定します。form 要素の子要素以外の場所に output 要素を定義する場合に使用します。
for
入力項目の id 名を空白区切りリストで指定します。
name
項目の名前を指定します。JavaScript からアクセスする場合に使用します。

使用上の注意事項

  • レイアウトの初期値はインラインです。文章の改行には影響を与えません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

二つの項目を加算

HTML例


<form oninput="output13.value = Number(output11.value) + Number(output12.value);">
	<input type="number" id="output11" name="output11" value="0"> +
	<input type="number" id="output12" name="output12" value="0"> =
	<output name="output13" for="output11 output12">0</output>
</form>

表示例

0
範囲値に加算値を加算

HTML例


<form oninput="output23.value = Number(output21.value) + Number(output22.value);">
	範囲:<input type="range" id="output21" name="output21" value="50"><br>
	加算:<input type="number" id="output22" name="output22" value="10"><br>
	結果:<output name="output23" for="output21 output22">60</output>
</form>

表示例

範囲:
加算:
結果:60

L2.11.11 progress 要素(作業進捗のプログレスバー)

<progress value="進捗状況値" 
	max="最大値"> 
	progress要素が未サポート時の代替テキスト </progress>

作業の進捗状況を表示する項目を定義します。単純に処理した結果を表示する場合は、output 要素を使用して、規定範囲の現在測定値を表示する場合は、meter 要素を使用してください。

作業状況は、横長のメーター形式で表示されます。一般的には、JavaScript を使用して進捗状況値を変化させます。

開始タグと終了タグの間に「progress要素が未サポート時の代替テキスト」を指定することができます。これは、progress 要素をサポートしていないブラウザの時に表示される文字列になります。

主な固有属性

value
進捗状況の値(浮動小数点数値)で指定します。この属性が指定されていない場合は、処理中ですが完了までの予想ができない状態を示します。
max
作業量の最大値を指定します。初期値は、1.0 です。

使用上の注意事項

  • レイアウトの初期値はインラインです。文章の改行には影響を与えません。
  • 最小値は、指定することができなく常に 0 です。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>
	作業1:<progress value="30" max="100">30%</progress><br>
	作業2:<progress value="60" max="100">60%</progress><br>
	作業3:<progress max="100">不定</progress>
</p>

表示例

作業1:30%
作業2:60%
作業3:不定

L2.11.12 meter 要素(規定範囲内の数量・測定値)

<meter value="値" 
	min="最小値" 
	max="最大値" 
	low="低いとされる境界値" 
	high="高いとされる境界値" 
	optimum="適正値"> 
	meter要素が未サポート時の代替テキスト </meter>

規定の範囲が明確な場合の数量や測定値を表示する項目を定義します。作業の進捗状況やタスクの進行状況を表示する場合は、progress 要素を使用してください。

値は、横長のメーター形式で表示されます。ブラウザによっては境界値と指定した値によってインジケーターの色が変化して表示されます。一般的には、JavaScript を使用して進捗状況値を変化させます。

開始タグと終了タグの間に「meter要素が未サポート時の代替テキスト」を指定することができます。これは、meter 要素をサポートしていないブラウザの時に表示される文字列になります。

主な固有属性

value
進捗状況の値(浮動小数点数値)を指定します。この属性が指定されていない場合および不正な値の場合は、0 になります。また、min 属性と max 属性の範囲外にある場合は、範囲内の最も近い値になります。
min
範囲の下限値を指定します。未指定の場合は、0 になります。
max
範囲の上限値を指定します。未指定の場合は、1 になります。
low
低いとされる境界値を指定します。未指定の場合は、0 になります。
high
高いとされる境界値を指定します。未指定の場合は、1 になります。
optimum
最適とされる値を指定します。未指定の場合は、0.5 になります。最適値が low 属性の値と high 属性の値の間に設定されている場合は、low 属性の値からoptimum 属性の値までが最適値になります。最適値が high 属性の値以上に設定されている場合は、high 属性の値から optimum 属性の値までが最適値になります。

使用上の注意事項

  • レイアウトの初期値はインラインです。文章の改行には影響を与えません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<p>
	点数1:<meter min="0" max="100" low="40" high="80" optimum="100" value="0">0点</meter><br>
	点数2:<meter min="0" max="100" low="40" high="80" optimum="100" value="30">30点</meter><br>
	点数3:<meter min="0" max="100" low="40" high="80" optimum="100" value="50">50点</meter><br>
	点数4:<meter min="0" max="100" low="40" high="80" optimum="100" value="70">70点</meter><br>
	点数5:<meter min="0" max="100" low="40" high="80" optimum="100" value="90">90点</meter><br>
	点数6:<meter min="0" max="100" low="40" high="80" optimum="100" value="100">100点</meter>
</p>

表示例

点数1:0点
点数2:30点
点数3:50点
点数4:70点
点数5:90点
点数6:100点

L2.11.13 fieldset 要素(入力項目グループ)

<fieldset form="form要素のid名" name="項目の名前" disable> 入力項目グループコンテンツ </fieldset>

フォームの入力項目のグループを定義します。グループ化した項目は、legend 要素を使用して見出しを設定したり、Tab キーでグループ間を移動できるようになります。

ブラウザによっては、グループ化した項目を枠で囲んで表示します。

主な固有属性

form
項目を関連付ける form 要素の id 名を指定します。form 要素の子要素以外の場所に fieldset 要素を定義する場合に使用します。
name
項目の名前を指定します。JavaScript からアクセスする場合に使用します。
disable
項目が無効であることを指定します。論理値で値はありません。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<fieldset>
	<legend>見出し</legend>
	<input type="text" value="text">
</fieldset>

表示例

見出し

HTML例


<form action="#" name="fieldset0">
	<fieldset>
		<legend>グループC1</legend>
		<label>選択C1-1:<input type="checkbox" name="fieldset1" value="C1-1"></label> 
		<label>選択C1-2:<input type="checkbox" name="fieldset1" value="C1-2"></label> 
		<label>選択C1-3:<input type="checkbox" name="fieldset1" value="C1-3"></label>
	</fieldset>
	<fieldset>
		<legend>グループC2</legend>
		<label>選択C2-1:<input type="checkbox" name="fieldset2" value="C2-1"></label> 
		<label>選択C2-2:<input type="checkbox" name="fieldset2" value="C2-2"></label> 
		<label>選択C2-3:<input type="checkbox" name="fieldset2" value="C2-3"></label>
	</fieldset>
	<hr>
	<fieldset>
		<legend>グループR1</legend>
		<label>選択R1-1:<input type="radio" name="fieldset3" value="R1-1" checked></label> 
		<label>選択R1-2:<input type="radio" name="fieldset3" value="R1-2"></label> 
		<label>選択R1-3:<input type="radio" name="fieldset3" value="R1-3"></label>
	</fieldset>
	<fieldset>
		<legend>グループR2</legend>
		<label>選択R2-1:<input type="radio" name="fieldset4" value="R2-1" checked></label> 
		<label>選択R2-2:<input type="radio" name="fieldset4" value="R2-2"></label> 
		<label>選択R2-3:<input type="radio" name="fieldset4" value="R2-3"></label>
	</fieldset>
</form>

表示例

グループC1    
グループC2    

グループR1    
グループR2    

L2.11.14 legend 要素(入力項目グループキャプション)

<legend> 入力項目グループキャプションコンテンツ </legend>

グループ化されたフォームの入力項目にキャプションを定義します。グループ化は、fieldset 要素で行い、fieldset 要素の直後の子要素に legend 要素を使ってキャプションを指定します。

主な固有属性

form
項目を関連付ける form 要素の id 名を指定します。form 要素の子要素以外の場所に fieldset 要素を定義する場合に使用します。
name
項目の名前を指定します。JavaScript からアクセスする場合に使用します。
disable
項目が無効であることを指定します。論理値で値はありません。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<fieldset>
	<legend>見出し</legend>
	<input type="text" value="text">
</fieldset>

表示例

見出し

L2.12 インタラクティブ

L2.12.1 details(折りたたみ領域)

<details open> 折りたたみ領域コンテンツ </details>

使用者が詳細情報の表示・非表示の切り替えられる折りたたみ領域(ウィジェット)を定義します。概要やラベルは、details 要素の直後の子要素に summary 要素を使用して指定します。

主な固有属性

open
詳細情報を表示した状態で開始することを指定します。省略時は、詳細情報が非表示の状態で開始されます。論理値で値はありません。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<details>
	<summary>見出しや要約</summary>
	<p>
		詳細情報-01<br>
		詳細情報-02<br>
		詳細情報-03<br>
		詳細情報-04<br>
	</p>
</details>

表示例

見出しや要約

詳細情報-01
詳細情報-02
詳細情報-03
詳細情報-04

L2.12.2 summary 要素(折りたたみ領域の概要)

<summary> 折りたたみ領域の概要コンテンツ </summary>

使用者が詳細情報の表示・非表示の切り替えられる折りたたみ領域(ウィジェット)の概要を定義します。summary 要素は、details 要素の直後の子要素に指定します。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • 折りたたみの状態を示すマーカーが先頭に配置されます。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<details>
	<summary>見出しや要約</summary>
	<p>
		詳細情報-01<br>
		詳細情報-02<br>
		詳細情報-03<br>
		詳細情報-04<br>
	</p>
</details>

表示例

見出しや要約

詳細情報-01
詳細情報-02
詳細情報-03
詳細情報-04

L2.12.3 dialog 要素(ダイアログボックス)

<dialog open> ダイアログボックスコンテンツ </dialog>

使用者が任意のタイミングで開くダイアログボックスを定義します。

一般的には、ダイアログボックスの開閉は、JavaScript を用いて制御します。JavaScript でモーダルダイアログとして開いた場合は、インラインフレームに表示されている他の要素は操作できなくなります。

主な固有属性

open
ダイアログボックスを表示した状態で開始することを指定します。省略時は、詳細情報が非表示の状態で開始されます。open 属性を使用してダイアログボックスを開いた場合は、モーダルになりません。論理値で値はありません。

使用上の注意事項

  • ダイアログを開閉は、JavaScript で行います。開く時は、HTMLDialogElement オブジェクトの showModal メソッドを呼び出します。ダイアログを閉じる場合は close メソッドを使います。
  • ダイアログを JavaScript で表示する場合は、初期状態ではレイアウトに影響を与えません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<button type="button" onclick="document.getElementById('dialog1').showModal()">ダイアログを表示</button>
<dialog id="dialog1" aria-labelledby="dialog1_h">
	<h3 id="dialog1_h">ダイアログの見出し</h3>
	<p>ダイアログの内容</p>
	<button type="button" onclick="this.closest('dialog').close();">閉じる</button>
</dialog>

表示例

ダイアログの見出し

ダイアログの内容

L2.13 スクリプティング

L2.13.1 script 要素(スクリプト)

<script src="外部スクリプトファイルのパス" 
	type="スクリプトタイプ" 
	async 
	defer 
	crossorigin="CORS情報" 
	integrity="改ざんチェック" 
	nomodule 
	nonce="CPSトークン" 
	referrerpolicy="リファラーポリシー"> 
	スクリプトコンテンツ </script>

スクリプトの埋め込みを定義します。外部ファイルに記述したスクリプトを読み込む方法と script 要素内に直接記述する方法があります。

主な固有属性

src
外部スクリプトファイルのパスを指定します。
type
スクリプトのタイプを以下の値で指定します。省略時は、text/javascript になります。
JavaScript の MIME タイプ
JavaScript の MIME タイプを指定する必要がある場合に使用します。通常の JavaScript の場合は、属性を省略して下さい。/dd>
module
JavaScript のモジュールとして扱います。
importmap
JSON オブジェクトのインポートマップを指定します。
その他
JavaScript 以外のMIMEタイプを使用します。
async
スクリプトを非同期に扱い場合に指定します。
defer
外部スクリプトの読み込み時に参照中のドキュメント解析が終わるまで実行を控えます。論理値で値はありません。
crossorigin
外部ドメインに置かれたソースを扱う場合に、CORS(Cross Origin Resource Sharing)とエラーログの扱いを指定します。
integrity
取得したリソースが改ざんされていないかをチェックするために使用します。
nomodule
モジュール式のJavaScriptに対応していないブラウザ向けの代替スクリプトであることを表します。論理値で値はありません。
nonce
CPS(Content Security Policy)のチェックで用いられるワンタイムトークンを指定します。
referrerpolicy
スクリプトがリソースを読み込む際に、どのリファラーを送信するかポリシーを定めます。

使用上の注意事項

  • head 要素の配下、body 要素の配下のどちらにも記述できます。この要素自体は可視化されません。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

外部スクリプトファイルの読み込み

HTML例


<script src="js/javascript.js"></script>

JavaScript例(js/javascript.js)


// JavaScript サンプル
day = new Date();
document.write("現在の日時:");
document.write(day);

表示例

script 要素内に直接記述

HTML例


<script>
	day = new Date();
	document.write("現在の日時:");
	document.write(day);
</script>
<noscript>このページはJavaScriptを使用しています。</noscript>

表示例

L2.13.2 noscript 要素(スクリプト非動作文字)

<noscript> スクリプト非動作文字コンテンツ </noscript>

スクリプトが動作しない環境で表示する代替文字を定義します。

スクリプトが有効の時は、何も表示されませんが、ブラウザがスクリプトに対応していない場合か使用者がスクリプトを無効にしている場合に、この要素が有効になり「スクリプト非動作文字コンテンツ」が表示されます。

使用上の注意事項

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<script>
	day = new Date();
	document.write("現在の日時:");
	document.write(day);
</script>
<noscript>このページはJavaScriptを使用しています。</noscript>

表示例

L2.13.3 template 要素(スクリプトで挿入可能な要素)

<template shadowrootmode="シャドウルート" shadowrootclonable shadowrootdelegatesfocus> 
	スクリプトで挿入可能な要素コンテンツ </template>

スクリプトによって文書に挿入できる HTML の断片を定義します。ページの読み込み時には描画されないコンテンツの断片を定義を定義し、後で JavaScript を使用してアクティベート可能な状態でマークアップすることができます。

一般的には、重複する内容の一部をテンプレートとして保持したり、使用者の操作で DOM の内容が変化するコンテンツに向いています。

主な固有属性

shadowrootmode
親要素のシャドウルートを生成します。Element.attachShadow() メソッドを宣言するもので、enumerated 値を受け入れます。
open
内部シャドウルート DOM を JavaScript に公開します。
closed
内部シャドウルート DOM を JavaScript から隠します。
shadowrootclonable
この要素を使って作成したシャドウルートの clonable プロパティの値を true に設定します。この場合、Node.cloneNode() または Document.importNode() でシャドウホスト(template 要素のの親要素)の複製を作成するとコピーにシャドウルートが含まれます。
shadowrootdelegatesfocus
この要素を使って作成したシャドウルートの delegatesFocus プロパティの値を true に設定します。この場合、シャドウツリー内のフォーカスできない要素が選択された場合、フォーカスはツリー内の最初のフォーカス可能な要素に移ります。既定値は false です。

使用上の注意事項

  • この要素に囲まれた部分は、ページ読み込み時に自律動作しません。つまり、この範囲内にマークアップされたは箇所は、隠れた DOM として保存され、呼び出されるまで表示されません。
  • テンプレート内のコンテンツは、アクティベートされるまでドキュメント内に存在しないものとして扱われます。よって、画像や動画、音声はロードされませんし、スクリプトは実行されません。
  • template 要素は head 要素やbody 要素の中であれば、どこにでも置くことができます(コンテンツモデルの子要素以外)。そして、その中に置けるコンテンツであれば、何を置いても構いません。/li>
  • テンプレートを使うには、JavaScript でアクティベート(有効化)する必要があります。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。

使用例

HTML例


<template id="myTemplate">
	<img src="" alt="image">
	<div class="comment"></div>
</template>

<script>
	const t = document.querySelector('#myTemplate');
	t.content.querySelector('img').src = 'file.png';
	const clone = document.importNode(t.content, true);
	document.body.appendChild(clone);
</script>

L2.13.4 canvas 要素(グラフィック描画領域)

<canvas width="描画領域の幅" height="描画領域の高さ"> canvas要素が未サポート時の代替テキスト </canvas>

スクリプトでグラフィックスやアニメーションを表示する領域を定義します。

開始タグと終了タグの間に「canvas要素が未サポート時の代替テキスト」を指定することができます。これは、canvas 要素をサポートしていないブラウザの時に表示される文字列になります。

一般的には、JavaScript から Canvas API を呼び出して図形やアニメーションを描画します。本項では、Canvas API の詳細説明は省略しますので関連サイトや関連図書を参照してください。

主な固有属性

width
キャンバスの幅を単位なしのピクセル値で指定します。初期値は、300 です。
height
キャンバスの高さを単位なしのピクセル値で指定します。初期値は、150 です。

使用上の注意事項

  • レイアウトの初期値はインラインです。文章の改行には影響を与えません。
  • この要素はキャンバスの領域を指定するだけです。内部の描画はJavaScriptで定義します。
  • ブラウザの対応状況は、caniuse サイトで確認してください。
  • 要素の詳細情報は、mdn web docs サイトで確認してください。
  • Canvas API の詳細情報は、mdn web docs(キャンバス API)サイトで確認してください。

使用例

HTML例


<canvas id="canvas1" width="200" height="140" style="border: 1px #ccc solid;">
	このブラウザはcanvasの描画に対応していません。
</canvas>
<script>
	const canvas = document.getElementById('canvas1');
	const item1 = canvas.getContext('2d');
	item1.fillStyle = '#00CCFF';
	item1.fillRect(10, 10, 150, 100);
</script>

表示例

このブラウザはcanvasの描画に対応していません。

ロケット本体
PAGE
TOP
ロケット炎