2017年11月 / 10月≪ 123456789101112131415161718192021222324252627282930≫12月
--.--.--(--)
Top Page > スポンサー広告 > 【xhtml/css】xhtml(html)やcssのコードをチェックするツール色々

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

タグ(ブログ内検索もできます)

--:--  |  スポンサー広告  |  EDIT  |  Top↑
2009.02.10(Tue)
Top Page > CSS/XHTML > 【xhtml/css】xhtml(html)やcssのコードをチェックするツール色々

【xhtml/css】xhtml(html)やcssのコードをチェックするツール色々

Webアクセシビリティ ~標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践~ (Web Designing BOOKS)
htmlやCSSをコーディングしていると、本当にコードが正当(valid)なのかどうかを確かめたくなるところ。記述している時には十分に気をつけているつもりが、ちょっとしたケアレスミスが後から発覚するケースも多いはず。

クライアントからもW3Cでvalidでとか、lintで何点以上とか依頼をされることもあるのではないでしょうか?
htmlやcssのコードはブラウザで簡単に確認されてしまうので、情けないコードは書きたくないところ。という訳で自分が過去に使っていたコードチェッカーを紹介してみます。

Web Accessibility Toolbar


まず最初がInfoaxia(インフォアクシア)の「Web Accessibility Toolbar」です。コードをバリバリ書いていた頃によく使っていました。
対応ブラウザはIEのみ。以下からダウンロードできます。

ツール&ダウンロード - Webアクセシビリティポータルサイト『infoaxia(インフォアクシア)』
http://www.infoaxia.com/tools/index.html


CSSを無効にしたり、後述するW3CのコードチェックやAnother HTML-lintでのコードチェックを利用することができます。

Web Developer


FireFoxのアドオン「Web Developer」です。こちらもよく使っていました。ただFireFoxがバージョンアップされる度に対応していないアドオンになってしまったのであまり使用頻度は高くありませんでしたが、有用性はピカイチです。日本語版は以下からダウンロードできます。

Webdeveloperのダウンロード:ミナトラボ
http://lab.tubonotubo.jp/tools/webdeveloper/index.html


こちらもCSSを無効にしたり、div要素やtable要素を枠で囲ったり、htmlやcssの検証が出来たりと様々な機能があります。
また紹介記事がありましたので併せて載せておきます。

Web Developerでウェブサイトを構築・デバッグ - builder by ZDNet Japan
http://builder.japan.zdnet.com/sp/firefox-3-for-developer-2008/story/0,3800087566,20377856,00.htm


Web DeveloperでCSSとHTMLを編集してみよう - builder by ZDNet Japan
http://builder.japan.zdnet.com/sp/firefox-3-for-developer-2008/story/0,3800087566,20378300,00.htm


Another HTML-lint


有名すぎる程有名でコーダーの中では定番ともいえるツールが「Another HTML-lint」です。html/xhtmlのコードチェックが出来る上に、日本語で解説が表示されます。

Another HTML-lint gateway
http://openlab.ring.gr.jp/k16/htmllint/htmllinte.html


URLを入力してそのファイルのチェックも出来ますし、直接htmlコードを記述してのチェックもできます。

The W3C Markup Validation Service


Web標準化団体W3Cが提供する「The W3C Markup Validation Service」です。html/xhtmlの文法チェックが出来ます。解説結果は英語で表示されますが、比較的平易な英語なのでそれほど苦にはなりません。

The W3C Markup Validation Service
http://validator.w3.org/


URL、ファイルアップロード、直接記述の3つの方法で検証ができます。

W3C CSS 検証サービス


一方のこちらがCSSのコードチェックをしてくれるW3Cのサービスです。こちらは日本語版がありました。

W3C CSS 検証サービス
http://jigsaw.w3.org/css-validator/validator.html.ja


htmlコードチェックサービスと同じくURL、ファイルアップロード、直接記述の3つの方法で検証ができます。


自分が使ってきたツールは以上の通りです。基本的には内製でWebページは制作していたので、こららのツールを使ってW3Cではvalid、lintでは「良く出来ました」辺りをターゲットとして制作していました。本当は満点を目指したいところだったのですが、システム側で指定されたタグを使わなければならなかったりしたので止むを得ないところですね。

今ではもっと有効なツールがあるかもしれないので探してみると良いでしょう。
関連記事

タグ(ブログ内検索もできます)xhtml html css コード チェック

07:14  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑

関連エントリー

Loading


Comment

コメントを投稿する

※コメントは承認するまで表示されません。


管理者だけに表示

▲PageTop

Trackback

この記事のトラックバックURL

この記事へのトラックバック

 | BLOGTOP | 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。