Webサイトというものが書籍のような物だという例えを何度かしました。それぞれのページが合わさって一つの本になるのだと。しかし、その一つ一つのページもまた、書籍のような構造になっているのです。どういう事かと言えば、ほとんどの本は表紙があって、タイトルがあって、開くと先ずは目次があって、第一章、第二章などと別れていて、さらに第一話、第二話などと別れていて、そして内容が書かれているという構造になっています。Webサイトもそうであるべきなのです。タイトルも目次も見出しも何もない、内容しか書かれていない本がそこにあったとしたらどうですか？読んでみないと内容がまったくわからない本なんて不親切極まりないでしょう。料理の本を探しているのに動物の本を手に取らされたのでは時間の浪費です。どんな内容なのか、伝えたい事をわかり易く提示する事が必要なのです。
そんなわけで先ずはわかり易いタイトルを付ければ、料理の本を探している人が動物の本を手にすることはありません。おいしい料理を作ろうとしている人が『ペット大百科』は手に取りませんよね。という事でタイトルなのですがここではとてもわかり難い『ララの世界』で行きたいと思います。意味としては『私のホームページ』みたいな物です。自分で創る時はわかり易いタイトルにしてください。
「私のホームページ」「○○の部屋」「○○の家」などはとても内容がわかり難いタイトルです。多くの、それも自分と同じような趣味を持った人に訪問してもらいたいのなら、わかり易いタイトルをつけましょう。ペットの成長記録を載せたいのなら「クロの成長記録」ではなく、「愛犬クロの成長記録」とするだけで、ああペットの犬に関するホームページなのだなと直ぐにわかります。すると犬好きの人は、どれ、ちょっと観てみようかという風になるかもしれません。
見出しの説明をするつもりが題名の説明になってしまいました。それではここから見出しの説明をしたいと思います。見出しとは各章ごとの題名みたいなものです。それを表すには<h1〜h6></h1〜h6>を用います。h は heading (見出し)という意味です。国語の教科書なんかを思い浮かべて頂ければわかり易いかもしれません。見出しはそれぞれの物語の題名に当たります。
index.html - メモ帳
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>ララの世界</title> </head> <body> <h1>ララの世界</h1> <h2>自己紹介</h2> <h2>ラララ日記</h2> <h2>ララの写真館</h2> <h2>掲示板</h2> <h2>リンク</h2> <h3>お友達リンク</h3> <h3>お役立ちリンク</h3> <h4>ホームページ</h4> <h4>その他</h4> </body> </html>
先ずは見出しだけを創ってもらいました。これでそのサイト全体にいったい何があるのかがわかるようになったと思います。このようにトップページ(サイトを開いたときに最初に表示されるページ)は主に索引や目次になる場合が多いようです。ちなみに index とは索引のことです。この見出しを抽出して目次を生成する機能を備えたツール（ブラウザ）も存在するので、そのような事を念頭に置くと良いかもしれません。
基本的に h1 は各ページに一つずつです。複数個存在しても構わないことになっていますが、各ページで一番伝えたい事は一つでしょうから一つにするのが妥当ではないでしょうか。また、数字を飛ばすのは望ましくありません。ですから h2 がどこにも無いのに h3 を登場させるなどという事は控えましょう。アウトラインを意識して作るのはなかなか難しいかもしれませんが、新聞や書籍、雑誌に至るまで普段触れているものは殆どが同じような書き方になっています。教科書なんかはそれが顕著に現れていると思います。
この見出しの要素は数字を大きくすればするほど文字の大きさが小さくなりますが、この要素は文字の大きさを指定する物ではありませんので、そういった用途で使用するのは止めましょう。あくまでも意味付けとして考えてください。文字の大きさ等は後で自由に変更できます。大きい文字にしたいから <h1>〜</h1> を使用するなんて事はしないようにしましょう。
見出しだけじゃつまらないです。
物事には順番というものがあるのです。ケーキを作るのに最初からデコレーション(装飾)はできませんよね。先ずは基本構造から創らなければならないのです。
それじゃあ次はおもしろくなりますか？
いえ。まだまだ基本が続きます。次は段落の説明です。
段落で一段落ですかっ！
・・・・・・・・。
見出しだけではページは成り立ちません。内容を段落として記してやる必要があります。その時に用いるのが<p></p>です。p は paragraph（段落）という意味です。教科書で説明するのならば物語の内容部分ということになります。しかし【段落】という言葉だとイメージし難いかもしれません。意味的に区切れる節(ふし)として考えてください。
index.html - メモ帳
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>ララの世界</title> </head> <body> <h1>ララの世界</h1> <p>ご訪問ありがとうございます。ララの世界は管理人ララが趣味でなんとなく運営しているサイトです。今のところは日記や写真、掲示板しかありませんが、もっと頑張って素敵なサイトにして行きたいと思っていますので、どうぞ宜しくお願いします。</p> <h2>自己紹介</h2> <p>私のプロフィールです。</p> <h2>ラララ日記</h2> <p>日々の記録です。</p> <h2>ララの写真館</h2> <p>なんとなく撮った写真を公開しています。</p> <h2>掲示板</h2> <p>一言お寄せください。</p> <h2>リンク</h2> <h3>お友達リンク</h3> <p>ネットで知り合った私の友人が運営しているサイトです。</p> <h3>お役立ちリンク</h3> <h4>ホームページ</h4> <p>ホームページを創るのにお世話になったサイトです。</p> <h4>その他</h4> <p>その他のお役立ちサイトです。</p> </body> </html>
大きさの違う文字が並んでるだけですねぇ・・
見た目はそう見えますが、しっかりと意味付けがしてあります。
本当にこんなのでちゃんとしたホームページが出来るんですか？
安心してください。ちゃんと順番どおりに進めて頂ければ必ずホームページは出来上がりますし、終わる頃にはすっかりと基礎が出来上がっているはずです。少し大変な気がしても、基礎からしっかり学ぶ事が結局は近道なのです。
でも背景とか文字に色を付けたり、画像を使ったりしたいです。
申し訳ないのですがもう少し我慢してください。最終的には全て思い通りに自由に使えるようになりますから。楽しい事は後に残しておきましょう。
わかりました。騙されたと思ってもう少し付いて行きます。
はい。存分に騙されてください。
このように内容(文章)を書く場合は、必ずと言っていいほど<p>〜</p>などのタグで挟みます。文章がどんなタグにも挟まれずに登場することはありません。つまり<body>〜</body>の中で存在できる文字は、何かしらのタグに挟まれた文字列だけということになります。
これでページの基本的な構造の説明は終わりと言っても良いかもしれません。全てのWebページはこの見出し(h1〜h6)や段落(p)などで成り立っています。国語の教科書の話をしましたが、教科書の場合も同じですよね。一章二章などと別れていて、その中で物語の題名があって、その物語の内容がいくつかの段落に別れていて・・・とほとんど同じ構造になっています。イラストやその他の装飾(視覚的効果)は内容を読ませる為のテクニックということになります。もちろん当サイトではデザインにも拘るつもりでいるので、その辺りの技術も解説して行くつもりです。
本当に一段落でしたね。
そうですね。次回からはWebの特性でもあるリンクを扱います。そろそろ一つ目の山場を迎えますので気合を入れてくださいね。それから、ここまでにわからない事があったらもう一度よく読むか、それでもわからなければ検索したり、他のサイトを読んだりして調べて理解してください。わからない事だらけかもしれませんが、ここまでで感じた疑問を次へ持ち込まないようにしましょう。疑問を解消するか、きれいサッパリ忘れるかするのが良いかもしれません。
．．．....z z z z z Z Z Z
えーっと。ちょっと説明不足の感があるので休憩ついでにここで補講を行いたいと思います。別方向からのアプローチというか、説明の方法を変えているので、このページを理解できなかった人や、怪しい人はこちらも読んでみてください。このページの代替という意味や補足という意味も含んでいますので、必ず目を通してください。それではどうぞ。
補講1：マークアップ 
[ トップページ ]
[ 目次 ]
[ ページの先頭 ]
[ 前項目 ]
[ 次項目 ]