Category : Design
Web標準を目指せ
2007-01-12
Design
webstandards
「Web標準」って聞いたことありますか。
「Web標準」を具体的な制作の場面で言うと,
- 文書の構造表現を(X)HTMLで
- 視覚表現(見た目)をCSSで
この2つをはっきりと分ける,ということになります。
文書の構造としては,まずタイトルがあり,見出しが大きいものから順につき,それぞれの見出しの下に本文があり,それは段落があったり,箇条書きがあったり,図表があったり。
見出しの部分は「見出し」であることが分かるように(X)HTMLで表現する。h1,h2,h3,...ですね。その見出しの文字の大きさだとか色だとか,あるいは枠で囲うか背景を塗りつぶすかといったことは(X)HTMLには書かずに,CSSで書く。
<font size="+2" color="#990000"><b>見出し</b></font>
とは書かないで,(X)HTMLには
<h3>見出し</h3>
と書き,CSSで
h3 {
color: #990000;
font-size: 140%;
font-weight: bold;
}
というふうにする。
ぼくが,実際にWeb標準を意識したサイト作りをするようになって感じたメリットです。
とても効率的に見た目のデザインを変更できます。
それぞれの(X)HTMLファイルからCSSファイルを読み込んでいるのですが,(X)HTMLファイルが何十枚,何百枚あろうと,共通して読み込んでいるCSSファイルを書き換えるだけで,すべてのページの視覚的なデザインを変更できます。
制作過程でデザインの修正や変更もよくあります。(X)HTMLファイルがちゃんと作ってあれば,CSSファイルの特定の箇所を書き換えるだけで済むので,作業効率は格段にアップしました。
サイトリニューアルの場合も,従来のサイトの(X)HTMLの記述をそのまま流用して,CSSで見た目のデザインを作っていけるので,過去の資産が活用できます。
SEO上の効果が期待できます。
検索エンジンの検索結果表示では,検索語句がどこに書かれているかによって順位が変わります。どんな(X)HTMLタグに挟まれているかが解析されるのです。たとえばtitle,h1,h2,h3といった要素に含まれている場合,pなどに含まれているものよりも重視されます。a要素のhref属性に書かれるURIやa要素に含まれるテキスト,img要素のalt属性なども検索結果に反映されます。(X)HTMLをきちっと書けば,文書の内容が適正に解析される,ということです。
(X)HTMLファイルがすっきりシンプルになります。
なんといっても,これが,ぼくにとっては気持ちがいい。
益子さんの「Web標準の教科書―XHTMLとCSSでつくる"正しい"Webサイト」参考にさせていただいています。初心者にはちょっと難しいですが,ウェブサイト制作の技術的な部分の動向がよく分かります。
あちこちで提供してくれている無料ブログサービスやMovableTypeなどのブログツールは,Web標準を意識して作られているので,下手に自前でウェブサイトを制作するよりも,ずっと良いサイトができあがったりします。

見出しの階層をちゃんとする