第2回HTML講座（Ⅲ)は、7月22日（木）の13:00～17:00、14名の参加で、日立市施設の「らぽーるひたち」の「講習室」で開催しました。今回はテキスト本のPart1「HTMLの基本」の解説しました。本講座の講師は安田出世話人が担当しました。
講座の内容梗概は下記のとおりです。
講師より注意事項
-
１）講座に持参するノートパソコンの OneDriveの設定について
-
◆ 講座で使用しているホームルーターの通信料を減らすため、持参したノートパソコンのOneDriveの設定を、タスクバーにあ
る OneDriveのアイコンをクリックして、「同期の一時停止」クリックして、ホームルーターとの通信を遮断してください。ただし
、接続されている外付けHDDを見る場合は、「HTML講座（Ⅲ）」のフォルダのみに接続するように設定ください。
Ｐａｒｔ１ HＴＭＬの基本
Lesson-１ HTMLの書き方を覚えよう
-
◆ HTMLでは、文章を構成する見出しや段落、画像などの様々な部品のことを「要素」と呼ぶ。この「要素」がどんな種類の部
品であるか、その範囲を示すのが「タグ」。ほとんどのタグは、指定する範囲の始まりを示す「開始タグ」と終わりを示す「終了
タグ」で構成される。たとえば、<p>文章</p>の場合、<p>は開始タグであり、</p>は終了タグであり、<p>と</p>で囲まれて
いる部分をp要素と呼ぶ。
◆タグは入れ子の構造をとることができる。たとえば、<p>タグを<em>互い違い</em>に書くことはできない</p>
◆<p class="data01">日本めぐり旅></p>では、「class」を属性、「data01」を属性値と呼ぶ。属性と属性値を記述するときは
開始タグの後に半角スペースを挟み、属性を記述し、属性の文字列の後に=をつけ、属性値の文字列を"で挟む。
◆HTML文書の最も基本的な骨組みを形成するのは<html>タグ、<head>タブ、<body>タグの3つのタグである。<html>タグは
文書型宣言を除いたMTML文書のすべての要素は<html>タグに包含される必要がある。<head>タグは文書のタイトル・概
要・キーワード・作者など文書全体に対する情報を記述する。head要素はbody要素の前に記述する。head要素に記述され
た内容はブラウザに表示されない。<body>タグは、ブラウザに表示させるコンテンツを<body>タグの中に記述する。
◆HTML文書では「文書型宣言」「HTML文書の言語の種類」「文字コードの指定」「ページのタイトル」を記述することが必須。
◆HTML文書冒頭、HTML要素の前に<!DOCTYPE……>とタグを記述することが必須。HTML文書がどの仕様に基づいて書
かれたものかを示す。この仕様には「厳密型」と「移行型」がある。
◆HTML文書では、どの言語を使った文書か示す。たとえば、日本語の場合は<html lang="ja">となる。
◆文字コードを<meata>タグを使って指定する。content属性の属性値には「text/html; charset=文字コードを記述する。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
◆HTML文書のタイトルは<title>タグを使って、head要素の中で、指定する。このタイトルはコンテンツの表示領域ではなく、
ブラウザのタイトルバーに表示される。
◆HTML文書に、<meta>タグを使って付加情報（説明文、キーワード、ページ制作者など）を加えることができる。
◆HTML文書の中には表示されない情報（コメント）を書くことができる。例、<!--この部分は表示されない--> Lesson-2 テキストコンテンツを作ろう（１）
-
◆見出しを表示する場合、見出しのレベルに合わせて<h1>から<h6>までのタグを使用する。見出し文字の大きさはタグの数
値が大きくなると文字のサイズが大きくなるが、見出しタグはあくまでも文章の階層を表現するためのタグであり、文字を大き
くするためのタグではない。文字の大きさはスタイルシートで行う。
◆見出し要素の上下左右にはデフォルトでマージン（余白）が設定されている。余白が重なる場合は一方の余白が潰れる。
◆本文の段落は<p>～</p>で挟んで区切る。pはparagraph（段落）の頭文字。p要素の前後に1行の空き程度のマージンが自
動挿入されるが、<p>は1行空きの改行を行うタグではない。
◆HTML文書内の改行には<br />を使う。
◆<hr>タグを使うことにより、水平線を表示できる。
Lesson-3 テキストコンテンツを作ろう（２）
-
◆本や文献、他のサイトから文章を引用する場合は<blockquote>タグを使用する。この場合、字下げで表示される。引用元や
出典は<cite>タグを使用できる。<cite>タグで囲まれた部分が斜体で表示される。
◆文字を強調したい場合は<em>タグを、より強調したい場合は<strong>タブを使う。通常<em>タグは斜体、<strong>タブは
太字で表示される。HTMLには斜体を指定する<i>タグ、太字を指定する<b>タグがあるが、構造を指定する言語ではないの
で、使用すべきではない。
◆上付きは<sup>タブを、下付きは<sub>タグを使用する。たとえば、62.5m2は62.4<sup>2</sup>となる。
Lesson-4 リンクを設定しよう
-
◆テキストや画像にリンクを設定するには<a>タグを使用する（<a>タグで挟む）。そして、<a>タグの持っているhref属性に、飛
び先であるURLを記述する。hrefはHypertext REFerenceの頭文字を取ったものである。
◆リンクには、自分のサイト内のHTML文書にリンクさせる場合、絶対パスと相対パスがある。相対パスを推奨する。
◆ページ内にリンクさせる場合は、移動先のid属性をアンカーポイントとして指定すればよい。ただし、アンカーポイント名の前
に半角の#を付ける必要がある。
◆電子メール用のリンクを設定する場合は、mailto:を使用する。例、<a href="test@gihyo.jp>お問い合わせ"</a>
◆ ターゲットリンクには、「_blank」「_parent」「_self」「_top」があり、機能をよく理解して使用すること。 Lesson-5 テキストコンテンツを作ろう（３）
-
◆HTML文書で使用されている要素、特にbody要素の中で使われる多くは、大きく「ブロックレベル要素」と「インライン要素」
に分けられている」。「ブロックレベル要素」はh1～h6、p、blockquote、ul、ol、li、table、tr、th、td、divなど「インライン要素
」はa、em、strong、spanなどである。
◆通常、ブロックレベル要素はウインドウ幅いっぱいの長方の箱を形成する。ブロックレベルの要素が続く場合は、改行されて
表示される。
◆インライン要素はブロックレベル要素内でのみ用いられる。また、インライン要素は、その内容にテキスト自体あるいは他のイ
ンライン要素を持つことができるが、ブロックレベル要素を含むことはできない。
◆インライン要素の中には、「置換インライン要素」と呼ばれる要素がある。画像を扱うimg要素がその代表で、インラインの要
素としての性質だけでなく、ブロック要素の属性である横幅、高さ（width/height）といった疑念がある
◆一般的ブロックレベル要素には、別のブロックレベル要素やインライン要素を含むことができる。逆に、インライン要素の中に
ブロックレベル要素を置くことはできない。また、ブロックレベル要素が続く時は改行されるが、インライン要素の場合は改行
されずに横に並ぶ。
◆<div>タグは複数のテキストや画像を含むことができ、大変便利なタグです。すなわち、div要素はp要素やh1要素といったブ
ロックレベル要素を含むことができる。
◆<div>タグを挿入してもスタイルを指定しなければ表示は変わらない。<p>タグの場合はブラウザに表示されると上下に余白
ができるが、<div>タグは余白ができない。
◆インライン要素の一部にスタイルを指定することができる。すなわち、<span>で挟み、スタイルを指定すればよい。
◆特殊文字（”、&、<、>や）半角スペース、三点リーダーの記載を覚えること。（"、&、<、>、 &hllip;）
◆半角スペースの連続した文章を表示しても1つの半角スペースとして扱われるが、 を複数記載すれば可能となる。
◆連絡先を表すタグとして<address>タグが使える。例として、下記を記載する。
<address>お問い合わせ：<a href="mailto:test@gihyo.jp">test@gihyo.jp</a></address>
世話人・文責：安田 出
第2回HTML講座（Ⅲ）の参加者