今回はPhotoshopやIllustratorに搭載しているcss書き出し機能がどれくらい使えるものか実験をしてみました。
css3をガンガン使っても問題なさそうな空気が出来上がってきたので、今まで画像で書き出していた丸い形もcss3で作っていきたいと思います。
ほとんどのブラウザで丸い形を作るためのプロパディである「border-radius」がベンダープレフィックスなしで使えるので、この記事の中ではベンダープレフィックスを付けずに書いていきます。例外として、生成されたコードにベンダープレフィックスがついていた場合は、そのまま記載していきます。
まずは手書き
普段、手書きでcssを書いているんですが、私ならこんなかんじでcssを書いて丸い形を再現します。あっ、セレクタ部分は適当です。
.tegaki {
border-radius: 50%;
width: 100px;
height: 100px;
background-color: pink;
}
border-radiusの値を50％に指定。それから要素の幅と高さを指定して、最後に背景色をつけるという感じです。
これがPhotoshopやIllustratorだとどういうコードを生成してくれるのか？
PhotoshopやIllustratorで円を書く方法はいくつもあると思いますが、今回は「楕円形ツール」で円を書く方法と「長方形ツール」で正方形を描き角丸で円にしていく方法の2パターンでやってみました。
※PhotoshopとIllustratorのバージョンですが、どちらもcc2014の最新版で行っています。
Photoshopで生成されるcss
最初にPhotoshopで円を描き、cssを生成しました。
楕円形ツールで描いた円から生成されるcss
.ps-circle {
border-radius: 50%;
background-color: rgb(29, 32, 136);
width: 100px;
height: 100px;
}
こんなコードになります。次に長方形ツールで描いた正方形に角丸を適用させて円にした場合。
長方形ツールで描いた正方形を角丸で円にしたものから生成されるcss
.ps-square {
border-radius: 50%;
background-color: rgb(87, 134, 206);
width: 100px;
height: 100px;
}
こんなコードになります。どちらのコードも同じものが書き出されていますよね。（色が違うのは特に意味は無いです。）
ひとつお断りをしておくと、Photoshopで生成されたcssにはこれ以外に位置や重なり順を指定するようなcssもついてきます。具体的に言えばpositonであったりz-indexだったり。
円を書くためのcssとは直接関係ないので、記述しているコードからは削除をしています。
Illustratorで生成されるcss
次にIllustratorで円を描き、cssを生成しました。
楕円形ツールで描いた円から生成されるcss
.ai-circle {
background : #F15A24;
background : rgba(241, 90, 36, 1);
width: 100px;
height: 100px;
}
こんなコードになります。次に長方形ツールで描いた正方形に角丸を適用させて円にした場合。
長方形ツールで描いた正方形を角丸で円にしたものから生成されるcss
.ai-square {
background : #F7931E;
background : rgba(247, 147, 30, 1);
border-radius : 50px;
-moz-border-radius : 50px;
-webkit-border-radius : 50px;
width: 100px;
height: 100px;
}
こんなコードになります。
Aiの楕円形ツールで書いた円は、border-radius自体が書き出されていないため、このままcssを適用しても円にはならないです。このあたりはIllustratorにもっと頑張ってもらいたいところですね。
考察
Photoshopが生成したコードは普段手書きするコードと似たような感じで出てきました。特にborder-radiusの値が％指定なので、円の大きさが変わっても柔軟に対応出来ます。
Illustratorが生成したコードはborder-radiusの値がpx指定。なので円の大きさが変わるたびに数値を書き換える必要が出てきます。
個人的にはwebデザインはIllustratorでと思っています。
しかし円を描くときも楕円形ツールで描くとcssが生成できないというのは衝撃的な結果でした。
わざわざ正方形を書いて角丸で丸くして円を描くなんてかなり面倒な作業ですよね。
cssの生成という点ではいまのところPhotoshopの方が柔軟に対応してくれそうです。
繰り返しになりますが、、、もう少しIllustratorには頑張ってもらいたいところです。