|
| いまさらHTML,CSS講座トップ > 初心者講座 > レイアウト |
|
|
■ レイアウト |
|
| 【 tableレイアウト 】 【 CSSレイアウト 】 【 使い分けなど 】 【 後書きみたいなもの 】 |
|
|
| 本稿をご覧になられている方は、これまでの Lesson で、タグの単独での使い方を学ばれたと思います。 |
| 今まで学ばれた知識で、ホームページを作成する事は可能ですが、一歩進んで、見栄えのするホームページを、レイアウトテクニックによって実現しましょう。 |
| 本稿では、tableタグを使用したレイアウト、CSSを使用したレイアウトの解説をします。 |
|
| table要素を詳しく学びたい方 |
|
⇒ 基本構造
⇒ キャプション( 表題 )
⇒ 罫線
⇒ 背景
⇒ 余白
⇒ 表の大きさ
⇒ 表の表示位置
⇒ セル内の表示位置
⇒ テキストの折り返し禁止
⇒ セルの結合
⇒ 表の構造（グループ）化
|
|
| ⇒ CSSレイアウトを詳しく学びたい方はこちら |
| ■ table レイアウト |
|
 ソース |
<body>
<table width="728">
<tr><td colspan="2">
<table width="100%" border="0">
<tr><td width="40%" height="60" style="background:Wheat">サイトタイトル</td>
<td style="background:AntiqueWhite">タイトル右ボックス</td></tr>
</table>
</td></tr>
<tr><td width="500" height="400" style="background:#ffffff" align="center">
メインとなる内容
</td>
<td width="228" style="background:Beige">
メニュー
</td></tr>
<tr><td colspan="2" style="background:Wheat" height="60" align="center">
フッター
</td></tr>
</table>
</body>
|
|
 表 示 |
⇒ 別ウィンドウが開きます。
|
|
赤、太字の部分がレイアウトに関する箇所です。
ページ最上部のように、table要素内に、table要素を記述する事もできます。 |
|
| ページトップへ |
|
| ■ CSS レイアウト |
|
| 上記のtableレイアウトと類似したページを、CSSレイアウトで実現します。 |
| ソース スタイルシートの記述 |
* { margin : 0 ; padding : 0 ; }
#mainbody { width : 728px ; }
.header_a { float: left; width: 291px; height: 60px; background:Wheat; }
.header_b { float: left; width: 437px; height: 60px; background:AntiqueWhite; }
.box_a { float: left; width: 500px; height: 400px; background: #ffffff; text-align: center; }
.box_b { float: left; width: 228px; height: 400px; background: Beige; }
.footer { clear: both; width: 728px; height: 60px; background: Wheat; text-align: center; }
|
| ソース body要素に記述する部分 |
<body>
<div id="mainbody">
<div class="header_a">
サイトタイトル
</div>
<div class="header_b">
タイトル右ボックス
</div>
<div class="box_a">
メインとなる内容
</div>
<div class="box_b">
メニュー
</div>
<div class="footer">
フッター
</div>
</div>
</body>
|
|
|
| 表 示 |
⇒ 別ウィンドウが開きます。
|
内容の縦方向の表示位置が異なりますが、レイアウトは、tableレイアウトでの表示と、ほぼ同じです。
div要素は、ブロック要素、インライン要素、テキスト、画像を内側に記述できる要素なので、レイアウトによく使われます。 |
| 例えば、メニューは箇条書きにする事が多いので、リストを使うと、ページがすっきりとまとまります。 |
| ⇒ リストの解説ページ |
|
| ページトップへ |
|
| ■ 使い分けなど |
|
| 本来、HTMLは論理構造を記述し、CSSは視覚的構造を記述するものであり、table要素でのレイアウトはその目的から外れた記述の為、近年ではあまり使われなくなっているレイアウトテクニックです。 |
| しかしながら、CSSは、最新のバージョンのブラウザではサポート状況も向上し、使いやすくはなってきましたが、古いブラウザのサポート状況は必ずしも良いとは言えず、CSSレイアウトをページに適用する上で、重要な指定も、サポートされていなかったり、解釈が異なったり、バグとも言える不具合もあります。 |
| そのため、企業サイトでも、tableレイアウトを採用している事があります。 |
では、tableレイアウトと、CSSレイアウトの線引きはどこでするのが最良の方法なのでしょうか？私が思う線引きのカギは、
アクセス解析 だと思います。訪問者のブラウザ状況の解析を行う事により、訪問者の環境によっての線引きができます。 |
| それが面倒であるならば、ブラウザの HTML , CSS のサポートに頼らない、数年前のレイアウト ( p や div 要素を縦に並べ、センタリング ) を採用するか、カラム落ちなどのレイアウトに関して重大な記述ミスの心配の無い table レイアウトを採用し、シェアの多い、IE 6.0、IE 7 を軸に、他のブラウザでは、サイトの公開したい情報の意味が最低限伝わるレイアウトを心がける事だと思います。 |
| その他、table レイアウトで気をつけたいのは、メニューの位置です。 |
| これは、ホームページを作成する上で、SEO ( サーチエンジン最適化 ) と言う言葉を、耳にされた方も多いと思います。いわゆる、ロボット型検索エンジンの特定のキーワードにおいて、上位表示させる為の工夫やテクニックを言います。 |
 |
ロボット型検索エンジンは上から順にソースを読み込んで行き、ソースの上の方にあるテキスト中のキーワードとなる単語を重要視して拾います。
キーワードを拾う際に重要視する場所は、head要素内、body要素内と、各検索エンジンにより異なりますが、ソースを上 ( 一行目 ) から読み込む点は共通なので、キーワードを含まない ( あるいは重要なキーワードが少ない ) メニューであるならば、画面右側に配置するようにします。
逆に、キーワードを多く含むメニューであるならば、ページの上、又は左側に配置するようにします。
メニューの位置に関して、table レイアウトと、CSS レイアウトの使い分けは…と聞かれると、私は、CSSレイアウトをお勧めします。
|
|
| これは、検索エンジンが読み易い ( 理解が容易な ) ソースである事が、SEO対策のひとつであると考える私は、CSS レイアウトは、ソースの上に位置する head 要素に、レイアウトを記述できるので、検索エンジンのクローラに、そのサイトのレイアウトを先読みさせ、body 要素に記述した内容を上から順に、はめ込めば良いので、作業が分割化でき、クローラも理解し易いのでは無いかと思います。 |
| table レイアウトは、レイアウトを読み込みながら、内容を読み込むので、一見効率が良いように思えますが、それは、人間の感覚であって、プログラムは、作業をある程度分割し、結果を出力する方が得意なのです。 |
|
|
|
| table レイアウト、CSS レイアウトの使い分けとは少し話がそれますが、いまさらHTML,CSS講座は、table レイアウトを採用していましたが、現在では、CSS レイアウトに変更しています。 |
| table レイアウトでは、画像 1 の赤丸で印をつけてある box の配置は、画像 2 でしたが、CSSレイアウトに変更した際に、画像 3 の box の上部に配置し直しました。表示上は、殆ど変化していませんが、組み方の違いが分りますでしょうか？ |
|
|
| 画像 1 の赤丸で囲った画像は、少し重い画像で、表示速度に若干の遅れがあり、画像が配置されている box 以下の box ( 画像 4 の灰色部分 ) が遅れて表示されていました。 |
| 画像 5 の灰色箇所は、レイアウト変更後に、遅れて表示される箇所を表しています。 |
| 画像 4 をご覧頂くと、特に 当サイトの、キーワード を多く含む Main の box が、重い画像の後に読み込まれ、次に Menu の box が読み込まれている事がお分かり頂けると思います。 |
| 画像 5 のレイアウトに変更後は、サイト説明文の Header box に続き、Main の box が読み込まれているので、変更前のレイアウトに比べ、多くのキーワードとなるテキストが早い段階で読み込まれている事になります。 |
| また、重い画像より先に、Menu の box が表示される点から、CSSレイアウトが、先に指定したサイズの分だけ、場所を内容を読み込む前に確保している事になります。 |
画像 4 |
画像 5 |
|
|
| 最近の有名ロボット型検索エンジンは、精度も上がり、また、インターネット環境もますます高速化し、些細な事かもしれませんが、この些細な事の積み重ねが、SEO にとって大切な事だと思います。 |
|
| ページトップへ |
|
| ■ 後書きみたいなもの |
|
| さて、8 ページもの Lesson、お疲れ様でした。また、筆者の拙い解説にお付き合い頂き、感謝致します。 |
| ホームページ作成の初心者の方にも理解しやすい内容での記述を心がけてまいりましたが、Basic Lesson という事で、解説を絞って行いましたので至らぬ点もあるかと思います。 |
| 皆様の更なる知識の向上の為に、いまさらHTML,CSS講座では詳しい解説を行っておりますので、HTML,CSS 辞書、事典、覚書などにご活用頂ければ幸いです。 |
また、Lesson 実践編 として、実際にトップページを作る Lesson をご用意致しました。
⇒ 宜しければ、こちらへお進み下さい。
⇒ サンプル用に作成するトップページはこちら |
| 皆様のホームページの益々の御活躍、御発展をお祈り致しますとともに、今後ともいまさらHTML,CSS講座を宜しくお願い申し上げます。 |
|
|
Lesson1 >>
Lesson2 >>
Lesson3 >>
Lesson4 >>
Lesson5 >>
Lesson6 >>
Lesson7 >>
Last Lesson >>
Lesson 実践
|
|
|
|
|
|
