ブラウザ(Webページ)に表示されている色を抽出する(Penduleの使い方)

LINEで送る
Pocket

この記事の所要時間: 約 6分14秒

pendulePHPにはまり込んで、いろいろシステムを開発していて、めっきり、ブログの更新ができていないのですが、かなり便利なツールを見つけたのでご紹介。

 

色の組み合わせが綺麗なWebページを見ていると、その色テーブルを参考にさせていただきたくなるのですが、いちいち、カラーピッカーで調べるのは面倒です。

 

ブラウザから直接調べられる機能は無いかと探したら、あるんですよねー。

しかも、めちゃくちゃ便利な機能が詰まっていました。

 

 

Chrome拡張機能「Pendule」

 

Webデザイナーさんにとってはすでに常識だったらすみません。

私は知りませんでした。これは超絶便利です。

 

Chrome拡張機能「Pendule」のインストールはこちら

※Firefoxの場合は、似たような機能で「Web Developer」があります。

 

インストールしたら以下のアイコンが追加されます。

pendule、Crome拡張機能

 

私の目的は、色を簡単に調べるために使い始めたのですが、

この「Pendule」には以下の機能があります。

 

スタイルシート関連操作(STYLE SHEETS)

 

pendule(STYLE SHEETS)

 

  • View CSS
    → CSSが抽出できる
    ※先にReload CSSをしてから確認します
  • Disable all styles
    → 全てのCSSを無効にできる
  • Disable inline styles
    → 全てのインラインスタイルを無効にできる
    ※インラインスタイルとは、<span style=“~”>と記述されているやつです
  • Disable embedded styles
    → HTMLヘッダに直接記述されているスタイルを無効にできる
  • Disable linked styles sheets
    → リンクされているCSSを無効できる
  • Show used colors
    → 使用されている色テーブルが表示できる
    ※以下の感じで、ページに表示されている色テーブルが表示されます。
    RGB値と16進数の値で表示してくれるのもありがたい
    pendule(Show used colors)

 

フォーム関連操作(FORMS)

 

ここの項目はあまり必要ないかもしれませんね。

pendule(FORM)

 

  • Show passwords
    → フォームのパスワード「・・・」の文字列を表示させれる
  • Remove maxlength attributes
    → テキスト入力エリアの最大文字数が指定されているものを見つけ、無効化します。
  • Convert select elements to text input
    → プルダウンの選択項目を、テキスト入力に変更します。(必要かな??)
  • Show hidden element
    → 隠し要素(input type=“hidden”~ てやつ)を表示します。
  • Clear radio buttons
    → チェックしてしまったラジオボタンを未チェックに戻せます。
  • Enable form elements
    → readonlyのフォームの要素を無効化します。
    ※<INPUT type=”text” value=”~~~” readonly > てやつですね。表示だけさせて入力できなくしているやつ。
  • Convert GETs to POSTs(Convert POSTs to GETs)
    → FormタグのGETメソッドをPOSTメソッドに変更、またその逆。

 

イメージ・画像関連操作(IMAGES)

 

pendule(IMAGES)

 

  • View images information
    → Webページのすべてのイメージ画像の情報が表示できる
  • Hide all images
    → Webページのすべてのイメージ画像を非表示にする
  • Hide background images 

    → Webページのすべての背景画像を非表示にする

  • Show alt text
    → 全ての画像のALTテキストを表示できる
    pendule(Show alt text )
  • Show dimensions
    → 全ての画像のディメンション(縦横の大きさ・サイズ)を表示できる
    pendule(Show dimensions)
  • Show paths
    → 全ての画像のソース(参照元URL)が表示できる
    pendule(Show paths)

 

その他の操作(MISCELLANEOUS)

 

pendule(MISCELLANEOUS)

 

  • View Javascript
    → 使用されているJavascriptが表示できる
  • View genetated source
    → WebページのHTMLを表示できる
  • Display ruler
    → ルーラーで画面内の縦横のサイズを自由に測定できる
    ※サイズを矩形ツールで測定できます
    pendule(Display ruler) 
  • Display color picker → カラーピッカーで調節、ピンポイントの色を抽出できる
    ※カーソルの位置のカラーをRGB値、16進数値で表示、値のコピーもクリックひとつという優しさがうれしいです。
    pendule(Display color picker)
  • Topographic view → HTMLの階層をグレースケールで表示できる
    ※bodyタグが一番上、上層(黒色)となり、その次のブロック要素(Div要素、H要素、P要素、~~~)が下層ごとに、グレースケールで表示されます。一番深い層が明るいグレーに表示されますね。
    pendule(Topographic view)
  • Remeve coolies → 保存されたクッキーの数を表示、削除します。

 

ラウザのサイズ操作(RISIZE BROUSER)

 

pendule(RISIZE BROUSER)

 

  • Display window and viewport size
    → ブラウザのウィンドウサイズを指定変更できる

 

アクセシビリティ関連(ACCESSIBILITY)

 

pendule(ACCESSIBILITY)

 

全てのアクセシビリティチェッカーは、W3Cの標準チェッカーです

 

  • Validate HTML
    → HTMLのエラーチェックができる
  • Validate CSS
    → CSSのエラーチェックができる
  • Validate links
    → リンクのエラーチェックができる(デッドリンクチェック)
  • Validate feed
    →RSSやAtomといったフィードのエラーチェックができる
  • Validate accessibilty(WAI)
    → Webアクセシビリティチェッカーでチェックできる
  • Validate local HTML(CSS)
    → XAMPPやApachなどローカル環境で表示しているHTML(CSS)ファイルのエラーチェックができます

 

ザックリと大まかな説明ですが、これはかなり便利ですね。

FireBugがあまり好きでない私にとっては、かなり使いやすいです。

 

 

LINEで送る
Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です