HTML-CSS 入門講座

HTML-CSS 入門講座

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

目次

L2.1 はじめに

L2.1.1 概要

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

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

<要素名 属性="属性値">

(1) 要素名

タグの種別を指定します。タグ名とも言われます。タグの終了(閉じタグ)を示す場合は、要素名の前にスラッシュ(/)を指定することで終了タグを定義することができます。

(2) 属性

要素名に対して設定する属性名を指定します。属性が複数ある場合は、属性と属性値の組合せを空白で区切って複数指定することができます。

(3) 属性値

属性に対する値を指定します。一般的には、ダブルクォーテーション(")で囲んで指定しますが シングルクォーテーション(')で囲むことも可能です。属性値がない時は、イコール(=)以降が省略されます。複数の属性を指定する時は、スペースで区切って指定します。

L2.2 HTML の基本構造

L2.2.1 HTML の構造

HTML の構造

注意事項

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

L2.2.2 HTML 例

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="サイトの説明文">
<meta name="keywords" 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>

(1) !DOCTYPE 宣言(ドキュメントタイプ宣言)

ドキュメントタイプ宣言は、この文書のバージョンを宣言するメタ情報です。HTML5 であれば<!DOCTYPE html>と記述します。

(2) html 要素(HTML の文書)

html 要素は、この文書が HTML の文書であることを表します。「lang="ja"」の "ja" は日本語で書かれた文書であることを表します。

(3) head 要素(文書情報)

head 要素は、この文書のメタデータを記述します。例えば、<title>~</title>でその文書のタイトルを記述することができます。

(4) body 要素(文書本文)

body 要素は、この文書の本文を記述します。この body 要素で囲まれた領域が Web ページとして表示されます。

L2.3 文書情報

L2.3.1 ページタイトル(title)

(1) title 要素(ページタイトル)

<title>Webページのタイトル</title>

Web ページのタイトル名を記載します。多くのブラウザではブラウザのタイトルタブに表示される名称となります。

L2.3.2 メタデータ(meta)

(1) meta 要素(文字コード指定/charset)

<meta charset="UTF-8">

HTML を記述している文字コードを指定します。文字コードが UTF-8 の場合は "UTF-8" と指定します。

(2) meta 要素(ページの説明文/description)

<meta name="description" content="サイトの説明文">

ページの概要を示す説明文を指定します。一般的には検索サイトでページ概要として表示され、PC は 120 文字程度、スマホは 50 文字程度が表示文字数となります。

(3) meta 要素(ページのキーワード/keywords)

<meta name="keywords" content="キーワード">

ページの検索キーワードをカンマ(,)で区切って指定します。キーワードの有効可否は検索サイトに依存します。

(4) meta 要素(ページの作者情報/author)

<meta name="author" content="作者情報">

Web ページの作成者情報を指定します。

(5) meta 要素(ビューポート/viewport)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

L2.3.3 リンク情報(link)

(1) link要素(外部 CSS ファイルの紐付け)

<link href="スタイルシートファイルのパス名" rel="stylesheet"  type="text/css">

外部のスタイルシートファイルとの紐付けを指定します。

(2) link要素(ファビコンファイルの紐付け)

<link href="ファビコンファイルのパス名" rel="icon">

ファビコンファイル(Web ページのシンボルアイコンファイル)との紐付けを指定します。一般的なファビコンファイル名は "favicon.ico" になります。

L2.4 文書本文

L2.4.1 文書本文のタグ分類

文書本文に記載するタグには、以下の分類があります。

  • セクション分類タグ
  • コンテンツ分類タグ
  • テキスト分類タグ
  • コンテンツ埋め込みタグ
  • テーブルタグ
  • フォームタグ

注意事項

  • タグ(要素)の多くは、ブロックレベル要素とインライン要素に分類されます。但し、HTML5 ではブロックレベル要素とインライン要素という考え方はなくなっていますので、あくまでも性質を持っていると考えてください。
    ブロックレベル要素
    文書の骨組みとなる要素です。(例えば見出しや段落など)このタイプの要素は、body 要素の直接の子要素として配置することができます。
    インライン要素
    文章中の一部として扱われる要素です。(例えばリンクや文字の強調など)このタイプの要素は、通常はブロックレベル要素内で使用します。
  • HTML4.01 までは、ブロックレベル要素とインライン要素に分類されていましたが、HTML5 では、コンテンツの種類の定義をコンテンツ・モデルとして再定義しました。コンテンツ・モデルコンテンツの種類として以下の分類で定義されています。
    メタデータ・コンテンツ
    文書情報や他の文書との関係を定義するものを示します。
    フロー・コンテンツ
    子孫にテキストなどを持つものを示します。
    セクショニング・コンテンツ
    見出しと概要を付けられるものを示します。
    ヘッディング・コンテンツ
    セクションの見出しとなるものを示します。
    フレージング・コンテンツ
    段落などの中に含まれる文節・語句などを示します。
    エンベッディッド・コンテンツ
    文書に他のリソースを埋め込むものを示します。
    インタラクティブ・コンテンツ
    ユーザーによる操作に対応するものを示します。
  • HTML5 の各要素は、上記のコンテンツの種類のいずれか一つのみに分類されるのではなく、一つの要素に対して複数のコンテンツの種類が定義されることもあります。 例えば、section 要素はフロー・コンテンツであり、同時にセクショニング・コンテンツでもあります。
  • 特定の属性や属性値を持った場合にだけインタラクティブ・コンテンツになるなど、条件付きで要素の種類が変化することもあります。
  • HTML5 では、上記のコンテンツの種類に各要素が分類されることで、どの要素の中にどの要素を配置できるかというタグの配置ルールが決まります。
  • 当サイトでは、HTML5 の本来の分類とは異なりますが、セクション分類タグ、コンテンツ分類タグ、テキスト分類タグ、コンテンツ埋め込みタグ、テーブルタグ、フォームタグに分類してタグの説明を実施します。

L2.5 セクション分類タグ

L2.5.1 セクション分類の構成例

header

nav

main

section

section

section

article

article

article

aside

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


<h1>h1 レベル見出し情報</h1>
<h2>h2 レベル見出し情報</h2>
<h3>h3 レベル見出し情報</h3>
<h4>h4 レベル見出し情報</h4>
<h5>h5 レベル見出し情報</h5>
<h6>h6 レベル見出し情報</h6>

各レベルに従った見出しを指定します。一般的に h1 はページに 1 つだけ指定します。

L2.5.3 article 要素(アーティクル)

<article>アーティクル定義情報</article>

単独で成り立つコンテンツのブロックを定義します。

L2.5.4 section 要素(セクション)

<section>セクション定義情報</section>

章のブロックを定義します。

L2.5.5 header 要素(ヘッダー)

<header>ヘッダー定義情報</header>

ページ上部のヘッダーブロックを定義します。セクション要素やアーティクル要素内のヘッダー情報としても使用可能です。

L2.5.6 footer 要素(フッター)

<footer>フッター定義情報</footer>

ページ下部のフッターブロックを定義します。セクション要素やアーティクル要素内のフッター情報としても使用可能です。

L2.5.7 nav 要素(ナビ)

<nav>グローバルナビゲーション定義情報</nav>

グローバルナビゲーションのブロックを定義します。

L2.5.8 aside 要素(アサイド)

<aside>アサイド定義情報</aside>

ページの内容と関連がないブロックや補足情報のブロックを定義します。

L2.5.9 表示サンプル

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML セクション サンプル</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
</style>
</head>
<body>
	<div class="container">
		<h1>h1 レベル見出し情報</h1>
		<h2>h2 レベル見出し情報</h2>
		<h3>h3 レベル見出し情報</h3>
		<h4>h4 レベル見出し情報</h4>
		<h5>h5 レベル見出し情報</h5>
		<h6>h6 レベル見出し情報</h6>
		<article>アーティクル定義情報</article>
		<section>セクション定義情報</section>
		<header>ヘッダー定義情報</header>
		<footer>フッター定義情報</footer>
		<nav>グローバルナビゲーション定義情報</nav>
		<aside>アサイド定義情報</aside>
	</div>
</body>
</html>

L2.6 コンテンツ分類タグ

L2.6.1 p 要素(段落(パラグラフ))

<p>段落定義情報</p>

段落(パラグラフ)を指定します。

L2.6.2 hr 要素(区切り)

<hr>

テーマや話題の区切りを指定します。

L2.6.3 ul/li 要素(順序のないリスト)


<ul>
	<li>リスト要素</li>
	<li>リスト要素</li>
</ul>

順序性のないリスト要素を指定します。

L2.6.4 ol/li 要素(順序のあるリスト)


<ol>
	<li>リスト要素</li>
	<li>リスト要素</li>
</ol>

順序性のあるリスト要素を指定します。

L2.6.5 dl/dt/dd 要素(定義・説明リスト)


<dl>
	<dt>説明する言葉</dt><dd>説明文</dd>
	<dt>説明する言葉</dt><dd>説明文</dd>
</dl>

説明文リストを指定します。

L2.6.6 div 要素(ひとつのかたまりの範囲)

<div>ひとつのかたまりの範囲定義情報</div>

ひとつのかたまりの範囲を指定します。

L2.6.7 main 要素(メインコンテンツ)

<main>メインコンテンツ定義情報</main>

ページのメインコンテンツブロックを定義します。

L2.6.8 表示サンプル

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML コンテンツ サンプル</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
</style>
</head>
<body>
	<div class="container">
		<p>段落定義情報</p>
		<hr>
		<ul>
			<li>リスト要素</li>
			<li>リスト要素</li>
		</ul>
		<hr>
		<ol>
			<li>リスト要素</li>
			<li>リスト要素</li>
		</ol>
		<hr>
		<dl>
			<dt>説明する言葉</dt><dd>説明文</dd>
			<dt>説明する言葉</dt><dd>説明文</dd>
		</dl>
		<hr>
		<div>ひとつのかたまりの範囲定義情報</div>
		<hr>
		<main>メインコンテンツ定義情報</main>
		<hr>
	</div>
</body>
</html>

L2.6.9 表示サンプル(ul/ol タグに CSS でスタイルを設定)

※ ul タグも ol タグも同様の表示形態になります。
※ CSS の記述方法については「L5.4.1 リスト関連プロパティ」を参照してください。

L2.6.10 表示サンプル(dl タグに CSS でスタイルを設定)

L2.7 テキスト分類タグ

L2.7.1 a 要素(ハイパーリンク)

<a href="リンク先情報">ハイパーリンク定義情報</a>

ハイパーリンクする範囲を指定します。

外部サイトなどにリンクする時は「target="_blank"」を付けることで新しいタブで開くことができます。

注意事項

「target="_blank"」使用時に悪意ある外部サイトを指定しまうと外部サイトから自サイトを操作されるという脆弱性があります。これを回避する時に外部サイトを指定する時は「rel="noopener noreferrer"」を同時に指定するようにしてください。

L2.7.2 em 要素(強調)

<em>強調定義情報</em>

強調する(アクセントを付ける)範囲をを指定します。

L2.7.3 strong 要素(強い重要性)

<strong>強い重要性定義情報</strong>

強い重要性を示す範囲を指定します。

L2.7.4 small 要素(免責・警告・著作権など)

<small>免責・警告・著作権など定義情報</small>

免責・警告・著作権などの注釈や細目する範囲を指定します。

L2.7.5 i 要素(声や心の中で思ったこと)

<i>声や心の中で思ったこと定義情報</i>

声や心の中で思ったことなど、他と区別したい範囲を指定します。

L2.7.6 b 要素(キーワードや商品名など)

<b>キーワードや商品名など定義情報</b>

キーワードや商品名など、他と区別したい範囲を指定します。

L2.7.7 span 要素(ひとつの範囲)

<span>ひとつの範囲定義情報</span>

ひとつの範囲として定義する範囲を指定します。

L2.7.8 br 要素(改行)

<br>

改行する箇所を指定します。本要素には、終了タグがありません。

L2.7.9 表示サンプル

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML テキスト サンプル</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
</style>
</head>
<body>
	<div class="container">
		<a href="#">ハイパーリンク定義情報</a>
		<em>強調定義情報</em>
		<strong>強い重要性定義情報</strong>
		<small>免責・警告・著作権など定義情報</small>
		<i>声や心の中で思ったこと定義情報</i>
		<b>キーワードや商品名など定義情報</b>
		<span>ひとつの範囲定義情報</span>
		<hr>
		<a href="#">ハイパーリンク定義情報</a><br>
		<em>強調定義情報</em><br>
		<strong>強い重要性定義情報</strong><br>
		<small>免責・警告・著作権など定義情報</small><br>
		<i>声や心の中で思ったこと定義情報</i><br>
		<b>キーワードや商品名など定義情報</b><br>
		<span>ひとつの範囲定義情報</span><br>
	</div>
</body>
</html>

※ テキスト分類のタグは文字に対する指定となるので改行する時は「<br>」が必要です。

L2.8 コンテンツ埋め込みタグ

L2.8.1 img 要素(画像)

<img src="画像パス名" alt="代替テキスト">

画像の埋め込み表示を指定します。本要素には、終了タグがありません。

「代替テキスト」は、画像が表示できない時に画像の代わりに表示するテキストを指定します。必須項目なので必ず指定してください。

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

<iframe src="フレーム内に表示する URL" width="フレームの幅" height="フレームの高さ" title="補足情報">フレームが表示できない時のメッセージ</iframe>

インラインフレーム内に「フレーム内に表示する URL」で指定した URL の内容を表示します。「補足情報」には表示する内容の補足的な情報を指定します。

「フレームの幅」と「フレームの高さ」には、作成するフレームの大きさを指定します。幅の初期値は 300、高さの初期値は 150 です。

L2.8.3 表示サンプル

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML テキスト サンプル</title>
<style>
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
</style>
</head>
<body>
	<div class="container">
		<img src="images/sample1.jpg" alt="赤べこ">
		<img src="images/sample2.jpg" alt="うさぎ">
		<iframe src="https://sl-gallery.hamaya2020.com/" width="640" height="900" title="フレームサンプル">インラインフレームがサポートされているブラウザで見てください。</iframe>
	</div>
</body>
</html>

2.9 テーブルタグ

L2.9.1 table/caption/tr/th/td 要素(テーブル)


<table>
	<caption>キャプション</caption>
	<tr><th>見出し</th><th>見出し</th></tr>
	<tr><td>データ</td><td>データ</td></tr>
	<tr><td>データ</td><td>データ</td></tr>
</table>

テーブル構造の表示を指定します。

テーブルのデザイン(幅、高さ、色、文字飾りなど)は CSS で指定します。

table タグ
テーブルの範囲を指定します。
caption タグ
表のキャプション(主題)を指定します。
tr タグ
1行の範囲を指定します。
th タグ
見出し項目を指定します。
td タグ
データ項目を指定します。

※ テーブル関連の詳細および活用サンプルについては「Lesson-7 テーブルを活用しましょう」を参照してください。

L2.9.2 表示サンプル

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML テーブル サンプル</title>
<style>
body {
	margin: 0;
}
.container {
	padding: 20px;
	border: #ccc 1px solid;
}
</style>
</head>
<body>
	<div class="container">
		<table>
			<caption>キャプション</caption>
			<tr><th>見出し</th><th>見出し</th></tr>
			<tr><td>データ</td><td>データ</td></tr>
			<tr><td>データ</td><td>データ</td></tr>
		</table>
		<hr>
		<table>
			<caption>注文書</caption>
			<tr><th>商品名</th><th>単価</th><th>数量</th><th>金額</th></tr>
			<tr><td>みかん</td><td>50</td><td>4</td><td>200</td></tr>
			<tr><td>りんご</td><td>100</td><td>3</td><td>300</td></tr>
			<tr><td>バナナ</td><td>200</td><td>2</td><td>400</td></tr>
			<tr><td></td><td></td><td>合計</td><td>900</td></tr>
		</table>
	</div>
</body>
</html>

L2.10 フォームタグ

L2.10.1 form 要素(フォーム)


<form action="URL" name="フォームの名前" method="転送方法" enctype="データ型式">
	フォーム要素(部品)
</form>

入力フォームの作成を指定します。フォーム要素にフォームを構成するフォーム要素(部品)を配置します。

action 属性
送信先の URL を指定します。
name 属性
フォームの名前を指定します。
method 属性
送信データの転送方法(HTTP メソッド)を指定します。get(初期値)を指定すると URL の型式で転送します。post を指定すると本文にデータを配置して転送します。
enctype 属性
送信データの型式(MIME タイプ)を指定します。application/x-www-form-urlencoded(初期値)を指定すると URL エンコード型式になります。multipart/form-data を指定するとマルチパート型式になります。text/plain を指定するとプレーンテキスト型式になります。

L2.10.2 label 要素(ラベル)


<label form="form 要素" for="部品要素">
	ラベル要素
</label>

入力フォームのフォーム部品とラベルを関連付けます。一般的には、関連付けを行うことでラベルをクリックしてもフォーム部品をクリックしたのと同じ効果を出すことができます。

form 属性
form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
for 属性
フォーム部品との関連付けを行います。for 属性の値とフォーム部品の id 属性の値を一致させることでフォーム部品との関連付けを行うことができます。

L2.10.3 input 要素(インプット)

<input type="形状" name="名前" form="form 要素" value="初期値" size="幅" maxlength="最大文字数" minlength="最小文字数" placeholder="凡例" checked disabled readonly required>

テキスト入力欄やボタンなそのフォーム部品を作成します。本要素には、終了タグがありません。

type 属性
作成するフォーム部品の形状を指定します。
hidden
画面上には表示されない隠しデータを作成します。
text
1行のテキストボックスを作成します。(初期値)
search
検索テキストの入力欄を作成します。
tel
電話番号の入力欄を作成します。
url
URL の入力欄を作成します。
email
メールアドレスの入力欄を作成します。
password
パスワードの入力欄を作成します。
datetime
UTC の日時の入力欄を作成します。
date
日付の入力欄を作成します。
month
月の入力欄を作成します。
week
週の入力欄を作成します。
time
時刻の入力欄を作成します。
datetime-local
UTC によらないローカル日時の入力欄を作成します。
number
数値の入力欄を作成します。
range
レンジの入力欄を作成します。
color
色の入力欄を作成します。
checkbox
チェックボックスを作成します。
radio
ラジオボタンを作成します。
file
サーバーhげファイルを送信します。
submit
送信ボタンを作成します。
image
画像ボタンを作成します。src 属性を使用して表示する画像ファイルを指定、alt 属性を使用して代替テキストを指定、width 属性と height 属性を使用して画像の大きさを指定します。
reset
リセットボタンを作成します。
button
汎用ボタンを作成します。
name 属性
フォーム部品の名前を指定します。ここで指定された名前は、フォームと一緒に送信されます。
form 属性
form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
value 属性
フォーム部品が保有する値の初期値を指定します。値の現在値は、名前と一緒に送信されます。
size 属性
コントロールの大きさ(文字数)を指定します。
maxlength 属性
value 属性が保有する値の最大長(文字数)を指定します。
minlength 属性
value 属性が保有する値の最小長(文字数)を指定します。
placeholder 属性
何を入力するかの助言を指定します。
checked 属性
チェックボックスやラジオボタンがチェック状態であることを指定します。
disabled 属性
コントロールが無効であることを指定します。
readonly 属性
値の修正ができないことを指定します。
required 属性
フォームが送信するための必須項目であることを指定します。

L2.10.4 textarea 要素(テキストエリア)

<textarea name="名前" form="form 要素" cols="幅" rows="行数" maxlength="最大文字数" minlength="最小文字数" placeholder="助言" disabled readonly required>初期値</textarea>

複数行のテキスト入力ボックスを作成します。本要素には、終了タグがありません。

name 属性
フォーム部品の名前を指定します。ここで指定された名前は、フォームと一緒に送信されます。
form 属性
form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
cols 属性
コントロールの横幅(文字数)を指定します。省略時は、20 です。
rows 属性
コントロールの行数を指定します。
maxlength 属性
入力可能な最大文字数を指定します。省略すると無制限に入力することができます。
minlength 属性
入力しなければいけない最小文字数を指定します。
placeholder 属性
何を入力するかの助言を指定します。
disabled 属性
コントロールが無効であることを指定します。
readonly 属性
値の修正ができないことを指定します。
required 属性
フォームが送信するための必須項目であることを指定します。

L2.10.5 select/option 要素(セレクト/オプション)


<select name="名前" form="form 要素" multiple size="行数" disabled required>
	<option value="値" disabled selected>選択肢</option>
	<option value="値" disabled selected>選択肢</option>
	<option value="値" disabled selected>選択肢</option>
</select>

select 要素は、option 要素で指定されたリストからの選択ボックスを作成します。

name 属性
フォーム部品の名前を指定します。ここで指定された名前は、フォームと一緒に送信されます。
form 属性
form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
multiple 属性
複数の選択肢を選択できることを指定します。省略時は、選択できる選択肢は、1つです。
size 属性
画面に一度に表示する行数を指定します。
disabled 属性
コントロールが無効であることを指定します。
required 属性
フォームが送信するための必須項目であることを指定します。

option 要素は、select 要素の選択肢を作成します。

value 属性
フォームで送信する値を指定します。省略すると option 要素の中の文字列が使用されます。
disabled 属性
コントロールが無効であることを指定します。
selected 属性
初期状態で選択状態にすることを指定します。

L2.10.6 button 要素(ボタン)

<button type="型式" name="名前" form="form 要素" disabled>ボタン内容</button>

ボタンを作成します。

type 属性
作成するボタンのタイプを指定します。
submit
送信ボタンを作成します。(初期値)
reset
リセットボタンを作成します。
button
汎用ボタンを作成します。
name 属性
フォーム部品の名前を指定します。ここで指定された名前は、フォームと一緒に送信されます。
form 属性
form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
disabled 属性
コントロールが無効であることを指定します。

L2.10.7 fieldset/legend 要素(フィールドセット/レジェンド)


<fieldset name="名前" form="form 要素" disabled>
	<legend>キャプション</legend>
	フォーム要素(部品)
</fieldset>

fieldset 要素は、フォーム要素をグループ化します。

name 属性
フォーム部品の名前を指定します。ここで指定された名前は、フォームと一緒に送信されます。
form 属性
form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
disabled 属性
コントロールが無効であることを指定します。

legend 要素は、グループ化した要素群のキャプションを指定します。

L2.10.8 表示サンプル

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML フォーム サンプル</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}

/* お問合せフォーム */
.form1 * {
	padding: 0;
	margin: 0;
	font-size: 16px;
	box-sizing: border-box;
}
.form1 {
	width: calc(100% - 60px);
	max-width: 760px;
	margin: 20px auto;
	padding: 20px;
	background: #eee;
	border: 1px #888 solid;
}
.form1 div {
	padding-bottom: 10px;
}
.form1 .title {
	margin: 0 0 10px 0;
	font-size: 120%;
}
.form1 .label {
	display: block;
	padding-left: 5px;
}
.form1 .name, .form1 .email, .form1 .tel, .form1 .item {
	width: 100%;
	max-width: 300px;
	padding: 5px;
}
.form1 .name, .form1 .email, .form1 .tel {
	width: 100%;
	max-width: 300px;
	padding: 5px;
}
.form1 .subject, .form1 .content {
	width: 100%;
	padding: 5px;
}
.form1 button {
	display: block;
	padding: 5px 20px;
	margin: 0 auto;
}

/* 各部品の形状のサンプル */
.form2 {
	padding: 20px;
}
.form2 .title {
	margin: 0 0 10px 0;
	font-size: 120%;
}
.form2 label {
	display: inline-block;
	padding-bottom: 5px;
}

/* fieldset と regend のサンプル */
.form3 {
	padding: 20px;
}
.form3 .title {
	margin: 0 0 10px 0;
	font-size: 120%;
}
.form3 fieldset {
	display: inline-block;
}
.form3 label {
	display: inline-block;
	padding-bottom: 5px;
}
</style>
</head>
<body>
	<div class="container">
		<form class="form1" action="#" name="form1" method="post">
			<p class="title">お問合せフォーム</p>
			<div>
				<label class="label" for="name">お名前</label>
				<input id="name" class="name" type="text" name="name" placeholder="例)山田太郎" value="">
			</div>
			<div>
				<p class="label">性別 
					<label><input type="radio" name="sex" value="男性" checked> 男性</label>
					<label><input type="radio" name="sex" value="女性"> 女性</label>
				</p>
			</div>
			<div>
				<label class="label" for="email">メールアドレス</label>
				<input id="email" class="email" type="email" name="email" placeholder="例)sample@example.com" value="">
			</div>
			<div>
				<label class="label" for="tel">電話番号</label>
				<input id="tel" class="tel" type="tel" name="tel" placeholder="例)0000000000" value="">
			</div>
			<div>
				<p class="label">お問い合わせ項目</p>
				<select id="item" class="item" name="item">
					<option value="" selected>種別を選択してください</option>
					<option value="ご質問">ご質問</option>
					<option value="ご意見">ご意見</option>
					<option value="ご感想">ご感想</option>
				</select>
			</div>
			<div>
				<label class="label" for="subject">件名</label>
				<input id="subjext" class="subject" type="text" name="subject" placeholder="件名">
			</div>
			<div>
				<label class="label" for="content">お問い合わせ内容</label>
				<textarea id="content" class="content" name="content" rows="10" placeholder="お問合せ内容を入力"></textarea>
			</div>
			<button type="submit">お問合せ送信</button>
		</form>
		<hr>
		<form class="form2" action="#" name="form1" method="post">
			<p class="title">各部品の形状のサンプル</p>
			<label>input type="hidden":<input type="hidden"></label><br>
			<label>input type="text":<input type="text" value=""></label><br>
			<label>input type="search":<input type="search"></label><br>
			<label>input type="tel":<input type="tel"></label><br>
			<label>input type="url":<input type="url"></label><br>
			<label>input type="email":<input type="email"></label><br>
			<label>input type="password":<input type="password"></label><br>
			<label>input type="datetime":<input type="datetime"></label><br>
			<label>input type="datetime-local":<input type="datetime-local"></label><br>
			<label>input type="date":<input type="date"></label><br>
			<label>input type="time":<input type="time"></label><br>
			<label>input type="month":<input type="month"></label><br>
			<label>input type="week":<input type="week"></label><br>
			<label>input type="number":<input type="number"></label><br>
			<label>input type="range":<input type="range"></label><br>
			<label>input type="color":<input type="color"></label><br>
			<label>input type="checkbox":<input type="checkbox" value="1"></label><br>
			<label>input type="radio":<input type="radio" value="2"></label><br>
			<label>input type="file":<input type="file"></label><br>
			<label>input type="submit":<input type="submit"></label><br>
			<label>input type="reset":<input type="reset"></label><br>
			<label>input type="button":<input type="button" value="送信ボタン"></label><br>
			<label>select:<select><option selected>選択肢1</option><option>選択肢2</option><option>選択肢3</option></select></label><br>
			<label>button type="submit":<button type="submit">送信ボタン</button></label><br>
			<label>button type="reset":<button type="reset">リセットボタン</button></label><br>
			<label>button type="button":<button type="button">汎用ボタン</button></label><br>
		</form>
		<hr>
		<form class="form3" action="#" name="form1" method="post">
			<p class="title">fieldset と regend のサンプル</p>
			<fieldset>
				<legend>グループC1</legend>
				<label>選択C1-1:<input type="checkbox" name="checkbox1" value="C1-1"></label><br>
				<label>選択C1-2:<input type="checkbox" name="checkbox1" value="C1-2"></label><br>
				<label>選択C1-3:<input type="checkbox" name="checkbox1" value="C1-3"></label><br>
			</fieldset>
			<fieldset>
				<legend>グループC2</legend>
				<label>選択C2-1:<input type="checkbox" name="checkbox2" value="C2-1"></label><br>
				<label>選択C2-2:<input type="checkbox" name="checkbox2" value="C2-2"></label><br>
				<label>選択C2-3:<input type="checkbox" name="checkbox2" value="C2-3"></label><br>
			</fieldset>
			<hr>
			<fieldset>
				<legend>グループR1</legend>
				<label>選択R1-1:<input type="radio" name="radio1" value="R1-1" checked></label><br>
				<label>選択R1-2:<input type="radio" name="radio1" value="R1-2"></label><br>
				<label>選択R1-3:<input type="radio" name="radio1" value="R1-3"></label><br>
			</fieldset>
			<fieldset>
				<legend>グループR2</legend>
				<label>選択R2-1:<input type="radio" name="radio2" value="R2-1" checked></label><br>
				<label>選択R2-2:<input type="radio" name="radio2" value="R2-2"></label><br>
				<label>選択R2-3:<input type="radio" name="radio2" value="R2-3"></label><br>
			</fieldset>
		</form>
	</div>
</body>
</html>

L2.11 関連事項

L2.11.1 CSS との紐付け

(1) id 属性

<要素名 id="id 名">コンテンツ</要素名>

要素に対して id 名を付与します。1 つの Web ページ内では1箇所にしか同一の名前を付けれません。CSS などで id 名を参照する時は、先頭に「ハッシュ(#)」を付与します。id 名は、a タグ(アンカータグ)のリンク先として使用することもできます。

使用例

<p id="text1">サンプルテキスト</p>

(2) class 属性

<要素名 class="class 名">コンテンツ</要素名>

要素に対して class 名を付与します。複数の箇所に同一の名前を付けれます。class 名には複数の名前をスペースで区切って指定することができます。CSS などで class 名を使用する時は、先頭にピリオド(.)を付与します。

使用例

<p class="size1 color1">サンプルテキスト</p>

L2.11.2 特殊文字

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.11.3 インデンテーション(字下げ)

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>

ロケット本体
PAGE
TOP
ロケット炎