HTML-CSS入門講座

濱屋太郎

Lesson-2

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

目次

2.1 はじめに

2.1.1 概要

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

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

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

(1) (要素名)

タグの種別を指定します。タグ名とも言われます。

(2) (属性)

要素名に対して設定する属性名を指定します。

(3) (属性値)

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

2.2 HTMLの基本構造

2.2.1 HTMLの構造

HTMLの構造

2.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ページとして表示されます。

2.3 文書情報

2.3.1 ページタイトル(title)

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

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

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

2.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にレイアウト調整を行う記述が必要となります。

2.3.3 リンク情報(link)

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

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

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

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

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

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

2.4 セクション分類タグ

2.4.1 セクション関連タグ

(1) h1~h6要素(見出し)

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

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

(2) article要素(アーティクル)

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

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

(3) section要素(セクション)

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

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

(4) header要素(ヘッダー)

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

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

(5) footer要素(フッター)

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

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

(6) nav要素(ナビ)

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

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

(7) aside要素(アサイド)

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

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

2.4.2 セクション分類の構成例

header

nav

main

section

section

section

article

article

article

aside

2.4.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>
</head>
<body>
<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>
</body>
</html>

2.5 コンテンツ分類タグ

2.5.1 コンテンツ関連タブ

(1) p要素(段落(パラグラフ))

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

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

(2) hr要素(区切り)

<hr>

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

(3) ul/li要素(順序のないリスト)


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

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

(4) ol/li要素(順序のあるリスト)


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

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

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


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

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

(6) div要素(とかたまりの範囲)

<div>(かたまりの範囲定義情報)</div>

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

(7) main要素(メインコンテンツ)

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

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

2.5.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>
</head>
<body>
<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>
</body>
</html>

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

※CSSの記述方法については「5.4.1 リスト関連プロパティ」を参照してください。

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

※CSSの記述方法については「5.4.1 リスト関連プロパティ」を参照してください。

2.6 テキスト分類タグ

2.6.1 テキスト関連タグ

(1) a要素(ハイパーリンク)

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

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

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

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

(2) em要素(強調)

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

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

(3) strong要素(強い重要性)

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

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

(4) small要素(免責・警告・著作権など)

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

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

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

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

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

(6) b要素(キーワードや商品名など)

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

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

(7) span要素(ひとつの範囲)

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

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

(8) br要素(改行)

<br>

改行する箇所を指定します。

2.6.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>
</head>
<body>
<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>
</body>
</html>

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

2.7 コンテンツ埋め込みタグ

2.7.1 コンテンツ埋め込み関連タグ

(1) img要素(画像)

<img src="(画像ファイル名)" alt="(代替テキスト)">

画像の埋め込み表示を指定します。

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

(2) iframe要素(インラインフレーム)

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

インラインフレーム内に(フレーム内に表示するURL)で指定したURLの内容を表示します。

(フレームの幅)と(フレームの高さ)には、作成するフレームの大きさ(幅と高さのピクセル数)を指定します。幅の初期値は300、高さの初期値は150です。

2.7.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>
</head>
<body>
<img src="images/sample1.jpg" alt="赤べこ">
<img src="images/sample2.jpg" alt="うさぎ">
<iframe src="https://sl-gallery.hamaya2020.com/" width="640" height="300">インラインフレームがサポートされているブラウザで見てください。</iframe>
</body>
</html>

2.8 テーブルタグ

2.8.1 table関連要素

(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 テーブルを活用しましょう」を参照してください。

2.8.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>
</head>
<body>
<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>
</body>
</html>

2.9 CSSとの紐付け

2.9.1 id属性とclass属性

HTMLとCSSの紐付けを行うためにid属性やclass属性を使用して要素(タグ)に名前を付けることができます。

(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>

2.10 特殊文字

2.10.1 特殊文字

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

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

2.10.2 特殊文字変換ツール

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

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

2.11 注意事項

2.11.1 インデンテーション(字下げ)

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>