実例１をテーブルレイアウトと比較してみる
HTML＋CSSの２カラムのページを紹介しました。
今回は、まったく同じページを
テーブルレイアウトで作成してみました。
二つを比較することで、
どうしてHTML＋CSSなのかを考えてみます！
今回はテーブルデザインですが、前回とまったく
同じページデザインです。
ちなみに、今回はホームページビルダー８で
作成したものです。
HTMLソース↓
<BODY>
<CENTER>
<TABLE width="700" height="50" bgcolor="#000000">
<TBODY>
<TR>
<TD colspan="2" height="50" bgcolor="#cccccc" align="center"><FONT size="+0">タイトルなど</FONT></TD>
</TR>
<TR>
<TD width="150" height="500" align="center" bgcolor="#ffffff">メニュー等</TD>
<TD width="500" height="500" align="center" bgcolor="#ffffff">メインコンテンツ</TD>
</TR>
<TR>
<TD colspan="2" width="700" height="50" bgcolor="#cccccc" align="center">著作権情報等</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
</BODY>
ここで注目するところは、
「メインコンテンツ」よりも先に
「メニュー等」が記述されているところです！
前回のHTML＋CSSでは、
「メインコンテンツ」が先に記述されていました。
基本的にテーブルデザインの場合、
先に左側のセルから記述することになります。
だから、このページの場合は先にメニューになるのですね。
しかし、テーブルを使わない２カラムのデザインの場合は、
先にメインコンテンツから記述することが出来るのです。
これは、３カラム（３段組）のページになっても、同じです。
先に中央のメインコンテンツから記述が可能になるのです。
それでは、メインコンテンツから記述できるメリットは何なのでしょう。
いくつかあると思いますが、一番のメリットは…
【検索エンジンのクローラーに、
先にメインコンテンツの情報を取得させることができる】
という点でしょう！
クローラーの中には、
ページを最後まで読まずに途中で打ち切ってしまうものや、
先に記述されている文章ほど重要度が高い文章だと判断する
ものもあります。
そして、現在のSEO対策では、
<body></body>の１行目〜１０行目（または１行目、２行目）を
重要視すると言われています。
また、HTML＋CSSでデザインしたページのHTMLソースの方が、
自然と文章が構造的になります。
構造的なHTMLはSEO対策として有利に働くと言われてます。
つまり、「テーブルデザイン」と「HTML＋CSSによるデザイン」を
比較してみると、
「HTML＋CSS」の１つのメリットとして、
SEO対策に有利
であることが言えます。
▼ 稼げる情報ランキングはこちら
