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

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

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

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



最新記事
  • Windows:「PC」のドライブで「iCloudフォト」が一番前を陣取る件 (11/22)
  • iPhone:iCloudを使って新しいiPhoneにデータを移行する (11/20)
  • iPhoneX を1週間使ってみて分かったこと (11/17)
  • ニコニコ動画:動画を見ようとするとログインしろと言われる (11/15)
  • Windows10: Win7 の Aero Glass のような透過効果を使う (11/13)
  • 管理人より
    2300万アクセス突破しました。ありがとうございます。

    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マル秘ワザ  無断転載禁止

    ブログパーツ