IllustratorのCSSプロパティ｜色・角丸の抽出とWebでの確認

Illustratorでは、作成したシェイプのスタイルをCSSコードとして書き出せます。

色や角丸などの値を取り出す補助になります。

ただし、HTMLの意味構造やレスポンシブ配置まで完成する機能ではありません。

掲載画像は2017年当時の操作記録です。

CSSプロパティパネルの設定

1. Illustratorを起動します。
2. ウィンドウメニューからCSSプロパティを開きます。
3. パネル右上のオプションメニューをクリックし、書き出しオプションを選択します。
4. 「名称未設定オブジェクト用にCSSを生成」にチェックを入れます。

CSSコードの生成とコピー手順

1. CSSを抽出したいシェイプやオブジェクトを選択します。
2. CSSプロパティパネルに、選択したオブジェクトのCSSコードが表示されます。
3. 必要なCSSをコピーし、既存のセレクターやレイアウトと衝突しないよう調整してスタイルシートへ追加します。

生成したCSSの表示確認

Illustratorで生成したCSSを使い、ボタン要素にスタイルを適用する例です。

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コード

次のCSSは抽出した値をWeb向けに調整する例です。

文字色のコントラストとキーボード操作時のフォーカス表示を補い、押下時に枠を消して高さが変わらないようにしています。

.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;
}

Illustratorに関するほかの記事は、まとめから確認できます。

あわせて読みたい

Illustratorの使い方ガイド｜基本操作・入稿・書き出し・自動化 Illustratorの記事を、作業の目的と学ぶ順番で選べるようにまとめました。初めて使う場合は基本操作と教材、納品前は入稿、同じ操作を繰り返す場合は自動化から進めてく…

HTMLのリンク先にある#はサンプル用です。

実際の遷移先を指定してください。

ページ内の処理を実行する操作なら、リンクではなくbutton要素を使います。

複雑な図形はCSSだけで再現しようとせず、必要に応じてSVGや画像として書き出します。

貼り付け後はPC・スマートフォンの表示と、Tabキーでフォーカスが見えることを確認してください。

この記事で紹介しているコードは、GitHubのMOTOKI-LLC/cg-method-codeにもまとめています。

環境設定の記事は、ほかにもあります。

あわせて読みたい

Illustratorの自動保存・復元設定｜現行版とCS6スクリプトの違い Illustratorの保存、復元データ、世代管理を区別し、現行版のバックアップ条件を解説。Mac版CS6用AutoSaveスクリプトの対象環境と制約も整理します。

あわせて読みたい

Illustratorのピクセル整合｜8pxグリッドと書き出しの輪郭確認 配置用の8pxグリッドとピクセル整合を区別。水平・垂直の輪郭、線幅、表示倍率を確認し、1倍のPNGと実際のSVG表示で結果を比べる手順を説明します。

CSSへ移す値と、Web側で作る部分

Adobeの学習資料では、CSSプロパティでオブジェクトのスタイルを抽出し、既存のHTMLとCSSへ組み合わせる流れを説明しています。この記事のHTMLとCSSは手作業で調整した例で、Illustratorからそのまま出力されたコードや、現在の版で同じ値が出ることを示す実測ではありません。

• 貼り付け先のCSSとクラス名が重ならないか確認する。
• 狭い画面で文字を長くし、折り返しやボタンの高さを確認する。
• Tabキーで操作対象へ移動し、フォーカスが見えるか確認する。
• 複雑な図形はSVG書き出し、PNGの輪郭はピクセル整合で確認する。

参照資料と確認範囲

• Adobe Learn：IllustratorからCSSを抽出する