エントリー記事
W3C標準に準拠
W3C標準(*1)に準拠したWebサイトを簡単に説明すると、文書を適切にマーク付けし、見た目の指定をHTMLファイルから分離したものと言えます。もう少し具体的に言えば、HTML4.01またはXHTML1.0(*2)の仕様に準拠し、スタイルシートやJavaScript等文書とは関係のない部分を外部ファイル化したものです。
W3C標準に準拠することによるメリットを次に挙げてみます。
- あらゆる環境からのアクセスが可能
W3Cの仕様に準拠した記述を行うことで、あらゆる環境からのアクセスが可能になります。広く普及しているInternet Explorerは文法的に寛容なため、仕様に準拠していないWebサイトもほとんど問題なく表示されますが、利用環境によってはWebサイトの閲覧に支障をきたす場合があります。
W3Cの仕様の詳細は、次に紹介するWebサイトを参照ください(*3)。
- HTML 4.01 仕様書邦訳
- W3Cにより策定されたHTML4.01の仕様書を、原本に忠実に日本語訳しています。翻訳の正確性は保証されていませんが、参考資料としての価値は充分です。
- XHTML 1.0 仕様書翻訳
- W3Cにより策定されたXHTML1.0の仕様書を、原本に忠実に日本語訳しています。翻訳の正確性は保証されていませんが、参考資料としての価値は充分です。
- NEXTindex
- 数あるHTML及びCSSの解説サイトの中でも秀逸なサイトです。W3Cの仕様書に忠実な解説もさることながら「スピードラーニング」のページは初心者向けにわかりやすく、HTML4やXHTMLについても仕様書に忠実に解説しています。
- the W3C Markup Validation Service
- HTMLやCSSの仕様書を策定しているW3Cが提供するHTML文法チェッカーです(*4)。文書が宣言している文書型に適合しているかどうかを検証することができます。
- Another HTML-lint
- HTML文法チェッカーとして利用できるだけでなく、文書型で定義されていない事柄もチェックしてくれる高機能なチェッカーです。結果は100点を満点とした減点法で採点されます。
- W3C CSS 検証サービス
- HTMLやCSSの仕様書を策定しているW3Cが提供するCSS文法チェッカーの日本語訳版です。スタイルシートが仕様に適合しているかどうかを検証することができます。
- 情報をわかりやすく伝えられる
見出しや強調等適切なマーク付けを行うことにより、スタイルシートが無効な環境や音声ブラウザにおいても文書構造を伝えることができます。
- 文書ファイルの軽量化
見た目を外部ファイルで定義して文書ファイルから分離することにより、ページが軽くなり読み込みが早くなります。とりわけ携帯電話環境においてはパケット代の軽減につながり、訪問者に無駄な出費をさせずに済みます。
- 検索エンジン最適化(SEO)
物理的にフォントの大きさや色を変えても、検索エンジンは語句の重要度を認識できません。見出しや強調等の要素で適切にマーク付けを行うことにより、重要な語句を検索エンジンにも認識させることができます(*5)。
また、CSS及びJavaScriptの記述は検索エンジンにとって意味を為さず、テキストの価値を相対的に下げてしまいます。不要な部分を外部ファイル化することによりテキストの価値を相対的に上げ、検索で上位にランクされる可能性を高めることができます。
- 管理者の負担軽減
CSS及びJavaScriptをHTMLに直接記述している場合、修正を行う際に全てのファイルを書き換える必要があります。同一の外部ファイルを参照することにより、1つのファイルを修正するだけで全てのページを変更することが可能となり、管理更新の負担を軽減することができます。
W3C標準に準拠することは、訪問者への配慮に留まらず管理者にも有益です。日本ではW3C標準への取り組みは遅れている感が否めませんが、アメリカにおいては官公庁や企業サイトを中心に取り組みが進んでいるようです。
【注釈】位置関係や形状、色の情報
情報を伝える際に、位置関係や形状、色の情報はとても役に立ちます。しかし、利用環境によっては内容が正しく伝わらない恐れがあります。
- 利用環境によっては、位置関係が崩れる場合があります。例えば画像の解説をする際に「左の画像は…」と記述した場合、表示画面の小さい携帯電話環境においては画像が「左」ではなく「上」にあるかもしれません。
- 利用環境によっては、形状を認識できない場合があります。携帯電話環境やナローバンド環境(*1)のユーザーを中心に、画像を読み込まないユーザーが居ます。これらのユーザーには、画像による形状の情報は伝わりません。
- 利用環境によっては、色を認識できない場合があります。また、印刷を考慮する必要のあるコンテンツの場合には、ユーザーにカラー印刷を強要してしまう恐れがあります。
- 音声ブラウザのような非視覚系環境においては、位置関係や形状、色の情報は全く伝わりません。
位置関係や形状、色の情報は、閲覧者の理解を助ける有効な手段ですが、それだけに依存しない記述をすることが望ましいでしょう。
【注釈】フレームにおける問題点(後編)
前編でもフレームの問題点を挙げましたが、後編ではインラインフレーム(iframe)要素にも関連した問題点を挙げていきます。
- 印刷
利用環境によって印刷の仕方が異なります。
同じWindows環境であっても、使用するブラウザにより印刷の仕方が異なります。多くの場合、ページ全体を印刷しようとするとうまく印刷されません。印刷したいフレームを閲覧者に選択させる必要があり(*1)、フレームを採用しないWebサイトと比べて作業が困難になってしまいます。
- 検索エンジン
検索エンジンにおけるランクづけの要因は様々ですが、次の2点も評価の対象となっているようです。
- 本文中にキーワードが含まれている
- 多くのサイトからリンクされている(*2)
フレームを採用しているWebサイトの場合、トップページにたくさんリンクしてもらっても、トップページのHTMLファイルは通常フレーム分割の定義しか指定されておりません(*3)。肝心のキーワードは別のHTMLファイルに記述されているため、検索で上位を狙うことが困難になってしまいます(*4)。
- 非対応環境
携帯電話環境等フレームに対応していない環境が存在します。noframes要素(*5)で適切にナビゲーションを行いましょう。フレーム初期設定時の中身へのリンクを用意するだけでも、訪問者は全てのリンクをたどることが可能になります。
<noframes>
<body>
<ul> <li><a href="menu.html">メニューへ</a></li>
<li><a href="main.html">メインページへ</a></li> </ul>
</body>
</noframes>また、音声ブラウザのようにフレーム文書を容易に閲覧できない環境が存在します。frame要素にtitle属性及びname属性(*6)を指定することによりフレームの内容を伝えることができます。
<frame src="menu.html" title="メニュー" name="menu" />
<frame src="main.html" title="メインページ" name="main" />これらの問題点は、インラインフレーム(iframe)要素にも同様に当てはまるでしょう。
<iframe src="renewal.html" title="更新履歴" name="renewal" width="300" height="300">
<a href="renewal.html">更新履歴</a>
</iframe>
このように、フレームは数多くの問題点を抱えています。解決方法はいくつかありますが、ここではスタイルシートによる擬似フレーム化を紹介します。但し、印刷の際にoverflow:scroll;(*7)が適用されないよう注意する必要があります。
【参考】印刷用CSSの導入
- スタイルシート
@media screen{ .scroll{ overflow:scroll; height:100px; } }- 表示例
私がハンドルネームを「セロリ」としたのは、イメージカラーを緑色にしたいと思ったからです。目に優しい緑色のように、私自身優しくなれればという思いをこめています。野菜の名前として広く認知されており、読み間違えられる恐れが少ないことも考慮しています。
理由は他にもあり、機動戦士ガンダムZZに登場するお笑い系(？)キャラクター「マシュマー＝セロ」にも関連づけています。が、ガンダムに興味のない人にも親しみをこめていただけるように考えた結果、「セロリ」という名前に決まりました。
この方法ではメニュー部分を複数のページで共有することはできませんが、フレームの抱える問題点を解決する手段として有効です(*8)。
【注釈】