2012.04.26
各種ブラウザでWebサイトのソースを見たり、調べてみた(改訂版)
普段Webサイトを見ている時に、気になる部分が有ると管理人は良くHTMLソースを覗きます。各種アドオンとかでHTML解析!とまではいかないにしても、ソースを見たり、(Firebugのような)要素調査を気軽にできるのかどうかを各大手のブラウザで確認してみました。
グーグルクローム
確認したバージョンは「18」です。
・HTMLソース表示
右クリック→「ページのソースの表示」でできる。新タブに表示される。
・HTMLソースの保存
ソース表示後、右クリック→「名前を付けて保存」でできる。
(注)ファイルの種類を「ウェブページ、HTMLのみ」にしないと余計な情報が保存されるので注意。
・要素を検証
右クリック→「要素を検証」でできる。標準機能でできるのは便利。ドラッグ指定した所のソースも出せる。
Firefox
確認したバージョンは「12」です。
・HTMLソース表示
右クリック→「ページのソースを表示」でできる。別ウィンドウで表示される。
・HTMLソースの保存
ソース表示後、上のメニューバーで、「ファイル」>「名前を付けてページを保存」でできる。
・要素を調査
標準でできるようになった。右クリック→「要素を調査」でできる。HTML、CSS、Webサイトが同時に見られて視覚的にもなかなかわかりやすいものになっている。
また、Firebugをインストールしている場合は、右クリック→「Firebugで要素を調査」もできる。Firebugは便利。ドラッグ指定した所のソースも出せる。
IE
確認したバージョンは「8」です(WinXPの場合、IE9は使用不可)。
・HTMLソース表示
右クリック→「ソースの表示」でできる。別ウィンドウで表示される。
・HTMLソースの保存
ソース表示後、上のメニューバーで、「ファイル」>「上書き保存」>「HTMLソース」でできる。しかしなんか変なファイルになる。カギマークがアイコンにつくし。
・要素を調査
メニューバーの「ツール」→「開発者ツール」で出てくる。独特のツールだが意外と使える。ただ、ドラッグ指定した所のソースを直接出す、みたいなことは無理みたい。
- 最近のコメント
- wp_headで出力される不要head要素を削除する に omnioo lab. record | オムニオラボの備忘録 より[ 01/14 ]
- bypostauthorをCSSで設定する に 名無しさん より[ 06/01 ]
- bypostauthorをCSSで設定する に ぱそこん生活感管理人 より[ 06/01 ]
- bypostauthorをCSSで設定する に 名無しさん より[ 06/01 ]
- ぱそこん生活感。を開設しました に Mr WordPress より[ 06/07 ]