&web-pages;制作入門

&this-document;では、初めて &web-pages;を作ってみようという人を対象として、 &web-pages;の記述に使用されている &html; と &css; の基本を紹介します。

&this-document;は読者が &web-pages;とはどのようなものか知っていること (Web の利用経験があること) と、基本的なファイル操作やテキスト・ファイルの編集の方法などが分かっていることを前提にしています。

この辺の文章をもうちょっと何とかする。

よい題名があれば、それを採用したい。
2段組は、もう少しどうにかならないものか。
文書型宣言、名前空間宣言、言語指定は HTML5 / XHTML5 の規定に従って書き直すべき。 HTML5 vs XHTML5 の説明はどこに入れるのが適切か? (XHTML5 はいっそなくてもよい??)
完成版では、章ごとに別の HTML 文書にした方がよい。

この文書は、2005年の前半に書き始めた HTML と CSS の入門者のための手引きです。

計算機の基本的な操作と概念は習得していることと、利用者としてはある程度 Web に関する知識を有することを読者に求めますが、 Web 技術に関する知識はなくとも読めることを目指しています。
文書には構造と表現があり、著者はそれを必要に応じて記述 (マーク付けおよびスタイル付け) することで HTML + CSS が完成するとの立場を採っています。不思議マーク付け的解説のような表現一辺倒とも、いわゆるストリクター的解説のような構造・意味傾倒とも異なるものを目指しています。その具体的な手段として、 HTML と CSS を交互に解説する形を試みました。
文書の構造こそが本質であって、タグはその serialization に過ぎないことが自然に理解できるように努めています。
この文書は入門編であり、 HTML や CSS のすべてを網羅するどころか、ほんの一部分だけを厳選しています。今あるだけでもまだ多いかもしれません。続編として、 JavaScript, DOM, HTTP, URI, SVG, XBL2 まで含めた Web 技術を (個別ではなく) 体系的に習得できる文書群を整備することが望ましいと考えています。
用語やプロトコル要素は、定義的部分にリンクし、読者がいつでも参照できるようにしています。
各章には演習問題を用意し、すべてに解答例を載せています。

著者はいろいろ忙しいので、当分の間続きの執筆の時間が取れません。勝手に続きを書いてくださる人がいれば、是非どうぞ。 (suika.fam.cx の CVS 等を使いたければ w@suika.fam.cx までご連絡下さい。)

&this-document;の流れ

まずで簡単な文章の例を取り上げながら &html; の考え方を学びます。 &html; の基本はこの章だけで理解できてしまいます。残りの章は順番に読み進めていただいても構いませんし、必要な章だけを選んで読んでいただいても構いません。

、、では普段よく使われる表現が &html; でどう表されるのかを学びます。では文章の見た目を指定する方法を学びます。

、、、、、、は内容を分かりやすく、効果的に、そして魅力的に伝えるための様々な技法を学びます。

では、&this-document;の内容に満足され、次のステップへ進まれたい方のために、秀逸で参考になる Web サイトを紹介しています。では、本文を理解する上で参考になると思われることを説明しています。各章の途中で案内があった部分に目を通してみてください。

各章の最後には、理解をより深めるための演習問題を用意しています。すべての問題にに解答例を用意しています。

最後にを用意しています。また、本文中でも以前に出てきた単語は最初に出た場所にリンクしています。(マウス・ポインタを乗せると、ヘルプの形になります。) 用語の意味が分からなくなった時はもう 1度戻って読み直してみてください。

目次詳細目次図表一覧コラム一覧まとめ拾い読み著作権に関しての注釈

文章のマーク付け 段落 見出し 題名

Web 頁ページは、普通 HTML (Hypertext Markup Language : ハイパーテキスト・マーク付け言語) とよばれるマーク付け言語で記述します。

ハイパーテキストという名前からも分かるように、 &html; では文章が基本となります。この章では、 &html; で文章をどのように記述するのかをみていきます。

文章の構造の分析

わたしたちは日頃、様々な文章を読んだり書いたりします。普段あまり意識することはないかもしれませんが、文章は単なる文字や図形の羅列ではなく、何らかの構造により整理されています。その構造を通して著者が伝えたいことを表現したり、読者がそれを理解したりするのです。もちろん &html; を使って記述するハイパーテキストも、その例外ではありません。そこで、簡単な例文を通して文章が持つ構造を理解することからはじめましょう。

ハイパーテキストの一体何がハイパーなのかは、で明らかになります。それまではハイパーでない普通な話が続きますが、ご容赦ください。

第六夜
運慶が護国寺の山門で仁王を刻んでいると云う評判だから、散歩ながら行って見ると、自分より先にもう大勢集まって、しきりに下馬評をやっていた。

山門の前五六間の所には、大きな赤松があって、その幹が斜めに山門の甍を隠して、遠い青空まで伸びている。松の緑と朱塗の門が互いに照り合ってみごとに見える。その上松の位地が好い。門の左の端を眼障にならないように、斜に切って行って、上になるほど幅を広く屋根まで突出しているのが何となく古風である。鎌倉時代とも思われる。

ところが見ているものは、みんな自分と同じく、明治の人間である。その中でも車夫が一番多い。辻待をして退屈だから立っているに相違ない。

自分は一番大きいのを選んで、勢いよく彫り始めて見たが、不幸にして、仁王は見当らなかった。その次のにも運悪く掘り当てる事ができなかった。三番目のにも仁王はいなかった。自分は積んである薪を片っ端から彫って見たが、どれもこれも仁王を蔵しているのはなかった。ついに明治の木にはとうてい仁王は埋っていないものだと悟った。それで運慶が今日まで生きている理由もほぼ解った。
夢十夜夏目漱石

まず最初の第六夜の部分。これは以後の文章を短く説明した見出し (あるいは題名) として機能しています。

次の運慶がやっていた。の部分。これは文章の内容の一単位である段落です。日本語の文章の印刷の慣習では、段落の最初の行は1文字分字下げし、段落と段落の間では行を改めることになっています。

そしてその次の山門ので始まる部分も同じく段落のようです。という調子で考えていくと、この文章の構造はのようにまとめることができます。

文章 見出し 第六夜段落運慶が段落山門の段落ところが段落自分は

以後、途中の省略の部分は無視しています。

第六夜の構造

つまり、この文章は5つの要素から構成されていると考えることができます。そして見出しや段落というのはこの5つの要素の種類 (分類) だといえます。要素の種類のことを、要素型といいます。

文章は要素で構成されます。

要素の種類を要素型といいます。

文章の構造と要素型名

ところで、前の節では要素型として見出しや段落という言葉を使いましたが、 見出しとよく似た言葉に題 (名)があります。ですから、第六夜の部分を題名と分類しても間違いとは言えません。段落もアメリカ人が見たら paragraph だと言うかもしれません。もちろんそれも間違いとは言えません。

しかし、見出しと呼ぼうが題名と呼ぼうが、第六夜の3文字のこの文章における位置付けは変わりません。変わりないのならどちらで呼んでも良いように思うかもしれませんが、どちらでも良いことにしてしまうと、今度はそれならタイトルと呼んでも変わらないよねなどと言い出す人が出てくるかもしれません。そうすると収拾が付かなくなります。

そこで、見出しや段落などの文章を構成する要素の種類 (要素型) に共通の名前 (要素型名) を決めておくと便利です。そのような名前群の一種が &html; です。 &html; では、 見出しを h1 と呼び、段落は p と呼びます。

実は見出しを表す &html; の要素型には h1 の他に h2, h3, h4, h5, h6 があります。この数字にどんな意味があるのかは、で説明します。

&html; の要素型を使って先程の図を書き直すと、のようになります。

文章 h1 第六夜 p 運慶が p 山門の p ところが p 自分は第六夜の構造 (&html; 要素型)

&html; は要素型の名前 (要素型名) を決めています。

h1 は見出しを意味する要素型名です。

p は段落を意味する要素型名です。

文章の構造のマーク付け

さて、ここまで文章の構造を調べてきて、文章の内容を h1 (見出し) や p (段落) の要素に分けることができました。 見出しや段落なんて何を当たり前なことを、と思われたかもしれません。しかし、機械は文を読んで意味を理解することができませんから、どこからどこまでが見出しで、どこからどこまでが段落なのか、誰かが教えてやらなければ分からないのです。そして、それを分からせるための印 (マーク) を付けることこそがマーク付け (&html; の M) なのです。

マーク付けの意義と必要性については、でも説明しています。興味のある方はこの章を一通り読まれた後、をご覧下さい。

&html; のマーク付けはとても簡単です。要素のはじめには <要素型名> と書きます。これを開始タグといいます。要素の終わりには </要素型名> と書きます。これを終了タグといいます。つまり、 h1 (見出し) 要素のはじめには <h1> と書き、終わりには </h1> と書きます。 p (段落) 要素のはじめには <p> と書き、終わりには </p> と書きます。なお、開始タグと終了タグをあわせてタグといいます。

先程の例文をマーク付けする (タグを書き加える) と、のようになります。

第六夜のマーク付け結果 <h1>第六夜</h1> <p>運慶が護国寺の山門で仁王を刻んでいると云う評判だから、散歩ながら行って見ると、自分より先にもう大勢集まって、しきりに下馬評をやっていた。</p> <p>山門の前五六間の所には、大きな赤松があって、その幹が斜めに山門の甍を隠して、遠い青空まで伸びている。松の緑と朱塗の門が互いに照り合ってみごとに見える。その上松の位地が好い。門の左の端を眼障にならないように、斜に切って行って、上になるほど幅を広く屋根まで突出しているのが何となく古風である。鎌倉時代とも思われる。</p> <p>ところが見ているものは、みんな自分と同じく、明治の人間である。その中でも車夫が一番多い。辻待をして退屈だから立っているに相違ない。</p> <p>自分は一番大きいのを選んで、勢いよく彫り始めて見たが、不幸にして、仁王は見当らなかった。その次のにも運悪く掘り当てる事ができなかった。三番目のにも仁王はいなかった。自分は積んである薪を片っ端から彫って見たが、どれもこれも仁王を蔵しているのはなかった。ついに明治の木にはとうてい仁王は埋っていないものだと悟った。それで運慶が今日まで生きている理由もほぼ解った。</p>

要素のはじめは開始タグ (<要素型名>) で表します。

要素の終わりは終了タグ (</要素型名>) で表します。

Web 頁全体の構造

さて、ここまであえて無視してきましたが、まだ一つ問題が残っています。構造の図をもう一度見てください。

見出しや段落を &html; では h1 や p という名前で呼ぶことは分かりました。では、その上にある文章、これは一体どうすればよいのでしょうか。

実は &html; では (これから説明していくような) 色々なものを扱えるように、もう少し複雑な構造を採用しています。を見てください。

html lang ja xml:lang ja head title 『夢十夜』より「第六夜」 body h1 第六夜 p 運慶が p 山門の p ところが p 自分は第六夜の &html; 構造 (完全)

文章の本文全体を表す要素の要素型を &html; では body といいます。

その body と head や lang や xml:lang (後述) の上の階層にあたる html は、文書全体を表す要素型です。文書というのは情報を表現するひとまとまりの集合体です。遠足のお知らせや旅行の記念写真や7月の家計簿などが文書の例です。そしてここまで扱ってきた夢十夜の第六夜も1つの文書です。

文書ぶんしょと文章ぶんしょうは、よく似ていますが違う言葉ですので注意して下さい。文書は専門用語ですが、文章は一般的な意味で使っています。

文書という意味の要素型名がなぜ &html; では html なのでしょうか? 文書という意味の英語の document の方が分かりやすそうです。

実は html という要素型名が選ばれたのに深い理由はありません。かといって後から名前を変えてしまうと混乱してしまうので、おかしな要素型名がそのまま使われているのです。

body の前にある head は、文書に関する情報を持っている要素 (頭かしら) です。その中に title という要素がありますが、これは文書の題名 (タイトル) です。題名には文書全体を一行程度でまとめるに相応しい言葉を選びます。 &html; では、すべての文書が必ず1つ題名 (title) を持つことになっています。

head は頭、 body は体という意味です。 &html; に限らず色々なところで、文書を動物の体に模した表現が使われています。

頭 (head) の前にある lang と xml:lang は要素ではなく、属性といいます。属性はその上位にある要素 (ここでは文書を表す html 要素) に関する情報を提供します。この2つの属性はどちらも言語を表します。属性値は ja となっていますが、これは日本語という意味です。つまり、この文書は日本語で書かれていますと説明しているのが lang 属性と xml:lang 属性なのです。

言語を表すという同じ目的で lang と xml:lang の2つの属性があるのは歴史的な事情によるものです。

ある時新しい仕組みができたとしても、世界中のシステムが瞬時に新しいものに置き換わるわけではありませんから、どちらにも対応できるようにと、この2つの属性の場合のように、両方併用しなければならないことがよくあります。

それではこの完全な構造に基づきもう一度、で行ったようにマーク付けしてみましょう。 開始タグと終了タグを要素の中身を囲むように書き足していくのは同じですが、今度は属性もあります。属性は、所属している (すぐ上の階層の) 要素の開始タグに 属性名="属性値" という形式で記述します。

第六夜のマーク付け結果 (全体) <html lang="ja" xml:lang="ja"> <head> <title>『夢十夜』より「第六夜」</title> </head> <body> <h1>第六夜</h1> <p>運慶が護国寺の山門で仁王を刻んでいると云う評判だから、散歩ながら行って見ると、自分より先にもう大勢集まって、しきりに下馬評をやっていた。</p> <p>山門の前五六間の所には、大きな赤松があって、その幹が斜めに山門の甍を隠して、遠い青空まで伸びている。松の緑と朱塗の門が互いに照り合ってみごとに見える。その上松の位地が好い。門の左の端を眼障にならないように、斜に切って行って、上になるほど幅を広く屋根まで突出しているのが何となく古風である。鎌倉時代とも思われる。</p> <p>ところが見ているものは、みんな自分と同じく、明治の人間である。その中でも車夫が一番多い。辻待をして退屈だから立っているに相違ない。</p> <p>自分は一番大きいのを選んで、勢いよく彫り始めて見たが、不幸にして、仁王は見当らなかった。その次のにも運悪く掘り当てる事ができなかった。三番目のにも仁王はいなかった。自分は積んである薪を片っ端から彫って見たが、どれもこれも仁王を蔵しているのはなかった。ついに明治の木にはとうてい仁王は埋っていないものだと悟った。それで運慶が今日まで生きている理由もほぼ解った。</p> </body> </html>

文書 (html) は頭 (head) と本文 (body) で構成されます。

頭 (head) には題名 (title) が含まれます。

本文 (body) には見出し (h1) や段落 (p) が含まれます。

文書 (html) には言語 (lang, xml:lang) 属性があります。

属性は開始タグ内に 属性名="属性値" の形で記述します。

見出しと題名

題名 (title) は文書を簡単にまとめたものだと説明しました。これと同じような要素型を前にも紹介しました。 見出し (h1) です。題名と見出しは何が違うのでしょうか。

見出し (h1) は、本文 (body) を構成する一部分となります。それに対して題名 (title) は本文 (body) の一部ではなく、文書全体のラベルのような働きをします。本の題名やビデオ・テープのラベルを思い浮かべるとよいかもしれません。一般に題名はそれだけを取り出しても最低限の意味が通じるものがよいとされています。

ただ、題名も見出しもどちらも似たようなものなので、必然的に同じになってしまうこともあります。例えば欧州を旅行した感想を述べた文書は題名も見出しも欧州旅行記となるかもしれません。

&html; 文書のしるし

いよいよ最後の仕上げです。文書には &html; に限らず色々な表現方法があります。その中で &html; を採用したと示すために2つの印しるしをつける必要があります。

1つ目は文書型宣言で、 &html; 文書の最初には必ず <!DOCTYPE html> と書きます。タグと似ていますが、タグとは違って何かの要素を表すのではなく、これは &html; で書かれていますという宣言になります。

文書型宣言は SGML に由来し、マーク付け言語の規約を文書型定義として形式的に記述するために使われていました。

2つ目は名前空間属性で、 html 要素の特別な属性として xmlns="http://www.w3.org/1999/xhtml" と書きます。

名前空間属性は XML 名前空間という仕様の一部で、要素型名を大域的に一意に識別するためなどに使います。詳しくはで紹介します。

完成した &html; 文書はこうなります。

第六夜のマーク付け結果 (完成) <!DOCTYPE html> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>『夢十夜』より「第六夜」</title> </head> <body> <h1>第六夜</h1> <p>運慶が護国寺の山門で仁王を刻んでいると云う評判だから、散歩ながら行って見ると、自分より先にもう大勢集まって、しきりに下馬評をやっていた。</p> <p>山門の前五六間の所には、大きな赤松があって、その幹が斜めに山門の甍を隠して、遠い青空まで伸びている。松の緑と朱塗の門が互いに照り合ってみごとに見える。その上松の位地が好い。門の左の端を眼障にならないように、斜に切って行って、上になるほど幅を広く屋根まで突出しているのが何となく古風である。鎌倉時代とも思われる。</p> <p>ところが見ているものは、みんな自分と同じく、明治の人間である。その中でも車夫が一番多い。辻待をして退屈だから立っているに相違ない。</p> <p>自分は一番大きいのを選んで、勢いよく彫り始めて見たが、不幸にして、仁王は見当らなかった。その次のにも運悪く掘り当てる事ができなかった。三番目のにも仁王はいなかった。自分は積んである薪を片っ端から彫って見たが、どれもこれも仁王を蔵しているのはなかった。ついに明治の木にはとうてい仁王は埋っていないものだと悟った。それで運慶が今日まで生きている理由もほぼ解った。</p> </body> </html>

&html; 文書のはじめには、文書型宣言 (<!DOCTYPE html>) を書きます。

html 要素の開始タグには特別な属性 xmlns="http://www.w3.org/1999/xhtml" を書きます。

次の文章について、のような構造の図をかけ。

舞姫

石炭をば早や積み果てつ。中等室の卓のほとりはいと静にて、熾熱燈の光の晴れがましきも徒なり。今宵は夜毎にこゝに集ひ来る骨牌仲間も「ホテル」に宿りて、舟に残れるは余一人のみなれば。

五年前の事なりしが、平生の望足りて、洋行の官命を蒙り、このセイゴンの港まで来し頃は、目に見るもの、耳に聞くもの、一つとして新ならぬはなく、筆に任せて書き記しつる紀行文日ごとに幾千言をかなしけむ、当時の新聞に載せられて、世の人にもてはやされしかど、今日になりておもへば、穉き思想、身の程知らぬ放言、さらぬも尋常の動植金石、さては風俗などをさへ珍しげにしるしゝを、心ある人はいかにか見けむ。こたびは途に上りしとき、日記ものせむとて買ひし冊子もまだ白紙のまゝなるは、独逸にて物学びせし間に、一種の「ニル、アドミラリイ」の気象をや養ひ得たりけむ、あらず、これには別に故あり。

げに東に還る今の我は、西に航せし昔の我ならず、学問こそ猶心に飽き足らぬところも多かれ、浮世のうきふしをも知りたり、人の心の頼みがたきは言ふも更なり、われとわが心さへ変り易きをも悟り得たり。きのふの是はけふの非なるわが瞬間の感触を、筆に写して誰にか見せむ。これや日記の成らぬ縁故なる、あらず、これには別に故あり。

嗚呼、ブリンヂイシイの港を出でゝより、早や二十日あまりを経ぬ。世の常ならば生面の客にさへ交を結びて、旅の憂さを慰めあふが航海の習なるに、微恙にことよせて房の裡にのみ籠りて、同行の人々にも物言ふことの少きは、人知らぬ恨に頭のみ悩ましたればなり。此恨は初め一抹の雲の如く我心を掠めて、瑞西の山色をも見せず、伊太利の古蹟にも心を留めさせず、中頃は世を厭ひ、身をはかなみて、腸日ごとに九廻すともいふべき惨痛をわれに負はせ、今は心の奥に凝り固まりて、一点の翳とのみなりたれど、文読むごとに、物見るごとに、鏡に映る影、声に応ずる響の如く、限なき懐旧の情を喚び起して、幾度となく我心を苦む。嗚呼、いかにしてか此恨を銷せむ。若し外の恨なりせば、詩に詠じ歌によめる後は心地すがすがしくもなりなむ。これのみは余りに深く我心に彫りつけられたればさはあらじと思へど、今宵はあたりに人も無し、房奴の来て電気線の鍵を捩るには猶程もあるべければ、いで、その概略を文に綴りて見む。

舞姫冒頭

最初の舞姫は見出しで、残りは段落です。題名と言語情報を補うと、 html lang ja xml:lang ja head title 舞姫 body h1 舞姫 p 石炭をば早や積み果てつ。舟に残れるは余一人のみなれば。 p 五年前の事なりしが、これには別に故あり。 p げに東に還る今の我は、これには別に故あり。 p 嗚呼、その概略を文に綴りて見む。となります。

の文章を &html; によりマーク付けせよ。

構造が分かれば、後は機械的にタグを書き足すだけです。

<!DOCTYPE html> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>舞姫</title> </head> <body> <h1>舞姫</h1> <p>石炭をば早や積み果てつ。舟に残れるは余一人のみなれば。</p> <p>五年前の事なりしが、これには別に故あり。</p> <p>げに東に還る今の我は、これには別に故あり。</p> <p>嗚呼、その概略を文に綴りて見む。</p> </body> </html>

自分の住んでいる街を紹介する簡単な文章を書き、それを &html; でマーク付けせよ。 (ヒント: はじめは原稿用紙に書くつもりで考えるとよい。)

解答例

この章では基本的な &html; 文書の構成の方法を学びました。次の章では箇条書きを記述する方法を紹介します。

次の章以降でも説明のためにのような構造の図を使います。この図のような構造は木と呼ばれており、計算機科学の世界では非常によく使われている重要な概念です。木構造についての知識が無い方は、次の章に進む前にをお読み下さい。

箇条書きのマーク付け

この章では、箇条書きのマークの付け方について学びます。 箇条書きは、同列に並んだ複数の項目を列挙する際や、物事の手順を説明する際に、読者にとっても著者にとっても簡単で分かりやすく内容を記述できる有効な表現手段です。 &html; で記述した &web-pages; でも箇条書きはよく用いられています。

並列列挙のマーク付け

まず、あるテーマに沿った物事を列挙した箇条書きが含まれている文書について考えましょう。

世界の七不思議

世界の七不思議とは元々次の7つのものを指していたといわれています。

ギザのピラミッド
バビロンの空中庭園
ロードス島の巨像
オリンピアのゼウス像
エフェソスのアルテミス神殿
ハリカルナッソスのマウソロスの霊廟
アレクサンドリアの大灯台

世界の七不思議

今回の例は、見出し1つ、段落1つ、 箇条書き1つで構成されています。そして箇条書きには項目が7つ含まれています。この木構造を図にするとのようになります。

ここでは本文より上の階層は省略しました。

本文 見出し 世界の七不思議段落世界の七不思議とは 箇条書き 項目ギザのピラミッド項目バビロンの空中庭園項目ロードス島の巨像項目オリンピアのゼウス像項目エフェソスのアルテミス神殿項目ハリカルナッソスのマウソロスの霊廟項目アレクサンドリアの大灯台世界の七不思議の構造

要素型を &html; では body (本文)、 h1 (見出し)、 p (段落) と呼ぶことは既に前の章で学びました。新たに登場した箇条書きは ul、項目は li が &html; の要素型名になります。

ul は unordered list (順序付けされていないリスト) の略です。順序付けられていないというのは後述の順序付けられているリスト (ol) との対比で、列挙した順序に元々深い意味が無い (順不同である) ことを示しています。

li は list item (リストの項目) の略です。

&html; の要素型名に書き換え、更に本文 (body) より上の階層も補うと、木はのようになります。

html lang ja xml:lang ja head title 世界の七不思議 body h1 世界の七不思議 p 世界の七不思議とは ul li ギザのピラミッド li バビロンの空中庭園 li ロードス島の巨像 li オリンピアのゼウス像 li エフェソスのアルテミス神殿 li ハリカルナッソスのマウソロスの霊廟 li アレクサンドリアの大灯台世界の七不思議の &html; 構造

そしてこの木構造から今までと全く同じ方法で &html; でマーク付けされた文書を作ることができます。

世界の七不思議のマーク付け結果 <!DOCTYPE html> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>世界の七不思議</title> </head> <body> <h1>世界の七不思議</h1> <p>世界の七不思議とは元々次の7つのものを指していたといわれています。</p> <ul> <li>ギザのピラミッド</li> <li>バビロンの空中庭園</li> <li>ロードス島の巨像</li> <li>オリンピアのゼウス像</li> <li>エフェソスのアルテミス神殿</li> <li>ハリカルナッソスのマウソロスの霊廟</li> <li>アレクサンドリアの大灯台</li> </ul> </body> </html>

箇条書きは、箇条書き全体とその中の項目群という構造になっています。

箇条書きの要素型名は ul です。

項目の要素型名は li です。

手順のマーク付け

次は順序のある箇条書きのマーク付けを考えてみましょう。今回の題材は調理法の説明です。

けんちん汁の作り方

大根、にんじんは 5mm のイチョウ切り、ゴボウは皮をむき、ささがきにして水にさらす。
里芋は皮をむいて 1cm の輪切りにし、塩でもんでぬめりをとり、さっとゆでておく。蒟蒻は半分に切って 5mm の小口切り、豆腐はふきんに包んで水気をしぼっておく。
鍋に油を熱し、大根・にんじん・里芋・こんにゃく・豆腐・ゴボウの順に加えながら炒め、豆腐に油がなじんだら、だしを加える。
煮立ったら火を弱めて、灰汁を取りながら煮て、柔らかくなったら、塩・醤油・酒で味を調える。
盛り付けて季節の吸い口を添える。

けんちん汁の作り方 (Wikipedia より)

先の例と同じ単なる箇条書きですから、今度も &html; では ul と li を使って表すのだな、と思われるかもしれません。しかし、先の例ではギザのピラミッドもバビロンの空中庭園もその他の項目も、どれが著しく優れているとか、どれが重要であるとかといった順序とは (一応は) 無縁のものでした。ところが今回の例のような調理法は、順序を無視することができません。

&html; には ul とは別に ol という要素型があります。 ol は調理法のように項目の順序が重要な箇条書きで用います。それぞれの項目の要素型は ul の時と同じように li を使います。

ol は ordered list、すなわち順序付けられたリストという意味です。

html lang ja xml:lang ja head title けんちん汁の作り方 body h1 けんちん汁の作り方 ol li 大根、にんじんは水にさらす。 li 里芋は皮をむいてしぼっておく。 li 鍋に油を熱し、だしを加える。 li 煮立ったら火を弱めて、味を調える。 li 盛り付けて季節の吸い口を添える。けんちん汁の作り方の &html; 構造けんちん汁の作り方のマーク付け結果 <!DOCTYPE html> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>けんちん汁の作り方</title> </head> <body> <h1>けんちん汁の作り方</h1> <ol> <li>大根、にんじんは水にさらす。</li> <li>里芋は皮をむいてしぼっておく。</li> <li>鍋に油を熱し、だしを加える。</li> <li>煮立ったら火を弱めて、味を調える。</li> <li>盛り付けて季節の吸い口を添える。</li> </ol> </body> </html>

ここでは ol を手順を表すために使いましたが、一般に順序関係を持つものなら何にでも使えます。例えばシドニー五輪の金メダル国別獲得数 (上位10ヶ国)やのぞみ停車駅一覧や日本の歴代総理大臣にも ol が使えます。

順序が重要な箇条書きでは要素型名を ol とします。

各項目の要素型名はやはり li です。

説明付きリスト (仮題)

この節で登場する要素型: dl, dt, dd

&html; 5 の仕様が確定するまで pending。

入れ子のリストをここで扱うべきかどうか?

この章では、様々な箇条書きのマークの付け方をみてきました。

次のでは、段落や箇条書きの中の語句をどう扱うのかを説明します。

では、箇条書きよりも複雑な情報を 2次元に整理した表を &html; でどうマークするのか説明します。また、では箇条書きや表の見た目を工夫する方法を説明します。

ul の問題。

次の文書の構造の木を作れ。また、マーク付けせよ。

2004年産キャベツ年間出荷量上位5県

群馬
愛知
千葉
神奈川
北海道

2004年産野菜の統計 / キャベツ年間出荷量上位5県

解答例

dl に関する問題を何か。

街紹介の問題

語句のマーク付け 強調略語ルビ

ここまでは段落や箇条書きのように、文よりも大きな単位を記述する方法をみてきました。この章では、逆に文の中の語句について説明を加えることを考えます。

語句の強調

文には通常いくつかの語句が含まれていますが、そのすべてが対等では必ずしもありません。ですから、特に重要な語には線を引いたり、赤字にしたり、読む時に特に大きな声を出したりします。

&html; には強調という意味の em 要素型があります。

強調の例

例えば

なんといっても重要なのは、単純さですよね。

という段落の構造を木にすると p なんといっても重要なのは、 em 単純さですよね。となり、 &html; では <p>なんといっても重要なのは、 <em>単純さ</em>ですよね。</p> と表せます。

略語とその完全形

団体名や専門用語などで、長い正式名称ではなく略称が使われることがあります。しかし、たまに文章を読んでいて何の略語か分からなくなったり、違う意味で同じ略語が使われていて混乱したりすることもあります。

&html; には、ある語句が略語であることを表す abbr という要素型があります。また、 abbr 要素の title 属性によって省略前の完全形を付記することができます。

略語の例

例えば

NHK, 民放連, etc.

という例文は &html; で <p><abbr title="日本放送協会">NHK</abbr>, <abbr title="日本民間放送連盟">民放連</abbr>, <abbr title="et cetera">etc.</abbr></p> と表せます。

title 属性に記述した完全形は、通常は文章の一部として扱われることはなく、文脈外の付加情報とみなされます。

多くの Web ブラウザでは、 abbr 要素の上にマウス・ポインタをあわせると title 属性の値が表示されます。紙の文書では実現できなかった、電子文書ならではの表現方法です。

ルビのマーク付け

漢字の読み方を振り仮名として上や右に小さく書き入れたり、人物の生没年を下に小さく載せたりすることがありますが、この種の表現をまとめてルビと呼びます。辞典では読み仮名を右に添える代わりに行中に割注として記述されていたりもしますが、 &html; では都合上これもルビに含めます。

ルビの &html; における表現方法は少し複雑です。まず、基本となる内容をルビ基底 rb と呼びます。そして補助的な内容をルビ文 rt と呼びます。 振り仮名の場合は漢字がルビ基底で、仮名がルビ文に当たります。割注として表示されることも考えて、 ルビ文の周りには括弧 rp を配置します。これらルビ関連要素をまとめたルビ付き語句の &html; での要素型名は ruby です。

言い換えると、 ruby 要素の中に漢字が含まれる rb 要素、仮名が含まれる rt 要素、括弧が含まれる rp 要素が入ります。

ルビの例

例えば

それは憂鬱ゆううつな日々だった。

という段落の木構造は p それは ruby rb 憂鬱 rp ( rt ゆううつ rp ) な日々だった。となり、 &html; では <p>それは <ruby><rb>憂鬱</rb> <rp>(</rp><rt>ゆううつ</rt><rp>)</rp></ruby> な日々だった。</p> となります。

1つの ruby 要素の中に rt 要素は最大 2つ含めることができます。 rb が人名であれば 1つ目の rt を振り仮名、2つ目の rt を生没年に使ったり、1つ目を仮名表記、2つ目を羅馬ローマ字表記に使ったりするのが普通です。

なお、ここで紹介したのは単純ルビと呼ばれるもので、より細かい記述が可能な複雑ルビという方法もあります。

&html; 5 の仕様が固まれば、 small と m の説明をここに入れる。

強調には em 要素型を使います。

略語は abbr 要素とし、完全形を title 属性で示すことができます。

ルビ付き語句は ruby 要素とし、その中に主要なルビ基底の rb 要素、補助的なルビ文の rt 要素、括弧の rp 要素を配置します。

演習問題を用意する。

この章では語句についてのマーク付けの方法を学びました。 &html; にはこれ以外にも語句のための語彙が用意されていますが、それについては後ので取り上げます。これら語句のマーク付けを目に見える形にする (例えば強調を赤字で表示する) 方法はで説明します。

次のでは、いよいよハイパーテキストの肝であるハイパーリンクの取り扱いについてみていきます。

参照のマーク付け 引用 ハイパーリンク

この章で登場する要素型: blockquote, q, a, link

文字の装飾 スタイル・シート 色付け文字の太さ下線

この章で登場する特性: color, background-color, font-weight, text-decoration

画像 (img) はどこで説明するべきか。

章節構造のマーク付け

この章で登場する要素型: h2～h6, section

&html; 5 の仕様が固まった時、 header や aside などはこの章で説明するべきか、別の章を設けるべきか?

表のマーク付け

この章で登場する要素型: table, tbody, thead, tfoot, colgroup, tr, td, th caption

箱の装飾枠線背景余白 字下げ

この章で登場する特性: border, background, margin, text-indent

箇条書きと表の装飾

ここには、

リスト項目マーカーの替え方 (list-style)
ありがちな表の構造と枠線 (border) の指定方法

などを書く。

語句 (上級) (仮題) 定義語コード片変化部編集履歴

適当な章名を考える。

この章で登場する要素型: dfn, code, var, ins, del

&html; 5 の仕様が固まれば i の説明をここに。

&html; の拡張級 名前空間

級による分類

この章で登場する要素型: div, span

この章で登場する属性: class

XOXO について

図のマーク付け

Dublin Core meta について

&_xml-names;を使った拡張

続きを書く。

箱の選択 選択子 媒体

この章の内容: 要素型選択子、要素級選択子、属性選択子、子孫、親子、隣接、既訪未訪擬似級、 :first-child, :last-child, ::first-line, ::first-letter, @media

更に学ぶために

触れていない &html; の機能: フォーム、スクリプト, canvas → Web 応用入門, profile, rel, hCalendar, hCard → semantic web 入門 ??, samp, strong, address, base, xml:base, xml:id, id, map, area, object, param, col, rbc, rtc, cite, kbd, br, hr, pre, 代替スタイル, 歴史的なもの

触れていない CSS の機能: 継承, 段階, 輸入, 頁媒体, 音声, フォント, 位置指定, 視覚整形モデル、生成内容

周辺技術: URI & HTTP → REST 体系様式入門, XML, MathML, SVG, RDF, Atom, DOM, ECMAScript, Ajax, XBL

HTML vs XHTML について : どこでどの程度触れるべきか?

補足説明木 &uri;

なぜマークを付けるのか

書く。

文のマーク付け : 文は句点で既にマーク付けされている。

文字実体参照

書く。

定義済実体参照の紹介。

十六進数文字参照も紹介するべきか否か。要らない気がしているが。

木構造

&this-document;では構造の図と称して文書を構成する要素の関係を根0 節点1 葉2 葉3 節点4 葉5 葉6 のように示してきましたが、このような構造を一般に木と呼びます。

根から枝が分かれて広がっていく様子を自然界の木に喩えています。普通は木と言えば根が下にあり、葉は上にあるものですが、 計算機科学の世界では根を上に、葉を下に書くのが慣習になっています。 計算機のソフトウェアでは場所の都合などのために根を左上に、葉を右側に表示することが多いです。 &this-document;では便宜上この根を左上、葉を右側に書く方法を採用しています。

木を構成する要素それぞれを節点といいます。節点のうち、一番根元 (左上) にあるものを特に根といいます。

節点には上下関係があります。家族の関係に見立てて上を親、下を子といいます。この例では、根0が親だとすれば節点1と葉6が子です。また、節点1を親とすれば葉2、葉3、節点4の3つの節点が子です。子がいない節点のことを葉といいます。

木に属する節点同士の関係は親子以外も家族の関係を表す言葉を使って表します。親が同じ子同士は互いに兄弟であるといいます。親や親の親などをまとめて先祖といいます。逆に子や子の子 (孫) などをまとめて子孫といいます。

&uri;

続きを書く。

演習問題の解答例索引著作権に関する完全な声明

著者はクリエイティブ・コモンズのライセンスに変更することも検討しています。ご意見がございましたら著者までご連絡下さい。