これまでの#1と#2で、XHTML文書の枠組みは出来たと思う。今回はウェブページの内容にあたる、body要素について大まかに作っていこう。この要素はウェブページのコンテンツにあたる。したがってXHTMLの文法にさえ従えば良い、自由度の高い部分だ。しかし、多くのサイトに共通する大まかなパターンがある。その中でもオーソドックスと思われるものを作っていこう。また、これは将来的にスタイルシートで見た目をコントロールしやすくする作業も兼ねる。
ブロックレベル要素とインライン要素
最初に、ブロックレベル要素とインライン要素を説明する。この二つはXHTMLの要素を分類するものである。ブロックレベル要素は四角、インライン要素は線をイメージしてもらうとわかりやすい。ブロックレベル要素は内側にインライン要素やテキストを含むことが出来、一部は他のブロックレベル要素も含められる。インライン要素のほとんどはその内側に他のインライン要素やテキストを含むことが出来る。
div要素によるマークアップ
それでは実際に作っていく。コンテンツ全体を包むdiv要素をbodyのすぐ内側に作ろう。div要素というのは、汎用ブロック要素といい、オールマイティーなブロックレベル要素である。ここでは全体を包み込むための要素として使う。これは後々レイアウトするときに便利であることと、インライン要素はブロックレベル要素に必ず含まれる必要があるためだ。次にこのdiv要素にid属性をつけておく。id属性はある要素に対して個別の名前をつけるために用いる。id属性では同じページに同じ属性値を２つ以上つけられないので、まさに固有の名前を与えられる。ここの属性地は例えば「wrap」などとしておくのが一般的だ。ここまでのサンプルは以下。
<body> <div id="wrap"> </div></body>さて、このwrapと名付けたdiv要素の中身こそがコンテンツとなるのだが、一般的に何が必要であろうか。目的にもよるが、おおよそ以下のようになる。
- ヘッダー
- 本文
- ナビゲーション
- フッター
最初のヘッダーは、そのページのタイトルや内容の説明に使う。次に本文を書き、その次は他のページへのリンクなど、ナビゲーションとする。最後にフッターとしてページの作成者などの情報を書く。これを実現するために、先ほどのwrapの内側に４つのdiv要素を書き入れ、それぞれid属性に「header」「main」「navi」「footer」などと値を入れる。ここまでで以下のようになる。
<body> <div id="wrap"> <div id="header"> </div> <div id="main"> </div> <div id="navi"> </div> <div id="footer"> </div> </div></body>これで大まかにページを分けることが出来た。次回からは一つ一つのdiv要素を埋めていく作業に入る。
It‘s quite in here! Why not leave a response?