ja:devel:css
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
ja:devel:css [2008-11-24 05:52] – リンク先訂正 124.102.221.92 | ja:devel:css [2023-12-02 11:13] (現在) – [テーブル] 27.83.50.17 | ||
---|---|---|---|
行 1: | 行 1: | ||
+ | ====== CSS スタイルシート ====== | ||
+ | [[ja: | ||
+ | DokuWiki 本体は最小限のスタイル定義しかカバーしていません。 | ||
+ | CSS 定義の残りは、使用されている[[ja: | ||
+ | |||
+ | すべての CSS ファイルは、[[xref> | ||
+ | この過程で、キャッシュ、パターン置換、[[ja: | ||
+ | とりわけスタイルシートのロードは '' | ||
+ | |||
+ | ===== スタイルシートのモード ===== | ||
+ | |||
+ | 5種類のスタイルシートのモードがあります: | ||
+ | |||
+ | * **screen**:Web ブラウザにページを表示する際に使われます | ||
+ | * **print**:ここでの定義が印刷用のページで使用されます | ||
+ | * **all**:すべての表示モードで適用されます | ||
+ | * < | ||
+ | * **feed**:フィードの表示時に適用されます | ||
+ | |||
+ | ==== RTL styles ==== | ||
+ | |||
+ | Release 2012-10-13 "Adora Belle" 以降、RTL mode は[[devel: | ||
+ | 右から左に記述する[[ja: | ||
+ | 例えば: | ||
+ | |||
+ | <code css> | ||
+ | .someClass { | ||
+ | float: left; | ||
+ | background-color: | ||
+ | } | ||
+ | [dir=rtl] .someClass { | ||
+ | float: right; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== DokuWiki スタイルシート ===== | ||
+ | |||
+ | [[ja: | ||
+ | ロードする順序は以下のとおりです: | ||
+ | |||
+ | ==== 1. ベーススタイルシート ==== | ||
+ | |||
+ | これらのスタイルシートは ''/ | ||
+ | これらは、エラーメッセージの見た目のような基本的なスタイルを定義します。 | ||
+ | |||
+ | ==== 2. プラグインスタイル ==== | ||
+ | |||
+ | 各プラグインは自身のスタイルを以下のファイルを用いて定義することができます: | ||
+ | |||
+ | ^ モード | ||
+ | | screen | ||
+ | | print | '' | ||
+ | | all | '' | ||
+ | | < | ||
+ | | feed | '' | ||
+ | |||
+ | スタイルファイルは、拡張子 '' | ||
+ | しかし、'' | ||
+ | |||
+ | 任意のテンプレートの色使いにうまく適合させるため、プラグインの作者は[[ja: | ||
+ | |||
+ | :!: | ||
+ | プラグインからのスタイルシートはプラグインが用いられない場合であってもロードされます | ||
+ | (ただし、プラグインが[[ja: | ||
+ | |||
+ | :!: | ||
+ | ここで定義されるスタイルは、競合に気をつけるべきです。 | ||
+ | ですので、プラグインを書く際は注意してください。 | ||
+ | 可能な場合は、確実に競合が起きないようにするため、あなたのスタイルにプレフィックスをつけてください。 | ||
+ | |||
+ | ==== 3. テンプレートスタイル ==== | ||
+ | |||
+ | テンプレートのスタイルシートは選択されたテンプレートのディレクトリからロードされます。 | ||
+ | [[ja: | ||
+ | ロードは、[[# | ||
+ | |||
+ | * wiki 管理者による '' | ||
+ | * [[ja: | ||
+ | |||
+ | ==== 4. ユーザスタイル ==== | ||
+ | |||
+ | wiki 管理者は、wikiの設定フォルダ(デフォルト設定の場合 '' | ||
+ | |||
+ | ^ CSS ファイル | ||
+ | | '' | ||
+ | | '' | ||
+ | | < | ||
+ | | '' | ||
+ | | '' | ||
+ | |||
+ | (注:2015-08-10 " | ||
+ | |||
+ | これは、テンプレートやプラグインが後日更新された場合にも問題を起こすことなく、それらのスタイルの小さな部分を上書きするのに便利です。 | ||
+ | |||
+ | ===== ID の使用 ===== | ||
+ | |||
+ | スタイルを割り当てるためにテンプレート内でカスタム ID を使用する際、それが既存の ID と競合しないよう気をつけてください。 | ||
+ | 特に、セクションの見出しに自動的に割り当てられる ID に気をつけてください。 | ||
+ | これを確実に行う最も簡単な方法は、ID に二つの連続アンダースコア(%%__%%)を使用することです。 | ||
+ | セクションの ID は常に有効な[[ja: | ||
+ | |||
+ | プラグインの中では ''< | ||
+ | 例:'' | ||
+ | |||
+ | ===== 画像とインポートスタイルの使用 ===== | ||
+ | |||
+ | DokuWiki の CSS ディスパッチャは、独自のスタイルシート内の画像('' | ||
+ | |||
+ | 例:プラグインで、'' | ||
+ | |||
+ | <code css> | ||
+ | .someclass { | ||
+ | | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | DokuWiki は自動的に URL を変更するので、画像はテンプレートディレクトリと相対化されたプラグインディレクトリにあります。 | ||
+ | |||
+ | ===== ブラウザ(Internet Explorer)固有の CSS ===== | ||
+ | |||
+ | [[devel: |