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

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

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

Firefox:アドオンなしでウェブサイトの色を抽出(スポイト)する

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


こんにちは、さち です。

今回は、Firefox で
アドオンを使わずにウェブサイトの色を抽出(スポイト)する方法について
書いていきます。




アドオンなしでウェブサイトの色を抽出(スポイト機能)

  1. メニューの「ツール」→「Web開発」→「スポイト」と進みます。
    (メニューがない場合は「Alt」キーを押して表示)
    操作画面

  2. 拡大鏡が表示されます。
    色を抽出したい部分にカーソルを合わせましょう。
    操作画面

  3. クリックすると色がコピーされます。
    操作画面

  4. ペーストで色コードを貼り付けられます。
    操作画面




色を抽出する時の形式を変更する

  1. 「Ctrl + Shift + I」で開発ツールを表示。
    「歯車」ボタンをクリックします。
    操作画面

  2. 「既定の色単位」で色の表示形式を変更できます。
    操作画面

  3. 形式は「16進数」「HSL(A)」「RGB(A)」「色の名前」の4種類。
    (「色の名前」を選んだ場合、色名がない時は「16進数」で表示)
    CSS に用いるなら「16進数」がよいと思います。
    操作画面

  4. ちなみに、「RGB(A)」だとこんな感じです。
    操作画面




開発ツールに「スポイト」ボタンを追加

  1. 開発ツールの「歯車」ボタンをクリック。
    操作画面

  2. 「ページから色を選択肢ます」にチェックを入れます。
    操作画面

  3. 開発ツールに「スポイト」ボタンが追加されました。
    クリックすると、カーソルがスポイトモードになります。
    操作画面



ウェブサイト制作に役立てて下さいね。



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




ブログ移転に伴い、コメント受付は終了しました。



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

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

ブログパーツ