MDC:Custom CSS Classes
出典: MDC
- How to help: 目次
- (MDC各言語共通)
- 一覧
- Documentation wishlist
- 編集/レビューが必要な項目一覧
- 移設リスト
- ガイド
- はじめるには
- 記述者ガイド (英語版の訳)
- Writing interface reference documentation
- ページ命名ガイド
- あいまい性除去のページ
- MDCの新しいローカライズをはじめる
- 著作権とライセンス
- リファレンス
- Wiki マークアップリファレンス
- カスタム CSS クラス
- カスタムテンプレート
- MediaWiki 拡張
- 外部リダイレクト
- リダイレクトが必要なページ
- MDC日本語版
- 日本語版
- 翻訳
- 井戸端会議
- 通信
Devmo wiki (MDC で利用している独自の MediaWiki) には、以下のような CSS クラスが定義されています。どのような理由によるものでも、MDC のために新たな CSS クラスが必要であれば、気軽に Dria まで連絡を取ってください。
目次 |
[編集] 定義済み CSS クラス
| クラス名 | 適用結果 (一部の表示サンプルは下にあります) |
div.tip |
記事本文に tip 文字列を表示する。 |
div.bug |
記事本文にバグ文字列を表示する。 |
.float-left |
左側に float エレメントを作成する。(通例は画像用) |
.float-right |
右側に float エレメントを作成する。(通例は画像用) |
.figure |
将来のために予約されており、現在は空白定義である。 |
.standard-table |
単純な表スタイル |
.standard-table td.header |
標準的な表におけるテーブルヘッダのスタイル |
.fullwidth-table |
100% 幅の表 (この表がサンプルです) |
.fullwidth-table td.header |
100% 幅の表におけるテーブルヘッダのスタイル |
div.breadcrumbs |
独自 breadcrumbs 拡張向けスタイル |
div.breadcrumbs a.breadcrumbs |
breadcrumbs 内のリンクのためのスタイル |
div.breadcrumbs span.breadcrumbs |
breadcrumbs 内の表示中のページタイトルのためのスタイル |
div.side-note-left div.side-note-right |
サイドバーや記事内に傍白を入れる際に利用します。親となるボックス幅 (通常、記事本体の幅になります) の 50% のボックスが生成されます。記事の説明となるサイドバーがより読みやすくなるように、これらをぜひとも利用してください。 |
div.highlight |
本文の左側に 3px 幅の青色バーを表示し、ハイライトします。 |
.highlightred |
文字色を赤にします。 |
.highlightblue |
文字色を青にします。 |
.highlightgreen |
文字色を緑にします。 |
[編集] サンプル
[編集] コードのハイライト
よく、コードの一部のある部分に注意を引きたいことがあります。これは span を利用すれば可能になりますが、MediaWiki に組み込まれてるコードフォーマット機能である "indent-at-least-one-space" を利用できます。なお、<pre> の中で span を利用するのは、MediaWiki パーサが span を無視して、コードの一部として出力するため有用ではありません。
<span class="highlightred">これは動作しません。</span>
それに比べ、インデントしているコード部分にハイライトを入れる場合、span をその中で利用できます。なお、コードブロック内の空白行もインデントしなければなりません。空白行の先頭に空白がなければ、パーサはコードブロックを閉じ、次の行から再開します。
これは、空白行をもつ
コードブロック の例です。
インデント はされていません。
明らかに、上の書き方は間違いです。以下のようにすべきです。(空白行にも先頭の空白は必要です。)
これは、空白行をもつ コードブロック の例です。 インデント されています。
[編集] Breadcrumbs
- Core JavaScript 1.5 Reference:About を breadcrumbs を持つページのサンプルとしてみてください。
[編集] table.standard-table
| table header 1 | table header 2 |
|---|---|
| これは、 | table.standard-table のサンプルです |
[編集] table.fullwidth-table
| table header 1 | table header 2 |
|---|---|
| これは | table.fullwidth-table のサンプルです |
[編集] div
[編集] Tips
div class="tip"は、ティップス (tips) をフォーマットするために利用します。
[編集] バグ
div class="bug"は、関連する bugzilla エントリとともに、既知のバグへの参照に利用します。
[編集] 警告
div class="warning"は、文書のなかの警告表示をハイライトするために利用します。最終的には、何らかのクールな表示にし、アイコンか何かを付け加える予定です。
[編集] ノート
div class="note"は、文書のなかのノートをハイライトするために利用します。
[編集] ハイライト部分
div class="highlight" の利用サンプルです。
これは、ハイライト CSS のサンプル章です。これらをあなたのコードの一部へ注目を引くために利用してください。最初に、XUL Tutorial へ追加されました。
これは、
ハイライト表示の
フォーマット済み
div
のサンプルです。