DokuWiki

It's better when it's simple

ユーザ用ツール

サイト用ツール


ja:devel:css

差分

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

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

両方とも前のリビジョン 前のリビジョン
ja:devel:css [2014-05-07 15:56]
s.sahara
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'' ​にある単一のディスパッチャを通じて収集されます。この過程で、キャッシュ、パターン置換、[[LESS]]ファイルのコンパイル、最適化の処理も行われます。テンプレートでのスタイルシートのロードは ''​tpl_metaheaders()''​ 関数を経由して行われるので、あなたのテンプレート内にこの関数を入れ忘れないようにしてください。+すべての CSS ファイルは、[[xref>lib/​exe/​css.php]] にある単一のディスパッチャを通じて収集されます。 
 +この過程で、キャッシュ、パターン置換、[[ja:​devel:​less|LESS]] ファイルのコンパイル、最適化の処理も行われます。 
 +とりわけスタイルシートのロードは ''​tpl_metaheaders()''​ 関数を経由して行われるので、テンプレート内にこの関数を入れ忘れないようにしてください。 ​
  
 ===== スタイルシートのモード ===== ===== スタイルシートのモード =====
  
-DokuWiki はデフォルトでは 5 タイプのスタイルシートのモードを認識します:+5種類のスタイルシートのモードがあります: ​
  
-  ​**screen**Web ブラウザにページを表示する際に使われます +  ​**screen**Web ブラウザにページを表示する際に使われます 
-  ​**print**ここでの定義が印刷用のページで使用されます +  ​**print**ここでの定義が印刷用のページで使用されます 
-  ​**all**すべての表示モードで適用されます +  ​**all**すべての表示モードで適用されます 
-  ​**rtl**右から左に書く[[ja:​localization|言語]]が使用されている際に ''​rtl''​ ファイル内の定義が追加ロードされます\\ :!: **[[deprecated]], see [[#RTL Styles]]** +  ​* <del>**rtl**右から左に書く[[ja:​localization|言語]]が使用されている際に ''​rtl''​ ファイル内の定義が追加ロードされます</​del> ​:!: **[[devel:deprecated|非推奨]][[#RTL Styles]] ​を参照** 
-  ​**feed**フィードの表示時に適用されます+  ​**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>​
  
-==== RTL Styles ==== 
-RTL モードは DokuWiki Angua 以降で廃止されました。 
  
 ===== DokuWiki スタイルシート ===== ===== DokuWiki スタイルシート =====
-[[ja:​DokuWiki]] はスタイルシートを次の4箇所からこの順序でロードします(RTL スタイルシ各ステップ最後に付加されま):+ 
 +[[ja:dokuwiki|DokuWiki]] は4つのソースからスタイルシートをロードします。 
 +ドする順序以下とおりで
  
 ==== 1. ベーススタイルシート ==== ==== 1. ベーススタイルシート ====
-これらのスタイルシートは ''/​lib/​styles''​ に配置されています。これらは、エラーメッセージの見た目のような基本的なスタイルを定義します。+ 
 +これらのスタイルシートは ''/​lib/​styles''​ に配置されています。 
 +これらは、エラーメッセージの見た目のような基本的なスタイルを定義します。 ​
  
 ==== 2. プラグインスタイル ==== ==== 2. プラグインスタイル ====
-各プラグインは自身のスタイルを以下のファイルを用いて定義することができます:​ 
  
-^ CSS ファイル ​    ^ つ使用されるか ^ +各プラグインは自身のスタイルを以下のファイルを用て定義すとがす: 
-| ''​style.css''​ \\ または\\ ''​screen.css''​ | ブラウザ画面で表示されるときに適用 | +
-| ''​print.css'' ​ | ページ印刷されるとに適用 | +
-| ''​all.css'' ​   | べての表示モードで適用 | +
-| <​del>''​rtl.css''</​del> ​   | <​del>​右から左に書くインターフェース言語が用いられるときに適用</​del>​\\ ​:!: **[[deprecated]],​ see [[#RTL Styles]]** | +
-| ''​feed.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''​ |
  
-:!: プラグインからのスタイルシートプラグンが用いられない場合であってロードされます ​(ただし、プラグインが[[ja:config:disableactions|無効化]]されている場合はロードされせん)+スタイルファイル、拡張子 ''​.less''​ 付きスタルファイル対応しています。 
 +しかし、''​*.css''​ と ''​*.less''​ の両方の中で ​[[ja:devel:less|LESS]] 書式を使用でき
  
-:!: ここで定義されるスタイルは、競合に気をつけるべきです。ですので、プラグインを書く際は注意してください。可能な場合は、確実に競合が起きないようにするため、あなたのスタイルにプレフィックスをつけてください。+任意のテンプレートの色使いにうまく適合させるため、プラグインの作者は[[ja:​devel:​style.ini#​保証された色プレースホルダー|保証された色プレースホルダー]]を用いるべきです。  
 + 
 +:!:  
 +プラグインからのスタイルシートはプラグインが用いられない場合であってもロードされます 
 +(ただし、プラグインが[[ja:​plugin:​extension#​プラグインの有効化・無効化|無効化]]されている場合はロードされません)。 
 + 
 +:!:  
 +ここで定義されるスタイルは、競合に気をつけるべきです。 
 +ですので、プラグインを書く際は注意してください。 
 +可能な場合は、確実に競合が起きないようにするため、あなたのスタイルにプレフィックスをつけてください。
  
 ==== 3. テンプレートスタイル ==== ==== 3. テンプレートスタイル ====
-テンプレートのスタイルシートは選択されたテンプレートのディレクトリからロードされます。[[ja:​DokuWiki]] は、そのディレクトリにある ''​[[#​style.ini]]''​ を読み、このファイルで参照されているすべての CSS をロードします。ロードは、[[#​スタイルシートモード|現在のモード]]に従って行われます。 
  
-さらの ''​[[#style.ini]]''​ ファイルでは、[[#​ターン置換]]が定義されます。+テンプレートのスタイルシートは選択れたテンプレートのディレクトリかロードされます。 
 +[[ja:​dokuwiki|DokuWiki]] はディレクトリにある ​''​[[ja:​devel:​style.ini|style.ini]]'' ​を読み、このファイルで参照されているすべての CSS をロードします。 
 +ロードは、[[#イルシトのモード|現在のモード]]に従って行われます。
  
 +  * wiki 管理者による ''​style.ini''​ の変更は ''​conf/​tpl/<​tpl>/​style.ini''​に格納する必要があります。[ja:​plugin:​styling|スタイル設定プラグイン]]を使って変更した場合、このファイルを自動的に作成します。
   * [[ja:​devel:​templates|テンプレート開発]]も参照してください。   * [[ja:​devel:​templates|テンプレート開発]]も参照してください。
  
 ==== 4. ユーザスタイル ==== ==== 4. ユーザスタイル ====
  
-Wiki の管理者は、''​conf/'' ​に以下の CSS ファイルを作成することによって、使用されているテンプレートとは独立に付加的なスタイルを定義することができます+wiki 管理者は、wikiの設定フォルダ(デフォルト設定の場合 ​''​conf/''​に以下の CSS ファイルを作成て、使用ているテンプレートとは独立に付加的なスタイルを定義することができます
  
-^ CSS ファイル ​             いつ使されるか ​+^ CSS ファイル ^ 時 
-| ''​conf/​userstyle.css'' ​ | ブラウザ画面で表示されときに適用 | +| ''​conf/​userstyle.css''​\\ ''​conf/​userstyle.less''​| ブラウザ画面で表示に適用 | 
-| ''​conf/​printstyle.css''​ | ページが印刷されるときに適用 | +| ''​conf/​userprint.css''​\\ ''​conf/​userprint.less''  ​| ページが印刷されるに適用 | 
-| ''​conf/​rtlstyle.css'' ​  | 右から左に書くインターフェース言語が用いられときに適用\\ :!: **[[deprecated]],​ see [[#RTL Styles]]** | +<del>''​conf/​userrtl.css''​</​del>​\\ <​sub>​Angua 以降非奨励</​sub> ​  | 右から左に書く言語が使されているに適用 :!: **非推奨・[[#RTL Styles]] ​を参照** | 
-| ''​conf/​userfeed.css'' ​  ​| フィード表示に適用 | +| ''​conf/​userfeed.css''​\\ ''​conf/​userfeed.less'' ​ | [[ja:​syndication|フィード]]を表示する際に適用 | 
-| ''​conf/​userall.css'' ​   | すべての表示モードで適用 |+| ''​conf/​userall.css''​\\ ''​conf/​userall.less'' ​   | すべての表示モードで適用 |
  
 +(注:2015-08-10 "​Detritus"​ 以降、''​.less''​ が使用可能です。)
  
 これは、テンプレートやプラグインが後日更新された場合にも問題を起こすことなく、それらのスタイルの小さな部分を上書きするのに便利です。 これは、テンプレートやプラグインが後日更新された場合にも問題を起こすことなく、それらのスタイルの小さな部分を上書きするのに便利です。
- + 
 ===== ID の使用 ===== ===== ID の使用 =====
  
-スタイルを割り当てるためにテンプレート内でカスタム ID を使用する際、それが既存の ID と競合しないよう気をつけてください。特に、セクションの見出しに自動的に割り当てられる ID に気をつけてください。これを確実に行う最も簡単な方法は、ID に二つの連続アンダースコア ​(%%__%%を使用することです。セクションの ID は常に有効な[[:​pagenames|ページ名]]なので、連続アンダースコアが含まれることは決してないからです。 +スタイルを割り当てるためにテンプレート内でカスタム ID を使用する際、それが既存の ID と競合しないよう気をつけてください。 
- +特に、セクションの見出しに自動的に割り当てられる ID に気をつけてください。 
-===== Style.ini ===== +これを確実に行う最も簡単な方法は、ID に二つの連続アンダースコア%%__%%を使用することです。 
-''​style.ini''​ は [[wp>​INI_file|ini ファイル]]です。これにはセクションが二つあります:​ +セクションの ID は常に有効な[[ja:pagename|ページ名]]なので、連続アンダースコアが含まれることは決してないからです。 ​
-==== [stylesheets] ==== +
-この部分は、どの CSS ファイルがロードされるかを定義します。各行は次のように定義されます:​ +
-  cssfile.css = mode +
- +
-''​cssfile.css''​ はあなたのファイル名で、mode は適用する[[#​スタイルシートのモード|モード]]です。  +
- +
-==== パターン置換 ==== +
-==== [replacements] ==== +
- +
-DokuWiki の CSS ディスパッチャーは、ロードされるスタイルシート内のプレースホルダーを、テンプレートの ''​[[#​style.ini]]''​ 内の ''​[replacements]''​ セクションで設定された値に置換することができます。これは、一度色使いを定義した後、すべてのファイルでそれらの値を再利用するのに特に便利です。後から色を調整するのは、単純に ini ファイルを変更するだけで済みます。 +
  
-=== 保証色彩レースホルダー ===+ラグインの中では ''<​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.1399470982.txt.gz · 最終更新: 2014-05-07 15:56 by s.sahara