WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

くりりん

2017/03/02

PhotoshopからCSSを生成できる!CSS3Psの使い方

投稿者: くりりん
カテゴリー: デザイン >Photoshop

Photoshopで制作したオブジェクトのパーツを画像で使用するのでは無く、
コーディングして使用する際、CSSを記述するのが面倒だと感じることはありませんか?
そんなちょっとした面倒な作業を効率化できるのが、今回紹介する【CSS3Ps】です。
CSS3Psは、Photoshopで制作したオブジェクトのCSSを出力してくれるツールです。まずはダウンロードからインストールまでの手順を見てみましょう。

CSS3psのダウンロードからインストールまでの手順

1.公式サイト(http://www.css3ps.com/)にある右上の【Free Download】をクリックします。

2.ダウンロードページから、該当のバージョンをダウンロードしましょう。

3.ダウンロードしたファイルを【プログラムで開く】→Adobe Extension Managerで開きます。

4.下記の画面が出てきたら【承認する】をクリックし、インストールをします。

5.これでCSS3Psのインストールが完了しました!次にPhotoshopを開きます。

6.【ウィンドウ】→【エクステンション】→【CSS3Ps】を選択します。

選択後、このようなパネルが表示されます。

これでCSS3Psを使用する準備はできました。それでは早速CSS3Psを使ってみましょう。

ボタンを作ってCSSの生成してみましょう

グラデーションなどを使ったボタンをPhotoshopで作ってみました。
このボタンをCSSで書くのは面倒ですね…。
そんな時に、先ほど使えるようにしたCSS3Psの出番です。

オブジェクトを作ったら、CSS3Psのパネルをクリックします。


そうすると、webブラウザが立ち上がり、CSSでの記述が表示されます。
なんと、CSSハックも記述されているので、様々なブラウザでの見え方への配慮もできています。

CSSの他に、【SCCS】と【SASS】での記述方法も生成してくれるので、
自分で一から書かずに、パーツを作ることができますね!

CSS3Psを使用することでCSSのコード記述の時間短縮にも繋がります。
是非、試してみてください♪

最後までお読みいただき、ありがとうございました。

よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ