web標準に準拠したwebサイト作りを
ここでは、当サイトで「<font size="">」や「<font color="">」などのタグや、ページレイアウトを決めるのにtable要素を使う方法について説明しない理由を書いています。そんなのどうでもいいわという人は読み飛ばしてください。
web標準とは？
W3CやISOなどが定める標準的なWorld Wide Web関連技術のことです。
2006年9月時点、ウェブ標準の明確な定義は存在しないといえます。そのため、ウェブ標準の定義は各人の考えによって揺れがあることが現状です。
web標準準拠の第一歩
一言で「web標準」といっても、上述したように明確な定義がされていないため人によって、またその時々のトレンドによって変動しています。まずは「仕様に従った文法での(X)HTMLとCSS」でサイトを構築し、文書構造とレイアウトを分離させることを目指しましょう。
文書構造とレイアウトの分離のメリットデメリット
文書構造とレイアウトの分離とは、簡単にいえばサイト内容はHTMLで、デザインや配色などの装飾はCSSでやりましょう、ということです。文字サイズや文字色を変更するのに「<font size="">」や「<font color="">」を使ったり、ページレイアウトを決めるのにtable要素を使ったりしていた人はいったんそれらの知識を捨てましょう。
文書構造とレイアウトの分離（フルCSSレイアウト）のメリット
- 閲覧者にとって
- HTMLに余分なテーブルやデザインタグがないから、ページのサイズは小さく読み込みが早くなる(＝表示も早くなる)
- レイアウト要素を外部CSSとした場合、ユーザーのブラウザーがスタイルシートをいったん取り込んでしまえば、閲覧する各ページにキャッシュが適用される。これにより、ダウンロードが速くなるだけでなく、ブラウザの表示速度も速くなる
- アクセシビリティ向上により、視覚障害のある方でも音声ブラウザによる情報提供が可能に
- サイト作成者にとって
- テーブルレイアウト等よりも「あらゆる環境でのアクセスを想定した人に優しい サイトを目指す」ことができる。
- 外部CSSとする事でHTMLが軽量化するため、アクセス数が膨大なWebサイトではトラフィック軽減に貢献できる
- 外部CSSとする事でレイアウト要素を共有でき、サイトの一部や全てのデザインを変更したい時は、CSSだけを書き換えれば、各ページを全部書き換えたり細かいタグを変更する必要なし。
- CSSを使用したレイアウト・デザインではタグごとに外観を定義することが可能なため、CSSを共有しているページではデザインフォーマットを統一、強制する事が出来、一貫性を保つことができる
- SEOの観点から
- 論理構造が明確になるため、検索エンジン等のアルゴリズムにマッチしやすくなる。また、検索エンジンにもよるが、コンテンツがシンプルですっきりしたサイトは、インデックス化の際に有利に働く
文書構造とレイアウトの分離（フルCSSレイアウト）のデメリット
- テーブルレイアウト等、従来の方法でできたことがCSSでできない場合も有。
- ブラウザ間のCSS解釈の違いで表示が微妙に異なる場合も有。
- WYSIWYG式エディター(ホームページビルダー等)で編集すると崩れる場合も有。
HTML・CSS基礎
HTML基礎
仕様に従った文法でのValidなHTMLを記述するための基礎知識です。
