【文書の構成】
作成する文書の構成をどのようにするかは、その文書の内容や用途によっていろいろと考えられると思いますが、 ここでは「ヘッダー部」、「導入部」、「目次部」、「本文部」及び「フッター部」で構成することにします。 そして、それに合うようなテンプレートを作成してみます。 「ヘッダー部」にはタイトルと、その他に必要な事柄（作成者名、作成日など）を記述するものとします。 「フッター部」には、必要に応じて連絡先などを記述するものとします。 「導入部」には、その文書の意図するところ、大まかな内容紹介などを記述することとします。 「目次部」には、目次をリスト形式で記述し、本文の見出し行へリンクできるようにします。 「本文部」には、目次に対応した文章を順に記述することとします。各文章は最初に見出し行を記述し、その後にその内容を表すテキスト行を順に記述することとします。
【ＨＴＭＬ文書の記述形式】
ＨＴＭＬ(HyperText Markup Language)はネット上の文書（ページ）を記述するための言語です。 参考： 「HTML: HyperText Markup Language | MDN」 ＨＴＭＬによって記述することで、同じ文書内の別の箇所へのリンクや、別の文書へのリンク（読み込み）を実現することができます。 ＨＴＭＬ文書はテキスト形式で書かれたファイルで、拡張しには「.html」もしくは「.htm」を付けます。 そしてその中身はテキスト行の並びです。 まず最初の行に、これがＨＴＭＬ形式の文書であることを示す宣言文を記述します。 <!DOCTYPE html> その後は、全体をＨＴＭＬタグで囲みます。 <html> ... </html> 「<html>」が開始タグで、タグ名の前にスラッシュ記号を付けた「</html>が終了タグです。 開始タグは要素名を「小なり記号(<)」と「大なり記号(>)」で囲んだものが基本形となりますが、開始タグの中に属性を記述することもあります。 終了タグは要素名の前に「スラッシュ記号(/)」を付け、それを「小なり記号(<)」と「大なり記号(>)」で囲んだものです。稀に終了タグのないものもあります。 そしてＨＴＭＬタグの中にHEADタグとBODYタグを記入します。 <html> <head> ... </head> <body> ... </body> </html> 開始タグから始まり終了タグで終わる記述によって表される内容を「要素」と呼びます。そして、開始タグと終了タグに囲まれた記述をその要素の「内容」と呼びます。 従って、「ＨＴＭＬ要素はHEAD要素とBODY要素によって構成される」ということになります。 HEAD要素には、文書の中身そのものではなく、それに付随するような情報を記述します。 BODY要素には、文書そのものの中身を記述します。 ＨＴＭＬは、ネット上でやりとりする文書の構造、表示方法、中身などを「マーク付け」することで明らかにするための、「マークアップ」言語です。そしてＨＴＭＬ形式の文書中に出現するマークアップの開始位置は「小なり(<)」記号によって認識されます。 そのため、文章中に「小なり(<)」記号を不用意に記述すると、それ以降の文字列がマークアップとみなされ、文書の形が崩れる結果となります。 ＨＴＭＬには、マークアップに係わる記号を文章中に記述できるように、下記の記述方法が定義されています。これらは「文字参照」と呼ばれる文字の特別な記述方法の一部です。 < = 小なり記号(<) > = 大なり記号(>) & = アンパサンド記号(&) " = 二重引用符(")
【HEAD要素の記述】
HEAD要素には、文書の中身そのものではなく、それに付随する下記のような情報を記述します。 文書のタイトル ＨＴＭＬ文書を作成したときの文字コード（エンコーディング）の種類 文書の表示形式（スタイル）など 文書のタイトルが「簡単なＨＴＭＬ文書を手書きする話」で、文字コードが「utf-8」のときは下記のように記述します。 <head> <meta charset="utf-8"> <title>簡単なＨＴＭＬ文書を手書きする話</title> </head> META要素で、この文書（ファイル）を作成したときの文字コードを指定します。META要素には終了タグはありません。 開始タグの中に記述されている項目を「属性」と呼びます。「属性」は「属性名」と「指定値」をイコール記号で繋いで記述します。 ここでは「charset」が属性名で、「utf-8」が指定値です。指定値は通常２重引用符記号(")で囲んで記述します。 ＨＴＭＬ文書は「utf-8」で作成することが推奨されています。「shift_jis」で作成したときは下記のように記述します。 <meta charset="shift_jis"> 文書のタイトルは、TITLE要素の開始タグと終了タグの間に記述します。ここで指定したタイトルは、ウェブブラウザがこの文書を呼び出した時に画面上のタイトルバーに表示し、スクリーンリーダーによって読み上げられます。 尚、要素名、属性名、文字コード名は大文字と小文字を区別しません。
【BODY要素の記述】
BODY要素には、文書の中身そのものを記述します。 DIV（ディビジョン）要素は文書をブロックに分けるために使用します。 ここでは、BODY要素を次のブロックに分けて記述することにします。 「ヘッダー」、「本文の導入部分」、「目次」、「本文の後続部分」、「フッター」 <body> <div class="header"> ... ここにヘッダー情報を記述します </div> <div class="main-intro"> ... ここに本文の書き出し部分を記述します </div> <div class="right-navi"> ... ここに目次を記述します </div> <div class="main-contents"> ... ここに本文の後続部分を記述します </div> <div class="footer"> ... ここにフッター情報を記述します </div> </body> 「ヘッダー部」にはレベル１の見出し行にタイトルを記述し、必要があればその下にそれを記述することにします。 <div class="header"> <h1 class="h1-header">この文書のタイトル</h1> <p class="p-header">その他の情報</p> </div> 文書のタイトルはレベル1の見出し行（H1要素）で記述します。 ＨＴＭＬでは６段階の見出し行を使用することができます。それらは<h1>...<h6>要素で記述します。もっとも高いレベルが<h1>で、もっとも低いレベルが<h6>です。レベルの高い見出し行ほど大きい文字で表示されることになっています。 その他に記述する必要のある事項があれば、見出し行の下に、P(パラグラフ）要素で記述します。 見出し行も段落（パラグラフ）も、記入する内容は開始タグと終了タグの間に記述します。 ここでの見出し行（タイトル行）は中央に、後続の追加行は右寄せで表示するように「スタイルシート」定義で設定することにします。 「導入部」には、その文書の意図や概要を記述します。 最初にレベル２の見出し行を付け、その下にその内容を記述することにします。 <div class="main-intro"> <h2 id="s1">表題１</h2> <p class="p-main"> テキスト行 ... </p> </div> 「導入部」の記述形式は「本文部」と同じで、レベル２の見出し行で表題を記述し、その後にP（パラグラフ）要素にその中身を記述するようになっています。 画面上では問題ないのですが、音声による読み上げではHTML文書内のブロックの記述順に読み上げられるので、「導入部」、「目次部」、「本文部」の順にブロックを配置することにしました。 「目次部」には「目次」というレベル１の見出し行を付け、その下に目次項目を順に記述することにします。 <div class="right-navi"> <h1>目次</h1> <p class="p-navi"> <a href="#s1">目次項目１</a> <a href="#s2">目次項目２</a> ... </p> </div> ここでは、最初に「目次」という表題をレベル１の見出し行として記述しています。 その後に、P要素の内容として目次項目を順に記述しています。 それぞれの目次項目には、それに対応する文章へのリンクをふよします。リンク付けにはA（アンカー）要素を使用します。 A要素の開始タグと終了タグの間に（A要素の内容として）目次項目の名前（表題）を記述します。 開始タグの中に記述されている項目を、そのタグの「属性」と呼びます。A要素のHREF属性でリンク先を指定します。対応するリンク先の文章は次のように記述されているものとします。 <h2 id="s1">表題１</h2> <p> テキスト行 ... </p> リンク先の文章の見出し行を記述しているH2タグのID属性は、その見出し行の識別名を指定しています。その識別名がリンク先の標識となります。 この識別名を目次項目を記述しているAタグのHREF属性の指定値として記述することによって、対応するリンク先を指定することになります。 ここでは、リンク先が同じページ内なので識別名の前にシャープ記号(#)を付けて記述します。 参照： 「リンク付け」 「本文部」には、その文書の中身（本文）を記述します。本文はいくつかの文章単位が順に記述されたものとします。 文章単位は最初にレベル２の見出し行を付け、その下に文章単位の中身を記述することにします。 <div class="main-contents"> <h2 id="s2">表題２</h2> <p> テキスト行 ... </p> <h2 id="s3">表題３</h2> <p> テキスト行 ... </p> ... </div> 見出し行の<h2>タグのID属性には、その位置を特定するための識別名を２重引用符で囲んで記述します。この識別名は「目次部」で対応する目次項目を記述するときに使用します。 文章の中身はP要素の内容として記述します。空白文字や改行はそのまま画面表示に反映され、横幅におさまらないときは自動的に改行されるように「スタイルシート」定義で設定しています。 「フッター部」にはレベル１の見出し行に必要事項を記述し、必要があればその下にその内容を記述することにします。 <div class="footer"> <h1>必要事項</h1> <p>その他の情報</p> </div> 必要事項はレベル1の見出し行（H1要素）を使って記述します。 その他に記述する必要のある事項があれば、見出し行の下に、P(パラグラフ）要素を使って記述します。
【リンク付け】
文章内から、同じ文章内の他の箇所、またはネット上の他の文書へリンク付けしたいときはA（アンカー）要素を使用します。 リンク先の指定はHREF属性によって行います。 同じ文書内の他の箇所をリンク先として指定するときは、例えば下記のように記述します。 参照： <a href="#s6">「リンク付け」</a> ここで、「s6」はリンク先を指定する識別名で、他の要素（例えばH2やPなど）のID属性で定義されていなければなりません。 識別名で使える文字は英字、数字、ハイフン(-)、アンダーライン(_)、コロン(:)、ピリオド(.)で、先頭文字は英字にします。 ID属性で定義する識別名は、同じ文書内で重複しないようにする必要があります。 A要素のHREF属性で同じ文書内のリンク先を指定するときは、識別名の前にシャープ記号（#）を付けます。 ネット上の他の文書をリンク先とするときは、その文書のURLをHREF属性で指定します。 そして、リンク先の文書をどのように読み込むかをTARGET属性で指定します。TARGET属性で指定できる値には下記のものがあります。 _self: 現在の閲覧コンテキスト（通常はタブ）に読み込む（デフォルト） _blank: 新しい閲覧コンテキストに読み込む _parent: 現在の閲覧コンテキストの親コンテキストに読み込む（親がない場合は、_selfと同じ） _top: トップレベルの閲覧コンテキスト（最上位の親）に読み込む（親がない場合は_selfと同じ） 例えば下記のように記述します。 参考： <a href="https://developer.mozilla.org/ja/docs/Web/HTML" target="_blank">「HTML: HyperText Markup Language | MDN」</a> 新しいタブに読み込むと、ファイルメニューの「タブを閉じる」でそのタブを閉じると元の文書に戻ってきます。 また、「Control+Alt」キーで現在開いているタブ間を移動することができます。
【スタイルの設定】
文書を画面上でどのように表示させるかは「スタイルシート(CSS)」の規則に則って記述します。 例えば次のようなことを指定できます。 文字のサイズや色、背景色 行の幅と間隔 表示領域（ボックス）のサイズ、マージン幅、区切り線の形状、太さや色など 参考： 「CSS: カスケーディングスタイルシート | MDN」 ここではHEAD要素内のSTYLE要素でそれを行っています。 <style type="text/css"> 規則１ 規則２ ... </style> STYLE要素内には設定する規則を記入します。例えば次のように記述します。 BODY { color: black; background: white; } これは、BODY要素全体（従って文書全体）について「文字色は黒」、「背景色は白」にするように指示しています。 上の例で「BODY」の部分を「セレクタ」と呼び、その後の中カッコで囲んだ部分を「宣言ブロック」と呼びます。 そして「color: black」と「background: white」を「宣言」と呼びます。宣言ブロック内には０個以上の宣言をセミコロン(;)で区切って記入することになっています。 即ち、各規則はセレクタとして規則を適用する対象を示し、宣言ブロック内の宣言によって適用する規則を示しています。 どのような規則を、どのように宣言するかは「CSS」によって決められています。 セレクタ（規則の適用対象）によく指定されるのは要素名とCLASS属性の指定値です。 ある要素を適用対象とするときは、その要素名をセレクタに記述します。 CLASS属性を持つ要素の中で、特定の指定値を持つ要素だけを適用対象にするときは、その指定値の前にピリオド記号(.)を付けてセレクタに記述します。 ここでのスタイル定義の概略を以下に示します。 １．文書全体の文字色は黒、背景色は白にする BODY { color: black; background: white; } ２．レベル２の見出し行の改行幅を半分にする h2 { margin-bottom: 0.5em; } ３．P要素で書かれた文字のサイズを１６ポイントにする 行幅（高さ）を通常の１．４倍にする p { font-size: 16pt; line-height: 1.4; } ４．「add-underline」のCLASS属性を持つ要素領域に中くらいの太さの黒い実践を引く .add-underline { border-bottom: medium solid black; } ５．ヘッダー領域について、横幅はウインドー幅、上下左右のマージン幅は１文字分、 中くらいの太さの黒い実践の区切り線を引く、 レベル１の見出し行は中央に配置、P要素で書かれたテキストは右揃えにする .header { width: 100%; margin: 1em; border-bottom: medium solid black; } .h1-header { text-align: center } .p-header { text-align: right; font-size: 16pt; line-height: 1.4; } ６．目次領域について、横幅はウインドー幅の２０パーセント、 下と左に細い黒い実践の区切り線を引く、 P要素で書かれたテキストは空白文字と改行はそのまま、横幅に達したときは自動改行する .right-navi { width: 20%; margin: 1em; border-left: thin solid black; border-bottom: thin solid black; float: right; } .p-navi { white-space: pre-wrap; font-size: 16pt; line-height: 1.4; } ７．本文領域について、書き出し部分の横幅はウインドー幅の７０パーセント、目次領域の左に配置、 後続部分の横幅はウインドー幅と同じに戻す .main-intro { width: 70%; margin: 1em; float: left; } .main-contents { width: 100%; margin: 1em; clear: both; } .p-main { white-space: pre-wrap; font-size: 16pt; line-height: 1.4; } ８．フッター領域について、上に中くらいの太さの黒い実践の区切り線を引く .footer { width: 100%; margin: 1em; border-top: medium solid black; } .p-footer { white-space: pre-wrap; font-size: 16pt; line-height: 1.4; }
【テンプレート】
以上のことから作成したテンプレートは下記のようになりました。 これを「htmltemp1-1.html」というファイル名で保存し、これから利用するテンプレートファイルとしました。 「<!--」と「-->」で囲まれた部分はコメントです。 ＨＴＭＬ文書を作る際に変更しなければならない箇所に「(*」の印を入れてあります。 末尾にリンク付けで使用するA要素の雛型をコメントの形で付加してあります。 <!DOCTYPE html> <html lang="ja"> <!-- head element --> <head> <meta charset="utf-8"> <title>(*1)</title> <!-- style setting --> <style type="text/css"> BODY { color: black; background: white; } h2 { margin-bottom: 0.5em; } p { font-size: 16pt; line-height: 1.4; } .add-underline { border-bottom: medium solid black; } .header { width: 100%; margin: 1em; border-bottom: medium solid black; } .h1-header { text-align: center } .p-header { text-align: right; font-size: 16pt; line-height: 1.4; } .right-navi { width: 20%; margin: 1em; border-left: thin solid black; border-bottom: thin solid black; float: right; } .p-navi { white-space: pre-wrap; font-size: 16pt; line-height: 1.4; } .main-intro { width: 70%; margin: 1em; float: left; } .main-contents { width: 100%; margin: 1em; clear: both; } .p-main { white-space: pre-wrap; font-size: 16pt; line-height: 1.4; } .footer { width: 100%; margin: 1em; border-top: medium solid black; } .p-footer { white-space: pre-wrap; font-size: 16pt; line-height: 1.4; } </style> </head> <!-- body element --> <body> <!-- header block --> <div class="header"> <h1 class="h1-header">(*2)</h1> <p class="p-header">(*2)</p> </div> <!-- introduction block --> <div class="main-intro"> <h2 id="s1"><span class="add-underline">(*4)</span></h2> <p class="p-main"> </p> </div> <!-- navigator block --> <div class="right-navi"> <h1><span class="add-underline">目次</span></h1> <p class="p-navi"> <a href="#s1">(*3)</a> <a href="#s2">(*3)</a> <a href="#s3">(*3)</a> <a href="#s4">(*3)</a> <a href="#s5">(*3)</a> <a href="#s6">(*3)</a> </p> </div> <!-- main content block --> <div class="main-contents"> <h2 id="s2"><span class="add-underline">(*5)</span></h2> <p class="p-main"> </p> <h2 id="s3"><span class="add-underline">(*5)</span></h2> <p class="p-main"> </p> <h2 id="s4"><span class="add-underline">(*5)</span></h2> <p class="p-main"> </p> <h2 id="s5"><span class="add-underline">(*5)</span></h2> <p class="p-main"> </p> <h2 id="s6"><span class="add-underline">(*5)</span></h2> <p class="p-main"> </p> </div> <!-- footer block --> <div class="footer"> <h1>(*6)</h1> <p class="p-footer"> (*6) </p> </div> </body> </html> <!-- additional elements <a href="#(*a1)">(*a2)</a> <a href="(*a3)" target="_blank">(*a2)</a> -->
【具体的な記述方法】
ここでは、「メモ帳」を使ってＨＴＭＬ文書を作成する手順を説明します。 １．「メモ帳」を立ち上げる。 ２．テンプレートファイル(htmltemp1-1.html)を読み込む。 ３．必要な入力箇所には「(*1)」、「(*2)」、、、の印がつけてあるので、「(*」文字列を順に検索する。 ４．TITLE要素の内容に文書のタイトルを記入する。 <head> <meta charset="utf-8"> <title>(*1)</title> TITLE要素に文書のタイトルを記入する（「(*1)」と置き換える）。 文字コードをシフトJISにするときは、一つ上の行を下記のように変更する。 <meta charset="shift_jis"> ５．ヘッダー部に、文書の先頭に表示するこの文書の表題（タイトル）を記入する。 <div class="header"> <h1 class="h1-header">(*2)</h1> <p class="p-header">(*2)</p> </div> H1要素の「(*2)」をこの文書の表題（タイトル）で置き換える。 その他の事項（作成者名、作成日など）を記述する場合は、その下のP要素に記入する。 その必要がない場合は、P要素の行を削除する。 ６．本文の書き出し部分を記入する。 <div class="main-intro"> <h2 id="s1"><span class="add-underline">(*4)</span></h2> <p class="p-main"> </p> </div> 文章単位の表題（「序文」や「はじめに」など）をH2要素に記入する（「(*4)」と置き換える）。 表題に続く文章は、P要素の開始行と終了行の間に、テキスト行を順に記入する（挿入する）。 文章中にリンク付けする箇所があれば、テンプレートの末尾に付加してあるA要素の雛型を使ってその部分を手書きする。 参照： 「リンク付け」 ７．文書の後続部分を記入する。 目次部の記述は後回しにして、本文部の記述に進む。 <div class="main-contents"> <h2 id="s2"><span class="add-underline">(*5)</span></h2> <p> </p> 書き出し部分に続く文章単位の表題をH2要素に記入する（「(*5)」と置き換える）。 表題に続く文章は、P要素の開始行と終了行の間に、テキスト行を順に記入する（挿入する）。 文章中にリンク付けする箇所があれば、テンプレートの末尾に付加してあるA要素の雛型を使ってその部分を手書きする。 以下同様にして、後続の文章単位（表題とその文章）を順に記入する。 テンプレートにはH2要素とP要素のセットが６個用意されている。 それらが足りなければ、必要に応じて追加する。 そのとき、H2要素の識別名（ID属性値）は「s1」から順に付与されているので、追加するときは数字を順に増やすようにする。 H2要素とP要素のセットが余ったときは、それらを削除する。 ８．目次部に目次項目を記入する。 それまでの導入部と本文部の記述に基づいて目次部の記述を行う。 <div class="right-navi"> <h1>目次</h1> <p class="p-navi"> <a href="#s1">(*3)</a> <a href="#s2">(*3)</a> 本文の書き出し部分（導入部）の文章単位の表題を、最初のA要素に記入する（「(*3)」と置き換える）。 後続（本文部）の文章単位の表題を、２番目以降のA要素に記入する。 目次項目から本文の対応する見出し行へリンク付けるために、A要素のHREF属性値が正しく対応しているか確認する。 テンプレートではA要素の記述行を６個用意している。 それらが足りないときは、必要に応じて追加する。 そのとき、A要素の属性値は「#s1」から順に付与されているので、追加するときは数字を順に増やすようにする。 用意されているA要素の記述行が余ったときは、それらを削除する。 ９．フッター部を記入する。 <div class="footer"> <h1>(*6)</h1> <p class="p-footer"> (*6) </p> </div> H1要素に必要事項を記入する（「(*6)」と置き換える）。 その他に記述する必要のある事項がある場合は、その下のP要素に記入する（「(*6)」と置き換える）。 なければ、P要素の記述行を削除する。 １０．作成したＨＴＭＬ文書をファイルとして保存する。 ファイル名に付ける拡張子は「.html」もしくは「.htm」とする。 文字コードは「UTF-8」で保存する（シフトJISに変更したときは「ANSI」）。