CSS スタイルシート

DokuWiki の見栄えのほとんどは CSS スタイルシートで制御されます。 DokuWiki 本体は最小限のスタイル定義しかカバーしていません。 CSS 定義の残りは、使用されているテンプレートとプラグインに由来します。

すべての CSS ファイルは、lib/exe/css.php にある単一のディスパッチャを通じて収集されます。この過程で、キャッシュ、パターン置換、LESS ファイルのコンパイル、最適化の処理も行われます。とりわけスタイルシートのロードは tpl_metaheaders() 関数を経由して行われるので、テンプレート内にこの関数を入れ忘れないようにしてください。

スタイルシートのモード

５種類のスタイルシートのモードがあります：

screen：Web ブラウザにページを表示する際に使われます
print：ここでの定義が印刷用のページで使用されます
all：すべての表示モードで適用されます
rtl：右から左に書く言語が使用されている際に rtl ファイル内の定義が追加ロードされます 非推奨・RTL Styles を参照
feed：フィードの表示時に適用されます

RTL styles

Release 2012-10-13 “Adora Belle” 以降、RTL mode は非推奨で、もはや使用すべきではありません。右から左に記述する言語のスタイルを記述する新しい・より良い方法は、他のモードのスタイル内の各 CSS セレクタの前に [dir=rtl] を使用することです。例えば：

.someClass {
    float: left;
    background-color: __background__;
}
[dir=rtl] .someClass {
    float: right;
}

DokuWiki スタイルシート

DokuWiki は４つのソースからスタイルシートをロードします。ロードする順序は以下のとおりです：

1. ベーススタイルシート

これらのスタイルシートは /lib/styles に配置されています。これらは、エラーメッセージの見た目のような基本的なスタイルを定義します。

2. プラグインスタイル

各プラグインは自身のスタイルを以下のファイルを用いて定義することができます:

モード	CSS ファイル
screen	`style.css` 又は `screen.css`
print	`print.css`
all	`all.css`
~~rtl~~	~~`rtl.css`~~ 非推奨・RTL Styles を参照
feed	`feed.css`

スタイルファイルは、拡張子 .less 付きスタイルファイルも対応しています。しかし、*.css と *.less の両方の中で LESS 書式を使用できます。

任意のテンプレートの色使いにうまく適合させるため、プラグインの作者は保証された色プレースホルダーを用いるべきです。

プラグインからのスタイルシートはプラグインが用いられない場合であってもロードされます（ただし、プラグインが無効化されている場合はロードされません）。

ここで定義されるスタイルは、競合に気をつけるべきです。ですので、プラグインを書く際は注意してください。可能な場合は、確実に競合が起きないようにするため、あなたのスタイルにプレフィックスをつけてください。

3. テンプレートスタイル

テンプレートのスタイルシートは選択されたテンプレートのディレクトリからロードされます。 DokuWiki は、そのディレクトリにある style.ini を読み、このファイルで参照されているすべての CSS をロードします。ロードは、現在のモードに従って行われます。

wiki 管理者による style.ini の変更は conf/tpl/<tpl>/style.iniに格納する必要があります。[ja:plugin:styling|スタイル設定プラグイン]]を使って変更した場合、このファイルを自動的に作成します。
テンプレート開発も参照してください。

4. ユーザスタイル

wiki 管理者は、wikiの設定フォルダ（デフォルト設定の場合 conf/）に以下の CSS ファイルを作成して、使用しているテンプレートとは独立に付加的なスタイルを定義することができます：

CSS ファイル	適用時
`conf/userstyle.css` `conf/userstyle.less`	ブラウザ画面で表示する際に適用
`conf/userprint.css` `conf/userprint.less`	ページが印刷される際に適用
~~`conf/userrtl.css`~~ _{Angua 以降非奨励}	右から左に書く言語が使用されている際に適用非推奨・RTL Styles を参照
`conf/userfeed.css` `conf/userfeed.less`	フィードを表示する際に適用
`conf/userall.css` `conf/userall.less`	すべての表示モードで適用

（注：2015-08-10 “Detritus” 以降、.less が使用可能です。）

これは、テンプレートやプラグインが後日更新された場合にも問題を起こすことなく、それらのスタイルの小さな部分を上書きするのに便利です。

ID の使用

スタイルを割り当てるためにテンプレート内でカスタム ID を使用する際、それが既存の ID と競合しないよう気をつけてください。特に、セクションの見出しに自動的に割り当てられる ID に気をつけてください。これを確実に行う最も簡単な方法は、ID に二つの連続アンダースコア（__）を使用することです。セクションの ID は常に有効なページ名なので、連続アンダースコアが含まれることは決してないからです。

プラグインの中では <pluginname>__<id> を使用します。例： 'searchindexplugin__buttonfield'

画像とインポートスタイルの使用

DokuWiki の CSS ディスパッチャは、独自のスタイルシート内の画像（url(…)）とインポートスタイルシート（@import …）への相対リンクをテンプレートのルートディレクトリに対して相対処理することで自動的に確定します。　

例：プラグインで、style.css から images サブディレクトリの画像を使用したい場合、簡単に以下の CSS を記述できます：

.someclass {
   background-image: url(images/icon.gif);
}

DokuWiki は自動的に URL を変更するので、画像はテンプレートディレクトリと相対化されたプラグインディレクトリにあります。

ブラウザ（Internet Explorer）固有の CSS

Browser (Internet Explorer) Specific CSS を参照して下さい。

目次