DHC-オンライン講座
文系の人にもわかる HTML入門

Lesson 2 文章中心のページの作成

Lesson 1で、簡単な例を通してワープロソフトと比較してウェブページ(HTML文書)の特徴を見ました。 Lesson 2では、このほかの基本的なタグを学び、文字(テキスト)が中心のページが作成できるようにしましょう。 自作のエッセイや小説などを書籍にして発表するのは費用もかかりとても大変ですが、ウェブならば何十分の1か、何百分の1かの費用で簡単に、しかも世界中に発表することができます。 公開の方法などこの他にもう少し学ばなければなりませんが、このLessonの内容を理解すれば、自作の文章のページを作成でき、公開する準備がほぼ調います。

少し長い文書

まず、リスト1-1よりもう少し長いHTMLの文書の例を見てみましょう。 図2-1のようなページを作ります。

図2-1 WindowsのIEによる表示

Lesson 1の例と同じように、「メモ帳」などのエディタを起動して、リスト2-1のHTML文書を入力し、webpageフォルダの下に、たとえばexample2.htmlという名前でファイルに保存してください。 ブラウザに読み込むと、図2-1のように表示されるはずです。

メモ

左側に付いている番号は何行目かを表す数字ですので、この部分は入力しないでください。

リスト2-1 example2.html 少し長いHTML文書の例

  1  <!DOCTYPE html>
  2  <html lang="ja">
  3  <head>
  4  <title>温泉</title>
  5  <meta charset="utf-8">
  6  </head>
  7  <!--この下から本文 -->
  8  <body>
  9  <h1>温泉</h1>
 10  
 11  <p>朝から晩までコンピュータの前に坐っているため、肩や首、腰などが慢性的にこったり痛かったり。 
 12  そんな私にうれしい味方が現れた。 近くに温泉がオープンしたのである。 
 13  近くの駅から無料送迎バスがあり、家から30分少しで温泉に浸かることができるようになった。 </p>
 14  
 15  <p>最初に行ったのは7月末の日曜日。 
 16  友人が「いい、絶対いい」と勧めていたのを思い出し、
 17  「今日、温泉に行こうか」と家族みんなで繰り出した。 
 18  10:00発の送迎バスに乗り、20分弱で到着。 
 19  「カラスの行水コース」という1時間以内のコースを選び温泉へ。 
 20  東京近郊の温泉はどこもだそうだが、お湯の色はコーラのような色だ。 
 21  でも、とても気持ちがいい。 </p>
 22  
 23  <p>完全にはまってしまって、週に1度のペースで行っている。 
 24  最近多いのが夜のコース。 
 25  仕事と食事を終えて、午後7時あるいは8時のバスに乗り、
 26  カラスの行水コースで1時間、家を出てから2時間半ほどで戻り、
 27  お酒を飲んで「お休みなさい」というコースだ。 </p>
 28  
 29  <p>銭湯にに比べるとちょっと高めだけど、
 30  温泉宿に1回泊まりで行くお金があれば、こちらには10回は行ける。 
 31  そして、この温泉は体にとてもいいような気がする。 
 32  お近くの方、おすすめです。 </p>
 33  </body>
 34  </html>

図2-1は、Windows用のIE(Internet Explorer)で表示したところですが、別種のコンピューターの別のブラウザ(今度はMac OS XのFirefox(ファイヤーフォックス)を使ってみました)でもほぼ同じように表示されます(図2-2)。 また、「ウェブサーバ」に転送(アップロード)する必要はありますが、携帯電話でも見ることができます。 すでに説明したように、ウェブページの内容は、「特定のコンピューターあるいは特定のアプリケーション(プログラム)でしか見られない」ということはないのです。

図2-2 Max OS XのFirefoxによる表示

では、リスト2-1にあるタグなどで、これまでに説明しなかったものを見ていきましょう。
(→このリンクをクリックするとリスト2-1を別のウィンドウ、あるいはタブに表示

DOCTYPE宣言

まず、先頭にある<!DOCTYPE ...>はじつはHTMLのタグではなく、DOCTYPE宣言と呼ばれるもので、この文書がどのような規格に基づいている文書であるかを示しています。 この行は書かなくてもブラウザは問題なくこの文書を表示してくれますが、この宣言がある方が「正式」なので、将来を考えると書いておいた方がよいでしょう。 詳しい内容は省略しますので、当面このまま書いておいてください。

コメント ―― <!-- ... -->

7行目にある「<!--」と「-->」で囲まれた部分は「コメント(comment)」で、この中に書かれた文字列はブラウザには表示されません(「<!--」と「-->」はタグではありません)。 コメント部分には何を書いてもよいので、たとえば、次のようなメモを書いたりもできます。 コメントは複数の行にまたがることもできます。 とにかく、「<!--」がきたら、「-->」がくるまで途中の文字列はすべてブラウザに無視されてしまいます。

<!-- あとで、ここに追加する。 候補は次のとおり。 
<h2>韓国のバス</h2>
<h2>韓国の携帯電話</h2>
-->

上の例では、これから書こうとする内容のタイトルだけを書いておいて、後からその中身を書こうとしています。 逆に、それまで表示されていた部分を消す目的でコメントを使うこともできます。 削除したい部分を「<!--」と「-->」で挟めばよいのです。 削除してもよいかもしれないけれど、あとでどこかで使うかもしれないといった内容は、コメントにしておけば簡単に復活させることができます。

<meta>タグと属性

5行目にある<meta>タグには終了タグはありません。 このタグ単独で(対象の文字列なしで)役目を果たすものです。 対象の文字列の代わりに「属性(attribute)」が指定されています。 <meta>タグには「属性」があり、属性に「値(属性値)」を指定することによって、この文書の性質をブラウザに知らせて、ブラウザによる処理を助ける役目をします。 下のように書くことで、このファイルの内容は「utf-8」コードで書かれていることを指定しています。

<meta charset="utf-8">

この指定がないと、ブラウザの設定によっては日本語が正しく表示されないで、わけのわからないおかしな文字がたくさん表示される、いわゆる「文字化け」を起こすことがあります。 最近は文字コードとしてutf-8が使われることが多いので、utf-8を使うようにしましょう。 なお、文字コードとしてutf-8以外のものを指定した場合は、それをここに書くことになります。

metaタグの属性値は必ず一組の引用符(「"..."」または「'...'」)で囲みます。 囲まなくても有効になる場合はありますが、正式には必ず囲むことになっていますので、そうしておいた方が、将来苦労する可能性が減ります。

メモ

属性をたくさん指定すると、タグ全体が長くなってしまうことがあります。 その場合は、属性を区切るスペースで改行して、複数行を使って書いてもかまいません。

タグの大文字と小文字の区別

タグや属性に大文字と小文字の区別はありません。 つまり、<h1>と書いても<H1>と書いても同じことになります。 ただし、理由はここでは省略しますが、小文字で書いておくほうがよいでしょう。 以降、この講座でも、タグや属性は原則として小文字で書きます。

以上でリスト2-1に出てくる新しいタグなどの説明はおしまいです。

より大きなページの作成

エッセイが3本ほどたまったので、まとめて図2-3と図2-4のような「エッセイのページ」を作ることにしましょう。 まずは先頭に簡単な目次をつけて、その下に3本のエッセイを並べることにします。 ページの先頭に「エッセイ」という一番大きな見出しをつけて、その下に目次を書き、3本それぞれのエッセイに少し小さめの見出しをつけましょう。 目次の下と各エッセイの間には横線を引いて区切りをつけることにします。

このページのHTMLコード(ソース)はリスト2-2のようになります。

図2-3 エッセイのページ(最初の部分)
図2-4 エッセイのページ(最後の部分)

リスト2-2 essay1.html 3本のエッセイのページ

  1  <!DOCTYPE html>
  2  <html lang="ja">
  3  <head>
  4  <title>エッセイ</title>
  5  <meta charset="utf-8">
  6  </head>
  7
  8  <body>  <!-- 本体部分の開始 -->
  9
 10  <h1 align="center">エッセイ</h1>   <!-- 第1レベルの見出し。 中央に配置 -->
 11
 12  <h2>目次</h2> <!-- 第2レベルの見出し -->
 13  <ul>  <!-- 順序なしリスト -->
 14  <li>蔘鶏湯(サムゲタン、2004年9月)</li>  <!-- リストの項目 -->
 15  <li>夜の十分間 (2004年7月) </li>
 16  <li>温泉(2004年6月)</li>
 17  </ul>  <!-- 順序なしリストの終了タグ -->
 18
 19  <hr />   <!-- 横線。 目次と本文の区切り -->
 20
 21  <h2>蔘鶏湯(サムゲタン)</h2>
 22  <p>
 23  去年半年ほど韓国で暮らしました。 韓国の食べ物はほとんど辛くて私の口には合わないものが多くて困ったのですが、なかには
 24  とても好きになったものもあります。 中でも、蔘鶏湯(サムゲタン)とスジェビはうちの家族全員が大好きに。 スジェビの方
 25  は、「韓国式すいとん」などと紹介されているように、家でも比較的簡単に作れるようです。 うちでも、「今日はスジェビにしよ
 26  う」と月に1ペンぐらいは言います。 
 27  </p>
 28  <p>
 29  問題は蔘鶏湯の方です。 読んで字のごとく、鶏肉がはいります。 健康な若鶏を丸ごと入れるのだそうです。 そして、朝鮮人参、干
 30  しナツメなども。 これらの材料はそう簡単には手に入りません。 それに、おいしい蔘鶏湯を作るには結構煮込まなくてはいけませ
 31  ん。 手間がかかります。 
 32  </p>
 33  <p>
 34  というわけで、できるだけ近所に<em>おいしい</em>蔘鶏湯のお店はないかと探してみました。 2駅以内のところに3軒、蔘鶏
 35  湯を出してくれるお店を見つけて行ってみました。 しかし、どこの蔘鶏湯も圧力釜で調理してありました。 圧力釜で調理すると、
 36  骨がポロポロになります。 蔘鶏湯の何がおいしいと言って、硬い骨の周りについた、たっぷり煮込んだ柔らかい鶏肉をかじるのが
 37  おいしいのです。 だから、圧力釜で作ったものは「蔘鶏湯」とは言えないと私は思うのです。 
 38  </p>
 39  <p>
 40  韓国では、思い出せるだけでも5軒の蔘鶏湯屋さんに入りましたが、圧力釜で作った蔘鶏湯なんて、ひとつもありませんでした。 
 41  しかも、値段は日本の1/4くらい。 韓国の私の職場のそばの蔘鶏湯のお店の蔘鶏湯の値段の安いのなんの。 たったの5000ウォン
 42  (約500円)なのです。 日本では、安いところで2000円もするー。 おいしければ、許せますが。 骨がポロポロ。 ひどい。 
 43  </p>
 44  <p>
 45  おいしい蔘鶏湯が食べたい。 できれば、すぐに行けるようなところで。 
 46  </p>
 47 
 48  <hr />   <!-- 横線。 次のエッセイとの区切り -->
 49  <h2>夜の十分間</h2>
 50  <p>
 51  玄関の戸を開け外に出る。 真っ暗闇の中、トイレを目指す。 あと少しだ。 手探りで裸電球のスイッチをパチッといれ、あたりが
 52  明るくなってホッと一息。 シャーといい気持ち。 
 53  </p>
 54  <p>
 55  おかしい。 何やら暖かいものが股間を走っている。 しまった。 またやってしまった。 
 56  </p>
 57  <p>
 58  私が小さい頃住んでいた家は、明治時代に建てられた古いもので、トイレが家の外にあった。 暗闇に白い雪が舞うような寒い夜
 59  でも、ぬくぬくとした布団からやっとの思いで抜け出し、用を足しに行かなければならなかった。 時間にすれば十分もかからない
 60  のだが、なかなか布団を出る決心がつかず最後の最後まで我慢して、やっとのことで起き出していくのが常だった。 
 61  </p>
 62  <p>
 63  意識があって起き出せればよいのだが、時として夢の中で布団から抜け出して、トイレに駆けつけるときがあった。 ホッとした
 64  のもつかの間、下半身に広がる冷たい感触で我に返り、ごそごそ起き出して始末をしなければならなかった。 
 65  </p>
 66  <p>
 67  小学生の時、使いを頼まれ、叔母の家に一人で泊まったことがあった。 いつものように夜中に用を足したくなり起き出したのだ
 68  が、寝ぼけていた私にはトイレの場所がわからない。 家の中を、あっちへ行きこっちへ行きしているうちに、とうとう我慢がで
 69  きなくなり、畳の上を水浸しにしてしまった。 
 70  </p>
 71  <p>
 72  それでも眠かった私は、そのまま再び布団にもぐりこみ、知らん顔をして眠り込んでしまった。 半分眠りながら、叔父が起き出
 73  してきてあたりを見回していたような記憶が残っている。 翌朝、何もなかったように朝飯をいただき、家に戻ったのだが、あの
 74  夜のことは実は今でも鮮明に覚えている。 
 75  </p>
 76  <p>
 77  今の私、夢の中でトイレに行くことはあっても、そこで用まで足すことはなくなった。 だが、ふと気がつくと足がトイレに向い
 78  ていることが多い。 あの夜の十分間が夢だったら、もっと平和な日々が送れているのかもしれないのだが。 
 79  </p>
 80 
 81  <hr />   <!-- 横線。 次のエッセイとの区切り -->
 82 
 83  <h2>温泉</h2>
 84  <p>
 85  朝から晩までコンピュータの前に坐っているため、肩や首、腰などが慢性的にこったり痛かったり。 そんな私にうれしい味方が
 86  現れた。 近くに温泉がオープンしたのである。 近くの駅から無料送迎バスがあり、家から30分少しで温泉に浸かることができる
 87  ようになった。 
 88  </p>
 89  <p>
 90  最初に行ったのは7月末の日曜日。 友人が「いい、絶対いい」と勧めていたのを思い出し、「今日、温泉に行こうか」と家族み
 91  んなで繰り出した。 10:00発の送迎バスに乗り、20分弱で到着。 「烏の行水コース」という1時間以内のコースを選び温泉へ。 前
 92  に行ったことがある東京の温泉と同様、ここのお湯もコーラのような黒い色をしている。 でも、とても気持ちいいのだ。 
 93  </p>
 94  <p>
 95  完全にはまってしまって、1週間に1度は行っている。 最近多いのが夜のコース。 仕事と食事を終えて、午後7時あるいは8時
 96  のバスに乗り、烏の行水コースで1時間、少し送迎バスで待つけれど2時間半ほどで家に戻って、あとはビールでも飲んで「お休
 97  みなさい」というコースだ。 
 98  </p>
 99  <p>
100  銭湯にに比べるとちょっと高めだけど、温泉宿に1回泊まりで行くお金があれば、こちらには10回は行ける。 そして、この温泉
101  は体にとてもいいような気がする。 お近くの方、おすすめです。 
102  </p>
103
104  </body>
105  </html>

リスト2-2の中で新しく出てきたタグや属性などを上から順番に見ていきましょう。 新しい要素や主要な要素には<!-- ... --> で囲まれた「コメント」で説明を付けておきました。

<head>...</head>に囲まれたヘッダ部分には特に目新しいものはありません。

7行目には空行(何も書いてない行)があり、ヘッダ部分と本体部分を視覚的に分けています。 空行があっても、ブラウザによる表示は影響されませんので、HTMLのコードを見やすくするために、上手に空行を挿入してください。

位置指定 ―― align="..."

10行目の<h1>タグはすでに説明したように、一番大きな見出しを表すものですが、今度の<h1>にはalign属性がついています。 alignは「揃える」という意味で、右揃え、左揃え、中央揃え(センタリング)を指定できます。 それぞれ、alignの値として"right", "left", "center"を書きます。 align属性を省略すると左揃えされます。

	<h1 align=center>エッセイ</h1>   <!-- 第1レベルの見出し。 中央に配置 -->

align属性は、<h1>から<h6>までや<p>などのほか、これから登場する<hr>など多くのタグでも指定可能です。

12行目には<h1>よりも1レベル小さな見出しである<h2>...</h2>が使われています。 <h1>...</h1>は中央に配置しましたが、こちらはレベルがひとつ下がるので、 align属性を指定しないで、左揃えで配置しました。

	<h2>目次</h2> <!-- 第2レベルの見出し -->

リスト ―― <ul>...</ul>、<ol>...</ol>、<li>...</li>

次は目次の部分を見ましょう。

13 <ul>
14   <li>蔘鶏湯</a>(サムゲタン、2004年9月)</li>
15   <li>夜の十分間</a>(2004年7月)</li>
16   <li>温泉</a>(2004年6月)</li>
17 </ul>

この部分は、リスト(列挙)を表します。 ulはunordered list(順序なしリスト、順番がとくに意味を持たないリスト)の略です。 上の図2-3の先頭部分のように、番号がつかずに、多くのブラウザでは黒丸が項目の頭について表示されます。

次の例のように、<ul>の代わりに<ol>(Ordered List、順序付きリスト)を使うと、図2-5のように番号がつきます。 リスト2-2の例では目次で用いたので番号を付ける必要はない(意味がない)ので<ul>を使いましたが、たとえば好きな順に並べるとすれば番号を振ってもよいでしょう。

<ol>
  <li>蔘鶏湯(サムゲタン、2004年9月)</li>
  <li>夜の十分間(2004年7月) </li>
  <li>温泉(2004年6月)</li>
</ol>

上のリストをブラウザで表示すると次のようになります。

  1. 蔘鶏湯(サムゲタン、2004年9月)
  2. 夜の十分間(2004年7月)
  3. 温泉(2004年6月)

リストの入れ子

リストの1項目をさらにリストにしたいケースがあります。 たとえば、図2-6のように、順序なしリスト(<ul>...</ul>)の中に順序付きリスト(<ol>...</ol>)を書きたくなる場合があります。 このような場合、次のリスト2-3のように、リストの中にリストを入れることができます。 このように自分の中に自分を入れることを一般に「入れ子(nesting)」と呼びます。

図2-5 番号付きのリスト。 <ol>を使う
図2-6 リストの入れ子

リスト2-3 nesting.html リストの入れ子

  1  <!DOCTYPE html>
  2  <html lang="ja">
  3  <!-- essay.html -->
  4  <html>
  5  <head>
  6  <title>リストの入れ子</title>
  7  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  8  </head>
  9  <body>
 10  <h2>リストの入れ子</h2>
 11  <ul>
 12    <li>蔘鶏湯(サムゲタン、2004年9月)</li>
 13    <li>夜の十分間 (2004年7月) </li>
 14    <li>私の好きな歌手 
 15      <ol>
 16        <li>持田奈美恵(2004年3月)</li>
 17        <li>高井健(2004年6月)</li>
 18        <li>松ひく子(2004年5月)</li>
 19      </ol>
 20    </li>
 21  </ul>
 22  </body>
 23  </html>

上の例では、列挙される項目を空白文字を使って字下げ(indent)して、構造をわかりやすくしています。 <ul>...<ol>...</ol>...</ul>と、<ul>...</ul>の中に<ol>... </ol>が入っている形になっていますので、字下げしておくと全体の構造がよくわかります。

横線 ―― <hr>

リスト2-2図2-3図2-4の例)を続けてみていきましょう。 <ul>...</ul>を使った目次の下(19行目)には<hr>タグを使って横線(Horizontal Rule)が引かれています(48行目と81行目にも同じように横線を入れています)。

	 <hr />   <!-- 横線。 目次と本文の区切り -->

横線は、視覚的に区切りを入れるのに便利です。 width="50%"やwidth="100"のように幅を指定したり1、 size="4"のように太さの指定2もできます。 たとえば、リスト2-4のような例を使って自分で試してみてください(図2-7)。

注釈
  1. widthに数値だけを指定すると、ピクセル単位(画面上の点の数)で長さを指定できます。
  2. sizeに数値だけを指定しても、ピクセル単位の指定になります。

リスト2-4 hr.html いろいろな横線

  1  <!DOCTYPE html>
  2  <html lang="ja">
  3  <!-- hr.html -->
  4  <html>
  5  <head>
  6  <title>いろいろな横線</title>
  7  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  8  </head>
  9  <body>
 10  <h2>いろいろな横線</h2>
 11  <hr />
 12  <hr width="50%" />
 13  <hr width="30%" />
 14  <hr width="50" />
 15  <hr width="30" />
 16  <hr width="30%" align="left" />
 17  <hr width="30%" align="right" /> 
 18  <hr size="4" />
 19  <hr size="8" />
 20  <hr size="8" align="left" width="30%" />
 21  </body>
 22  </html>

図2-7 いろいろな横線

さて、リスト2-2を最後まで見てしまいましょう。 19行目の横線の下にはエッセイが3本並んでいます。 ここには、とくに新しいタグはありません。 <hr>でエッセイの間を区切り、<h2>...</h2>でタイトルを書き、<p>...</p>で段落を区切っています。

このように、これまでの2つのLessonで登場したタグだけを使っても、文章中心のページならば十分なものができます。 皆さんも、自作のエッセイや小説、自分の好きな作品の翻訳などのページを作ってみてください。

まとめ

テキスト中心のページを構成するのに必要な主なタグを見てきました。 ここまで出てきたタグを使って自分の文章をいくつか書いてみてください。

HTML文書の「型紙」

<!DOCTYPE html>
<html "ja">
<head>
<title>タイトル</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</head>
<body>
  <<本文>>
</body>
</html>

HTMLのタグなど

以下は<body>...</body>の中に書かれるもの

いろいろなタグで使える属性

※「a|b|c」のように書いて、「aあるいはbあるいはcのいずれか」であることを表します(「|」はorの意味です)。 この例の場合、 align="left"、align="center"、align="right"のいずれかの形式が使えることを意味します。 コンピューターの世界で広く用いられている表記法です。

DHC-オンライン講座
文系の人にもわかる HTML入門
Lesson 2