One-Click CSS Copy / 使い方

初めてのCSSコピーは4ステップ

One-Click CSS Copyで要素を1つ選び、CSSを確認してコピーするまでの簡単な案内です。

アカウントは不要です。最初は通常のWebページを開いてください。chrome://やChrome ウェブストアでは選択できません。アイコンが見えない場合は、パズル形の拡張機能メニューからピン留めできます。

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

01
Webページと拡張機能を開く
対応するHTTP/HTTPSページ上で、ChromeツールバーのOne-Click CSS Copyを押します。
02
「Select an element」を押す
マウスの下にある要素がハイライトされます。
03
要素を1つクリックする
パネルに計算済みCSSと、含まれるプロパティ数が表示されます。
04
「Copy CSS」でコピーする
エディターに貼り付け、.copied-elementを変更します。続ける場合は「Inspect another」を押します。

ヒント

背景色、padding、border-radiusを確認し、Chrome DevToolsのComputed欄と比べてみてください。出力が元のCSSルールではないことも理解しやすくなります。

整理されたCSS出力の例CSS

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

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

無料版は1日5回までコピーできます。クリップボードへの書き込みがブロックされた場合は、CSSを選択して手動でコピーしてください。EscapeまたはCancelで選択を終了できます。

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

選択モードが始まらない

通常のHTTP/HTTPSページで再度試してください。Chrome内部ページは対象外です。

貼り付けた見た目が違う

親要素の配置、フォント、外部リソース、セレクターを確認してください。

別の要素を調べたい

結果パネルの「Inspect another」を選択します。