PDF形式でダウンロード PDF形式でダウンロード

HTMLとCSSでは、カラーコードで色が識別されています。WebページなどのHTMLプロジェクトを作成していて、パソコン画面上の画像やWebサイト、ウィンドウの特定の色に一致する要素を記述したい場合は、その色のカラーコードを調べなければなりません。この記事では、さまざまな無料ツールを使って任意の色のカラーコードをすばやく識別する方法を紹介します。

方法 1 の 4:
「DigitalColor Meter」を使う(Mac)

  1. 1
    Macで「DigitalColor Meter」を起動する 「DigitalColor Meter」はmacOSに付属しているツールで、画面上の任意の色のカラー値を識別することができます。[1] 「Finder」を開いてアプリケーションフォルダをダブルクリックし、ユーティリティフォルダをダブルクリックしたら、DigitalColor Meterをダブルクリックして起動しましょう。
  2. 2
    識別したい色にマウスカーソルを合わせる マウスを動かすと、ツール内のカラー値がリアルタイムで更新されます。水平方向と垂直方向の絞りの両方をロック(固定)するまでは、この位置からマウスを動かさないようにしましょう。
    • また、このツールを使ってWeb上の色を識別することも可能で、「Safari」(または任意のWebブラウザ)を開き、識別したい色が使われているWebサイトにアクセスするだけです。
  3. 3
    Command+Lを押す 水平方向と垂直方向の絞りの両方がロックされ、マウスを動かしてもカラー値は変わらなくなります。
  4. 4
    Shift+ Command+Cを押して、カラーコードをクリップボードにコピーする また、カラーメニューをクリックし、カラーをテキストでコピーを選択して、カラーコードをコピーすることも可能です。
  5. 5
    Command+Vを押して、コピーしたコードを貼り付ける HTMLコードやテキストファイルなどの入力領域に直接貼り付けることができます。
  6. 6
    Command+Lを押して、絞りのロックを解除する 別の色を識別したい場合は、これでロックが解除され、カーソルでカラー値を再び識別できるようになります。
    広告

方法 2 の 4:
「Color Cop」を使う(Windows)

  1. 1
    「Color Cop」をインストールする 「Color Cop」は、画面上の任意の色のカラーコードをすばやく識別するのに使える簡単な無料ユーティリティです。アプリの入手方法は以下の通りです。
    • Webブラウザからhttp://colorcop.net/download(英語のみ)にアクセスします。
    • 「self-installing(セルフインストール)」の下のcolorcop-setup.exeをクリックします。ファイルが自動的にダウンロードされない場合は、保存またはOKをクリックしてダウンロードを開始しましょう。
    • ダウンロードしたファイルをダブルクリックします(ダウンロードフォルダにありますが、通常はブラウザタブの左下にも表示されます)。
    • 画面の指示に従って、アプリケーションをインストールします。
  2. 2
    「Color Cop」を起動する 「スタート」メニューにあります。
  3. 3
    識別したい色にスポイトアイコンをドラッグする 他のアプリケーションやWebサイトを含め、画面上の任意の色を識別することができます。
  4. 4
    マウスボタンを放して、カラーコードを表示させる コードは、アプリケーションの中央にある空欄に表示されます。
  5. 5
    カラーコードをダブルクリックして、Ctrl+Cを押す カラーコードがクリップボードにコピーされます。
  6. 6
    任意の場所にコードを貼り付ける 「Ctrl + V」を押せば、HTMLやCSSコードなどの任意の場所にカラーコードを貼り付けることができます。
    広告

方法 3 の 4:
「Imagecolorpicker.com」を使う

  1. 1
    パソコンやスマートフォン、タブレットでhttps://imagecolorpicker.com(英語のみ)にアクセスする この無料ツールを使って、アップロードした画像内の任意の色のカラーコードを識別することができます。この方法は、AndroidやiPhone、iPadを含むどのWebブラウザでも用いることが可能です。
  2. 2
    画像をアップロードするか、URLを入力する 自分の画像をアップロードするか、すでにインターネット上にある画像やWebサイトを使うかを決めなければなりません。どちらの方法でも画像やWebページを表示させて、任意の色を選択することができます。 
    • 画像をアップロードするには、下にスクロールしてUpload your image(自分の画像をアップロード)を選択し、パソコンやスマートフォン、タブレット内の画像にアクセスして、その画像をアップロードするオプションを選択します。
    • Webサイトを使うには、「Use this box to get the HTML color code from a website(このテキストボックスを使って、WebサイトからHTMLカラーコードを取得する)」というオプションまで下にスクロールし、URLを入力して、Take website(Webサイトを取得)をクリックまたはタップします。
    • Webサイト全体ではなく、Web上の画像を直接選択するには、「Use this box to get the HTML color code from a picture via this url(このテキストボックスを使って、このURL経由で画像からHTMLカラーコードを取得する)」のテキストボックスに画像のURLを入力して、Take image(画像を取得)をクリックまたはタップします。
  3. 3
    画像(Webサイト)のプレビュー画面内で任意の色をクリックまたはタップする カラーコードが画面左下に表示されます。
  4. 4
    コピーアイコンをクリックまたはタップして、カラーコードをクリップボードにコピーする カラーコードの右側にある正方形が2枚重なったアイコンのことです。クリップボードにコピーしたコードは、任意のテキストファイルや入力領域に貼り付けることができます。
    広告

方法 4 の 4:
「Firefox」を使う(Web上の色の場合)

  1. 1
    WindowsまたはMacで「Firefox」を起動する 「Firefox」というWebブラウザには、Web上の任意の色のカラーコードを識別するのに使える無料のスポイトツールが付属しています。「Firefox」を使っている場合は、「スタート」メニュー(Windows)または「アプリケーション」フォルダ(macOS)にあります。
    • 「Firefox」は、https://www.mozilla.org/ja/firefox/から無料でダウンロード可能です。
    • 「Firefox」では、Webサイト上の色の値しかわからず、ブラウザ以外では使えません。
  2. 2
    識別したい色が使われているWebサイトにアクセスする 必要な要素の色が表示されていることを確認しましょう。
  3. 3
    メニューをクリックする 「Firefox」の右上にある横三本線のことです。
  4. 4
    ウェブ開発メニューをクリックする 別のメニューが展開されます。
  5. 5
    スポイトをクリックする マウスカーソルが大きな円に変わります。
  6. 6
    識別したい色をクリックする マウスカーソルをその位置に移動させると、カラーコードがリアルタイムで更新され、マウスをクリックすると、そのカラーコードがクリップボードに保存されます。
  7. 7
    任意の場所にコードを貼り付ける 「Control + V」(Windows)またはCommand + V(Mac)を押せば、カラーコードをHTMLやCSSなどのテキストファイルに貼り付けることができます。
    広告

ポイント

  • 他のWebサイトやブラウザ拡張機能、画像編集ソフトでも、カラーピッカーを使って色相のカラーコードを識別できるものがあります。
  • 識別しようとしている色のWebページを誰が作成したかわかっている場合は、どのカラーコードを使ったのか気軽に聞いてもよいでしょう。また、Webサイトのソースコードを調べて、そこに記載されているカラーコードを確認することも可能です。
広告

関連記事

USBメモリーに音楽を入れるUSBメモリーに音楽を入れる
ノートパソコンのカメラで写真を撮るノートパソコンのカメラで写真を撮る
HPでスクリーンショットを撮るHPでスクリーンショットを撮る
特定のウェブサイトにアクセスできない問題を解決する特定のウェブサイトにアクセスできない問題を解決する
ファンクションキーを解除するファンクションキーを解除する
Windows PCでコマンドプロンプトからexeを実行するWindows PCでコマンドプロンプトからexeを実行する
CapsLockを解除するCapsLockを解除する
パソコンにヘッドセットを接続するパソコンにヘッドセットを接続する
Chromeでタブを切り替えるChromeでタブを切り替える
ゼロになったノートパソコンのバッテリーを復活させるゼロになったノートパソコンのバッテリーを復活させる
大容量の動画ファイルをメールで送る大容量の動画ファイルをメールで送る
ワイヤレスで印刷できるようにノートパソコンを設定する
パソコンのRAMを確認するパソコンのRAMを確認する
マウスの代わりにキーボードでクリックするマウスの代わりにキーボードでクリックする
広告

このwikiHow記事について

Nicole Levine, MFA
共著者 ::
IT専門家
この記事の共著者 : Nicole Levine, MFA. ニコール・レヴィンはwikiHowに勤務するテクノロジーライター兼編集者です。技術文章の作成に関し20年以上の経験があり、現在まで大手のウェブホスティング会社やソフトウェア開発会社のチームリーダーを務めてきました。ポートランド州立大学にてクリエイティブライティングの修士号を取得し、様々な教育施設にて作文、小説創作、Zine(個人制作の冊子)の作り方について講義を行っています。
カテゴリ: コンピューター
このページは 266 回アクセスされました。

この記事は役に立ちましたか?

広告