Web標準とその周辺技術の学び方

第2回 仕様書に沿ったページを作るために

この記事を読むのに必要な時間:およそ 2 分

前回はW3Cの役割やプロセスがどのようなものであるかをお伝えしました。では、仕様書に書かれている通りにHTMLやCSSを書くために、どのようなことを行えばいいのでしょうか。

仕様書を読めば解決!だけど英語……

「仕様書に書かれている通りにHTMLを書きたいんですが……」
「じゃあ、仕様書を読めばいいよ。」

と、一言で済ませられれば楽なのですが、あいにくそうもいきません。仕様書のほとんどが英語で書かれているため、私たち非英語圏の人間にとって、仕様書に書かれてあることの意味をくみとることはおろか、読むことにも多くの時間をとられてしまいます。

というわけで今回は、「仕様書にあまり触れないながらも、仕様書に沿ったコードを書く」ための方法について考えてみたいと思います。

さまざまなリソースに触れて理解を深める

まずは、本やWebにある仕様書についての解説をあたってみましょう。莫大な数の情報が公開されているWebでは、同じ悩みを持っていた人が、ホームページやブログに解決策を書いて公開していることも多く、有用なリソースになります。また、仕様書に興味を持っている人が、その仕様書を翻訳したり、解説を作成していることもあります。

とはいえ、その情報が信頼に足るものなのかを判断することは難しく、ましてやこれから理解しようとする人にそれを強いるのは間違いというものです。そこで、いくつか「これはいいな」と思うものをピックアップしてみました。

HTML関連リソース

HTMLやXHTMLの仕様は,有志によって日本語訳が公開されています。他にも仕様書の意味をきちんと解釈した上で解説しているWebサイトや本などもあります。

HTML 4.01仕様書(日本語訳)
HTML 4.01の日本語訳です。XHTML 1.0などでは要素の定義などをHTML 4.01に依存しています。ということで「この要素は何に使えばいいの?」といった疑問を持った方は、HTML 4.01の仕様書をあたってみましょう。
ごく簡単なHTMLの説明
「ユニバーサルXHTML・HTML」著者の神崎正英氏が、自身のWebサイトで公開しているHTMLの説明です。各要素についての概要や書き方のアドバイスなど、数多くのリソースが公開されています。仕様書の情報を元に学習したいという方に特にお勧めしたいのが、「仕様書に見るHTML」です。
実践 Web Standards Design
Web標準に準拠したWebサイト構築法について解説されている本です。著者の方が「仕様を意識した解説」を気にかけていることからも分かるとおり、随所に仕様への参照を含んだ本になっています。

CSS関連リソース

CSS 2.1は策定中ということ、また巨大な仕様書ということもあり、日本語訳が存在していません。CSS 2.0仕様の日本語訳は存在しますが、CSS 2.0仕様から大きく変更された部分や、明確でない部分が多く存在するため、参考にするのはあまりおすすめできません。

幸いなことに、CSSでわかりにくいボックスモデルや、フロートやマージンの折り畳みなどの概念については、質の高い情報が公開されています。

正しい知識を得たい人の爲のCSS2リファレンス
テキストの内容はCSS 2.0を基にしていますが、CSS 2.1で変更のあった部分に関して言及があるなど、CSS 2.1への導入も行われています。
CSS 2.1のエッセンス
ボックスモデルやその配置など、CSS 2.1で明確化された部分に関して、またCSSの重要な概念に対して説明が行われているリソースです。
セオリー・オブ・スタイルシート
先ほどの「ごく簡単なHTMLの説明」を公開している神崎正英氏が執筆者の一人として加わった、CSSの解説本です。CSSの紹介がある前半部は、CSS 2.1仕様を元にしています。

「習うより慣れろ」で、書いて覚える

しかしながら、読むだけでは眠くなってしまいますし、自分がどれだけ分かっているかを確かめることはできません。そのため、実際に書いて覚えることも重要です。

さて、書いたものが正しいのかを確かめるにはどうしたらよいでしょうか。ここで、検証ツールの登場です。W3Cでは、仕様書に沿って文書が記述されているかを確かめるツールMarkup Validation ServiceCSS Validation Serviceを開発・公開しています。

使い方は簡単で、検証したいページのURLを入力し実行するだけです。ページをオンラインで公開していない場合でも、ソースコードを貼り付けて検証できます。

ソースコードとエラーのある箇所を指摘してくれるため、どこが間違っているのかを簡単に見つけることができるでしょう。

図1 Markup Validation Serviceの検証結果。エラーの内容や起こった箇所を指摘してくれる

図1 Markup Validation Serviceの検証結果

著者プロフィール

矢倉眞隆(やくらまさたか)

株式会社ミツエーリンクスにて、品質向上に関する業務やWeb標準の啓蒙などに取り組む。HTMLやCSS,WebAppsなどWeb技術の最新動向を追いかけ,「Web標準Blog」にて情報を公開中。

コメント

コメントの記入