Illustratorでは、作成したシェイプのスタイルをCSSコードとして書き出せます。
色や角丸などの値を取り出す補助になります。
ただし、HTMLの意味構造やレスポンシブ配置まで完成する機能ではありません。
手順の下にあるキャプションのない画像は、2017年当時の操作記録です。
2026年10月16日に、Windows 11 Pro（10.0.26200）のAdobe Illustrator 30.8.2（Build 7R）で、パネルの設定とCSSの生成を確かめ、その画面も載せています。
コードをコピーして貼り付ける操作と、ブラウザーでの表示は確かめていません。
CSSプロパティパネルの設定
- Illustratorを起動します。
- ウィンドウメニューからCSS プロパティ (非推奨)を開きます。
- パネル右上のオプションメニューをクリックし、書き出しオプションを選択します。
- 「名称未設定オブジェクト用にCSSを生成」にチェックを入れます。
現在の版での表示（2026年10月16日）
日本語表示のAdobe Illustrator 30.8.2（Build 7R）では、ウィンドウメニューの項目名は「CSS プロパティ (非推奨)」でした。
非推奨と表示されていますが、この版ではパネルを開いてCSSを生成できました。
名前を付けていないオブジェクトを選んでパネルを開いた直後は、CSSは表示されず、名前を付けるか書き出しオプションで生成を有効にするよう案内が出ました。
パネルメニューの「書き出しオプション」で、「名称未設定オブジェクト用にCSSを生成」にチェックを入れました。
確認のため「サイズを含める」にもチェックを入れ、CSSの単位は「ピクセル」にしました。
このとき、「塗りを含める」「線を含める」「不透明度を含める」「サポートされていないアートをラスタライズ」はオン、「絶対位置を含める」はオフでした。
CSSコードの生成とコピー手順
- CSSを抽出したいシェイプやオブジェクトを選択します。
- CSSプロパティパネルに、選択したオブジェクトのCSSコードが表示されます。
- 必要なCSSをコピーし、既存のセレクターやレイアウトと衝突しないよう調整してスタイルシートへ追加します。
角丸の長方形から生成したCSS（2026年10月16日）
400×240ポイントのRGBのドキュメントに、240×100ポイントで角丸の半径12ポイントの長方形を1つ置きました。
塗りはRGB(239,239,239)、線はなし、オブジェクトの名前は空です。
ドキュメントと長方形の用意、長方形の選択はスクリプトで行い、確認に含めていません。
長方形を選んだ状態で、CSSプロパティパネルに次のコードが表示されました。
パネルから選択したCSSをファイルに書き出すと、中身は次のとおりでした。
@charset "utf-8";
.st0
{
background : #EFEFEF;
background : rgba(239, 239, 239, 1);
width : 240px;
height : 100px;
border-radius : 12px;
-moz-border-radius : 12px;
-webkit-border-radius : 12px;
}
| 項目 | Illustratorで作った値 | 書き出したCSS |
|---|---|---|
| 塗り | RGB(239,239,239) | background : #EFEFEF;とbackground : rgba(239, 239, 239, 1); |
| 大きさ | 240×100ポイント | width : 240px;とheight : 100px; |
| 角丸 | 半径12ポイント | border-radius : 12px;（ほかに-moz-border-radiusと-webkit-border-radiusも出力） |
| 線 | なし | 線の指定は出力されない |
| オブジェクトの名前 | なし | クラス名.st0が自動で付く |
今回はCSSの単位をピクセルにしたため、ポイントで作った寸法と同じ数字が出ました。
ほかの単位、文字や影、複数のオブジェクトを選んだときの出力は確かめていません。
パネルの幅を広げる途中で、コードの表示が一時的に空白になりました。
書き出しオプションを開き直してOKを押すと、コードが再び表示されました。
コードをコピーして貼り付ける操作と、ブラウザーでの表示は確かめていません。
生成したCSSの表示確認
抽出した色や角丸を参考に、リンクをボタンのような外観に整える例です。
HTMLとCSSは手作業で調整しており、前の出力例の.st0ではなく、HTMLと一致する.square_btnを使います。
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#" class="square_btn">OK</a>
</body>
</html>CSSコード
HTMLコードをUTF-8のindex.html、次のCSSコードをUTF-8のstyle.cssとして、同じフォルダーへ保存します。
ファイル名の末尾に.txtが付かないようにしてください。
文字色のコントラストとキーボード操作時のフォーカス表示を補い、押下時に枠を消して高さが変わらないようにしています。
.square_btn {
display: inline-block;
font-family: "メイリオ", sans-serif;
font-size: 24px;
line-height: 1.5;
padding: 8px 64px;
text-decoration: none;
background: #efefef;
color: #444444;
border-bottom: 4px solid #b7b7b7;
border-radius: 12px;
}
.square_btn:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 3px;
}
.square_btn:active {
transform: translateY(4px);
border-bottom-color: transparent;
}
index.htmlをブラウザーで開き、灰色の背景と角丸のある「OK」リンクが表示されるか確認します。
通常の文字リンクのままなら、style.cssの保存先・ファイル名と、HTMLのhref="style.css"を確認します。
Illustratorに関するほかの記事は、まとめから確認できます。
HTMLのリンク先にある#はサンプル用です。
実際の遷移先を指定してください。
ページ内の処理を実行する操作なら、リンクではなくbutton要素を使います。
複雑な図形はCSSだけで再現しようとせず、必要に応じてSVGや画像として書き出します。
貼り付け後はPC・スマートフォンの表示と、Tabキーでフォーカスが見えることを確認してください。
この記事で紹介しているコードは、GitHubのMOTOKI-LLC/cg-method-codeにもまとめています。
環境設定の記事は、ほかにもあります。
CSSへ移す値と、Web側で作る部分
| Illustrator側で参照するもの | Web側で確認・調整するもの |
|---|---|
| 色、角丸、線、影、文字スタイル | 既存のCSS変数、クラス名、フォントの配信と代替フォント |
| 見本の位置や大きさ | 画面幅に応じた配置、文字の折り返し、余白 |
| オブジェクト名から生成されるセレクター | HTMLの意味構造、リンクとボタンの用途、同名クラスとの衝突 |
Adobeの学習資料では、CSSプロパティでオブジェクトのスタイルを抽出し、既存のHTMLとCSSへ組み合わせる流れを説明しています。この記事のHTMLとCSSは手作業で調整した例で、Illustratorからそのまま出力されたコードや、現在の版で同じ値が出ることを示す実測ではありません。
- 貼り付け先のCSSとクラス名が重ならないか確認する。
- 狭い画面で文字を長くし、折り返しやボタンの高さを確認する。
- Tabキーで操作対象へ移動し、フォーカスが見えるか確認する。
- 複雑な図形はSVG書き出し、PNGの輪郭はピクセル整合で確認する。
参照資料と確認範囲
よくある質問：IllustratorのCSSプロパティ
IllustratorのCSSプロパティでは、何ができますか？
作成したシェイプのスタイルを、CSSコードとして書き出せます。色や角丸などの値を取り出す補助になります。ただし、HTMLの意味構造やレスポンシブ配置まで完成する機能ではありません。
CSSプロパティパネルは、どうやって設定しますか？
Illustratorを起動し、ウィンドウメニューから「CSS プロパティ (非推奨)」を開きます。
パネル右上のオプションメニューをクリックして書き出しオプションを選択し、「名称未設定オブジェクト用にCSSを生成」にチェックを入れます。
2026年10月16日に、Illustrator 30.8.2（Windows 11 Pro）で、この設定で名前のない長方形からCSSが生成されることを確かめました。
CSSは、どうやって取り出しますか？
CSSを抽出したいシェイプやオブジェクトを選択すると、CSSプロパティパネルに、選択したオブジェクトのCSSコードが表示されます。必要なCSSをコピーし、既存のセレクターやレイアウトと衝突しないよう調整して、スタイルシートへ追加します。
書き出したCSSだけで、Webページのボタンが完成しますか？
完成しません。Illustrator側で参照するのは、色、角丸、線、影、文字スタイルなどの値です。Web側で確認・調整するのは、既存のCSS変数、クラス名、フォントの配信と代替フォント、見本の位置や大きさ、画面幅に応じた配置、文字の折り返し、余白、オブジェクト名から生成されるセレクター、HTMLの意味構造、リンクとボタンの用途、同名クラスとの衝突です。
記事のボタンのコードは、Illustratorがそのまま出力したものですか？
いいえ。記事のHTMLとCSSは手作業で調整した例で、Illustratorからそのまま出力されたコードや、現在の版で同じ値が出ることを示す実測ではありません。抽出した値をWeb向けに調整する例として、文字色のコントラストとキーボード操作時のフォーカス表示を補い、押下時に枠を消して高さが変わらないようにしています。
サンプルのHTMLにある「#」は、そのまま使ってよいですか？
HTMLのリンク先にある#は、サンプル用です。実際の遷移先を指定してください。ページ内の処理を実行する操作なら、リンクではなくbutton要素を使います。
貼り付けたあと、何を確認すればよいですか？
貼り付け先のCSSとクラス名が重ならないか確認します。狭い画面で文字を長くし、折り返しやボタンの高さを確認します。Tabキーで操作対象へ移動し、フォーカスが見えるか確認します。PC・スマートフォンの表示も確認してください。複雑な図形はCSSだけで再現しようとせず、必要に応じてSVGや画像として書き出します。
記事の画面は、今のIllustratorと同じですか？ 最新はどこで確認しますか？
キャプションのない画像は、2017年当時の操作記録です。
2026年10月16日に、Illustrator 30.8.2（Windows 11 Pro）で、メニュー、書き出しオプション、生成されたCSSを確かめ、撮影日つきの画面を載せています。
メニューの項目名には「(非推奨)」が付いていましたが、今後の版での提供状況は確かめていません。
参照資料は、Adobe Learnの「IllustratorからCSSを抽出する」です。
この動画の説明対象はIllustrator CCの2014年版です。資料ページの公開日だけで、現在の版の機能提供を判断しないでください。
Adobeの学習資料では、CSSプロパティでオブジェクトのスタイルを抽出し、既存のHTMLとCSSへ組み合わせる流れを説明しています。
画面やメニューは変わることがあるため、最新はAdobe公式の資料と、ご自分の画面で確認してください。
コメント