差分

このページの2つのバージョン間の差分を表示します。

--- ja:devel:css [2008-11-24 06:02] – typo & refine 124.102.221.92
+++ ja:devel:css [2023-12-02 11:13] (現在) – [テーブル] 27.83.50.17
@@ 行 1: / 行 1: @@
 ====== CSS スタイルシート ======
-[[ja:DokuWiki]] の見栄えのほとんどは CSS スタイルシートを通じて制御することができます。DokuWiki はそれ自身では最小限のスタイルしか定義しません。CSS 定義の残りは、使用されている[[ja:template|テンプレート]]と[[ja:plugins|プラグイン]]に由来します。
+[[ja:dokuwiki|DokuWiki]] の見栄えのほとんどは CSS スタイルシートで制御されます。
+DokuWiki 本体は最小限のスタイル定義しかカバーしていません。
+CSS 定義の残りは、使用されている[[ja:template|テンプレート]]と[[ja:plugins|プラグイン]]に由来します。
-すべての CSS ファイルは、''lib/exe/css.php'' にある単一のディスパッチャを通じて取得されます。これは、キャッシュ、パターン置換、最適化についても扱います。スタイルシートなどのロードは、''tpl_metaheaders()'' 関数を経由して行われるので、あなたのテンプレート内に入れ忘れないようにしてください。
+すべての CSS ファイルは、[[xref>lib/exe/css.php]] にある単一のディスパッチャを通じて収集されます。
+この過程で、キャッシュ、パターン置換、[[ja:devel:less|LESS]] ファイルのコンパイル、最適化の処理も行われます。
+とりわけスタイルシートのロードは ''tpl_metaheaders()'' 関数を経由して行われるので、テンプレート内にこの関数を入れ忘れないようにしてください。
-===== DokuWiki スタイルシート =====
+===== スタイルシートのモード =====
-[[ja:DokuWiki]] はスタイルシートを次の4箇所からこの順序でロードします（RTL スタイルシートは各ステップの最後に付加されます）:
-==== 1. ベーススタイルシート ====
+５種類のスタイルシートのモードがあります：
-これらのスタイルシートは ''/lib/styles'' に配置されています。これらは、エラーメッセージの見た目のような基本的なスタイルを定義し、また、コンテンツを表示させない .no クラスのような便利なスタイルを定義します。
-==== 2. プラグインスタイル ====
+  * **screen**：Web ブラウザにページを表示する際に使われます
-プラグインはそれら自身のスタイルを以下のファイルを用いて定義することができます:
+  * **print**：ここでの定義が印刷用のページで使用されます
+  * **all**：すべての表示モードで適用されます
+  * <del>**rtl**：右から左に書く[[ja:localization|言語]]が使用されている際に ''rtl'' ファイル内の定義が追加ロードされます</del> :!: **[[devel:deprecated|非推奨]]・[[#RTL Styles]] を参照**
+  * **feed**：フィードの表示時に適用されます
-^ CSS ファイル     ^ いつ使用されるか ^
+==== RTL styles ====
-| ''style.css''  | すべての表示モードで適用 |
-| ''print.css''  | ページが印刷されるときに適用 |
-| ''rtl.css''    | 右から左に書くインターフェース言語が用いられるときに適用 |
-任意のテンプレートの色使いにうまく適合させるため、プラグインの作者は[[#保証色彩プレースホルダー]]を用いるべきです。
+Release 2012-10-13 "Adora Belle" 以降、RTL mode は[[devel:releases#deprecation|非推奨]]で、もはや使用すべきではありません。
+右から左に記述する[[ja:localization|言語]]のスタイルを記述する新しい・より良い方法は、他のモードのスタイル内の各 CSS セレクタの前に ''[dir=rtl]'' を使用することです。
+例えば：
-:!: プラグインからのスタイルシートはプラグインが用いられない場合であってもロードされます （ただし、プラグインが[[ja:config:disableactions|無効化]]されている場合はロードされません）。
+<code css>
+.someClass {
+    float: left;
+    background-color: __background__;
+}
+[dir=rtl] .someClass {
+    float: right;
+}
+</code>
-:!: ここで定義されるスタイルは、競合に気をつけるべきです。ですので、プラグインを書く際は注意してください。可能な場合は、確実に競合が起きないようにするため、あなたのスタイルにプレフィックスをつけてください。
-==== 3. テンプレートスタイル ====
+===== DokuWiki スタイルシート =====
-テンプレートのスタイルシートは選択されたテンプレートのディレクトリからロードされます。[[ja:DokuWiki]] は、そのディレクトリにある ''[[#style.ini]]'' を読み、このファイルで参照されているすべての CSS をロードします。ロードは、[[#スタイルシートモード|現在のモード]]に従って行われます。
-さらに、この ''[[#style.ini]]'' ファイルでは、[[#パターン置換]]が定義されます。
+[[ja:dokuwiki|DokuWiki]] は４つのソースからスタイルシートをロードします。
+ロードする順序は以下のとおりです：
-  * [[ja:devel:templates|テンプレート開発]]も参照してください。
+==== 1. ベーススタイルシート ====
-==== 4. ユーザスタイル ====
+これらのスタイルシートは ''/lib/styles'' に配置されています。
+これらは、エラーメッセージの見た目のような基本的なスタイルを定義します。
-Wiki の管理者は、''conf/'' 内に以下の CSS ファイルを作成することによって、使用されているテンプレートとは独立に付加的なスタイルを定義することができます。
+==== 2. プラグインスタイル ====
-^ CSS ファイル              ^ いつ使用されるか ^
+各プラグインは自身のスタイルを以下のファイルを用いて定義することができます:
-| ''conf/userstyle.css''  | すべての表示モードで適用 |
-| ''conf/printstyle.css'' | ページが印刷されるときに適用 |
-| ''conf/rtlstyle.css''   | 右から左に書くインターフェース言語が用いられるときに適用 |
-これは、テンプレートやプラグインが後日更新された場合にも問題を起こすことなく、それらのスタイルの小さな部分を上書きするのに便利です。
+^ モード      ^ 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]] 書式を使用できます。
-DokuWiki はデフォルトでは 3 タイプのスタイルシートのモードを認識します：
+任意のテンプレートの色使いにうまく適合させるため、プラグインの作者は[[ja:devel:style.ini#保証された色プレースホルダー|保証された色プレースホルダー]]を用いるべきです。
-  - **screen** これがデフォルトのモードで、 Web ブラウザにページを表示する際に使われます
+:!:
-  - **print** ここでの定義が印刷用のページで使用されます
+プラグインからのスタイルシートはプラグインが用いられない場合であってもロードされます
-  - **rtl** 右から左に書く[[ja:localization|言語]]が使用されている際に ''rtl'' ファイル内の定義が追加ロードされます
+（ただし、プラグインが[[ja:plugin:extension#プラグインの有効化・無効化|無効化]]されている場合はロードされません）。
-===== ID の使用 =====
+:!:
+ここで定義されるスタイルは、競合に気をつけるべきです。
+ですので、プラグインを書く際は注意してください。
+可能な場合は、確実に競合が起きないようにするため、あなたのスタイルにプレフィックスをつけてください。
-スタイルを割り当てるためにテンプレート内でカスタム ID を使用する際、それが既存の ID と競合しないよう気をつけてください。特に、セクションの見出しに自動的に割り当てられる ID に気をつけてください。これを確実に行う最も簡単な方法は、ID に二つの連続アンダースコア (%%__%%) を使用することです。セクションの ID は常に有効な[[:pagenames|ページ名]]なので、連続アンダースコアが含まれることは決してないからです。
+==== 3. テンプレートスタイル ====
-===== Style.ini =====
+テンプレートのスタイルシートは選択されたテンプレートのディレクトリからロードされます。
-''style.ini'' は [[wp>INI_file|ini ファイル]]です。これにはセクションが二つあります:
+[[ja:dokuwiki|DokuWiki]] は、そのディレクトリにある ''[[ja:devel:style.ini|style.ini]]'' を読み、このファイルで参照されているすべての CSS をロードします。
-==== [stylesheets] ====
+ロードは、[[#スタイルシートのモード|現在のモード]]に従って行われます。
-この部分は、どの CSS ファイルがロードされるかを定義します。各行は次のように定義されます:
-  cssfile.css = mode
-''cssfile.css'' はあなたのファイル名で、mode は適用する[[#スタイルシートのモード|モード]]です。
+  * wiki 管理者による ''style.ini'' の変更は ''conf/tpl/<tpl>/style.ini''に格納する必要があります。[ja:plugin:styling|スタイル設定プラグイン]]を使って変更した場合、このファイルを自動的に作成します。
+  * [[ja:devel:templates|テンプレート開発]]も参照してください。
-==== パターン置換 ====
+==== 4. ユーザスタイル ====
-==== [replacements] ====
-DokuWiki の CSS ディスパッチャーは、ロードされるスタイルシート内のプレースホルダーを、テンプレートの ''[[#style.ini]]'' 内の ''[replacements]'' セクションで設定された値に置換することができます。これは、一度色使いを定義した後、すべてのファイルでそれらの値を再利用するのに特に便利です。後から色を調整するのは、単純に ini ファイルを変更するだけで済みます。
+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' ''
-以下のプレースホルダーはプラグインに用いても安全なもののみです。
+===== 画像とインポートスタイルの使用 =====
-^プレースホルダー変数		^意味		^デフォルトテンプレートでの値	^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__%%''	|
--08-05 以降、意味的により正確になるように、これらの名称が変更されました。パターン置換を利用しているこれ以前のプラグインとテンプレートはこれらの変数をまだ用いていないかもしれませんが、用いるようにしてください。
+DokuWiki の CSS ディスパッチャは、独自のスタイルシート内の画像（''url(...)''）とインポートスタイルシート（''@import ...''）への相対リンクをテンプレートのルートディレクトリに対して相対処理することで自動的に確定します。
-=== デフォルトテンプレートで使用されるその他の色彩プレースホルダー ===
+例：プラグインで、''style.css'' から ''images'' サブディレクトリの画像を使用したい場合、簡単に以下の CSS を記述できます：
-これらの付加的なプレースホルダーはデフォルトテンプレートで使用されます。他のテンプレートでも使用するかもしれませんが、その義務はありません。
+<code css>
+.someclass {
+   background-image: url(images/icon.gif);
+}
+</code>
-^プレースホルダー変数		^意味				^デフォルトテンプレートでの値	^2006-08-05 以前の名前	^
+DokuWiki は自動的に URL を変更するので、画像はテンプレートディレクトリと相対化されたプラグインディレクトリにあります。
-^''%%__background_other__%%''	|その他の背景色			|''#f7f9fa''		|''%%__lighter__%%''	|
-^''%%__text_other__%%''		|その他のテキスト色			|''#ccc''		|''%%__mediumgray__%%''	|
-^(なし。削除)		|-				|''#eef3f8''		|''%%__light__%%''	|
-^''%%__extern__%%''		|リンク色				|''#436976''		|(変更なし)		|
-^''%%__existing__%%''		|存在する内部リンクのリンク色		|''#090''		|(変更なし)		|
-^''%%__missing__%%''		|存在しない内部リンクのリンク色	|''#f30''		|(変更なし)		|
-^''%%__highlight__%%''		|検索断片のハイライト色		|''#ff9''		|(変更なし)		|
+===== ブラウザ（Internet Explorer）固有の CSS =====
+[[devel:css#browser_internet_explorer_specific_css|Browser (Internet Explorer) Specific CSS]] を参照して下さい。