Illustrator CCで追加された機能に、CSSプロパティパネルがあります。これは、Illustratorで作成したオブジェクトやテキストの属性をCSSコードで書き出す機能です。ここでは、Web制作で役立つこの機能の詳細を紹介しましょう。
CSSプロパティパネル
Webサイトのデザインやアセットの作成にIllustratorを使用しているユーザーも多いと思います。
Illustrator CCではCSSプロパティパネルが追加され、文字書式やオブジェクトの属性を、CSSコードとして表示し、コピー＆ペーストやCSSファイルで書き出すことができます。
|
CSSプロパティパネルに表示されたオブジェクトの属性のCSSコード |
オブジェクト属性のCSSコードの表示
オブジェクト属性のCSSコードを表示する方法から紹介しましょう。
まず、CSSコードを表示したいオブジェクトを選択します。この状態では、CSSプロパティパネルにCSSコードは表示されません。
|
CSSコードを表示するオブジェクトを選択する。CSSプロパティパネルにCSSコードは表示されない |
レイヤーパネルでサブレイヤーを展開し、選択しているオブジェクトの名称部分をダブルクリックし、オブジェクトに名称を入力します。
|
オブジェクトの名称部分をダブルクリックして、名称を入力 |
オブジェクトに名称を付けると、選択したオブジェクトのCSSコードが、CSSプロパティパネルに表示されます。オブジェクトの名称は、CSSのクラス名となります。
|
オブジェクトの名称がクラス名となるCSSコードが表示される |
オブジェクトの選択は、選択ツールで行います。レイヤーパネルのレイヤー名をクリックして選択しても、それはサブレイヤーが選択されただけであり、オブジェクトが選択されてる状態にはなっていません。
なお、CSSコードとして書き出せない効果が適用されている場合、CSSプロパティパネルの左下に「！」アイコンが表示されます。
|
CSSコードとして書き出せない効果が適用されていると、左下にアイコンが表示される |
文字属性のCSSコードの表示
文字属性のCSSコードを表示してみましょう。
CSSコードを表示したいテキストオブジェクトを選択します。CSSプロパティパネルには、クラス名が「.st」のCSSコードが表示されます。
|
テキストオブジェクトを選択すると、クラス名が「.st」のCSSコードが表示される |
このままだと、どんな文字属性のテキストオブジェクトも、クラス名は「.st」のCSSコードとなります。クラス名を明確にするには、文字スタイルとして登録します。
テキストオブジェクトを選択した状態で、文字スタイルパネルの「新規スタイルを作成」をクリックします。「文字スタイル1」という文字スタイルが追加されるので、名称部分をダブルクリックしてスタイル名を変更します(ここでは「name01」)。
|
文字スタイルパネルを表示し、文字スタイルを登録する。登録したら、スタイル名を変更 |
CSSプロパティパネルに、登録された文字スタイルが自動で追加されます。文字スタイルのCSSプロパティは、テキストオブジェクトを選択しなくても、CSSプロパティパネルで選択すれば、いつでも表示できます。
|
CSSプロパティパネルに、登録した文字スタイルが追加される |
文字スタイルパネルとCSSプロパティパネルは連動しており、文字スタイルパネルに文字スタイルを追加すると、自動でCSSプロパティパネルに追加されます。文字スタイルを削除すると、CSSプロパティパネルからも削除されます。
複数のオブジェクトのCSSコード表示
CSSプロパティパネルには、複数のオブジェクトのCSSコードを表示できます。CSSコードを表示したいオブジェクトを選択し、CSSプロパティパネルの「CSSを生成」をクリックします。
|
複数のオブジェクトを選択して、CSSプロパティパネルの「CSSを生成」をクリック |
CSSプロパティパネルに、選択したオブジェクトのCSSコードが表示されます。
|
選択したオブジェクトのCSSコードが表示される |
なお、オブジェクトには、レイヤーパネルで名称を付けておく必要があります。
