文書を構造化する作業だと思っとけば、大よそ大丈夫でしょう。
以上、マークアップの説明でした（早）。
要は、ベタ打ちテキストでも人間にはモヤっと構造が判るかも知れないけれど、機械にそんなファジーな芸当を期待するのはお門違いだから、きちんと指示をしておくって事です。
これが題名、これが段落、ここは強調！と。
文書の見栄えを操作する事が出来る人なら、この考え方は然程難しくないですよ。
逆に考えれば良いのです……「ここを見出しとして目立たせたいから大きくする」のじゃあなくて、「ここを見出しに設定したら、勝手に大きくなる」様にすりゃー良いと云う話。
まあ、見た目は後で弄れますんで、先に骨格となるマークアップをやっちまいましょう。
前回の内容を踏まえ、今回は、中身を入れる枠を作ります。
前回作った計画図めいたものを再掲載。
これを実際に構造化する作業を順番に見て行きましょう（最後に纏めのソースは出しますけど、どうしてそうなったかの経緯は知っておいた方が良いんじゃないかと）。
最初は、HTML文書としての最低限の体裁だけ整えます。本当はこれだけではイカンのですが、単純化モデルですので御容赦。
<html>
<head></head>
<body></body>
</html>
HTMLという括りの中に、文書の索引情報みたいな物を入れるHEADという領域と、実際に表示する内容を入れるBODYという領域を確保しました。これらは必須です。
こいつをテキスト保存して、拡張子を「.html」とかにすれば、真っ白なHTML文書としてブラウザに表示されるという寸法。
BODYの中に何も入ってませんから、真っ白なのは当たり前なんですけど。
HTMLを書く時は、こんな風に<タグ>内容</タグ>で挟んで範囲を示すのが基本ですね。
では続いて、独自の領域を規定してみましょう。
<html>
<head></head>
<body>
<div id="page"></div>
</body>
</html>
DIVって何やねんと…このタグは「取敢えずブロック分けしとく為のタグ」ですので、それ以上の意味は無いですね。便利だけど無闇に使うと鬱陶しいかも。構造化の為に使います。
タグの中にid="page"なんて物が書き込まれていますが、これはDIVという「平凡な箱」に取り付けた「識別シール」とでも考えて下さい。「page」という名前が大書きされている奴。
これから幾つかDIVが出現しますが、同じ文書内に「pageというIDの付いた箱」は一つしか存在出来ません。
で、「pageという名前の付いた箱」の中に、入れ子になる様に幾つか箱を作ります。
<html>
<head></head>
<body>
<div id="page">
<div id="header"></div>
<div id="inner"></div>
<div id="footer"></div>
</div>
</body>
</html>
3つばかり作ってみました。
更に入れ子。今度は、「innerという名前の付いた箱」……ああもう判るよね。
<div id="inner"></div>の中に2つDIV作ります。単純作業ですよ！
<html>
<head></head>
<body>
<div id="page">
<div id="header"></div>
<div id="inner">
<div id="main"></div>
<div id="menu"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
これで、図の通りに構造化出来ました。リストで表現するとこんな感じです。
- html
- head
- body
- page
- header
- inner
- main
- menu
- footer
- page
では、纏めソースです。
此処に至ってもブラウザに表示する内容が真っ白なのは何か寂しいので、適当に内容を挿入しておきますね。
<html>
<head></head>
<body>
<div id="page">
<div id="header">サイト名等を入れる</div>
<div id="inner">
<div id="main">本文等を入れる</div>
<div id="menu">メニュー</div>
</div>
<div id="footer">コピーライト等を入れる</div>
</div>
</body>
</html>
……本文とメニューが順序逆？
あ、いや、これはこの順序でいいんですわ。
本文の方が重要だし、レイアウトは後でどうにかなりますから。
今回はこれにて！
次回 は、実際に中身を作ってみますよ。
コメントの投稿
- コメントおよび認証コードは、必須項目です。
- コメントは、即時公開されます。投稿したコメントの編集は、登録ユーザのみ行えます。