.
SEO に関連する記事 => HTML を採点する > 1-2.HTML/CSS分離のメリット ~ HTML-lint 導入目的
Linux 活用ガイド:目次

サーバ構築ガイド

レンタル ガイド

ショップ 構築ガイド

情報漏洩対策

CSS と HTML (文書構造)を分ける事で得られるメリット

CSSに関してはいろんな雑誌やWebサイトで説明されています。どのような立場で説明されているのか分からなければ、単にCSSとはそういうものだと一部分を解釈してしまいがちです。

例えば、制作、保守、管理に関するメリットは、訪問者にとっては関係のない話です。このようなCSSの部分的な解釈は、CSSとはそういうものだと誤解する原因の一つになっているような気がします。

それぞれの視点からみたHTML/CSS分離のメリット

いくつかの視点でメリットを考えてみました。

訪問者(ユーザー)

  • アクセシビリティ向上により、視覚障害のある方でも音声ブラウザによる情報提供が可能になります。
  • レイアウト要素を外部CSSとした場合、通常のブラウザのデフォルトではセッションに一度CSSを読み込むだけで済むため、同一セッション内、又はセッション中にCSSが変更されない限りは、文章のみのHTMLを読み込むだけで済みます。これにより、ダウンロードが速くなるだけでなく、ブラウザの表示速度も速くなります。
    • MacIE-5 のように、CSSが変更されてもCSSを読み込み直さないブラウザもあります。

企業

  • アクセシビリティに貢献するため、全ての人に平等に情報を提供できます。社会貢献というより義務と考えています。
  • 外部CSSとする事でHTMLが軽量化するため、1日に10万アクセスもあるようなWebサイトではトラフィック軽減に貢献できます。

制作者

  • (X)HTMLソースコードがシンプルになるため、PHPやCGIなどWebアプリケーション開発に適します。
  • 外部CSSとする事でレイアウト要素を共有でき、外観を一括変更する事が出来ます。
  • CSSを使用したレイアウト・デザインではタグごとに外観を定義することが可能なため、CSSを共有しているページではデザインフォーマットを統一、強制する事が出来ます。一貫性を保ています。
  • 制作を行う前に、更新作業のことを想定したCSSのルールを視野にいれる必要があります。

全て

  • 論理構造が明確になるため、検索エンジン等のアルゴリズムにマッチしやすくなります。これはSEOを重視する企業・Eサイト、訪問者にとってのメリットでもあります。
  • CSS2に準拠したブラウザであれば、異なるブラウザでほぼ共通の外観を提供する事ができます。2005年の現状では、CSS2 が勧告(1998年)されて間が無い2000年ごろのブラウザ対応状況は状況は変わっています。
  • Web標準化によりインターネット全体の発展に貢献します。特定のブラウザ、特定のユーザーしか閲覧できないネット社会では、平等な競争原理はなく、市場も育ちません。

ブログが検索エンジンで上位表示され易いという話は良く聞きますが、HTMLとCSSを分離し、文章構造のはっきりした(X)HTMLを出力されるようになっているケースが多いのも理由の一つです。(ブログツールの出来やテンプレート(HTMLの出来)にもよりますが、) 

このため、HTML/CSSに関する専門知識のない人でもSEOを意識する必要がないメリットがあります。しかしカスタマイズにはCSSに関する知識が要求されます。

他、ブログサイトがSEO的に有利な理由は、各ページ毎に関連性のあるリンクが張れるトラックバックの恩恵があります。

これらは、HTML(論理構造)とCSS(レイアウト要素)を分離することで得られるメリットであり、単に異なるブラウザで共通のデザイン(見栄え)を提供するための規格ではない事が分かると思います。

HTMLを採点する


.
おすすめ度の平均: ゲージ
ゲージ CSSデザインのお供に
ゲージ 実際にすぐに使える内容
ゲージ ブラウザのバグを逆手に取ってのバグ回避テクは、本当に感心する。

CSSを積極的に利用したWebコンテンツ制作を考えている方にお勧めの書籍です。特に、WebデザイナーなどWebコンテンツ制作者が、CSSによるWEBデザインを行う上で重要なポイント、テクニックが惜しげもなく紹介されています。

WEB制作者にとって異なるプラットフォームでの検証は関心事項ですが、CSSはブラウザによって解釈が異なる部分があります。これらの回避方法なども紹介されているのも素晴らしいと思います。

.
.
おすすめ度の平均: ゲージ
ゲージ 『DTD での要素の定義』が役に立ちました
ゲージ 見やすくなってさらにパワーアップ
ゲージ 至高の中級者向けリファレンス

HTML4.01、XHMLのDTD(文書型定義)の解説から、CSS2.0 など仕様に則ったページ制作に必要とされる知識がわかり易くまとめられています。

HTMLの基本的なタグの解説から、複数のブラウザに配慮したページの作成に必要な情報など、幅広くサポートしています。

アクセシビリティを意識したい方や、Webサイトを制作を生業にしている方で、市販のHTMLエディタでしかホームページを制作できないような方にお勧めの書籍です。

.
bottom_mark
ページ最上部
ページ最上部 前のページ