Web要素を選べるCSSピッカー

Webサイトの要素のCSSを、必要な分だけコピー

気になるボタンやカードを見つけたら、その要素だけを選択。現在の計算済みスタイルを確認し、自分の制作に合わせて使えるCSSの抜粋をコピーします。

無料版：CSSのコピー成功は1日5回まで

整理されたCSS出力の例CSS

.copied-element {
  background-color: #2563eb;
  color: #ffffff;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 600;
}

説明用の例です · 実際の値は要素によって異なります

欲しいのが1つの要素なら、コードも小さく

ボタンの角丸や見出しの文字サイズを調べたいだけなのに、スタイルシート全体を追いかけるのは手間がかかります。この拡張機能は、選択した要素の主な計算済みプロパティを見やすくまとめます。元のルールや詳細な原因調査にはChrome DevToolsを使ってください。

確認できるCSSプロパティ

フォントと文字

font-family、font-size、font-weight、line-heightなど、対応する文字関連の値。

色や見た目

文字色、背景色、枠線、角丸、影、一部のグラデーション。URLを含む背景画像は除外します。

余白とレイアウト

padding、margin、gap、display、FlexboxやGridの一部の設定。

コピー前のプレビュー

抽出結果をパネルで読んでからコピー。標準値や重複する情報は一部省かれます。

要素のCSSをコピーする手順

01
通常のWebページを開く
対応するHTTP/HTTPSページを使用します。Chromeの設定画面やWeb Storeでは選択できません。
02
要素選択を開始
拡張機能のアイコンから「Select an element」を押します。ポインターの下の要素が強調表示されます。
03
選択してCSSを確認
ボタンなどを1つクリック。仮のセレクター「.copied-element」で計算済みCSSを表示します。
04
コピーして調整
「Copy CSS」でコピーし、制作中のコードに貼り付けて値やセレクターを調整します。

こんな場面に向いています

ボタンの見た目を参考にする

文字色、角丸、余白を確認して自分のUIを組み立てるとき。

カードのデザインを検討する

枠線や影、内部余白の値をプロトタイプの参考にするとき。

CSSの学習に使う

見出しの計算済みスタイルを読み、DevToolsの表示と比較するとき。

計算済みCSSと元のCSSは異なります

ブラウザーは複数のルールを解決して、要素の最終的な値を計算します。拡張機能はgetComputedStyleからその一部を取り出します。元のclass名、Sassファイル、CSS変数名、レスポンシブの条件を復元するものではありません。出力される.copied-elementはサンプル用のセレクターです。

DevToolsと使い分ける

すぐに試したいCSSの断片が欲しいなら、この拡張機能が便利です。一方、どのスタイルシートが効いているか、詳細度、疑似要素、親のレイアウトまで調べるならDevToolsが適しています。目的に合わせて併用できます。

コピーされないもの

対象はDOM要素1つだけです。ページ全体やコンポーネント階層、外部フォントや画像、メディアクエリは書き出しません。別オリジンのiframe、閉じたShadow DOM、canvas内の描画内容も通常の要素としては選べません。

よくある質問

WebサイトのボタンのCSSをコピーできますか？

対応ページ上のボタンを1つ選び、主な計算済みスタイルをコピーできます。

元のCSSファイルも取得できますか？

いいえ。出力は計算済みの値の抜粋で、元のルールやファイルではありません。

hoverやメディアクエリをコピーできますか？

いいえ。現在の状態・画面サイズでの値を扱い、ルール自体は復元しません。

閲覧ページのデータは送信されますか？

標準Free版では、URL・HTML・CSSを発行元へ送信しません。

無料で何回コピーできますか？

現地の暦日ごとに、コピー成功5回までです。

選択できないタブがあるのはなぜですか？

Chromeの内部ページやWeb Storeなどでは拡張機能の実行が制限されています。

貼り付けたら同じ見た目になりますか？

保証はありません。親要素の配置、フォント、画像、画面サイズなどに左右されます。

ページの内容はブラウザー内で処理

標準Free版では、選択を開始した際に開いているタブへの一時的なアクセスを使います。ページURLやCSSを発行元へ送らず、通常の利用にアカウント登録も必要ありません。