Your Search Results

    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="tip"は、ティップス (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
    のサンプルです。
    

     

    Document Tags and Contributors

    タグ:
    Contributors to this page: Okome, Potappo, Shimono, ethertank
    最終更新者: ethertank,