Tweet

良いデザインを行うためのCSSの下地を作ろう

W3Cマークアップバリデーションサービスの使い方

The W3C Markup Validation Service via kwout

　本家W3Cのサイト上に、自分が作成したHTMLやXHTMLファイルにエラーがないかどうかのチェックしてくれる無料のサービスがあります。こちらを利用して先ほど作ったHTMLソースコードの妥当性を検証してみましょう。

■ 手順【1】W3Cマークアップバリデーションサービスのサイトへアクセス

　まず、W3Cマークアップバリデーションサービスのページにアクセスします。「Validate by URI（URLから検証する）」「Validate by File Upload（ファイルをアップロードして検証する）」「Validate by Direct Input（直接入力されたコードから検証する）」という3つの方法によりマークアップの妥当性を検証できます。

　今回はValidate by Direct Input（直接入力されたコードから検証する）からの検証を選択します。

■ 手順【2】HTML/XHTMLコードを入力し検証

図4　コード直接入力での検証

　検証したいXHTMLコードを「Enter the Markup to validate:（検証したいマークアップを入力してください）」と書かれたすぐ下の入力欄に張り付けます。先ほど作成した「index.html」ファイルのXHTMLコードを入力して検証してみましょう。

■ 手順【3】エラーがあれば修正、なければ検証完了

図5　正常時の検証結果（画像をクリックすると拡大します）

　エラーがなく妥当なXHTML 1.0のコードの場合は上のように画面が表示されます。

　キャプチャ画面にあるように、「This document was successfully checked as XHTML 1.0 Strict!（この文書はXHTML 1.0 Strict型としてのチェックが成功しました！）」という緑色の帯に白抜きの文字が表示されればエラーのないきれいなコードということです。

図6　エラー時の検証結果（画像をクリックすると拡大します）

　もしエラーがあった場合は「Errors found while checking this document as XHTML 1.0 Strict!（XHTML 1.0 Strictの文書型でこの文書をチェックの際エラーが発見されました！）」といった赤い帯上に白抜きの文字で警告画面が表示されます。

　キャプチャ画面の例では、その下のResult（結果）の行には「5 Errors」という表示があり5つの個所でコードエラーが発見されています。

FirefoxアドオンのHTMLバリデータもある

Html Validator for Firefox and Mozilla via kwout

　「Html Validator」はFirefoxのアドオンとしてMarc Gueury氏が開発しているHTML/XHTMLの文法検証ツールです。検証アルゴリズムとしてW3Cが開発した「Tidy」や、SGMLパーサの「OpenSP」がベースとなっているため、W3Cマークアップバリデーションサービス（http://validator.w3c.org)と同じ検証結果が得られます（※検証アルゴリズムとしてSGMLパーサを選択した場合）。

　このツールはHTML/XHTMLコードのアクセシビリティチェックや、文法エラーが起こっているソースを自動的に修正してくれる機能もあるため非常に強力です。プロの方はこのツールでチェックした後、ダブルチェックで本家のW3Cマークアップバリデーションサービスで検証することをオススメします。

　Firefoxを普段使ってない方でもWeb開発者の方であれば、ぜひこのツールを使ってみるとよいでしょう。

良いデザインを行うための下地作り

　今回はCSSデザインを行ううえで重要になってくる、HTML/XHTMLの基礎知識について解説しました。

　CSSで正確なレイアウトを実現させるためには、前程として妥当なHTML/XHTMLファイルであるということが必要です。HTML/XHTMLのマークアップ言語は構文が単純なので覚えやすい言語です。

　だからこそ、コンテンツの文書構造をよく理解したうえで、構文エラーのない美しいマークアップを心掛けることが、良いデザインを行うための下地作りになるので覚えておきましょう。

喜安 亮介……1980年愛媛県生まれ。タグパンダの代表取締役。ディレクター兼デザイナーとしてWeb制作案件に携わる。社名のパンダは、「白・黒はっきりした正しい判断力と柔軟性のあるクリエイティブな発想」を提供するという思いから。

■ ＠IT関連記事

まずはHTML。ハイパーなタグ付き言語 デザイナーのためのWeb学習帳（1）　Webを構成する技術を超初心者向けに説明します。まずは基本の基本である「HTML」について。ハイパーなタグ付きテキストを攻略しよう デザインハック ＜ リッチクライアント 2008/8/26

HTMLの表現力が辿った道のりを知っておこう デザイナーのためのWeb学習帳（2）　Webでコンテンツを表現する決まりである共通言語のHTML。世界共通語であるHTMLがここまで辿ってきた道のりを知っておこう デザインハック ＜ リッチクライアント 2008/9/18

いまさら聞けない“Web標準”、そしてXHTML＋CSS いまさら聞けないリッチクライアント技術（4）　今回はXHTMLとCSSを使ったWeb標準規格を紹介。その歴史や役割、さらにはHTMLとXHTMLの違いやCSSについても解説 「リッチクライアント ＆ 帳票」フ ォーラム 2007/9/19

業務で使える！ 無料Webサイト作成ツール集 Webオーサリングツールを使ってみよう：特別編　HTML＋CSS、JavaScriptでWebぺージを作るときにどんなツールを使ってますか？ 無料でも便利なものがたくさんあります 「リッチクライアント ＆ 帳票」フォーラム 2007/7/6

テキストエディタでWebサイト構築をガンバル人へ どこまでできる？ 無料ツールでWebサイト作成（6）　テキストエディタで「あえて」Webページをコーディングしている人のために便利な無料の補助ツールをいくつか紹介します 「リッチクライアント ＆ 帳票」フォーラム 2008/2/5

3/3

INDEX
いまさら聞けないCSS／スタイルシート入門（2）　 良いデザインを行うためのCSSの下地を作ろう
	Page1 HTMLの基礎を知らなきゃ、サイトはステキにできない HTMLとXHTMLは、“X”で何が違っているの？
	Page2 代表的なHTML/XHTMLで使われている要素一覧 要素にIDやCLASS名を追加してみよう 文法にエラーがないかチェックするには？
	Page3 W3Cマークアップバリデーションサービスの使い方 FirefoxアドオンのHTMLバリデータもある 良いデザインを行うための下地作り

「デザインハック」コーナーへ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード