このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなきゃ損するPC情報を分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Windows:再生デバイス(スピーカー)がゴタゴタだから整理する (05/29)
  • ニコニコ動画:コメントを半透明にして動画を見やすくする (05/26)
  • ニコニコ動画:niconico のアプリケーション連携/解除の方法 (05/24)
  • Windows:エクスプローラーの画像サムネイルが一部表示されない (05/22)
  • iPhone:ツイッターで個人情報が広告と結びつくのを止める (05/19)
  • 管理人より
    2200万アクセス突破しました。ありがとうございます。

    Firefoxに標準搭載されたFirebugのような機能を使ってみる

    このエントリーをはてなブックマークに追加
    操作画面


    こんにちは、さち です。

    ウェブページの構造やデザインを調べる際は
    Firegug というアドオンを使っているのですが
    いつの間にか(「10」から?) Firefox に
    同じような機能が標準搭載されていたらしい。

    ということで今回は、Firefox に標準搭載された
    Firebug のようにウェブページを調査する機能について
    書いていきたいと思います。



    基本操作

    調査したいページを開いた状態で
    「Ctrl + Shift + I」を押しましょう。
    (メニューの「ツール」→「Web開発」→「調査」でも可)

    すると、ウェブページの調査機能が立ち上がります。
    起動スピードは Firebug よりも断然早いですね。

    Firebug と似た部分もあるので
    操作方法で困ることはあまりないかもしれませんが
    基本操作について見ていきましょう。

    バー左側には、要素を選択する際のボタンがあります。
    このボタンを押せばページ上にある要素を直接選択できます。
    HTMLソースを表示するボタンもあるので
    ソースを見たい場合にはオンにしておきましょう。
    操作画面

    バー右側には、CSS情報を表示するボタンがあります。
    選択した要素の CSS を確認したい場合はオンにしましょう。
    ウェブページの調査機能を終了する場合は
    右端の「x」をクリックすればOKです。
    操作画面

    「3Dビュー」についての説明は省略します。
    どんな機能なのかはボタンを押せばよく分かります。

    ちなみに、CSS情報は
    ウィンドウ右側にこんな感じで表示されます。
    CSS を編集して現在の表示に反映することも可能です。
    操作画面



    要素の表示に関する設定

    初期設定では、
    周囲が暗転し選択した要素が強調表示されます。
    また、要素の情報に関するフキダシも表示されます。
    操作画面

    これらの「暗転」「フキダシ」の表示については
    バー左側の歯車のボタンから設定を変更できます。
    自分が使いやすいように変更しましょう。
    操作画面


    Firefox に標準搭載されたウェブページの調査機能。
    Firebug と比べると機能が簡易的な気はしますが
    軽快に起動、動作するというのはよいですね。

    ウェブページの構造を軽く調べるくらいなら
    こちらでも十分なのではないかと思います。








    このエントリーをはてなブックマークに追加




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2017 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ