スライスについて

Web ページは、HTML テキスト、ビットマップ画像、ベクターグラフィックなど数多くのオブジェクトで構成されます。Illustrator では、スライスを使用して、アートワーク上の各 Web オブジェクトの境界を定義することができます。例えば、アートワーク内に、JPEG 形式で最適化する必要のあるビットマップ画像が 1 つだけ含まれており、その他の画像は GIF 形式で最適化した方がよい場合は、スライスを使用してビットマップ画像を分離します。「Web およびデバイス用に保存」コマンドを使用してアートワークを Web ページとして保存する場合は、各スライスを別々のファイルに保存し、ファイルごとに異なる形式、設定、カラーテーブルを指定することができます。

Illustrator ドキュメントにおけるスライスは、作成される Web ページではテーブルのセルに相当します。初期設定では、スライス領域はテーブルのセルに配置された画像ファイルとして書き出されます。テーブルのセルに画像ファイルではなく HTML テキストと背景カラーを配置する場合は、スライスの種類を「画像なし」に変更します。Illustrator テキストを HTML テキストに変換する場合は、スライスの種類を「HTML テキスト」に変更します。

スライスの種類とアートワーク
スライスの種類とアートワーク

A. 「画像なし」スライス B. 「画像」スライス C. 「HTML テキスト」スライス 

スライスは、アートボード上および Web およびデバイス用に保存ダイアログボックスで確認できます。スライスには、アートワークの左上から順番に左から右、上から下に番号が付けられます。スライスの配置や合計数を変更すると、新しい並び順に合わせて番号が自動的に更新されます。

スライスを作成する場合、周囲のアートワークも自動的にスライスされ、HTML テーブルを使用してレイアウトが保持されます。自動的に生成されるスライスには、自動スライスとサブスライスの 2 種類があります。自動スライスは、アートワーク内でスライスとして定義されていない領域に対して生成されます。スライスを追加または編集するたびに、自動スライスが再生成されます。サブスライスは、ユーザーが指定したスライスが重なり合っている場合の、それらのスライスの分割方法を示します。サブスライスには番号が付き、スライス記号が表示されますが、元になるスライスと別々に選択することはできません。作業中、必要に応じて、サブスライスと自動スライスが自動的に再生成されます。

スライスの作成

  1. 次のいずれかの操作をおこないます。
    • アートボード上のオブジェクトを 1 つ以上選択して、オブジェクト/スライス/作成を選択します。

    • スライスツール を選択し、スライスを作成する範囲をドラッグして指定します。Shift キーを押しながらドラッグすると、スライスの形が正方形になります。Alt キー(Windows)または Option キー(Mac OS)を押しながらドラッグすると、中心からスライスが作成されます。

    • アートボード上のオブジェクトを 1 つ以上選択して、オブジェクト/スライス/選択範囲から作成を選択します。

    • スライスを作成する場所にガイドを配置して、オブジェクト/スライス/ガイドから作成を選択します。

    • 既存のスライスを選択し、オブジェクト/スライス/スライスを複製を選択します。

      ヒント:アートワーク内のオブジェクトの境界にスライスのサイズを合わせる場合は、オブジェクト/スライス/作成を選択します。オブジェクトを移動または修正すると、更新されたアートワークを囲むようにスライス領域が自動的に調整されます。このコマンドは、テキストオブジェクトからテキストと基本書式設定を取り込むスライスを作成するときにも使用できます。

      ヒント:元のアートワークとは関係なくスライスのサイズを指定するには、スライスツールを使用するか、選択範囲から作成コマンドまたはガイドから作成コマンドを選択します。これらの方法で作成したスライスはレイヤーパネルの項目として表示され、ほかのベクターオブジェクトと同じように移動、サイズ変更、削除できます。

スライスの選択

スライス選択ツール を使用して、アートワークウィンドウまたは Web およびデバイス用に保存ダイアログボックスでスライスを選択します。

  • スライスを選択するには、スライスをクリックします。
  • 複数のスライスを選択するには、Shift キーを押しながらクリックします (Web およびデバイス用に保存ダイアログボックスでは、Shift キーを押しながらドラッグすることもできます)。
  • 重なり合ったスライスの場合に、下になったスライスを選択するには、そのスライスの見える部分をクリックします。

    また、アートワークウィンドウでは、以下の方法でスライスを選択することもできます。

  • オブジェクト/スライス/作成を選択して作成したスライスを選択するには、アートボード上の該当するアートワークを選択します。スライスがグループまたはレイヤーに関連付けられている場合は、レイヤーパネル内の該当するグループまたはレイヤーの横にあるターゲットアイコンを選択します。
  • スライスツール、選択範囲から作成コマンドまたは「ガイドから作成」コマンドを使用して作成したスライスを選択するには、レイヤーパネルでそのスライスをターゲットに指定します。
  • 選択ツール でスライスパスをクリックします。
  • スライスパスのセグメントまたはスライスのアンカーポイントを選択するには、ダイレクト選択ツールでクリックします。

    注意:自動スライスは選択できません。選択できないスライスは薄く表示されます。

スライスオプションの設定

スライスのオプションは、作成される Web ページでスライスの中身がどのように表示され機能するかを決定します。

  1. スライス選択ツールを使用して、次のいずれかの操作をおこないます。
    • アートワークウィンドウでスライスを選択し、オブジェクト/スライス/スライスオプションを選択します。

    • Web およびデバイス用に保存ダイアログボックスで、スライス選択ツールを使用してスライスをダブルクリックします。

  2. スライスの種類を選択し、該当するオプションを設定します。

    画像

    作成される Web ページでスライス領域を画像ファイルにする場合に選択します。画像を HTML リンクにする場合は、URL とターゲットフレームセットを入力します。画像上にマウスを置いたときにブラウザーのステータスエリアに表示されるメッセージ、画像が非表示のときに表示される代替テキスト、テーブルセルの背景カラーを指定することもできます。

    画像なし

    作成される Web ページでスライス領域を HTML テキストと背景カラーにする場合に選択します。「HTML テキスト」テキストボックスに文字を入力し、標準の HTML タグを使用してテキストの書式を設定します。スライス領域に収まる長さのテキストを入力してください。テキストが長すぎると隣のスライスにはみ出し、Web ページのレイアウトに影響します。ただし、アートボード上ではテキストを表示できないため、テキストの表示を確認するには Web ページを Web ブラウザーで表示する必要があります)。テーブルセル内のテキスト配置方法を変更するには、「横」および「縦」オプションを設定します。

    HTML テキスト

    この種類を使用できるのは、テキストオブジェクトを選択し、オブジェクト/スライス/作成を選択して、スライスを作成した場合だけです。Illustrator テキストは、作成される Web ページでは、基本的な書式設定属性を持った HTML テキストに変換されます。テキストを編集するには、アートワークのテキストを更新します。テーブルセル内のテキスト配置方法を変更するには、「横」および「縦」オプションを設定します。テーブルセルの背景カラーも選択できます。

    ヒント:スライスオプションダイアログボックスで「HTML テキスト」スライスのテキストを編集するには、スライスの種類を「画像なし」に変更します。この場合、アートボード上のテキストオブジェクトとのリンクは切断されます。テキストの書式設定を無視するには、テキストオブジェクトの最初に <unformatted> と入力します。

スライスのロック

スライスをロックすると、間違ってサイズを変更したり、移動したりするのを防ぐことができます。

  • すべてのスライスをロックするには、表示/スライスをロックを選択します。
  • スライスを個別にロックするには、レイヤーパネルでスライスの編集コラムをクリックします。

スライスの境界の調整

オブジェクト/スライス/作成を使用してスライスを作成した場合、スライスの位置とサイズは、スライスに含まれるアートワークと連動します。そのため、アートワークを移動したりサイズを変更したりすると、スライスの境界は自動的に調整されます。

スライスツール、「選択範囲から作成」コマンドまたは「ガイドから作成」コマンドを使用して作成したスライスの場合は、以下の方法によりスライスを手作業で調整することができます。

  • スライスを移動するには、スライス選択ツール でスライスを新しい位置にドラッグします。移動方向を垂直、水平、45 度方向に制限するには、Shift キーを押しながらドラッグします。
  • スライスのサイズを変更するには、スライス選択ツールでスライスを選択し、スライスの角または辺をドラッグします。選択ツールと変形パネルを使用して、スライスのサイズを変更することもできます。
  • スライスを整列または分布するには、整列パネルを使用します。スライスを整列すると、不要な自動スライスが除去され、サイズの小さい効率的な HTML ファイルが作成されます。
  • スライスの重なり順を変更するには、レイヤーパネルでスライスを新しい位置にドラッグするか、オブジェクト/重ね順を選択します。
  • スライスを分割するには、スライスを選択し、オブジェクト/スライス/スライスを分割を選択します。

    どの方法で作成されたスライスでも結合することができます。スライスを選択し、オブジェクト/スライス/スライスを結合を選択します。結合によって作成されるスライスのサイズと位置は、元のスライスの外枠を合わせてできる長方形と同じです。結合元のスライスが隣接していない場合、または大きさや向きが異なる場合は、新しいスライスが別のスライスと重なり合うことがあります。

    すべてのスライスのサイズをアートボードの境界に合わせるには、オブジェクト/スライス/アートボードサイズでクリップを選択します。アートボードのサイズを超えるスライスはアートボードに合わせて切り取られ、アートボード内の自動スライスはアートボードの境界まで拡張されます。アートワークには影響しません。

スライスの削除

スライスを削除するには、直接削除する方法と、対応するアートワークからスライスを解除する方法があります。

  • スライスを削除するには、スライスを選択して、Delete キーを押します。オブジェクト/スライス/作成を使用して作成したスライスの場合は、対応するアートワークも同時に削除されます。対応するアートワークを残しておく場合は、スライスを直接削除する代わりに、スライスを解除します。
  • すべてのスライスを削除するには、オブジェクト/スライス/すべてを削除を選択します。オブジェクト/スライス/作成を使用して作成したスライスは、削除ではなく解除されます。
  • スライスを解除するには、スライスを選択し、オブジェクト/スライス/スライスを解除を選択します。

スライスの表示と非表示の切り替え

  • アートワークウィンドウでスライスを非表示にするには、表示/スライスを隠すを選択します。
  • Web およびデバイス用に保存ダイアログボックスでスライスを非表示にするには、スライスの表示を切り替えボタン をクリックします。
  • スライス番号を非表示にし、スライス線のカラーを変更するには、編集/環境設定/スマートガイド・スライス(Windows)または Illustrator/環境設定/スマートガイド・スライス(Mac OS)を選択します。

イメージマップの作成

イメージマップを使用すると、ホットスポットと呼ばれる画像領域を URL にリンクできます。Web ブラウザーでユーザーがホットスポットをクリックすると、リンク先へジャンプします。

リンクを作成するときのイメージマップとスライスの主な違いは、アートワークを Web ページとして書き出す方法にあります。イメージマップを使用すると、アートワークは 1 つの画像ファイルとしてそのまま保存されます。一方、スライスを使用すると、アートワークが複数のファイルに分割されます。イメージマップとスライスのもう 1 つの違いは、イメージマップではアートワークの多角形または長方形の領域にリンクできるのに対して、スライスでは長方形の領域にしかリンクできないという点です。長方形の領域だけにリンクする場合は、イメージマップよりもスライスの方が適している場合があります。

注意:

予想外の結果が生じるのを避けるため、URL リンクを含むスライスにはイメージマップのホットスポットを作成しないでください。一部のブラウザーでは、イメージマップリンクまたはスライスリンクのいずれかが無視されることがあります。

  1. URL にリンクするオブジェクトを選択します。
  2. 属性パネルで、イメージマップメニューからイメージマップの形状を選択します。
  3. 「URL」テキストボックスに相対 URL または完全な URL を入力するか、URL リストから使用する URL を選択します。ブラウザーボタンをクリックすると、実際に接続して URL が有効かどうかを確認できます。

    注意:

    URL メニューに表示される項目数を増やすには、属性パネルメニューの「パネルオプション」を選択します。URL リストに表示する URL の数を 1 ~ 30 の範囲で入力します。

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

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