[解析ツール]簡易ウェブレイアウトチェッカー。CSSレイアウトかテーブルレイアウトかを視覚的に確認。

自社オリジナルコンテンツ、リリースしました！「簡易ウェブレイアウトチェッカー」です。プログラム担当のhayasaka君が頑張ってくれました。 どんなものかと言いますと、ホームページがCSSレイアウトかテーブルレイアウトか、視覚的に見極めるものです。PHPとブックマークレットで構成されています。

使い方

1. 簡易ウェブレイアウトチェッカーにアクセス
2. ホームページアドレスを入力
3. ページの下にある解析ボタンをクリック

ボタンの使い方

• TABLEレイアウトチェック…テーブルがあれば枠線が表示されます。レイアウトにテーブルを使用していれば、線が出まくるはずです。
• CSSレイアウトチェック…レイアウトの為のボックスをdivで作成している場合、枠線が出ます。CSSレイアウトはdivをメインに使うはずですので、ここで枠線が出ればOKと言うことになります。
• CSSオン／オフ…CSSオフの状態で、素っ気ないテキストの状態になれば、HTML側で余計な装飾を施していないことになります。表示があまり変わらなければ、CSSをあまり使っていないということにあります。
• マークアップを確認…要素に「h1」、色に「red」と入れると、h1で囲まれた部分に枠線が付きます。枠線が出ない場合はh1を使用していないということになります。これは全てのタグ、例えば「p」や「li」などに線を付けてみることが出来ます。

ご自身のサイトがどうなっているのか、是非一度解析してみてくださいませ。

簡易ウェブレイアウトチェッカー

※フレームのサイトには対応しておりません。フレームセットを出してしまうためです。フレームのページを解析するには、フレームセットで呼び出す中のファイルをご指定下さい。※Safariには対応しておりません。ブックマークレットのターゲット指定が効かない為です。

■表示結果について
簡易ウェブレイアウトチェッカーはレイアウトの手法を視覚的に確認できるものであり、マークアップの方法、レイアウト手法により表示結果は各サイト毎に異なります。最適な手法を指南・提供するものではありませんので、あくまで参考情報として捉えてください。 

関連する投稿

• [CSS] 全称セレクタ：ブラウザのスタイルを初期化
• 複数行で、文字の空白と先頭を揃える
• 新ブラウザ「RockMelt」を使ってみた
• 古いFirefox（Portable Firefox3.6と4）をLionで使う
• メニューリストを横並びさせてボーダーで区切る