====== CSS スタイルシート ======

[[ja:DokuWiki]] の見栄えのほとんどは CSS スタイルシートを通じて制御することができます。DokuWiki はそれ自身では最小限のスタイルしか定義しません。CSS 定義の残りは、使用されている[[ja:template|テンプレート]]と[[ja:plugins|プラグイン]]に由来します。

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

===== DokuWiki スタイルシート =====
[[ja:DokuWiki]] はスタイルシートを次の4箇所からこの順序でロードします（RTL スタイルシートは各ステップの最後に付加されます）:

==== 1. ベーススタイルシート ====
これらのスタイルシートは ''/lib/styles'' に配置されています。これらは、エラーメッセージの見た目のような基本的なスタイルを定義し、また、コンテンツを表示させない .no クラスのような便利なスタイルを定義します。

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

^ CSS ファイル     ^ いつ使用されるか ^
| ''style.css''  | すべての表示モードで適用 |
| ''print.css''  | ページが印刷されるときに適用 |
| ''rtl.css''    | 右から左に書くインターフェース言語が用いられるときに適用 |

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

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

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

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

さらに、この ''[[#style.ini]]'' ファイルでは、[[#パターン置換]]が定義されます。

  * [[ja:devel:templates|テンプレート開発]]も参照してください。

==== 4. ユーザスタイル ====

Wiki の管理者は、''conf/'' 内に以下の CSS ファイルを作成することによって、使用されているテンプレートとは独立に付加的なスタイルを定義することができます。

^ CSS ファイル              ^ いつ使用されるか ^
| ''conf/userstyle.css''  | すべての表示モードで適用 |
| ''conf/printstyle.css'' | ページが印刷されるときに適用 |
| ''conf/rtlstyle.css''   | 右から左に書くインターフェース言語が用いられるときに適用 |

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

===== スタイルシートのモード =====

DokuWiki はデフォルトでは 3 タイプのスタイルシートのモードを認識します：

  - **screen** これがデフォルトのモードで、 Web ブラウザにページを表示する際に使われます
  - **print** ここでの定義が印刷用のページで使用されます
  - **rtl** 右から左に書く[[ja:localization|言語]]が使用されている際に ''rtl'' ファイル内の定義が追加ロードされます

===== ID の使用 =====

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

===== Style.ini =====
''style.ini'' は [[wp>INI_file|ini ファイル]]です。これにはセクションが二つあります:
==== [stylesheets] ====
この部分は、どの CSS ファイルがロードされるかを定義します。各行は次のように定義されます:
  cssfile.css = mode

''cssfile.css'' はあなたのファイル名で、mode は適用する[[#スタイルシートのモード|モード]]です。 

==== パターン置換 ====
==== [replacements] ====

DokuWiki の CSS ディスパッチャーは、ロードされるスタイルシート内のプレースホルダーを、テンプレートの ''[[#style.ini]]'' 内の ''[replacements]'' セクションで設定された値に置換することができます。これは、一度色使いを定義した後、すべてのファイルでそれらの値を再利用するのに特に便利です。後から色を調整するのは、単純に ini ファイルを変更するだけで済みます。


=== 保証色彩プレースホルダー ===

以下のプレースホルダーはプラグインに用いても安全なもののみです。
^プレースホルダー変数		^意味		^デフォルトテンプレートでの値	^2006-08-05 以前の名前	^
^''%%__background__%%''		|主たる背景色	|''#fff''		|''%%__white__%%''	|
^''%%__background_alt__%%''	|代替の背景色	|''#dee7ec''		|''%%__medium__%%''	|
^''%%__background_neu__%%''	|中間的な背景色	|''#f5f5f5''		|''%%__darkgray__%%''	|
^''%%__border__%%''		|ボーダー色	|''#8cacbb''		|''%%__dark__%%''	|
^''%%__text__%%''		|主たるテキスト色	|''#000''		|''%%__black__%%''	|
^''%%__text_alt__%%''		|代替のテキスト色	|''#638c9c''		|''%%__darker__%%''	|
^''%%__text_neu__%%''		|中間的なテキスト色	|''#666''		|''%%__lightgray__%%''	|

2006-08-05 以降、意味的により正確になるように、これらの名称が変更されました。パターン置換を利用しているこれ以前のプラグインとテンプレートはこれらの変数をまだ用いていないかもしれませんが、用いるようにしてください。

=== デフォルトテンプレートで使用されるその他の色彩プレースホルダー ===

これらの付加的なプレースホルダーはデフォルトテンプレートで使用されます。他のテンプレートでも使用するかもしれませんが、その義務はありません。

^プレースホルダー変数		^意味				^デフォルトテンプレートでの値	^2006-08-05 以前の名前	^
^''%%__background_other__%%''	|その他の背景色			|''#f7f9fa''		|''%%__lighter__%%''	|
^''%%__text_other__%%''		|その他のテキスト色			|''#ccc''		|''%%__mediumgray__%%''	|
^(なし。削除)		|-				|''#eef3f8''		|''%%__light__%%''	|
^''%%__extern__%%''		|リンク色				|''#436976''		|(変更なし)		|
^''%%__existing__%%''		|存在する内部リンクのリンク色		|''#090''		|(変更なし)		|
^''%%__missing__%%''		|存在しない内部リンクのリンク色	|''#f30''		|(変更なし)		|
^''%%__highlight__%%''		|検索断片のハイライト色		|''#ff9''		|(変更なし)		|