<<space     　 Home>>Works>>ホームページの作り方>>Webサイトのデザイン
６.Webサイトのデザイン
6.1.テーブルのデザイン的用途
▼
　５章で紹介した、 <table> <tr> <td> によって作られるテーブルは、 文字や画像や、別のテーブルといったあらゆる要素をセルに置くことができ、 またその見栄えもスタイルシートによって細かく設定できた。 これを応用するとこで、 さまざまなサイトをデザインするのにことが可能である。
　ただし、デザイン的用途へのテーブルの利用は、もはやどうこう説明する部分ではない。 これは、自分がよいと思ったWebサイトのソースを見て、 どのようなテーブルの組み合わせで表現しているか解析してみたり、 また、簡単な設計図を書いてから自分で実際に作ってみたりするしかない。
　最後であるこの章では、 【文書4-1a】にテーブルを利用して、どうやって、 【文書・完成】に仕上げるかのヒントを提示する （ ソースは【文書・完成ソース】）。 　


6.2.デザイン例
△▲＿
　サイトをデザインする上で重要なのは、とにかく『テーブルをどう使うか』である。 テーブルの構造な設計や見栄えの設定で、そのサイトのデザインの十中八九は決まってくる。
rata.htmlの全体図 rata.htmlのテーブル１
【図１】 【図２】


　【図１】は、【文書・完成】の全体図である。 このページはまず、【図２】のように、最も大きなテーブルで囲われている。 このテーブルの <table> <tr> <td> のみは、 【文書・完成ソース】では大文字を使用して他とは区別してあるので見て欲しい。 この大きなテーブルは、そのページの場所を示すヘッダと、レシピの書かれたボディ、著作権の書かれたフットの３つにわかれているが、 これは３行１列のテーブルである。テーブルの背景色・境界線（border）は設定はしていない。
rata.htmlのテーブル２ rata.htmlのテーブル３
【図３】 【図４】


　次に【図３】であるが、これは【図２】の上から二つ目のセル（ボディ）の中に、 ２行１列のテーブルを作成している。 上のセルには、『ラタトゥーユのレシピ』という題目が入り、 下のセルにはレシピの本文が入っている。 このテーブルの背景色は黒にして、上下のセルの背景色を、それぞれ、濃い黄色と淡い黄色に指定している。 背景色の指定の仕方は、5章5節で述べたとおりである。 あとは、このテーブルの cellspacing を設定することで、 セル間の幅を適当にとって、黒と原色のコントラストを調整している。
　そして最後に【図４】であるが、【図３】の２つ目のセルに、 境界線なし（ table要素の border属性の属性値が０）の背景色なしのテーブルを作っている。 このテーブルは、７行２列のテーブルで、左に説明文、右にその写真をおいている。 ”置いている”というのは、つまり、それぞれのセルのコンテンツとして、 対応した td要素内に、文章を書いたり、img要素を含ませたりしている。 また、２行目は、２つの横並びのセルを連結させるために table 要素の colspan属性を設定している。

　このように、このページは３段階の大きさのテーブルが入れ子構造になっているわけだが、 このようなテーブルの関係は、あらかじめ適当な紙に書いてみるなどして整理しておくと、 効率よくサイトが作ることができる。 ここまでサイトの構造ができあがってしまえば、 あとは【文書4-1a】の内容を、 個々のセルに移すだけの作業となるのである。

Copyright(c) 2003 Mr.HAMACCO All Rights Reserved. space