Illustrator CCのCSS書き出しオプション

この記事は鷹野雅弘によって執筆されました。
公開日:2013年11月13日、更新日:2013年11月13日

Illustrator CCのCSS書き出しオプションについてまとめてみました。

AiCC-CSS-Export-option-s.jpg

カテゴリーオプションサンプルコード
オブジェクトのアピアランス塗りを含める background : #8CC63F;
background : rgba(140, 198, 63, 1);
線を含めるborder-style : Dashed;
border-color : #000000;
border-color : rgba(0, 0, 0, 1);
border-width : 2px;
不透明度を含めるopacity : 0.5;
位置とサイズ絶対位置を含めるposition : absolute ;
left : 355px;
top : 190px;
サイズを含めるwidth : 81px;
height : 43px;
オプション名称未設定オブジェクト用にCSSを生成
ベンダープレフィックスを含めるWebkit-webkit-border-radius : 12px;
Firefox-moz-border-radius : 12px;
Internet Explorer
Opera
サポートされていないアートをラスタライズ
(ダイアログボックス内のオプションなし)角丸border-radius : 12px;
グラデーションbackground : linear-gradient(180deg, rgba(204, 224, 244, 1) 0%, rgba(195, 220, 242, 1) 6.41%, rgba(169, 210, 238, 1) 17.06%, rgba(128, 194, 231, 1) 30.66%, rgba(71, 172, 222, 1) 46.49%, rgba(30, 156, 215, 1) 56.74%, rgba(0, 117, 190, 1) 86.52%, rgba(0, 91, 151, 1) 99.44%);

考察

  • オブジェクトの不透明度を下げると「opacity : 0.5;」のように、塗りの不透明度を下げると「background : rgba(140, 198, 63, 1);」のようになる
  • 塗りの不透明度を下げて「background : rgba(140, 198, 63, 1);」となっても、フォールバック用のコード「background : #8CC63F;」には影響しない
  • 長方形ツールを使って描画し、[角を丸くする]効果を適用すると、「border-radius」を書き出してくれないIllustrator CCのCSS書き出しのバグ
  • 破線設定を行うと、「border-style : Dashed;」のように設定される(しかし、複雑な設定には当然非対応というか、対応するCSSの設定がないので)
  • ドロップシャドウに非対応

結論

シビアな結論ですが、Illustrator CCのCSS書き出しオプション、あまり出番はなさそうです。しいていえば、グラデーションの書き出しくらいですが、専用のオンラインツールを使った方が操作性などがよいかもです。

『10倍ラクするIllustrator仕事術』(増強改訂版[CS5/CS6/CC/CC 2014対応])

2014年10月に発売。新しいバージョンを使いながらも、古いやり方のまま作業されている中級以上のユーザー向けの書籍。ツールやコマンドなどの基本的な使い方の解説はありません。

2015年3月、8月に増刷。前書(2011年版)と合算すると3万部超のロングセラーとなっています。

改訂版に関する情報

2011年に発売した書籍の改訂版です。

  • 対応バージョンは、CS5/CS5.1/CS6/CC/CC 2014
  • 178ページから78ページ増量の256ページ
  • 金額は180円(だけ)アップの2,380円(税別)

最新版への対応

2016年11月リリースのIllustrator CC 2017への対応版を、2017年2月に発売します。なお、書籍リリース後の追加情報は、サポートページにて公開しています。

全都道府県縦断セミナーツアー

2014年10月に技術評論社から発売された『10倍ラクするIllustrator仕事術』(増強改訂版)のプロモーションのために、全国47都道県にて実施。

47都道府県すべての県での開催が終了しました。ご参加ありがとうございました!

『10倍ラクするIllustrator仕事術』改訂版

『10倍ラクするIllustrator仕事術』(増強改訂版)は、2011年発売の『10倍ラクするIllustrator仕事術』の改訂版。2014年に技術評論社から発売、現在5刷です。2011年版と合わせて35,000部のロングセラーとなっています。

詳しくはサポートサイトにて。

画像:『10倍ラクするIllustrator仕事術』改訂版

『10倍ラクするIllustrator仕事術』全都道府県縦断セミナーツアー、 47都道府県すべての県での開催が終了しました。ご参加ありがとうございました!

画像:『10倍ラクするIllustrator仕事術』改訂版

5つの「く」

画像:『10倍ラクするIllustrator仕事術』改訂版

DTP Transitのコアとなっている制作へ考え方「ムラなく、モレなく、直しに強く、手数を少なく、美しく」を5つの「く」としてまとめてみました。

オススメのスライド

お問い合わせ

メールマガジン

サイトの新着情報などを、月1回程度、メールマガジンでも配信しています(まぐまぐから配信。無料です)

オススメ記事

Illustrator

InDesign

Photoshop

その他

 

リンク

このページの上部に戻る