「開発者ツール」というものをご存知でしょうか?
「開発者ツール」とは、ブラウザの観点から Webページの内部表現を確認できるというものです。
「F12」キーを押すと「開発者ツール」が起動します。
Google クローム の場合、「虫眼鏡」ボタンを押して、ブラウザ上の要素を選択すると、その要素にどんなスタイルが適用されているかが表示されます。
表示された値を変更すると、ブラウザの表示も変更した値になります。
色々な値を試し、適切な値がわかれば、あとは実際のスタイルシートのファイルにその値を反映させましょう。
デザイン色の強いサイトを作成するときなどは、非常に便利かと思います。
以前使ってみたことがあるのですが(会社のWeb担当に教えてもらった)、複数の要素にpositionプロパティを適用するサイトを作成中だったので、とても助かりました。
Google Chrome(クローム)に関わらず、IE(インターネットエクスプローラー)にも開発者ツールはあります。
あと、Javascriptのデバッグもできるみたいですね。
最近FirefoxからGoogleクロームに乗り換えたので、クロームメインの説明になっていますが、ご了承ください。
![]() |
小さな会社の Google Apps 導入・設定ガイド (Small Business Support) 新品価格 |