アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

gihyo.jp » WEB+DESIGN STAGE » 連載 » 独学で極める “Webデザイン”の技と心 » 第9回 ValidなHTML,ValidなCSS

独学で極める “Webデザイン”の技と心

第9回 ValidなHTML,ValidなCSS

W3Cが(X)HTMLやCSSについての勧告を出していることにより,Web制作者は仕様に沿って「正しい」(X)HTMLやCSSを書くことを求められています。

Validな(X)HTMLの基準として挙げられるポイント

まず,

  • 仕様のとおりに書かれている
  • HTMLバリデータ(※1)で減点されない

ことが挙げられます。

DTD(文書型定義)に沿った(X)HTMLを書けば,このようなバリデータの検証でエラーがでないようにすることが可能です。

※1)バリデータ

validだと何が良いのか

  1. XHTMLをXMLアプリケーションとして考えると,パースエラーの出ることのない利用価値のある文書となる(validではないものではパースエラーが出てしまう)
  2. 正しい(X)HTML文書に対してでないと,CSSが意図した通りに機能しない
  3. 点数が満点になることによる制作者の満足感が高まる

何回かこの連載で取り上げましたが(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の構造を汚すのは避けたいところです。

著者プロフィール

山田あかね(やまだあかね;purprin)

エスカフラーチェLLC,デザイナー。名古屋出身。Web業界とまったく関係ない業種で独立して働く傍ら,Web/XHTML/CSS等技術を独学。2005年「コトノハ -○×ソーシャル」のデザインリニューアルを行ったのをきっかけに上京し転職。株式会社paperboy&co.で主にソーシャルブックマークサービス(POOKMARK Airlines)等の Webサービス開発に携わる。2007年1月,エスカフラーチェLLC の設立に参画し,デザイナーとして幅広く活躍中。

URLhttp://purpr.in/blog/

トラックバック

  • Web標準のコーディングと構文チェック

    めちゃくちゃ基本の話ですが、Web標準のXHTMLとCSSの書き方とW3Cの構文...

    Tracked : #1  OPQR.jp : WebサービスとWebデザインについて考えてみる; (2008/04/19, 10:11)

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

読むウェブ ~本とインタラクション

ディスプレイで読む活字とそのインタラクション(interaction:相互作用)について,最新Webを紹介しながら読み解いていく。

いま,見ておきたいウェブサイト

この連載では,国内外の最新のウェブサイトを隔週更新で取り上げ,これら最新サイトの特徴や素晴らしい部分を,さまざまな角度から解説していきます。

Windows phoneアプリケーション開発入門

Windows Marcketplace for Mobileがサービス開始され,作成したアプリケーションを個人でも世界をターゲットに公開できる環境が整ってきました。これを機にWindows phoneアプリケーションの開発をしてみませんか?

ここは知っておくべき!Windows Server 2008技術TIPS

5年ぶりのサーバOSとなったWindows Server 2008が出荷されて早2年。2009年にはR2が出荷され,再び注目を集めています。発売前から実施したトレーニングによって感じた,インフラエンジニアの方々に知っておいていただきたい機能を中心にご紹介します。

キーパーソンが見るWeb業界

本連載はWeb Site Expert/gihyo.jpとの連動企画です。阿部淳也, 長谷川敦士, 森田雄のお三方による,Web業界をテーマにした座談会です。

きたみりゅうじの聞かせて珍プレー

ソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。みなさんからの投稿もお待ちしてます!

ActionScript 3.0で始めるオブジェクト指向スクリプティング

野中文雄氏が,簡単なスクリプトは書いたことがあるという初級者を対象に,ActionScript 3.0の基本からクラス定義までを解説します。

まだ間に合う「ITパスポート」受験対策 原山先生の短期合格塾

この連載では,4月18日のITパスポート試験の受験に向けて,短い期間で効率良く受験対策を行う方法や,確実に得点するための裏ワザなどを伝授していきます。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス