Web標準でホームページ作り

見た目は変らずとも、作り方の違いから影響が…！

「ホームページはどういう作り方をしても、見栄えがおかしくなければかまわない」と、考える方もいらっしゃるでしょう。しかし、作り方が違うとSEO対策にもマイナスになり、ユーザビリティ・アクセスビリティも良くありません。さらに、ファイルサイズも大きくなり、トラフィックの増大に繋がり、将来的な拡張性も望めません。
では、Web標準とはどういう作り方なんでしょう？

▲Up

旧来のホームページ作りから脱却！

まず、ホームページは(X)HTMLとCSSで構成されていますが、つい最近まで、テーブルタグでのテーブルレイアウトが主流でした。つまり、『(X)HTMLのマークアップタグでデザイン』という文書構造の中にデザインを混在させた作り方でした。
実を言いますと、当ヒラサイトも以前はそのような作り方をしておりました。（当時はほとんどの制作会社がそうでした。）しかし、『(X)HTMLの論理構造とデザインは切り離す』という流れから、文書構造と視覚的デザイン（＝CSS）に分離した構築方法に、いち早く切り替えております。
しかしながら、このような過渡期の時代の中で、まだまだ従来の構築方法から脱せない制作会社も多数あることも事実です。ホームページをリニューアル、または新たに構築されるなら、今まさに、Web標準準拠で構築できる制作会社を選ぶことが重要になったと言えます。

ヒラサイトは、Web標準準拠での制作をすすめております。

▲Up

貴社のホームページは文法どおり、記述されていますか？

(X)HTMLがWeb標準の文法どおり記述されているか、W3Cのバリデーションサービスで検証することができます。
それと同時に、W3CのCSS検証サービスでCSSについても調べてみましょう。

Web標準準拠で記述していればグリーンの帯になります。赤い帯なら、記述ミスがあるということです。

検証の結果Web標準準拠で記述していれば、下図のような証拠のアイコンをそのホームページに表示することもできます。

W3Cのバリデーションサービスで貴社のホームページもお調べになりませんか？

▲Up

文書構造とデザインの分離について

Web標準では、『(X)HTMLによって文書に適切なマークアップを施し、CSSはデザイン担当』というスタイルが基本となります。

つまり、(X)HTMLは文章の『論理構造を適切にマークアップする』のみ、デザインはCSS（カスケードスタイルシート）で記述するというものです。

文書構造のマークアップは現時点で、HTML4.01またはXHTML1.0です。どちらを選ぶかは制作者の自由と同時に、環境に左右されることもあるでしょう。しかし、いずれにしても(X)HTML文書の中に、デザイン的要素の記述は極力避け、デザイン要素はCSSに委ねるべきです。

▲Up

具体的な記述

例えば、大見出しとして赤の文字で『ホームページ』を記述するとしましょう。
以前は、 HTMLファイルに直接、デザインの要素を入れ込んでいました。

<h1><font color="red">ホームページ</font></h1>

このような推奨されない書き方でした。

しかし、現在では(X)HTMLの記述は

<h1>ホームページ</h1>

デザイン要素である色の設定は、CSSで記述します。

h1 { color:red; }

CSSの記述は、ファイルの中に直接記述する方法と、ヘッダ部分に記述する方法と、CSSファイルとして別ファイルを用意し、読み込ませる方法があります。

▲Up