独学で極める “Webデザイン”の技と心
第9回 ValidなHTML,ValidなCSS
W3Cが(X)HTMLやCSSについての勧告を出していることにより,Web制作者は仕様に沿って「正しい」(X)HTMLやCSSを書くことを求められています。
Validな(X)HTMLの基準として挙げられるポイント
まず,
- 仕様のとおりに書かれている
- HTMLバリデータ(※1)で減点されない
ことが挙げられます。
DTD(文書型定義)に沿った(X)HTMLを書けば,このようなバリデータの検証でエラーがでないようにすることが可能です。
- ※1)バリデータ
validだと何が良いのか
- XHTMLをXMLアプリケーションとして考えると,パースエラーの出ることのない利用価値のある文書となる(validではないものではパースエラーが出てしまう)
- 正しい(X)HTML文書に対してでないと,CSSが意図した通りに機能しない
- 点数が満点になることによる制作者の満足感が高まる
何回かこの連載で取り上げましたが(X)HTMLは文書構造・意味をマークアップする言語ですので,
- 文書構造が適切に意味付けされていること
- DTD・仕様に沿って適切な要素が使われていること
- 見栄え・振る舞いに関わる記述を(X)HTMLで書かないこと(それはCSSの担当です)
これらに注意しつつ,(X)HTMLの記述は極力シンプルでわかりやすいものが好ましいと言えます。
私たちがお化粧をするときに,ベースのお肌が荒れていると思うようにお化粧がのりません。(X)HTMLとCSSの関係もその関係とよく似ており,構造がしっかりした文書にCSSを載せるというのが前提になっています。
また,独学で学習されている方なら,3の満足感の大きさを経験された方もいらっしゃるのではないかと思います。実際私もそういう時期がありました。見ていただく人にどのように伝わるのかをさしおき,とにかくバリデータでエラーがでないようにすることが目的にすりかわってしまうことすらあったほどです。
とくにAnother HTML-lintでは,文法チェックに加えてアクセシビリティチェックもできるうえ,DTD的には正しくても好ましくない記述をした場合にエラーを出してくれるため,良い(X)HTML文書を書くために重要なツールとなります。
(例)<br />が二つ連続する場合/<div>と</div>の間が空の場合などさまざまです。
バリデータで100点満点をとることに満足してはいけません
正しく(X)HTMLを書くのはWeb制作者に最低限必要だと考えますが,かといってバリデータで満点をとることを目的にしてしまうのは好ましくありません。
具体的なエラーケース:
「<div>と</div>の間が空」というエラーの事例
最近では リッチなインターフェースを実現するためにJavaScriptライブラリなどを利用する機会も増えてきました。ライブラリにもいろいろな種類があり,たとえばフォームのエラーメッセージの表示方法1つとっても,エラーメッセージ出力場所を<div></div>の中身とするものもあれば,input要素のtitle属性にエラーメッセージをあらかじめ書いておいて出力させるパターンのものもあります。
この場合,<div></div>を利用して出力するライブラリを選ばないというのも1つの方法かもしれませんが,そのような理由でライブラリを切り捨てることによって,表現したいことができないほうが本末転倒なのではないでしょうか。
このようなケースのように,<div></div>を使わなければならない場面もゼロではない(※2)ため,バリデータを通過する/しないというだけで頭ごなしにそのサイトの品質を評価できるものではないことを制作者は気を付けなければならないと思います。
- ※2)
- このケースの場合もちろん,<div></div>を使わずに同じことを表現できるライブラリが見つかればそれがベターなのですが。
<div></div>でも,良くない例もある:
<div style="clear:both"></div>や<div class="clear"></div>
これは,CSSでfloatによる段組みレイアウトを行う際に,floatさせている要素の親要素の背景が途中で切れてしまうことを回避するためによく使われがちなバッドノウハウです。しかし,せっかくCSSだけで解決策があるので(いわゆるclearfix),こういう目的で(X)HTMLの構造を汚すのは避けたいところです。
独学で極める “Webデザイン”の技と心
- 2010年1月第1週号 1位は,実践的なCSS3の使い方,気になるネタは,鳩山首相がTwitterとBlogを開始
- 2009年12月第3週号 1位は,CSS3を使うことで,より素晴らしく,より短時間にデザインされた実践的テクニック,気になるネタは,バイドゥ,日本語入力システム「BaiduType」公開
- 2009年12月第1週号 1位は,RGBAカラーの使い方,気になるネタは,思いどおりの日本語入力 - Google 日本語入力
- 「Web Directions East 2009」レポート(前編)
- 2009年11月第1週号 1位は,今どきのCSSレイアウトの特徴,気になるネタは,日本版Twitter,「つぶやき」から「ツイート」に
-
Web標準のコーディングと構文チェック
めちゃくちゃ基本の話ですが、Web標準のXHTMLとCSSの書き方とW3Cの構文...
Tracked : #1 OPQR.jp : WebサービスとWebデザインについて考えてみる; (2008/04/19, 10:11)


