新規作成日 2015-11-06
最終更新日
このページについて
ページ構造の解析やページ内のエラーを検証するためのツールを調べてみました。
バリデーション
htmlタグやcssが文法的に正しいか確認するツールです。
Markup Validation Service(外部サイト)
HTML,XHTMLの検証
CSS Validation Service(外部サイト)
cssの検証
Html Validator (外部サイト)
Firefoxアンドオンです。表示されたページの HTML
をローカルで検証し、エラーと警告の数をステータスバーに表示します。詳細はページのソース画面で見ることができます。
リンク切れの検出
リンク切れの検出は、Htmlエディタやサイトマップ作成ツールの１機能として実装されていることも多いですが、webアプリーケーションも利用できます。
Link Checker(外部サイト)
リンク切れチェックツール (外部サイト)
モバイルフレンドリーの評価
Search Consoleでもモバイルフレンドリテストとして提供されています。
W3C mobileOK Checker
モバイルフレンドリーかどうかを確認してくれます。サイトをモバイル対応する際の目安として利用できます。
サイト構造の分析ツール
「Firebug」と「Chrome DeveloperTools」も確認・修正ツールに特化しているようで、それ単体で、サイトを作成していくものではないようです。
完成されたテンプレートを使用せず、自分でコーディングする場合は、まず、「Firebug」や「Chrome DeveloperTools」を使って、 CSSとテンプレートして使用するHtmlページを 作成するのがよさそうです。
Firebug(外部サイト)
FireFoxのアンドオンとして動作するWeb開発ツールです。
Firebug のアンドオンページ (外部サイト)
Chrome Developer Tools(外部サイト)
Googleのブラウザの標準機能にあるWeb開発ツールです。Chrome上で、ショートカット
Ctrl+Shift+Iで起動できます。すこし、使ってみると、修正はできますが、新規にページを作成していく方法はわかりませんでした。
Web 開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 (外部サイト)
Web Develoer (外部サイト)
サイトアンドインです。Chrome, FireFox, Opera版があります。
日本語ローカライズ版 (外部サイト)
若干バージョンが古いです。
