DokuWiki

It's better when it's simple

ユーザ用ツール

サイト用ツール


ja:devel:css

差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
ja:devel:css [2008-11-24 06:02]
124.102.221.92 typo & refine
ja:devel:css [2016-07-24 05:36] (現在)
sawachan 2016-04-20 版
ライン 1: ライン 1:
 ====== CSS スタイルシート ====== ====== 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. ベーススタイルシート ​==== +5種類のスタイルシートのドがあります: 
-これらスタイルシトは ''/​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 { 
 +    floatleft; 
 +    background-color__background__;​ 
 +
 +[dir=rtl] .someClass { 
 +    floatright; 
 +
 +</​code>​
  
-:!: ここで定義されるスタイルは、競合に気をつけるべきです。ですので、プラグインを書く際は注意してください。可能な場合は、確実に競合が起きないようにするため、あなたのスタイルにプレフィックスをつけてください。 
  
-==== 3. テンプレートスタイル ​==== +===== DokuWiki スタイルシート ​=====
-テンプレートのスタイルシートは選択されたテンプレートのディレクトリからロードされます。[[ja:​DokuWiki]] は、そのディレクトリにある ''​[[#​style.ini]]''​ を読み、このファイルで参照されているすべての CSS をロードします。ロードは、[[#​スタイルシートモード|現在のモード]]に従って行われます。+
  
-さらに、この ''​[[#style.ini]]''​ ファイルで、[[#パターン置換]]が定義されます。+[[ja:​dokuwiki|DokuWiki]] は4つのソースからスイルシトをロードします。 
 +ロードする順序は以下のとおりです:
  
-  * [[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__%%''​ |+
  
-2006-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]] を参照して下さい。
ja/devel/css.1227502946.txt.gz · 最終更新: 2014-05-07 15:56 (外部編集)