【Web制作】カテゴリの記事

PAGE 2011でのセミナー終了後に、リクエストいただいたので、ePub編集を行う上で最低限覚えておきたいタグなどをリストアップしてみました。

最低限覚えておきたいHTMLのタグ

ブロックレベル要素は「段落スタイル」、インライン要素は「文字スタイル」にあたります。

ePubで使えるHTMLのタグはこちらに定義されています。

Illustratorで既存の書類を、そのままWeb向けとして作業する場合、次の操作を行います（新規にスタートするときには、ドキュメントプロファイルで「Web」を選択すると、このリストの多くはクリアされます）。

• カラーモードをRGBに（［ファイル］メニューの［ドキュメントのカラーモード］→［RGB］）
  
• 単位をピクセルに（環境設定の［単位］タブ、またはルーラー上でcontrol+クリック）
  
• ピクセルプレビューをオンに（［表示］→［ピクセルプレビュー］）
  
• ピクセルグリッドに整合をオンに（［変形］パネルのパネルメニュー内の［新規オブジェクトをピクセルグリッドに整合］にチェックをつける）
  
• ラスタライズ効果設定で解像度を72dpiに（［効果］→［ドキュメントのラスタライズ設定］）
  
• 環境設定の［キー入力］を「1px」に設定
  
  これにより、shiftキーを押しながら矢印キーを押すと10ピクセル移動します。

「Web」のドキュメントプロファイルで新規ドキュメント作って、そこにコピー&ペーストした方が早いのですが、ピクセルプレビューはデフォルトはオフですのでご注意ください。

2008年初頭、Adobe CS4のプロモーションの一環でTool Garageに「仕事がはかどる機能を紹介」という記事を連載しました。

Multi-Bitsから加賀電子への移行に際し、一時期、コンテンツが消えてしまっていたのですが、さきごろ復活しました。IllustratorやPhotoshopを中心に、使いどころなどをご紹介しています。

DTPのスタイル機能とWeb/ePubのCSSの違いのひとつに、記述する場所があります。

DTPのスタイル機能

• ドキュメント内に書き込みます。InDesignでは［段落スタイル］パネル内で記述されていて、一覧表示するような機能はありません。
• 複数ドキュメントは、ブック機能を使って、それぞれのドキュメントの段落スタイルを同期する機能があります。あくまでも同じものに書き換えるという機能で、それぞれのドキュメント内に記述されていることには代わりありません。

Web/ePubのCSS

• 基本的に、外部スタイルシート書類内に書き込み、それぞれのHTML（XHTML）からはリンクして参照します。
• HTML（XHTML）が何百ページあっても、CSSファイル内の記述を変更すれば、それが即座に変更されます。

同じスタイルシートですが、DTPのスタイル機能とWeb/ePubのCSSは、かなり異なります。Webでは「HTML+CSS（XHTML+CSS）」と記述するように、CSSだけでなく、その前提となるHTML（XHTML）をどう記述するかが肝心です。

DTPのスタイル機能

• 見出し、本文、キャプションにかかわらず、すべての段落は、同じ段落です。
• これに段落スタイルを作成／適用することで、見かけ上、見出しらしく、本文らしく、キャプションらしく見えます。
• それぞれの段落には、段落スタイルを適用する必要があります。
• 文字レベルで書式を設定するには、文字スタイルを作成／適用します。文字スタイルは、段落スタイルよりも優先されます。