文系の人にもわかるHTML5+CSS3入門

第3章 文章中心のページの作成

第1章と第2章で、ワープロの文書と比較してウェブページ(HTML文書)の特徴を見ました。第3章ではいくつか基本的なタグを学び、文字(テキスト)が中心のページが作成できるようにしましょう。

自作のエッセイや小説などを書籍にして発表するのは費用もかかりとても大変ですが、ウェブならばごくわずかなコストで、簡単に、しかも世界中に発表することができます。公開の方法などこの他にもう少し学ばなければなりませんが、この章の内容を理解すれば、自作の文章のページを作成でき、公開する準備がほぼ整います。

少し長い文書

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

図3-1 少し長い例

第2章の例と同じようにエディタを起動して、リスト3-1のHTML文書を入力し(コピー・ペーストしてもOK)、webpageフォルダの下に、たとえばexample2.htmlという名前でファイルに保存してください。ダブルクリックしてブラウザに読み込むと、図3-1のように表示されるはずです。

リスト3-1 example2.html 少し長いHTML文書の例 (別ウィンドウに表示

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

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

図3-2 macOS(Macintosh)の別のブラウザによる表示

では、リスト3-1にあるタグなどで、これまでに説明しなかったものを見ていきましょう。

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

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

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

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

<meta>タグと属性

第1章で説明したように、4行目にある<meta>タグには終了タグはありません。このタグ単独で(対象の文字列なしで)役目を果たすものです。

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

<meta charset="utf-8" />

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

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

メモ

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

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

タグや属性は小文字で書くことをお勧めします。つまり、(<H1>ではなく)<h1>と書きます。大文字で書いても大丈夫ですが、これまでのHTMLの規格の変遷などを考慮すると小文字にしておいたほうが安心です。以降、このコラムでもタグは小文字で書きますし、属性も原則として小文字で書きます。

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

より大きなページの作成

エッセイが3本ほどたまったので、まとめて図3-3と図3-4のような「エッセイのページ」を作ることにしましょう。

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

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

リスト3-2 essay1.html 3本のエッセイのページ (別ウィンドウに表示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>エッセイ</title>
</head>

<body>  <!-- 本体部分の開始 -->

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

<h2>目次</h2> <!-- 第2レベルの見出し -->
<ul>  <!-- 順序なしリスト -->
  <li>蔘鶏湯(サムゲタン,2014年9月)</li>  <!-- リストの項目 -->
  <li>夜の十分間 (2014年7月) </li>
  <li>温泉(2014年6月)</li>
</ul>  <!-- 順序なしリストの終了タグ -->

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

<h2>蔘鶏湯(サムゲタン)</h2>
<p>
去年半年ほど韓国で暮らしました。韓国の食べ物はほとんど辛くて私の口には合わないものが多くて困ったのですが,なかにはとても好きになったものもあります。中でも,蔘鶏湯(サムゲタン)とスジェビはうちの家族全員が大好きに。スジェビの方は,「韓国式すいとん」などと紹介されているように,家でも比較的簡単に作れるようです。うちでも,「今日はスジェビにしよう」と月に1ペンぐらいは言います。
</p>
<p>
問題は蔘鶏湯の方です。読んで字のごとく,鶏肉がはいります。健康な若鶏を丸ごと入れるのだそうです。そして,朝鮮人参,干しナツメなども。これらの材料はそう簡単には手に入りません。それに,おいしい蔘鶏湯を作るには結構煮込まなくてはいけません。手間がかかります。
</p>
<p>
というわけで,できるだけ近所に<em>おいしい</em>蔘鶏湯のお店はないかと探してみました。2駅以内のところに3軒,蔘鶏湯を出してくれるお店を見つけて行ってみました。しかし,どこの蔘鶏湯も圧力釜で調理してありました。圧力釜で調理すると,骨がポロポロになります。蔘鶏湯の何がおいしいと言って,硬い骨の周りについた,たっぷり煮込んだ柔らかい鶏肉をかじるのがおいしいのです。だから,圧力釜で作ったものは「蔘鶏湯」とは言えないと私は思うのです。
</p>
<p>
韓国では,思い出せるだけでも5軒の蔘鶏湯屋さんに入りましたが,圧力釜で作った蔘鶏湯なんて,ひとつもありませんでした。しかも,値段は日本の1/4くらい。韓国の私の職場のそばの蔘鶏湯のお店の蔘鶏湯の値段の安いのなんの。たったの5000ウォン(約500円)なのです。日本では,安いところで2000円もするー。おいしければ,許せますが。骨がポロポロ。ひどい。
</p>
<p>
おいしい蔘鶏湯が食べたい。できれば,すぐに行けるようなところで。
</p>

<hr />   <!-- 横線。次のエッセイとの区切り -->
<h2>夜の十分間</h2>
<p>
玄関の戸を開け外に出る。真っ暗闇の中,トイレを目指す。あと少しだ。手探りで裸電球のスイッチをパチッといれ,あたりが明るくなってホッと一息。シャーといい気持ち。
</p>
<p>
おかしい。何やら暖かいものが股間を走っている。しまった。またやってしまった。
</p>
<p>
私が小さい頃住んでいた家は,明治時代に建てられた古いもので,トイレが家の外にあった。暗闇に白い雪が舞うような寒い夜でも,ぬくぬくとした布団からやっとの思いで抜け出し,用を足しに行かなければならなかった。時間にすれば十分もかからないのだが,なかなか布団を出る決心がつかず最後の最後まで我慢して,やっとのことで起き出していくのが常だった。
</p>
<p>
意識があって起き出せればよいのだが,時として夢の中で布団から抜け出して,トイレに駆けつけるときがあった。ホッとしたのもつかの間,下半身に広がる冷たい感触で我に返り,ごそごそ起き出して始末をしなければならなかった。
</p>
<p>
小学生の時,使いを頼まれ,叔母の家に一人で泊まったことがあった。いつものように夜中に用を足したくなり起き出したのだが,寝ぼけていた私にはトイレの場所がわからない。家の中を,あっちへ行きこっちへ行きしているうちに,とうとう我慢ができなくなり,畳の上を水浸しにしてしまった。
</p>
<p>
それでも眠かった私は,そのまま再び布団にもぐりこみ,知らん顔をして眠り込んでしまった。半分眠りながら,叔父が起き出してきてあたりを見回していたような記憶が残っている。翌朝,何もなかったように朝飯をいただき,家に戻ったのだが,あの夜のことは実は今でも鮮明に覚えている。
</p>
<p>
今の私,夢の中でトイレに行くことはあっても,そこで用まで足すことはなくなった。だが,ふと気がつくと足がトイレに向いていることが多い。あの夜の十分間が夢だったら,もっと平和な日々が送れているのかもしれないのだが。
</p>

<hr />   <!-- 横線。次のエッセイとの区切り -->

<h2>温泉</h2>
<p>
朝から晩までコンピュータの前に坐っているため,肩や首,腰などが慢性的にこったり痛かったり。そんな私にうれしい味方が現れた。近くに温泉がオープンしたのである。近くの駅から無料送迎バスがあり,家から30分少しで温泉に浸かることができるようになった。
</p>
<p>
最初に行ったのは7月末の日曜日。友人が「いい,絶対いい」と勧めていたのを思い出し,「今日,温泉に行こうか」と家族みんなで繰り出した。10:00発の送迎バスに乗り,20分弱で到着。「烏の行水コース」という1時間以内のコースを選び温泉へ。前に行ったことがある東京の温泉と同様,ここのお湯もコーラのような黒い色をしている。でも,とても気持ちいいのだ。
</p>
<p>
完全にはまってしまって,1週間に1度は行っている。最近多いのが夜のコース。仕事と食事を終えて,午後7時あるいは8時のバスに乗り,烏の行水コースで1時間,少し送迎バスで待つけれど2時間半ほどで家に戻って,あとはビールでも飲んで「お休みなさい」というコースだ。
</p>
<p>
銭湯にに比べるとちょっと高めだけど,温泉宿に1回泊まりで行くお金があれば,こちらには10回は行ける。そして,この温泉は体にとてもいいような気がする。お近くの方,おすすめです。
</p>

</body>
</html>

style属性

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

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

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

10行目のh1タグにはstyle(スタイル)属性が指定されています。スタイルについては、第5章で説明しますが、style属性を使うと、CSSという仕組みを使って、タグで囲まれた部分の「見栄え」を指定することができます。

この例の場合は、<h1>...</h1> で囲まれた文字列、つまり「エッセイ」のスタイルを指定することになります。具体的にはtext-align: centerと指定されているので、この部分がセンタリングされることになります。

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

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

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

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

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

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

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

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

リストの入れ子

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

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

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

 <!DOCTYPE html>
 <html>
 <!-- essay.html -->
 <html>
 <head>
 <title>リストの入れ子</title>
 <meta charset="utf-8" />
 </head>
 <body>
 <h2>リストの入れ子</h2>
 <ul>
   <li>蔘鶏湯(サムゲタン、2014年8月)</li>
   <li>夜の十分間 (2014年7月) </li>
   <li>私の好きな歌手 
     <ol>
       <li>持田奈美恵(2014年3月)</li>
       <li>高井健(2014年6月)</li>
       <li>松ひく子(2014年5月)</li>
     </ol>
   </li>
 </ul>
 </body>
 </html>

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

内容の区切りを示す ―― <hr />

リスト3-2を続けてみていきましょう。

<ul>...</ul>を使った目次の下には<hr />を使って横線(Horizontal Rule)が引かれています(下のほうにも2箇所、同じように横線を入れています)。

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

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

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

まとめ

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

HTML文書の「型紙」

<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
<meta charset="utf-8" />
</head>
<body>
  <<本文>>
  <p>
   段落1
  </p>
  <p>
   段落2
  </p>
   ...
</body>
</html>

HTMLのタグなど

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

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

CSS

style属性に指定できる(詳しくは第5章参照)。

メモ

[A | B | C]で、A、B、Cのいずれかが選ばれることを表します(「|」は or の意味になります)。上の例の場合、「text-align: left;」「text-align: center;」「text-align: right;」「text-align: justify;」のいずれかを指定できる意味になります。

文系の人にもわかるHTML5+CSS3入門
第3章 次の章へ