イトウ先生のTipsnoteIllustrator CC・CSSプロパティ

イマジカデジタルスケープ 短期集中クリエイティブ講座

イマジカデジタルスケープ・AfterEffects・Photoshop・HTML・CSS・JavaScript・1日トレーニング

Web・動画・映像・ゲーム・DTP・CG・Adobe Creative Cloud・キャリア・就活に

 
 
1 10月・日曜開講のお知らせ
 

お客様index

企業・自治体のお客様に 業務効率化、コスト削減に
クリ博登録者・学生の方に 割引トレーニングはコチラ


イトウ先生のTipsnote


イトウ先生のTipsnote:目次

【 Illustrator CCの新機能:CSSプロパティ 】 

今週は、Illustrator CC新機能の中から、「CSSプロパティ」をご紹介いたします。
「CSSプロパティ」は、Adobe Creative Suiteでは唯一Fireworksが、CS6バージョンから搭載した機能になりますが、ドキュメント上で作成したオブジェクトから、自動的にベンダープレフィックス付きのCSSを生成する機能になり、この機能がIllustrator CCでも使用可能になりました。
Fireworks CS6でのCSSプロパティパネルの使い方は、過去ブログ【 Fireworks CS6 〜 Master Collectionの新機能:CSSプロパティパネル・CSSスプライト書き出し・jQuery Mobileテーマ 〜 】にてご紹介しておりますので、そちらをご確認いただきたいのですが、IllustratorでのCSSプロパティパネルは、少々Illustratorなりのオペレーションが必要になりますので、その辺りをご紹介したいと思います。

さっそくやってみよう!

まずは、ウインドウメニューからCSSプロパティを選択し、CSSプロパティパネルを表示した上で、Illustrator上で、任意のオブジェクトを作成します。
この時、作成したオブジェクトのレイヤー名にクラス名を設定しておかないと、デフォルトではCSSを書き出してくれません。クラス名の命名規則に従って、任意の名前をレイヤー名に設定します。
この時のレイヤー名とは、サブレイヤーの名称のことをいい、親レイヤーとなるレイヤー1の名称を変更しても、書き出すことはできません。

aicc_css001

aicc_css002

なお、サブレイヤーの名前を設定しない状態でCSSを書き出す場合は、CSSプロパティパネルのパネルメニューから、書き出しオプション…を選択し、名称未設定オブジェクト用にCSSを作成、にチェックを入れ、OKをクリックします。すると、自動的に任意のクラス名を設定し、CSSを作成します。

aicc_css003

なお、名称未設定オブジェクト用にCSSを作成、にチェックを入れ、自動的にクラス名が設定された後でも、レイヤーパネルからサブレイヤーの名称を変更すると、自動的にCSSプロパティパネル内のクラス名も変更されます。なお、CSSプロパティパネル上では名前の変更を行うことはできないため、クラス名の変更はあくまでもレイヤーパネルで行う、ということになります。

CSS3のプロパティ

CSS3から登場した、linear-gradientやborder-radius、box-shadowなどの各プロパティも、以下の通りベンダープレフィックス付きできちんと書き出されます。

aicc_css006

なお、これらCSS3のプロパティをIllustratorの機能で設定する場合は、それぞれ以下の機能で設定するようにします。

○ linear-gradientやradial-gradient:グラデーションパネル、またはグラデーションツール
○ border-radius:最初から角丸長方形ツールで描画する
○ box-shadowや、text-shadow:効果メニュー→スタイライズ→ドロップシャドウ

ドロップシャドウの設定に、効果メニュー→SVGフィルター→AI_シャドウ1などの、SVGフィルタ系を使用してドロップシャドウを作成すると、オブジェクトは自動的にイメージ扱いとなり、box-shadowではなく【background-image : url(・・)】の形のCSSになります。

aicc_css007

このSVGフィルターを使用する場合は、CSSに書き出さず、IllustratorドキュメントをSVG形式で保存して、保存されたSVGのソースをHTMLにコピーペーストして使用することで、拡大縮小しても劣化することが無い、という、ベクトルデータ特有のメリットを活かすことも可能ですので、詳しくは過去ブログの、12/02/15: イトウ先生のTips note【Illustrator】SVGインタラクティビティ(※外部サイト:WORKS ONLINEへリンクされています。)を参照してみてください。

テキストのCSS書き出し

Illustrator上でテキストを入力した場合のCSSですが、Illustratorでは元々、テキストを入力すると、サブレイヤーの名レイヤー名は、入力したテキストと同じ名前になります。Illustratorでのレイヤー名の最大文字数は、1バイト2バイト文字共通で最大99文字まで付けることが可能です。 CSSのクラス名の文字数には上限はありませんので、仮に99文字のクラス名でも設定することは可能ですが、そもそも長すぎるのと、入力した文字が日本語の場合は、その日本語がそのままレイヤー名となるため、イコールクラス名として使用されることになるわけですが、Illustratorでは、テキストのレイヤー名は、クラス名には反映しないようになっています。仮にレイヤーパネルで他の名前に書き換えたとしても、自動的に設定される.st(おそらくJavaScriptでのメソッド同様、Stringの頭文字からstだと思われます)という名称でクラス名が設定されます。

aicc_css008

また、日本語を指定した場合、Illustratorでは、fomt-familyの値を日本語で書き出しますが、書き出すCSSにはきちんと@charsetを設定して書き出されるようになっています。

aicc_css011

ちなみに、FireworksのCSSプロパティパネルは、以下の通り英語名で書き出します。

aicc_css009


これまで唯一、Fireworksでのみ可能だったオブジェクトからのCSS書き出しが、Illustratorにも搭載されました。Illustratorでは元々SVGも扱えることもあり、HTML5やCSS3と共に使用する機会も増えてくるのではないか、と思いますので、皆さんもぜひ試してみてください。

関連講座

↑ページTOPへ

| カテゴリ | | Web | DTP・デザイン | CG・動画・映像 | キャリア・就活 |
| お客様 Index | | 企業・自治体のお客様に | 学生の方に |
| 目的別・状況別 Index | | Webデザイン入門セミナー | 映像編集入門セミナー | DTPデザイン入門セミナー | 魅力的なポートフォリオ作成 |
| Adobe CCを覚えたい方に | | Photoshop CC 2015の使い方・基本 | Illustrator CC 2015使い方・基本 |
| 画像をきれいに編集する方法 | 読みやすい文字の組み方 |
| HTML / XHTML / CSSの基礎知識 | HTML5 / CSS3の基礎知識 | JavaScriptの基礎知識 | jQuary・jQueryMobileの基礎知識 |
| Dreamweaver CC 2015の使い方・基本 | InDesign CCの使い方・基本 |
| AfterEffects CCの使い方・基本 | AfterEffects CC 2014の使い方・実践 |
| Premiere Pro CC 2014の使い方・基本 |
| Webの基本をマスターしている方 | | 棚橋弘季氏の直伝、ユーザー中心のWebサイト設計 | 益子貴寛氏が伝授するCSS実践テクニック |
| 矢野りんさんに学ぶ、”使える”デザイン基礎知識 | こもり氏のHTML+CSS基礎 | 平塚氏のマーケティング基礎 |
| 坂本氏のIA入門 | Webに関わるすべての人の「Webリテラシー」講座 | 神森勉氏に学ぶコーディング講座 |
| 森川眞行氏に学ぶ、大規模サイトの構築・運用マネジメント |
| 就職・転職・就活中の方へ | | 模擬面接セミナー(個別FB付) | エントリーシートブラッシュアップセミナー |
| 面接・職場で使えるビジネスマナー研修 | 職務経歴書添削セミナー |