--- title: MDN のコンテンツで使われるクラスとスタイルのガイド slug: MDN/Guidelines/CSS_style_guide tags: - Guide - MDN - MDN Meta - ガイド - ガイドライン - クラス - スタイル translation_of: MDN/Guidelines/CSS_style_guide ---

MDN には数多くの組み込みのグローバルスタイルがあって、記事のスタイル付けやレイアウトの際に使用することができ、この記事では利用可能なクラスとその使用方法を説明します。

これらのスタイルの一部は、 MDN エディタのツールバーからアクセスできます。このような場合、スタイルの見出しの下に「ツールバーで編集」という表示と、関連するツールバーのボタンの画像を含めます。

これらのスタイルは、記事内容のスタイリング中に発生する最も一般的な状況をカバーするように開発されているので、可能な限り使用可能なクラスを使用するようにしてください。標準的なコンテンツのルックアンドフィールからの分岐が多すぎると、一貫性や可読性を損ないます。あなたのページが絶対に特別なカスタムスタイリングを必要としていると感じたら、まず MDN Discourse フォーラムでその話題を切り出す必要があります。

注: 特定のクラスが MDN で使用されている場所を検索する場合は、https://developer.mozilla.org/ja/search?locale=en-US&css_classnames=desired-css-class という形式の URL を使用して検索できます。たとえば、 Google のカードグリッドレイアウトを使用するページを見つけるには、URL https://developer.mozilla.org/ja/search?locale=*&css_classnames=card-grid を試してください。

重要: このガイドは不完全です。完成させるための手助けをする方法については、{{anch("Updating this guide", "このガイドの更新")}}を参照してください。

インラインスタイル

この節では、 MDN のスタイルコンテンツブロックで使用できるインラインスタイルを示します。

`.button`

任意の要素に MDN のボタンとしてスタイル付けします。通常はリンクをスタイル付けするために使用されます (セキュリティ上の理由で、 {{HTMLElement("button")}} 要素は記事のソースコードから削除されます)。

Download source code

構文例

<a href="https://github.com/mdn/simple-web-worker/archive/gh-pages.zip" class="button">Download source code</a>

`.external-icon` および `.ignore-external`

MDN の外部にあるコンテンツへのリンクは、 external-icon クラスが追加されるように自動的に構成され、サイトから離れることを示すアイコンが作成されます。しかし、このアイコンが望ましくなく、他のスタイルと干渉することがあります。これはリンクに ignore-external クラスを追加することで削除できます。

注: ほとんどの場合、これらを使用することは望ましくありません。 .external-icon が自動的に追加されるのは、ユーザーが知らずに MDN から離れるのを防ぐためです。一般的に受け入れられる利用例は唯一、サンプルコードやその他のサービスに使用するもののような、 MDN に固有のドメインやサブドメインへリンクする場合のみです。

MDN 内部へのリンク
 MDN から離れるリンク
 MDN から離れるリンクに ignore-external を付けたもの

構文例

<a href="/">Link to MDN</a>
<a href="http://wikipedia.org">Link away from MDN</a>
<a href="http://wikipedia.org" class="ignore-external">Link away from MDN with <code>ignore-external</code></a>

`.glossaryLink`

これは用語集へのリンクをスタイル付けするためのもので、ページ上であまり目立たなくするためのものです。このクラスは、よく使われるマクロで説明したように、 KumaScript マクロを使用して追加されるため、手動では挿入されません。

マクロの構文例

\{{Glossary("HTML")}}

`.hidden`

コンテンツを Wiki の記事内では非表示にし、エディター内では表示するようにすることができます。これは HTML, CSS, JavaScript を使用してライブコードサンプルを提供しつつ、読者には関連する言語のみを表示するようにするようにすることができます。

構文例

<h4 id="Hidden_Code_Sample" name="Hidden_Code_Sample">Hidden code Sample</h4>

<div class="hidden">
<h5 id="HTML">HTML</h5>

<pre class="brush: html;">
&lt;button id="test"&gt; Click me &lt;/button&gt;

<h5 id="CSS">CSS</h5>

<pre class="brush: css;">
button {
    background-color: #a00;
    color:#fff;
    font-size: 20px;
}
</pre>
</div>

<h5 id="JavaScript_Content">JavaScript Content</h5>

<pre class="brush: js;">
document.getElementById("test").addEventListener("click", works);
function works() {
    window.alert("you clicked it!");
}
</pre>

<p>\{{EmbedLiveSample("Hidden_Code_Sample")}}</p>

非表示コードサンプル

HTML

<button id="test">Click Me</button>

CSS

button{
    background-color: #a00;
    color:#fff;
    font-size: 20px;
}

JavaScript

document.getElementById("test").addEventListener("click", works);
function works(){
    window.alert("you clicked it!");
}

`.seoSummary`

これはページ上のコンテンツに目に見える効果を与えないクラスですが、しかし、クラスが要素 (通常は {{HTMLElement("span")}}) に適用されている場合、 KumaScript は要素のコンテンツを使用して description の {{HTMLElement("meta")}} タグを生成します。これらは短い説明を提供し、これは検索エンジン、 Facebook や Twitter のような共有サイトなどで使用されます。このクラスは、 MDN エディターの WYSIWYG スタイルドロップダウンメニューの [SEO Summary] オプションで利用できます。

注: .seoSummary がページに明示的に指定されていない場合、最初の段落が自動的に SEO の要約として設定されます。ほとんどのページでは、これを使用する必要はありません。

最後のページの画面にはスタイルの変更は表示されませんが、 SEO サマリーとして設定されたテキストには次のように点線のアウトラインと "SEO Summary" ラベルが表示されます。

以下の例は、 Mozilla のアドオンページから抜粋したものです。

構文例

<p>
  <span class="seoSummary">Add-ons add new functionality to <a href="/en-US/docs/Mozilla/Gecko">Gecko</a>-based applications such as Firefox, SeaMonkey, and Thunderbird.</span>
  There are two main types of add-on: <a href="#Extensions">Extensions</a> add new features to the application, while <a href="#Themes">Themes</a> modify the application's user interface.
</p>

生成された {{HTMLElement("meta")}} 要素の例

<meta property="og:description" content="Add-ons add new functionality to Gecko -based applications such as Firefox, SeaMonkey, and Thunderbird.">
<meta name="description" content="Add-ons add new functionality to Gecko -based applications such as Firefox, SeaMonkey, and Thunderbird.">
<meta name="twitter:description" content="Add-ons add new functionality to Gecko -based applications such as Firefox, SeaMonkey, and Thunderbird.">

Facebook の使い方の例

SEOSummary as it is used by Facebook

注: これは特別な "About this page" スタイルの blurb ボックスを作成する {{anch(".summary")}} クラスと同じではありません。そのクラスは、検索エンジンで使用される SEO サマリーや、MDN がツールチップを生成するために使用するマクロ、およびサブページをリストするメニューを自動的に生成するマクロを設定しません。

ブロックレベルスタイル

このセクションでは、MDN のスタイルコンテンツブロックで使用可能なブロックレベルのスタイルを示します。

`.callout-box`

コールアウト、またはハイライトしたい関連情報を格納するための右浮動ボックスを作成できます。

これはエキサイティングな吹き出しです

浮遊するコンテンツの例

Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch.

構文例

<div class="callout-box">
  <p>This is an exciting callout</p>
</div>
<p>Example content to float around</p>
<p>Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch.</p>

`.card-grid`

複数のカードを並べて配置すると、特定のコンテンツを呼び出すことや、複数ステップの行動を促すことができます。カードは、利用可能な水平スペース内で均等に配置されています。2〜3個くらいが最適です。

CSS リファレンス
An exhaustive reference for seasoned Web developers describing every property and concept of CSS.
CSS チュートリアル
A step-by-step introduction to help complete beginners get started. It presents all the needed fundamentals.
CSS3 デモ
A collection of demos showing the latest CSS technologies in action: a boost for the creativity.

構文例

<ul class="card-grid">
  <li>My card content</li>
  <li>My second card content</li>
  <li>My third card content</li>
</ul>

`.column-container`

特定の幅の列のコンテナを示します。通常、以下に示すように他のクラスと組み合わせて使用されます。

１つ目の列

２つ目の列

３つ目の列

構文例

<div class="column-container">
  <div class="column-4">
    <p>My first equal width column.</p>
  </div>
  <div class="column-4">
    <p>My second equal width column.</p>
  </div>
  <div class="column-4">
    <p>My third equal width column.</p>
  </div>
</div>

`.column-1`, `.column-2`, `.column-3` ... のように上がって `.column-11` まで

.column-container に格納される特定の幅の列を指定します。これは、列コンテナの幅の12分の1 (12列のグリッドレイアウトに基づいています) です。各列のペアの間に溝が残されます。

1/12

11/12

5/12

7/12

6/12

4/12

2/12

構文例

<div class="column-container">
  <div class="column-1" style="background-color: yellow;">1/12</div>
  <div class="column-11" style="background-color: lime;">11/12</div>
</div>

<div class="column-container">
  <div class="column-5" style="background-color: yellow;">5/12</div>
  <div class="column-7" style="background-color: lime;">7/12</div>
</div>

<div class="column-container">
  <div class="column-6" style="background-color: yellow;">6/12</div>
  <div class="column-4" style="background-color: lime;">4/12</div>
  <div class="column-2" style="background-color: pink;">2/12</div>
</div>

`.column-quarter`, `.column-third`, `.column-half`

.column-container によって保持される特定の幅の列を指定します。これは、列コンテナの幅広い部分です。それぞれの列のペアの間にガターが残されます。

Half

Third

Quarter

これらのクラスは、次のようなよく使われる数値の幅のクラスと等価なものです。

.column-quarter — .column-3 と等価
.column-third — .column-4 と等価
.column-half — .column-6 と等価

構文例

<div class="column-container">
  <div class="column-half" style="background-color: yellow;">Half</div>
  <div class="column-half" style="background-color: lime;">Half</div>
</div>

<div class="column-container">
  <div class="column-third" style="background-color: yellow;">Third</div>
  <div class="column-third" style="background-color: lime;">Third</div>
  <div class="column-third" style="background-color: pink;">Third</div>
</div>
<div class="column-container">
  <div class="column-quarter" style="background-color: yellow;">Quarter</div>
  <div class="column-quarter" style="background-color: lime;">Quarter</div>
  <div class="column-quarter" style="background-color: pink;">Quarter</div>
  <div class="column-quarter" style="background-color: cyan;">Quarter</div>
</div>

`<details>`

そのコンテンツを隠すためにコンテンツのブロックを囲むことができ、その中に含まれるコンテンツを展開/折りたたむためにクリックすることができる「+詳細」リンクを表示することができます。あなたはこの記事全体を通して使用されているのを見ることができます。

構文例

これは、 {{HTMLElement("details")}} で隠された {{HTMLElement("details")}} の構文セクションの例です。おぉ、なんとメタなんでしょう。

<details>
<h4>Example syntax</h4>
<p>This is an example syntax section for <code>.detail</code> that was hidden with <code>.detail</code>. Ooooooh, how meta.</p>
</details>

`.example-bad` and `.example-good`

Good と bad の例は、.example-good クラスと .example-bad クラスを使ってハイライトすることができます。これらは通常、サンプルコードスニペットを示す <pre> ブロックで使用されますが、他のブロックでも使用できます。

良いコード例

<label for="test">Form label:</label>
<input type="text" id="test">

悪いコード例

<input type="text">

以下に示すように、これらのクラスでは見出しを常に使用する必要があります。 — CSS はページのローカライズされた言語をページに追加することができないため、スクリーンリーダーを使用するユーザーや文化的背景の異なるユーザーにとって重要です(緑と赤は普遍的に良いと悪いを意味するわけではありません。)

構文例

<h5 id="Good_code_example">Good code example</h5>

<pre class="brush: html example-good">
  &lt;label for="test"&gt;Form label:&lt;/label&gt;
  &lt;input type="text" id="test"&gt;
</pre>

<h5 id="Bad_code_example">Bad code example</h5>

<pre class="brush: html example-bad">
  &lt;input type="text"&gt;
</pre>

`.moreinfo`

このクラスはもともと、さらなる読み上げのためのリンクのリストを表示するように設計されていましたが、現在のページから離れていくあらゆる情報に使用できます。

JavaScript の知識を基に構築するツール

JavaScript フレームワーク: Developed by Google Angular.js is one of the best known frameworks.; Ember.js is open source and community driven.
JavaScript コンパイラ: Babel lets you write ES2015 and compiles to more backwards compatible code.

構文例

<div class="moreinfo">
  <!-- content goes here -->
</div>

`.blockIndicator.note`

コンテンツのセクションをノートボックスに変換します。これは通常、現在の主題に直接関連する有用なメモであるものの、情報の流れに直接会わないものです。

注: これは通常、 MDN の記事にメモを表示する方法です。

これは MDN エディタの WYSIWYG スタイルドロップダウンメニューの "Note box" オプションで利用できます。

構文例

<div class="blockIndicator note" role="complementary">
  <p><strong>Note</strong>: This is how we usually present a note in an MDN article.</p>
</div>

`.pull-aside`

コンテンツを側面に引き出します。

側面に移動するいくつかのコンテンツ。

側面に出てこないコンテンツもあります。

構文例

<div class="pull-right">Some content that goes off to the side.</div>
<p>Some content that does not go off to the side.</p>

その他の利用

側面に移動するいくつかのコンテンツ。

側面に出てこないコンテンツもあります。

<div class="pull-aside"><div class="moreinfo">Some content that goes off to the side.</div></div>
<p>Some content that does not go off to the side.</p>
<p>Some content that does not go off to the side.</p>

`.summary` {{Obsolete_Inline}}

追加のパディング付きの灰色のボックスとして視覚的に明示的に表示されるページの要約ボックスを作成します。ページの重要性を高めるため、記事の開始段落 (参照記事は除く) に使用する必要があります。

重要: これは検索エンジンによる検索結果リストのページの要約や MDN によって、ページタイトルとその要約のツールチップとメニューを作成するのに使用されるテキストのセクションを設定する {{anch(".seoSummary")}} クラスと同じではありません。このクラスは、厳密には視覚効果です。ページの可視性および有効な要約の両方を確立するために、両方のクラスを一緒に使用することができます。

これはこの記事の始まりです。以下では、子犬、キリン、ジュゴンについて説明します。

これは MDN エディタの WYSIWYG スタイルドロップダウンメニューの "Article Summary" オプションで利用できます。

構文例

<p class="summary">This is the start of this article. Below we will talk about puppies, giraffes, and dugongs.</p>

`.topicpage-table`

太い灰色の境界線で区切られた2つの列を作成します。ランディングページでよく使用されます。これは通常、ネストされた {{HTMLElement("div")}} で最も効果的です。2つの子要素に .section クラスを与えなければならないことに注意してください。

Column 1

Column 2

構文例

<div class="topicpage-table">
  <div class="section">Column 1</div>
  <div class="section">Column 2</div>
</div>

`.threecolumns`

コンテンツのブロックが3つの等幅の列に表示されます。

Street art PBR YOLO pug, before they sold out fixie artisan blog bicycle rights beard direct trade chillwave. Fanny pack cornhole whatever, Austin single-origin coffee ethical church-key distillery fashion axe tofu farm-to-table irony tattooed Tumblr. Craft beer Thundercats Austin gentrify, wolf Echo Park asymmetrical hella sartorial.

これは MDN エディターの WYSIWYG スタイルドロップダウンメニューの [3列] オプションで利用できます。

注: これをリストに適用する場合は、外側のラッパー {{HTMLElement("div")}} に適用する必要があります。そうでなければ、 {{HTMLElement("ul")}} 要素に適用されます。リストの箇条書きが Chrome に表示されなくなります。

構文例

<div class="threecolumns">
  <p>Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch.</p>

  <p>Street art PBR YOLO pug, before they sold out fixie artisan blog bicycle rights beard direct trade chillwave. Fanny pack cornhole whatever, Austin single-origin coffee ethical church-key distillery fashion axe tofu farm-to-table irony tattooed Tumblr. Craft beer Thundercats Austin gentrify, wolf Echo Park asymmetrical hella sartorial.</p>
</div>

`.twocolumns`

コンテンツのブロックが2つの等幅の列に表示されます。

これは MDN エディターの WYSIWYG スタイルドロップダウンメニューの [2列] オプションで利用できます。

注: これをリストに適用する場合は、外側のラッパー {{HTMLElement("div")}} に適用する必要があります。そうでなければ、{{HTMLElement("ul")}} 要素に適用されます。リストの箇条書きが Chrome に表示されなくなります。

構文例

<div class="twocolumns">
  <p>Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch.</p>

  <p>Street art PBR YOLO pug, before they sold out fixie artisan blog bicycle rights beard direct trade chillwave. Fanny pack cornhole whatever, Austin single-origin coffee ethical church-key distillery fashion axe tofu farm-to-table irony tattooed Tumblr. Craft beer Thundercats Austin gentrify, wolf Echo Park asymmetrical hella sartorial.</p>
</div>

`.blockIndicator.warning`

コンテンツの一部を警告ボックスに変換します。警告ボックスは通常、読者が本当に注意する必要があるという重要な事実を伝えます (例えば、何かをする必要がある、あるいは重大な問題を避けるために何かを避けるなど)。

警告: ここにはドラゴンがいます！

これは MDN エディタの WYSIWYG スタイルドロップダウンメニューの [警告ボックス] オプションで利用できます。

構文例

<div class="blockIndicator warning">
  <p><strong>警告</strong>:ここにはドラゴンがいます！</p>
</div>

表のスタイル

MDN は、 HTML {{HTMLElement("table")}} 要素を表示するための特定のスタイルを提供します。このセクションでは、これらについて説明します。

追加クラスなし:

Favorite teas, December 2015
種類	カフェイン	抽出時間	湯温
紅茶	高	2-3 分	99 °C
緑茶	低-中	1-2 分	75-80 °C
カフェインフリー
ハーブティー	なし	3-6 分	99 °C

`.standard-table`

Favorite teas, December 2015
種類	カフェイン	抽出時間	湯温
紅茶	高	2-3 分	99 °C
緑茶	低-中	1-2 分	75-80 °C
カフェインフリー
ハーブティー	なし	3-6 分	99 °C

MDN エディターの WYSIWYG ツールバーにある Table ボタンを使用して、標準の表を作成することができます。これを押すといくつもの機能を含む表のプロパティダイアログボックスが表示されます。一般には行と列の数、どのセルが表の見出し ({{HTMLElement("th")}}) なのか、表示される {{HTMLElement("caption")}}、必要に応じて読み上げソフトにもっと詳細な情報を提供する {{HTMLAttrxRef("summary", "table")}} 属性などを設定するために使用します。

A diagram showing the Table button in the MDN edit interface, which has a picture of a table on it, and the dialog box that it brings up, which has options on it to set row number, column number, which cells are headings, and more.

スタイルのメモ

Note the different styling applied to the headers ({{HTMLElement("th")}}), and the fact that they have {{HTMLAttrxRef("scope", "th")}} attributes applied for accessibility purposes.
By default, alternating rows have zebra stripes applied, but these can be removed by adding the .no-stripe class to them.
You can force a table to span the full width of the content area (or other immediate containing box, if it is not the content area) by adding the .fullwidth class to the {{HTMLElement("table")}} element.

構文例

<table class="standard-table" summary="This table details what tea we liked to drink back in the heady month of December 2015">
 <caption>Favorite teas, December 2015</caption>
 <thead>
  <tr>
   <th scope="row">種類</th>
   <th scope="col">カフェイン</th>
   <th scope="col">抽出時間</th>
   <th scope="col">湯温</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">紅茶</th>
   <td>High</td>
   <td>2-3 minutes</td>
   <td>99&nbsp;°C</td>
  </tr>
  <tr>
   <th scope="row">緑茶</th>
   <td>低 - 中</td>
   <td>1-2 minutes</td>
   <td>75 - 80&nbsp;°C</td>
  </tr>
  <tr>
   <th scope="row">ハーブティー</th>
   <td>None</td>
   <td>3-6 minutes</td>
   <td>99&nbsp;°C</td>
  </tr>
 </tbody>
</table>

`.standard-table.nostripe`

Favorite teas, December 2015
種類	カフェイン	抽出時間	湯温
紅茶	高	2-3 分	99 °C
緑茶	低-中	1-2 分	75-80 °C
カフェインフリー
ハーブティー	なし	3-6 分	99 °C

`.standard-table.fullwidth`

Favorite teas, December 2015
種類	カフェイン	抽出時間	湯温
紅茶	高	2-3 分	99 °C
緑茶	低-中	1-2 分	75-80 °C
カフェインフリー
ハーブティー	なし	3-6 分	99 °C

`.fullwidth-table`

Favorite teas, December 2015
種類	カフェイン	抽出時間	湯温
紅茶	高	2-3 分	99 °C
緑茶	低-中	1-2 分	75-80 °C
カフェインフリー
ハーブティー	なし	3-6 分	99 °C

このガイドの更新

このガイドは未完成のものであり、時間をかけて徐々に更新されています。このガイドの更新や追加を手伝ってくださる方は、気軽に行ってください。質問がある場合や、この記事を改善するための議論やアイデアをご希望の場合、または MDN Web Docs のスタイルやレイアウトを改善する方法についての提案がある場合は、いくつかの選択肢があります。

完成させることを手伝いたい場合や、抜けているものや正しくない記述のスタイルがある場合は、 (Discourse では chrisdavidmills、 Mozilla IRC では chrismills) に連絡してください。

MDN Web Docs Discourse フォーラムの議論を開始する: MDN Web Docs コミュニティやスタッフと議論したいという考えがある場合は、Mozilla Discourse のディスカッションサイトにある MDN Web Docs フォーラムでトピックを開始してください。
提案を GitHub で提出: あなたが私たちの公式問題追跡システムにあなたの提案を記録したいのであれば、そうすることをお勧めします。最初に上記のチャンネルの1つを使って議論することをお勧めしますが、必須ではありません。
IRC チャンネルで質問する: 私たちの執筆スタッフと寄稿者のコミュニティは、Mozilla の IRC サーバの #mdn チャンネルを使って議論し、アイデアを共有しています。私たちのチャンネルに参加して質問をしたり、提案をすることは大歓迎です！ (なお、 IRC は参加者が少なく、2020年内に終了する可能性があります。 Discourse のほうが回答が得られやすいです。)

インラインスタイル

.button

構文例

.external-icon および .ignore-external

構文例

.glossaryLink

マクロの構文例

.hidden

構文例

非表示コードサンプル

HTML

CSS

JavaScript

.seoSummary

構文例

生成された {{HTMLElement("meta")}} 要素の例

Facebook の使い方の例

ブロックレベルスタイル

.callout-box

構文例

.card-grid

構文例

.column-container

構文例

.column-1, .column-2, .column-3 ... のように上がって .column-11 まで

構文例

.column-quarter, .column-third, .column-half

構文例

<details>

構文例

.example-bad and .example-good