ホームページを作ったり、Webアプリケーションを開発するうえでHTMLは必ず扱うことにあると思います。
ブラウザーからHTMLソースを表示すればWebコンテンツのHTMLソースを確認することができますが、すべてのソースの中から目的の部分だけを見つけるのは骨の折れる作業だと思います。
そんなときはInternet Explorer10・11やFirefoxの開発ツールを使うと簡単に見つけることが出来ます。
次の環境で検証してその方法をまとめてみました。
・Internet Explorer 11 (Windows7)
・Internet Explorer 10 (Windows8)
・Firefox 29 (Windows8)
Inernet Explorer 11の場合
F12キーを押します。またはAltキーを押してメニューのツール - F12 開発ツール
をクリックします。
画面の下に開発ツールの画面が表示されるので一番左側の「DOMエクスプローラー」(<>記号が矢印記号を囲ったようなアイコン)というボタンをクリックします。
開発画面上部にある「要素の選択」(□に矢印が刺さったようなアイコン)というボタンをクリックします。
Webコンテンツ内のHTMLソースを表示したい部分にマウスポインターを重ねてクリックします。
開発ツール画面に目的のHTMLソースが表示されました。右側には定義されているCSS(カスケードスタイルシート)が表示されます。
開発ツールを終了するにるにはF12キーを押すか、開発ツール画面右上の×ボタンをクリックします。
Inernet Explorer 10の場合
F12キーを押します。またはAltキーを押してメニューのツール - F12 開発ツール
をクリックします。
画面の下に開発ツールの画面が表示されるので左上にある「HTML」タブをクリックします。
そのすぐ下にある矢印ボタンをクリックします。
Webコンテンツ内のHTMLソースを表示したい部分にマウスポインターを重ねてクリックします。
開発ツール画面に目的のHTMLソースが表示されました。右側には定義されているCSS(カスケードスタイルシート)が表示されます。
開発ツールを終了するにるにはF12キーを押すか、開発ツール画面右上の×ボタンをクリックします。
Firefox 29の場合
F12キーを押します。またはAltキーを押してメニューのツール - Web開発 - 開発ツールを表示
をクリックします。
画面の下に開発ツールの画面が表示されるので「インスペクター」というボタンをクリックします。
その右の方にある「ページから要素を選択します」(□に矢印が刺さったようなアイコン)ボタンをクリックします。
Webコンテンツ内のHTMLソースを表示したい部分にマウスポインターを重ねてクリックします。
開発ツール画面に目的のHTMLソースが表示されました。右側には定義されているCSS(カスケードスタイルシート)が表示されます。
開発ツールを終了するにるにはF12キーを押すか、開発ツール画面右上の×ボタンをクリックします。
まとめ
どのブラウザーもほぼ同じ操作で同じようなことが出来ました。開発ツール画面のHTMLやCSSを変更すると即座に画面表示に反映されます。
確認からデバッグまで出来るので覚えておくととても便利です。
関連ブログ
HTMLソースのミスやエラーを素早くチェックする[Windows] FirefoxでFlashがクラッシュ
[Firefox] 消えてしまったブログのHTMLソースを復元するには
[インターネット] Googleストリートビューにプライバシー情報が公開されてしまったら
[セキュリティ] bitly.com にスパムサイトと誤認されたら
[セキュリティ] Twitterに「スパム、または安全でない」と誤認されたら
以上、参考になれば幸いです。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。