【Photoshop】CSSをコピーして使う方法！

Toshi

Photoshopを使っていて、「CSSをコピー」という機能を見たことがありませんか？今回は、Photoshopで作った要素(レイヤー)のCSSをコピーして使っていこうと思います！

今回解説していく内容は以下です！

 本記事の内容

CSSをコピーして使う方法！

Photoshopで作った要素(レイヤー)のCSSをコピーして使うには、レイヤーパネルで CSS をコピーしたい要素を選択した状態で右クリックし CSSをコピー をクリックすればCSSのコピーが完了です。今回は、5つの要素を作って実際にCSSがどのように反映されるのか検証してみます。

公式サイトで書かれていた内容を参考にすると、コピーできる要素が決まっているようです。

レイヤーから CSS をコピー

Adobe Photoshop で、「CSS をコピー」コマンドを使用してシェイプレイヤーまたはテキストレイヤーから、カスケーディングスタイルシート（CSS）プロパティを生成する方法を学習します。

helpx.adobe.com

CSSを実際にコピーしたら、CodePenというWeb上で HTML / CSS / JS のCodeを書けるサイトがあるのですが、そこに貼り付けてどこまでの要素がコピーできているのか見ていきましょう！

【CodePen】Webブラウザ上でプログラミング簡単学習！

Webデザイン（プログラミング）を学習しよう！といった時、いろいろな準備がありますがこの「CodePen」を使ってしまえば、「HTML」「CSS」「JavaScript」がWebブラウザ上で簡単に学習できてしまいます！この魅力的なツール「CodePen」につてお伝えしたいと思います！

www.alloneslife-0to1work.jp

2019/05/29

実際にCSSをコピーし、確認した結果。このようになりました。

See the Pen
Photoshop CSSコピー by 平野寿和 (@tt02580274)
on CodePen.

やはり、PhotoshopのCSSをコピーして全て同じように要素が作れるわけではないようですが、要素に影をつけたり、要素の配置は正確にできています。

関連記事

Photoshopの使い方をまとめているので、よければこの記事もご覧ください！

【Photoshop】初心者のための使い方(まとめ)

Photoshop の使い方を記事で書いてきましたが、初心者 の方にもわかりやすくPhotoshopを使ったら何ができるのか、また使い方をまとめてみました！ぜひ、今からPhotoshop使っていくよという方は、参考にみて下さい。※随時記事は追加しています。

www.alloneslife-0to1work.jp

2022/01/31

まとめ

Toshi

いかがでしたか？CSSをコピー…あまり使うことはないと思いますが、CSSを勉強している人にとってはいいかもしれませんね！ぜひ、CSSを確認したいレイヤー(要素)があればCSSをコピーしてCodePenなどを利用して確認してみてください。