ホームページ制作について

(X)HTML/CSS

最近のホームページ制作は、従来の<table>タグを使ったレイアウトから脱却し、XHTML+CSS(カスケーディング・スタイルシート Cascading Style Sheets)によるコーディングが主流となっています。

何が違うの?

従来のHTMLのみでは段組み(このページのように、右と左に別々のコンテンツを載せるような組み方の事)などの複雑なレイアウトが不可能で、そのまま素直に組むとただ縦に長いページしか作れませんでした。そこで苦肉の策として表組み用の<table>タグを利用し、擬似的に段組みを表現していました。しかしこれには問題がありました。

HTMLのタグには「意味」があり、例えば<h1>は最も大きな大見出し、<strong>は強調の意味があります。これらは<big>(大きな文字)や<b>(太文字)などを使用した場合と見た目は変わりありませんが、これらのタグには「意味」がありません。ただ「大きく」「太く」という見た目の指示のみなのです。

<table>は「表」という意味があるため表組みのみに使用すべきで、レイアウトに使用するのは正しくありません。また<table>による段組みでは、文章の現れる順番が前後したりして、音声ブラウザなどでは意味不明になる事がありました。

そこでHTMLタグ本来の意味に戻すべく、「見た目の指示と内容は分離すべし」と、CSSが誕生しました。CSSは文字やその他の色やサイズ、位置などを指定する命令文の集まりで、タグごとに指定することが可能です。これによりHTMLは、意味的に正しい組み方ができるようになりました。またXHTMLは、HTMLと基本的に違いはありませんが、より「意味に沿うタグを組む」事を目指して制定されたものです。

XHTML+CSSによる正しいホームページ制作の効果は、SEOに顕著に表れています。サーチエンジンのクローラーロボットは、ホームページの見た目にはまったく関与せず、中のテキストのみを読んでいきます。そのため、前後が狂ったり不要なタグが増えたりする<table>によるレイアウトでは、SEO的にかなり不利になるのです。よってこれからは、<table>によるレイアウトは消滅していくことでしょう。

XHTML+CSSで組めばすべてOK?

XHTML的に正しいかどうかは、W3CのMarkup Validation Serviceでチェックできます。しかし、これで正しい結果が出たからと言って、SEO的に問題がないかと言うと、そうでもありません。XHTML+CSSでも「意味不明なホームページ制作」は可能なのです。

ではその辺りのチェックはどうするかというと、テキストブラウザと言うものでホームページを見てチェックします。テキストブラウザとは、名の通りテキストしか表示しないブラウザの事で、このブラウザはJavaScriptやFlashはおろか、画像やCSSも一切無視します。この状態は、クローラーがホームページを見るのとほぼ同じ状態となります。クローラーがホームページをどのように見てるのかを見ることができるのです。

テキストブラウザで一番有名なのはLynxで、ホームページを作ったらまずバリデータにかけ、そしてLynxでチェックする、というのが常識となっています。Lynxは様々なOSに対応していますので、一度お試し下さい。

Arcturus
この書体は Arcturus — 欧文フォント買うなら MyFonts

Top