ブログ

[コレが気になる!]

スタイルシートレイアウトの4つのメリット

文/イーナチュラル :: 2005.11.09

通常、ホームページは「HTML」で作られています。
ページのレイアウトは最近まで、HTMLタグの中でも「テーブル」タグが利用さ
れているケースが多かったようです。
しかし、SEOやアクセシビリティに注目が集まり、本来テーブルタグは「表」を
作成するためのタグということもあり、標準化団体「W3C」によって、「スタイ
ルシート」によるレイアウトへの移行が推進されています。ではスタイルシー
トによるレイアウトでは一体なにが良いのでしょうか。

1)デザイン要素の共通化
たとえば、

<h1>見出し</h1>

というズバリ見出しになるテキストに対しての装飾は、スタイルシートで

h1 { デザイン要素 }

と指定しておくことで、毎回画像や色を指定する必要がなくなり、<h1>タグで
テキストを挟む事で装飾されます。各ページで同じスタイルシートファイルを
利用していれば、スタイルシート内のh1タグのデザイン要素を修正することで、
全ページの見出しのデザインが一括で変更されます。

2)HTMLが簡潔に
テーブルタグによるレイアウトでは<table>、<th>、<tr>、<td>などのタグが何
度も繰り返され、細かいデザイン制御のために何重にも入れ子になっている事
も多く、HTMLコードの一覧性に欠けていました。制作者でも把握が大変で、大
部分をオーサリングソフトに頼ることになります。
スタイルシートでは背景画像や配色、ボーダーなど多くのデザイン要素を、外
部ファイルに置いておくことが出来るのでHTMLは非常にスッキリします。

3)HTMLの修正が楽に
スタイルシートでレイアウトされたHTMLは、<h>:見出し、<p>:段落、
<ul><li>・<ol><li>:リスト、<strong>:強調、などのようにテーブルレイア
ウトでコンテンツが入る<td>に比べて、そのタグが何を示すのか、が判りやす
くなっています。
企業が自社内で更新をする場合にも、数種類のタグを覚えれば、ある程度の更
新が出来るようにすることも可能です。

4)SEOにも効果がある
SEOでは、<h1>見出し</h1>などの重み付けのあるタグ内のテキストや、コード
内でのテキストの位置など、HTMLの書き方ひとつとっても色々と影響する要素
があります。最近ブログがSEOに効果的だと言われているのは、ページを追加し
やすい事もありますが、ブログのテンプレートが多くの場合、スタイルシート
レイアウトでSEOに沿ったコードの書き方をされている。という点も大きく影響
しています。


ここまでは、良い事ばかりのようですが、移行期間である現時点では色々と問
題点も抱えています。最も問題なのはブラウザごとのスタイルシートの解釈の
違いです。特にシェアの高いインターネット・エクスプローラーでは、他のブ
ラウザよりも実装が遅く、多数のバグ、間違った表示等の問題を抱えているた
め、実際に制作を繰り返してノウハウを持っていなければ、多数のブラウザに
対応するスタイルシートを作ることが出来ません。

ホームページの用途によっては古いブラウザをサポートしなければならない事
もあり、メリットであるデザインの共通化が活かせない、もしくはスタイルシー
トが適用されている事が仇となることさえあります。また、上記のことから実
際の制作・運用ではスタイルシートの複雑化もあり、移行すれば全てが良くな
るとも言えないのが現状です。

それでも多くのホームページではスタイルシートレイアウトに移行することで
得られるメリットは決して小さくなく、これから構築やリニューアルをする際
には検討するべき項目だと思われます。

スタイルシートへの取り組みは、現在は海外で盛んになっています。
海外のサイトですがスタイルシートレイアウトのサイトを紹介するポータルが
ありますのでご紹介しておきます。

【CSS Vault】 http://cssvault.com/
【CSS Beauty】 http://www.cssbeauty.com/
【Stylegala】 http://www.stylegala.com/

2005.11.09


THEME

ARCHIVE


ブログトップへ

CONTACT USお問い合わせ

Webマーケティング・Web制作に関するご相談に、お答えします

ホームページからのお問い合わせ

お問い合わせ・ご相談

お電話でのお問い合わせ

03-6661-2210

平日9:30 - 17:30

BLOGブログ

MAIL
MAGAZINEメールマガジン

ホームページを
できる営業マンにする方法

顧客獲得・売上UP!を実現するWebマーケティング、セミナー、SEO対応ホームページ制作(サイト構築)、リスティング広告、アクセス解析など、実践型ノウハウ満載のWebマーケティングコラム。ビジネスブログやセミナー情報も。