先週発表された、Create Cloud から提供される Photoshop 13.1 アップデートでは、CSS 関連の機能が 2 つ追加されました。
- HTML や CSS ファイルに定義されている色をスウォッチに読み込み
- レイヤーを CSS コードとして書き出し
まず、「スウォッチの読み込み」 から、HTML や CSS ファイルも指定できるようになりました。これまで、スポイトツールを使って既存の Web ページから色を 1 つ 1 つ拾っていた、という人には嬉しい機能かもしれません。
もう 1 つは、シェイプやテキストなどを、CSS コードに変換する機能です。この機能を使うには、対象のオブジェクトを含むレイヤーを選択して、レイヤーメニューから 「CSS をコピー」 を選択します。
生成された CSS コードは、クリップボードに書き出されるので、コードエディタにコピーしてから利用します。
例えば、ドロップシャドー付きの角丸長方形を CSS コピー機能で変換すると、以下のような感じのコードが生成されます。
.角丸長方形_1 {
border-radius: 10px;
background-color: rgb( 230, 0, 18 );
box-shadow: 2.5px 4.33px 5px 0px rgb( 0, 0, 0 );
position: absolute;
left: 299px;
top: 315px;
width: 148px;
height: 88px;
z-index: 2;
}
これを適用すると、Photoshop 内の表示にほぼ近い状態で、角丸長方形がブラウザ内に表示できます。
ただし、Photoshop で利用可能なレイヤー効果の中に、CSS でサポートされていないものもあります （少なくとも現時点）。
サポートされていない効果は書き出し時に無視されます。警告は表示されません。 そのため、ブラウザで表示してみると 「あれ？」 ということになります。つまり、どの効果が CSS 化できるかは、利用者の側が把握している必要があります。
また、CSS で利用できる全ての表現を Photoshop がサポートしたということでは無いので、CSS をフル活用したデザインをつくりたい、という場合は、Photoshop 任せいうわけにはいかなさそうです。
と、利用できるシーンは限定されていそうではありますが、今後が楽しみな新機能です。そもそも Photoshop の場合、操作の対象がオブジェクトではなくてレイヤーなので、難しい面もありそうではありますが。
Muse のアップデート
Muse は、コードを 1 行も書かずに本格的な Web サイトが作れるという、主にデザイナをターゲットにしたツールですが、こちらもアップデートされました。
今回は、スマートフォンやタブレット向けのサイト最適化機能が追加されています。具体的には、
- モバイル用レイアウトオプションの追加
- モバイル用コンテンツとスタイルオプションの追加
- タッチ操作への対応
- ジェスチャーに対応したウィジェットの提供
などが挙げられています。
コメントする