デザインカンプをコーディングするとき、IllustratorにはオブジェクトのスタイルをCSSとして出力できる「CSSプロパティ」パネルが搭載されています。

特にグラデーションのような手書きでは面倒な値を一発で取得できるため、使いどころを押さえておくと作業効率が上がります。この記事では実際に使ってみた経験をもとに、使い方・できること・できないことを正直にまとめました。

    CSSプロパティパネルの使い方

    1. パネルを開く

    ウィンドウ → CSSプロパティ でパネルを表示します。

    Illustrator 2024以降はパネルのタイトルに「（非推奨）」と付いていますが、機能自体は引き続き使えます。

    2. オブジェクトに名前をつける

    レイヤーパネルでオブジェクトに名前をつけておきます。

    名前がないとCSSが出力されません。パネルに「CSSコードは生成されませんでした」と表示された場合、ほぼ確実にこれが原因です。

    名前をつけたくない場合は、パネル下部の 書き出しオプション → 名称未設定オブジェクト用にCSSを作成 にチェックを入れると名前なしでも出力できます。

    3. オブジェクトを選択してコードを確認

    オブジェクトを選択するとパネルにCSSが表示されます。

    選択スタイルをコピー ボタン、または ⌘C でコードをコピーできます。CSSファイルとして書き出したい場合は 選択したCSSを書き出し ボタンから保存できます。

    できること

    ✅ グラデーション（background）

    これが一番実用的です。

    IllustratorのグラデーションはCSS側で linear-gradient() として正確に出力されます。カラーストップの位置・色・角度がそのまま数値で取れるため、手動で計算する手間がなくなります。

    出力例：

    background: linear-gradient(135.24deg,
  rgba(225, 228, 230, 1)  0.15%,
  rgba(236, 238, 239, 1) 10.46%,
  rgba(244, 246, 246, 1) 25.72%,
  rgba(247, 248, 248, 1) 51.06%
);

    ✅ 角丸（border-radius）

    border-radius: 12px;

    ✅ 塗り（background・単色）

    background: rgb(59, 130, 246);

    ✅ 線（border）・線幅・線色

    border-style: solid;
border-color: rgb(181, 181, 182);
border-width: 5px;

    ✅ サイズ（width・height）

    オブジェクトのサイズがそのまま px 値で出ます。アートボード上の実寸を確認するのにも使えます。

    できないこと

    コーダーが「取れると思ったら取れなかった」で引っかかりやすい項目です。

    ❌ ドロップシャドウ（filter: drop-shadow）

    IllustratorのドロップシャドウはCSSでいう filter: drop-shadow() ですが、CSSプロパティパネルには一切出力されません。「効果（fx）」として適用されているスタイルはすべて無視されます。

    ドロップシャドウの値は、アピアランスパネルで数値を直接読み取って手書きするしかありません。

    /* アピアランスパネルの値を読んで手書き */
filter: drop-shadow(10px 10px 10px hsla(223, 6%, 13%, 0.26));

    ❌ 点線（border-style: dashed）

    出力はされますが、値が border-style: Dashed と大文字で出力されるため無効なCSS値です。CSSの正しい値は小文字の dashed なので、そのまま使うと効きません。

    /* Illustratorの出力（そのままでは無効） */
border-style: Dashed;

/* 正しいCSS */
border-style: dashed;

    ❌ 不透明度（opacity）

    アピアランスの不透明度は取得できません。

    ❌ テキストスタイル（font-family 等）

    フォント名は出力されますが、マシンにインストールされているフォント名そのままで出力されるため、Webフォントのクラス名やCSS変数とは一致しません。参考値として使う程度に留めましょう。

    ❌ レイアウト系（margin・padding・position）

    出力されません。Illustratorはレイアウトの概念がないため、余白・配置系のCSSは自分で判断して書きます。

    注意点：古いベンダープレフィックスが混入する

    Illustratorが出力するCSSには、2026年時点では不要なベンダープレフィックスが大量に含まれています。

    /* Illustratorが出力するコード（そのまま使わない） */
background: -moz-linear-gradient(...);
background: -webkit-linear-gradient(...);
background: -webkit-gradient(linear, ...);
background: -o-linear-gradient(...);
background: -ms-linear-gradient(...);
-ms-filter: "progid:DXImageTransform...";
background: linear-gradient(...); ← これだけ使う
filter: progid:DXImageTransform...; ← IE専用、不要

    削除すべき理由：

    • -moz-、-webkit-、-o-、-ms- プレフィックス付き linear-gradient はFirefox 16+、Safari 7+、Chrome 26+ で対応済み。現在使われているブラウザには全て不要
    • -webkit-gradient(linear, ...) は旧Safari（2009年頃）の独自記法で多くの廃止済み
    • filter: progid:DXImageTransform はIE専用。IE11のサポートは2022年6月終了済み

    実際に使うのは最後の background: linear-gradient(...) 1行だけです。

    HSLカラーに変換しておくと、後から色の調整がしやすくなります：

    /* 整理後 */
background: linear-gradient(135.24deg,
  hsla(204, 9%, 89%, 1)  0.15%,
  hsla(200, 9%, 93%, 1) 10.46%,
  hsla(180, 10%, 96%, 1) 25.72%,
  hsla(180, 7%, 97%, 1) 51.06%
);

    カラーコード一括変換ツール | RGBA, HSL⇄HEX変換サイト

    カラーコード一括変換ツール | RGBA, HSL⇄HEX変換サイト テキスト内のRGB / RGBAカラーコードをWEBカラーコード（HEX）に一括変換。逆変換（HEX → RGB）にも対応。  続きを読む

    他に便利な使い方はあるか

    レイヤー名をクラス名として使う

    オブジェクトに付けた名前がそのままCSSのクラス名になります。Illustratorでデザインを作る段階から「bento-left」「is-gradient」のようなクラス名をつけておくと、コーダーとのやり取りがスムーズになります。

    複数オブジェクトを一括書き出し

    ファイル → 書き出し → Web用に保存（従来） からCSSを一括書き出しすることもできます。ページ内の全オブジェクトのスタイルを一度に確認したいときに使えます。

    まとめ

    項目 取れる？
    グラデーション ✅ 実用的
    角丸 ✅
    単色塗り ✅
    線（色・幅） △ 点線は大文字バグあり
    サイズ（width/height） ✅ 参考値として
    ドロップシャドウ ❌
    不透明度 ❌
    フォント △ 参考値程度
    レイアウト（余白・位置） ❌

    グラデーションの取得に最も実用的な機能です。 それ以外は「参考値として読む」程度に割り切り、ドロップシャドウ・点線・不透明度はアピアランスパネルから手書きする、というワークフローが現実的です。

    出力されたコードはそのまま使わず、不要なベンダープレフィックスを削除してから使いましょう。