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

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

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

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

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

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

==== RTL styles ====

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

<code css>
.someClass {
    float: left;
    background-color: __background__;
}
[dir=rtl] .someClass {
    float: right;
}
</code>


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

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

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

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

==== 2. プラグインスタイル ====

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

^ モード      ^ CSS ファイル ^
| screen      | ''style.css'' 又は ''screen.css''  |
| print       | ''print.css''  |
| all         | ''all.css'' |
| <del>rtl</del>         | <del>''rtl.css''</del> :!: **非推奨・[[#RTL Styles]] を参照**  |
| feed        | ''feed.css'' |

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

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

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

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

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

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

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

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

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

^ CSS ファイル                                                   ^ 適用時                                                                             ^
| ''conf/userstyle.css''\\ ''conf/userstyle.less''               | ブラウザ画面で表示する際に適用                                                     |
| ''conf/userprint.css''\\ ''conf/userprint.less''               | ページが印刷される際に適用                                                         |
| <del>''conf/userrtl.css''</del>\\ <sub>Angua 以降非奨励</sub>  | 右から左に書く言語が使用されている際に適用 :!: **非推奨・[[#RTL Styles]] を参照**  |
| ''conf/userfeed.css''\\ ''conf/userfeed.less''                 | [[ja:syndication|フィード]]を表示する際に適用                                      |
| ''conf/userall.css''\\ ''conf/userall.less''                   | すべての表示モードで適用                                                           |

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

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

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

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

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

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

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

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

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

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

[[devel:css#browser_internet_explorer_specific_css|Browser (Internet Explorer) Specific CSS]] を参照して下さい。