MDC のための独自 CSS クラス

警告: この記事の内容は古くなっている可能性があります。 英語版の最新の内容も合わせてご覧下さい。

Devmo wiki (MDC で利用している独自の MediaWiki) には、以下のような CSS クラスが定義されています。

定義済み CSS クラス

クラス名 適用結果 (一部の表示サンプルは下にあります)
div.tip 記事本文に tip 文字列を表示する。
div.bug 記事本文にバグ文字列を表示する。
.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 内の表示中のページタイトルのためのスタイル
.cols-2 2 カラム表示(※CSS3 columns プロパティ対応ブラウザのみ)
.cols-3 3 カラム表示(※CSS3 columns プロパティ対応ブラウザのみ)
.cols-4 4 カラム表示(※CSS3 columns プロパティ対応ブラウザのみ)
.cols-5 5 カラム表示(※CSS3 columns プロパティ対応ブラウザのみ)

サンプル

コードのハイライト

よく、コードの一部のある部分に注意を引きたいことがあります。これは span を利用すれば可能になりますが、MediaWiki に組み込まれてるコードフォーマット機能である "indent-at-least-one-space" を利用できます。なお、<pre> の中で span を利用するのは、MediaWiki パーサが span を無視して、コードの一部として出力するため有用ではありません。

<span class="highlightred">これは動作しません。</span>

それに比べ、インデントしているコード部分にハイライトを入れる場合、span をその中で利用できます。なお、コードブロック内の空白行もインデントしなければなりません。空白行の先頭に空白がなければ、パーサはコードブロックを閉じ、次の行から再開します。

これは、空白行をもつ
   コードブロック の例です。
   インデント はされていません。

明らかに、上の書き方は間違いです。以下のようにすべきです。(空白行にも先頭の空白は必要です。)

これは、空白行をもつ
   コードブロック の例です。

   インデント されています。

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="note"は、ティップス (tips) をフォーマットするために利用します。

これは tip です。

バグ

div class="bug"は、関連する bugzilla エントリとともに、既知のバグへの参照に利用します。

警告

div class="warning"は、文書のなかの警告表示をハイライトするために利用します。最終的には、何らかのクールな表示にし、アイコンか何かを付け加える予定です。

これは警告です。

ノート

div class="note"は、文書のなかのノートをハイライトするために利用します。 It's only interesting because it claims it isn't.

これはノートです。非常に興味深いノートではありません。

ハイライト部分

div class="highlight" の利用サンプルです。

これは、ハイライト CSS のサンプル章です。これらをあなたのコードの一部へ注目を引くために利用してください。最初に、XUL Tutorial へ追加されました。

これは、
 ハイライト表示の
 フォーマット済み
    div
のサンプルです。

 

ドキュメントのタグと貢献者

 このページの貢献者: jigs12, ethertank, Potappo, Okome, Shimono
 最終更新者: jigs12,