レイヤーから CSS を生成

Last updated on 2026年10月29日

Adobe Photoshop で、シェイプレイヤーとテキストレイヤーから CSS コードを抽出し、デザインプロパティを Web 公開用のスタイルシートに変換する方法を学びます。

Copy CSS 機能は、Photoshop のレイヤーから直接 Cascading Style Sheet プロパティを生成し、スタイルシートファイルに貼り付けられるデザイン仕様を取得します。このワークフローは、ビジュアルデザインとコード実装の間のギャップを埋めるもので、特に Web プロジェクト用にアセットを準備する場合や、正確なスタイル仕様を必要とするデベロッパーと共同作業する場合に役立ちます。

ビジュアルデザイン要素をコード対応のスタイル宣言に変換する必要がある場合は、Copy CSS を使用します。この機能は、個々のシェイプレイヤー、テキストレイヤー、またはこれらの要素を含むレイヤーグループで使用できます。これにより、ピクセル単位の精度でデザインプロパティを取得し、スタイルシートに直接貼り付けられる CSS が生成されます。デザインから Web へのワークフローをさらに活用するには、追加のスタイルオプションとしてレイヤーの効果とスタイルを、別の出力形式についてはアセットの書き出しをご覧ください。

レイヤーから取得した CSS プロパティ

Copy CSS は、選択したレイヤーの種類に応じて異なるプロパティを抽出します。

シェイプレイヤーは、次の項目に対して CSS を生成します：

サイズと位置の座標
線のカラー
グラデーション定義を含む塗りの色
ドロップシャドウ効果

テキストレイヤーは、シェイプのプロパティに加えてテキスト編集の仕様も取得します：

フォントファミリー
フォントサイズと太さ
行の高さ
テキストの装飾 (下線、取り消し線)
垂直方向のアラインメント (上付き文字、下付き文字)
テキスト揃え

レイヤーグループは、親子関係を表す構造化された CSS クラスを作成します。グループ自体が親の div になり、グループ内の各レイヤーが子の div を生成します。子要素の top および left の位置の値は、通常の CSS の位置指定の動作と同様に、親コンテナーを基準に算出されます。

Copy CSS の制限事項

Copy CSS はスマートオブジェクトでは機能しません。レイヤーがSmart Objectの場合は、ダブルクリックして内容を編集し、Smart Object ドキュメント内のレイヤーから CSS をコピーしてください。ワークフローに応じて、先にレイヤーをラスタライズしても構いません。

この機能は、グループ化されていない限り、同時に選択された複数のシェイプレイヤーまたはテキストレイヤーを処理できません。複数のレイヤーから一度に CSS をコピーするには、まずそれらをレイヤーグループにまとめてください。

レイヤーから CSS コードを生成

レイヤーパネルで、シェイプレイヤー、テキストレイヤー、またはレイヤーグループを右クリックし、コンテキストメニューからCSS をコピーを選択します。または、レイヤーを選択し、レイヤーパネルメニューからCSS をコピーを選択します。

スタイルシートドキュメントを開き、Ctrl + V (Windows) または Command + V (macOS) を使用して生成されたコードを貼り付けます。

CSS コードはクリップボードにコピーされており、web プロジェクトに統合する準備が整っています。生成されたプロパティを確認し、開発要件に合っているかを確かめてください。また、レスポンシブデザインやブラウザーの互換性に応じて値を調整してください。

Photoshopで魅力的な画像を作成
業界をリードする使い慣れた創造的なツールで写真を編集、レタッチ、変換できます。

アプリを開く

Photoshop でノーツを使用する

学ぶ

アプリ内のステップバイステップのビデオチュートリアルと実践的なガイダンスで学習できます。

コミュニティ

ディスカッションに参加し、回答を見つけ、専門家から学び、知識を共有することができます。

アドビホーム

お気に入りの Creative Cloud アプリ、サービス、ファイル管理などにアクセスできます。