Illustrator CCのCSS書き出しのバグ

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

Illustrator CCでは、CSS書き出しをサポートしています。

Web制作を行っている方にとっては、なかなか気の利いた機能ですが、アドビのプロモーションで行っているようなデモは『夢物語』です。

必要な下準備

Illustrator CCで選択したオブジェクトのCSSコードを抽出するには、次のいずれかを行う必要があります。

  • [レイヤー]パネルで、オブジェクトに(半角英数字で)名前を付ける
  • [CSS書き出しオプション]ダイアログボックスで「名称未設定オブジェクト用にCSSを作成]にチェックを付ける

AICC-CSS-Export-1-s.jpg

さっそくバグ情報

角丸長方形ツールを使って描画すると、「border-radius」(角丸を意味するCSSのプロパティ)を書き出してくれます。

AICC-CSS-Export-3.jpg

しかし、長方形ツールを使って描画し、[角を丸くする]効果を適用すると、「border-radius」を書き出してくれません。

AICC-CSS-Export-2.jpg

このような仕様は、すぐに修正されると美しいです。

追記(2013年11月13日):

アピアランスを分割すると、CSS書き出しは不可能になります。角丸長方形ツールを利用してください。

AiCC-CSS-Export-Bug.jpg

追記(2014年3月8日):

ライブコーナーを使って、長方形の角を丸める場合、「border-radius」は「0」となってしまいます。

AiCC-livecorder-CSS-1.jpg

ここまでは仕方ないとしても、個別に角丸を設定すると、現状では、ムチャクチャな結果になってしまうようです。

AiCC-livecorder-CSS-2.jpg

『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

その他

 

リンク

このページの上部に戻る