Illustrator で HTML ページのデザインを作成できます。これは、Web 開発者が HTML エディターでページにレイアウト、スタイル、オブジェクトをコードするために役立つ視覚的なガイドです。しかし、コンポーネントやオブジェクトの正確なアピアランスや位置を複製することは時間と手間のかかる作業です。

Illustrator CC を使うと、HTML ページのレイアウトを作成するときに、ページ上のオブジェクトや、コンポーネントのアピアランスを決める、基礎となる CSS コードを生成および書き出すことができます。CSS では、テキストやオブジェクトのアピアランスを制御できます(文字やグラフィックのスタイルと類似)。各オブジェクトの CSS コード、または Illustrator でデザインされたレイアウト全体の CSS コードを書き出すことができます。   

CSS プロパティパネル(ウィンドウCSS プロパティ)では、次のことができます。

  • 選択したオブジェクトの CSS コードを表示する
  • 選択したオブジェクトの CSS コードをコピーする
  • 一部またはすべての選択した Illustrator 要素を CSS ファイルに書き出す
  • 使用されているラスタライズ可能な画像を書き出す
  • ブラウザー固有の CSS コードを生成する

ビデオ:Illustrator CC での CSS の抽出

ビデオ:Illustrator CC での CSS の抽出
Illustrator CC でテキスト、オブジェクト、またはレイアウト全体の CSS コードを生成することで Web サイトを迅速に作成する方法について説明します。
Rufus Deuchler

CSS コードの表示と抽出

注意:

CSS コードを生成するには、次のいずれかの操作を行います。

  • Illustrator ドキュメント内のオブジェクトがレイヤーパネルで名前がつけられていることを確認してください。
  • ウィンドウCSS プロパティを選択し、パネルメニューの書き出しオプションをクリックし、「名称未設定オブジェクト用に CSS を生成」チェックボックスをオンにします。

  1. ウィンドウCSS プロパティを選択します。

    A. 警告(一部のスタイルを CSS コードに変換できなかった場合) B. CSS 書き出しオプションダイアログボックス C. 選択した CSS をファイルに書き出し D. 選択したスタイルをクリップボードにコピー E. CSS を生成 F. フライアウトメニュー G. 選択したオブジェクトで使用されるスタイル H. CSS コード 
  2. 開いている Illustrator ドキュメントで、次のいずれかの操作を行います。

    • 1 つのオブジェクトを選択します。オブジェクトの CSSコードは、CSS プロパティパネルに表示されます。
    • Shift キーを押しながら複数のオブジェクトを選択してCSS プロパティパネルのCSS を生成ボタンをクリックします。
    • Ctrl/Cmd + A キーを押してすべてのオブジェクトを選択し、CSS プロパティパネルのCSS を生成ボタンをクリックします。

    生成された CSS コードが表示されます。

  3. 生成された CSS コードを取得するには、次のいずれかの操作を行います。

    • 選択したコードをコピーするには、特定のコードを選択してから次の操作を行います。
      • クリップボードにコピーするには、選択スタイルをコピーをクリックします
      • ファイルに書き出すには、パネルメニューをクリックし、「選択した CSS を書き出し」をクリックします
    • すべてのコードをコピーするには、CSS コードで何も選択せず、次の操作を行います。
      • クリップボードにコピーするには、選択スタイルをコピーをクリックします
      • ファイルに書き出すには、パネルメニューをクリックし、「すべて書き出し」をクリックします
  4. CSS コードをファイルに保存する間に、次のオプションから選択します。

    注意:

    生成される CSS コードの内容を変更するには、CSS プロパティパネルで「書き出しオプション」をクリックし、適切な選択を行います。

サンプル CSS コード

グラデーションが適用された長方形(すべてのブラウザー)

.GRADIENT_BOX
{
  background : -moz-linear-gradient(0% 50% 0deg,rgba(255, 242, 0, 1) 0%,rgba(254, 236, 1, 1) 10.31%,rgba(253, 218, 4, 1) 24.34%,rgba(251, 190, 9, 1) 40.51%,rgba(247, 150, 15, 1) 58.28%,rgba(243, 99, 24, 1) 77.37%,rgba(238, 37, 34, 1) 97.27%,rgba(237, 28, 36, 1) 100%);
  background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) ));
  background : -o-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  background : -ms-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200', endColorstr='#ED1C24' ,GradientType=0)";
  background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  border-style : Solid;
  border-color : #231F20;
  border-color : rgba(35, 31, 32, 1);
  border-width : 1px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200',endColorstr='#ED1C24' , GradientType=1);
}

グラデーションが適用された長方形(webkit ベースのブラウザーのみ)

.GRADIENT_BOX
{
  background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) ));
  background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  border-style : Solid;
  border-color : #231F20;
  border-color : rgba(35, 31, 32, 1);
  border-width : 1px;
}

複数のオブジェクト

.NormalCharacterStyle
{
  font-family : Myriad Pro;
  font-size : 12px;
}
.st0
{
  border-style : Solid;
  border-color : #FFFFFF;
  border-color : rgba(255, 255, 255, 1);
  border-width : 0px;
}
.GRADIENT_BOX
{
  background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) ));
  background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  border-style : Solid;
  border-color : #231F20;
  border-color : rgba(35, 31, 32, 1);
  border-width : 1px;
}

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー