DITA-OTのXHTML出力のレイアウト・デザインを変更するには

DITA-OTが出力するXHTMLファイルは、CSSファイルによってレイアウト・デザインが定義されています。DITA-OTには、ユーザー定義 CSSファイルを使って、XHTML出力のレイアウト・デザインをカスタマイズする機能があります。この機能により、DITA-OTが出力するXHTML を、読みやすいレイアウト・デザインに改善することができます。

XHTML出力時の標準のCSS処理

DITA-OTが出力するXHTMLファイルのレイアウト・デザインは、%DITA-OT%resource\commonltr.cssファイルにより定義されています。このcommonltr.cssファイルは、DITA-OTによりXHTMLを生成するときに、XHTMLの出力フォルダ\cssフォルダにコピーされます。DITA-OTにより生成されるすべてのXHTMLファイルは、下記のようにcommonltr.cssファイルをリンクしています。

<link rel="stylesheet" type="text/css" href="css/commonltr.css"/>

ユーザー定義CSSファイルを使用する

ユーザー定義CSSファイルを使用するために、DITA-OTには下記のAntパラメーターが用意されています。

ユーザー定義CSSファイルを使用するためのAntパラメーター

Antパラメーター	dost.jarオプション	解説
args.css	/css	ユーザー定義CSSファイルのファイル名を指定する。
args.cssroot	/cssroot	ユーザー定義CSSファイルのあるフォルダのパスを指定する。
args.csspath	/csspath	ユーザー定義CSSファイルをコピーする先のフォルダのパスを指定する。XHTMLファイルの出力先フォルダのパスを起点とした、相対パスで指定する。
args.copycss	/copycss	ユーザー定義CSSファイルをコピーする場合は、yesを指定する。

ユーザー定義CSSファイルを使用するためのAntパラメーターを指定することにより、XHTMLファイルに、標準CSSファイルに加えてユーザー定義CSSファイルをリンクするためのコードが出力されます。

<link rel="stylesheet" type="text/css" href="../css/commonltr.css"/>
<link rel="stylesheet" type="text/css" href="../css/customized.css"/>

ここで重要なのは、標準CSSファイルより後にユーザー定義CSSファイルがリンクされているため、ユーザー定義CSSファイルによるスタイル定義が、標準CSSファイルによるスタイル定義をオーバーライドするということです。つまり、標準CSSファイルとユーザー定義CSSファイルの両方で、同一のセレクタに対してスタイルを指定した場合、ユーザー定義CSSファイルによる指定が優先されます。

推奨するフォルダ構成

最もシンプルで分かりやすいフォルダ構成として、下図に示すようなフォルダ構成を取ることを推奨します。

CSSファイルのフォルダ構成

推奨フォルダ構成に従ってユーザー定義CSSファイルを配置した場合、dost.jarに以下のとおりオプションを指定してDITA-OTを実行してください。

java -jar %DITA_DIR%lib/dost.jar /ditadir:%DITA_DIR% /cleantemp:yes /ditaext:%DITA_EXT% /copycss:yes /css:customized.css /csspath:css /cssroot:%DITA_DIR%resource /basedir:%BASE_DIR% /i:%INPUT_FILE% /transtype:%2 /outdir:%BASE_DIR%out\%2 /tempdir:%BASE_DIR%temp /xhtmltoc:toc /indexshow:yes

customized.cssには、XHTMLの出力が読みやすくなるように所望のCSSコードを記述します。ユーザー定義CSSファイルを簡単に作るには、commonltr.cssを元にcustomized.cssを作り、必要に応じて追加・修正を加える方法を推奨します。