From daa80a45b41e91e2621c41f36f18a01861598332 Mon Sep 17 00:00:00 2001 From: MDN Date: Fri, 12 Nov 2021 00:51:11 +0000 Subject: [CRON] sync translated content --- files/es/_redirects.txt | 7 +- files/es/_wikihistory.json | 18 +- files/es/mdn/contribute/markdown_in_mdn/index.html | 48 ++ files/es/mdn/guidelines/css_style_guide/index.html | 48 -- files/ja/_redirects.txt | 5 +- files/ja/_wikihistory.json | 20 +- .../mdn/contribute/markdown_in_mdn/index.html | 862 +++++++++++++++++++++ files/ja/mdn/guidelines/css_style_guide/index.html | 861 -------------------- files/zh-cn/_redirects.txt | 3 +- files/zh-cn/_wikihistory.json | 14 +- .../mdn/contribute/markdown_in_mdn/index.html | 842 ++++++++++++++++++++ .../mdn/guidelines/css_style_guide/index.html | 841 -------------------- 12 files changed, 1787 insertions(+), 1782 deletions(-) create mode 100644 files/es/mdn/contribute/markdown_in_mdn/index.html delete mode 100644 files/es/mdn/guidelines/css_style_guide/index.html create mode 100644 files/ja/conflicting/mdn/contribute/markdown_in_mdn/index.html delete mode 100644 files/ja/mdn/guidelines/css_style_guide/index.html create mode 100644 files/zh-cn/mdn/contribute/markdown_in_mdn/index.html delete mode 100644 files/zh-cn/mdn/guidelines/css_style_guide/index.html diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index ed54c3c834..a6ec4b3ea8 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1197,9 +1197,9 @@ /es/docs/Localización /es/docs/Glossary/Localization /es/docs/MDN/Comenzando /es/docs/MDN/Contribute/Getting_started /es/docs/MDN/Contribute/Content /es/docs/MDN/Guidelines -/es/docs/MDN/Contribute/Content/Content_blocks /es/docs/MDN/Guidelines/CSS_style_guide +/es/docs/MDN/Contribute/Content/Content_blocks /es/docs/MDN/Contribute/Markdown_in_MDN /es/docs/MDN/Contribute/Guidelines /es/docs/MDN/Guidelines -/es/docs/MDN/Contribute/Guidelines/Content_blocks /es/docs/MDN/Guidelines/CSS_style_guide +/es/docs/MDN/Contribute/Guidelines/Content_blocks /es/docs/MDN/Contribute/Markdown_in_MDN /es/docs/MDN/Contribute/Guidelines/Convenciones_y_definiciones /es/docs/MDN/Guidelines/Conventions_definitions /es/docs/MDN/Contribute/Guidelines/Project:Guía_de_estilo /es/docs/MDN/Guidelines/Writing_style_guide /es/docs/MDN/Contribute/Herramientas /es/docs/MDN/Tools @@ -1211,7 +1211,8 @@ /es/docs/MDN/Contribute/Structures/Macros/Otras /es/docs/MDN/Structures/Macros/Other /es/docs/MDN/Contribute/Structures/Tablas_de_compatibilidad /es/docs/MDN/Structures/Compatibility_tables /es/docs/MDN/Enviar_feedback_sobre_MDN /es/docs/MDN/Contribute/Feedback -/es/docs/MDN/Guidelines/Content_blocks /es/docs/MDN/Guidelines/CSS_style_guide +/es/docs/MDN/Guidelines/CSS_style_guide /es/docs/MDN/Contribute/Markdown_in_MDN +/es/docs/MDN/Guidelines/Content_blocks /es/docs/MDN/Contribute/Markdown_in_MDN /es/docs/MDN/Guidelines/Convenciones_y_definiciones /es/docs/MDN/Guidelines/Conventions_definitions /es/docs/MDN/Guidelines/Project:Guía_de_estilo /es/docs/MDN/Guidelines/Writing_style_guide /es/docs/MDN/Kuma /es/docs/MDN/Yari diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 1d531642a3..5e2edb6bb7 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -3787,6 +3787,15 @@ "L_e_o" ] }, + "MDN/Contribute/Markdown_in_MDN": { + "modified": "2020-09-30T15:28:56.171Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "Jeremie", + "LeoHirsch" + ] + }, "MDN/Contribute/Processes": { "modified": "2019-01-17T02:12:44.469Z", "contributors": [ @@ -3803,15 +3812,6 @@ "LeoHirsch" ] }, - "MDN/Guidelines/CSS_style_guide": { - "modified": "2020-09-30T15:28:56.171Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "Jeremie", - "LeoHirsch" - ] - }, "MDN/Guidelines/Conventions_definitions": { "modified": "2020-09-30T15:28:56.412Z", "contributors": [ diff --git a/files/es/mdn/contribute/markdown_in_mdn/index.html b/files/es/mdn/contribute/markdown_in_mdn/index.html new file mode 100644 index 0000000000..2e828a2be8 --- /dev/null +++ b/files/es/mdn/contribute/markdown_in_mdn/index.html @@ -0,0 +1,48 @@ +--- +title: Bloques de contenido +slug: MDN/Contribute/Markdown_in_MDN +tags: + - MDN + - Meta +translation_of: MDN/Guidelines/CSS_style_guide +translation_of_original: MDN/Structures/Content_blocks +original_slug: MDN/Guidelines/CSS_style_guide +--- +
{{MDNSidebar}}
+

This pages lists reusable content blocks.

+
+

Grilla de tarjetas

+

Permite tener un par de tarjetas cercanas entre sí para llamar a contenidos específicos o para llamar a una acción. La clase CSS es: .card-grid (L 751 - 824 in CustomCSS).

+ +

Dos columnas

+

Dos columnas separadas con un borde gris. Normalmente usadas en páginas de destino. Clase de CSS: .topicpage-table (L 830 - 837 & 82-93 in CustomCSS).

+
+
+ Columna 1
+
+ Columna 2
+
+

 

+

Columnas con la misma altura

+

Se usa en la página de destino de Firefox OS para envolver las columnas que deberían tener el mismo alto. Clase de CSS: .equalColumnHeights (L 25 - 38 in CustomCSS).

+
+
+ Un Texo
+ y nueva linea
+  
+
+ Otro texto
+
+ aquí
+
+

 

diff --git a/files/es/mdn/guidelines/css_style_guide/index.html b/files/es/mdn/guidelines/css_style_guide/index.html deleted file mode 100644 index 17e58b0086..0000000000 --- a/files/es/mdn/guidelines/css_style_guide/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Bloques de contenido -slug: MDN/Guidelines/CSS_style_guide -tags: - - MDN - - Meta -translation_of: MDN/Guidelines/CSS_style_guide -translation_of_original: MDN/Structures/Content_blocks -original_slug: MDN/Guidelines/Content_blocks ---- -
{{MDNSidebar}}
-

This pages lists reusable content blocks.

-
-

Grilla de tarjetas

-

Permite tener un par de tarjetas cercanas entre sí para llamar a contenidos específicos o para llamar a una acción. La clase CSS es: .card-grid (L 751 - 824 in CustomCSS).

- -

Dos columnas

-

Dos columnas separadas con un borde gris. Normalmente usadas en páginas de destino. Clase de CSS: .topicpage-table (L 830 - 837 & 82-93 in CustomCSS).

-
-
- Columna 1
-
- Columna 2
-
-

 

-

Columnas con la misma altura

-

Se usa en la página de destino de Firefox OS para envolver las columnas que deberían tener el mismo alto. Clase de CSS: .equalColumnHeights (L 25 - 38 in CustomCSS).

-
-
- Un Texo
- y nueva linea
-  
-
- Otro texto
-
- aquí
-
-

 

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 799f06be84..1214001898 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -2712,13 +2712,13 @@ /ja/docs/MDN/Community/Working_in_community /ja/docs/orphaned/MDN/Community/Working_in_community /ja/docs/MDN/Contribute/Content /ja/docs/MDN/Guidelines /ja/docs/MDN/Contribute/Content/Best_practices /ja/docs/MDN/Guidelines/Conventions_definitions -/ja/docs/MDN/Contribute/Content/CSS_style_guide /ja/docs/MDN/Guidelines/CSS_style_guide +/ja/docs/MDN/Contribute/Content/CSS_style_guide /ja/docs/conflicting/MDN/Contribute/Markdown_in_MDN /ja/docs/MDN/Contribute/Content/Does_this_belong_on_MDN /ja/docs/MDN/Guidelines/Does_this_belong_on_MDN /ja/docs/MDN/Contribute/Content/Writing_style_guide /ja/docs/MDN/Guidelines/Writing_style_guide /ja/docs/MDN/Contribute/FAQ /ja/docs/MDN/Contribute /ja/docs/MDN/Contribute/Guidelines /ja/docs/MDN/Guidelines /ja/docs/MDN/Contribute/Guidelines/Best_practices /ja/docs/MDN/Guidelines/Conventions_definitions -/ja/docs/MDN/Contribute/Guidelines/CSS_style_guide /ja/docs/MDN/Guidelines/CSS_style_guide +/ja/docs/MDN/Contribute/Guidelines/CSS_style_guide /ja/docs/conflicting/MDN/Contribute/Markdown_in_MDN /ja/docs/MDN/Contribute/Guidelines/Code_guidelines /ja/docs/MDN/Guidelines/Code_guidelines /ja/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS /ja/docs/MDN/Guidelines/Code_guidelines/CSS /ja/docs/MDN/Contribute/Guidelines/Code_guidelines/General /ja/docs/MDN/Guidelines/Code_guidelines/General @@ -2756,6 +2756,7 @@ /ja/docs/MDN/Contribute/Tools/Sample_server /ja/docs/MDN/Tools/Sample_server /ja/docs/MDN/Feedback /ja/docs/MDN/Contribute/Feedback /ja/docs/MDN/Getting_started /ja/docs/MDN/Contribute/Getting_started +/ja/docs/MDN/Guidelines/CSS_style_guide /ja/docs/conflicting/MDN/Contribute/Markdown_in_MDN /ja/docs/MDN/Kuma /ja/docs/MDN/Yari /ja/docs/MDN/Structures/API_references /ja/docs/orphaned/MDN/Structures/API_references /ja/docs/MDN/Structures/API_references/API_reference_sidebars /ja/docs/MDN/Contribute/Howto/Write_an_API_reference/Sidebars diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index fa823b71c6..98095b7958 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -6237,16 +6237,6 @@ "hamasaki" ] }, - "MDN/Guidelines/CSS_style_guide": { - "modified": "2020-09-30T15:30:25.061Z", - "contributors": [ - "chrisdavidmills", - "mfuji09", - "silverskyvicto", - "wbamberg", - "Uemmra3" - ] - }, "MDN/Guidelines/Code_guidelines": { "modified": "2020-09-30T15:30:24.568Z", "contributors": [ @@ -48529,6 +48519,16 @@ "silverskyvicto" ] }, + "conflicting/MDN/Contribute/Markdown_in_MDN": { + "modified": "2020-09-30T15:30:25.061Z", + "contributors": [ + "chrisdavidmills", + "mfuji09", + "silverskyvicto", + "wbamberg", + "Uemmra3" + ] + }, "conflicting/Web/API/Blob/size": { "modified": "2020-09-25T16:46:05.461Z", "contributors": [ diff --git a/files/ja/conflicting/mdn/contribute/markdown_in_mdn/index.html b/files/ja/conflicting/mdn/contribute/markdown_in_mdn/index.html new file mode 100644 index 0000000000..f888931063 --- /dev/null +++ b/files/ja/conflicting/mdn/contribute/markdown_in_mdn/index.html @@ -0,0 +1,862 @@ +--- +title: MDN のコンテンツで使われるクラスとスタイルのガイド +slug: conflicting/MDN/Contribute/Markdown_in_MDN +tags: + - Guide + - MDN + - MDN Meta + - ガイド + - ガイドライン + - クラス + - スタイル +translation_of: MDN/Guidelines/CSS_style_guide +original_slug: MDN/Guidelines/CSS_style_guide +--- +

{{MDNSidebar}}

+ +

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>
+
+ + + +

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

+ +

{{Glossary("HTML")}}

+ +
+

マクロの構文例

+ +

\{{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>
+
+ +

非表示コードサンプル

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

{{EmbedLiveSample("Hidden_Code_Sample", "100%", 150)}}

+
+ +

.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個くらいが最適です。

+ + + +
+

構文例

+ +
<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
+ +
Half
+
+ +
+
Third
+ +
Third
+ +
Third
+
+ +
+
Quarter
+ +
Quarter
+ +
Quarter
+ +
Quarter
+
+ +
+

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

+ + + +

構文例

+ +
<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つの等幅の列に表示されます。

+ +
+

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.

+ +

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つの等幅の列に表示されます。

+ +
+

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.

+ +

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 スタイルドロップダウンメニューの [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.

+ +

スタイルのメモ

+ + + +

構文例

+ +
<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 のほうが回答が得られやすいです。)
+
diff --git a/files/ja/mdn/guidelines/css_style_guide/index.html b/files/ja/mdn/guidelines/css_style_guide/index.html deleted file mode 100644 index 6aa8dff5e9..0000000000 --- a/files/ja/mdn/guidelines/css_style_guide/index.html +++ /dev/null @@ -1,861 +0,0 @@ ---- -title: MDN のコンテンツで使われるクラスとスタイルのガイド -slug: MDN/Guidelines/CSS_style_guide -tags: - - Guide - - MDN - - MDN Meta - - ガイド - - ガイドライン - - クラス - - スタイル -translation_of: MDN/Guidelines/CSS_style_guide ---- -

{{MDNSidebar}}

- -

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>
-
- - - -

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

- -

{{Glossary("HTML")}}

- -
-

マクロの構文例

- -

\{{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>
-
- -

非表示コードサンプル

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

{{EmbedLiveSample("Hidden_Code_Sample", "100%", 150)}}

-
- -

.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個くらいが最適です。

- - - -
-

構文例

- -
<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
- -
Half
-
- -
-
Third
- -
Third
- -
Third
-
- -
-
Quarter
- -
Quarter
- -
Quarter
- -
Quarter
-
- -
-

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

- - - -

構文例

- -
<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つの等幅の列に表示されます。

- -
-

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.

- -

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つの等幅の列に表示されます。

- -
-

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.

- -

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 スタイルドロップダウンメニューの [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.

- -

スタイルのメモ

- - - -

構文例

- -
<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 のほうが回答が得られやすいです。)
-
diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 5c69868bdc..bd9da62df6 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -1109,7 +1109,7 @@ /zh-CN/docs/Localization /zh-CN/docs/Glossary/Localization /zh-CN/docs/MDN/CSS /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties /zh-CN/docs/MDN/Contribute/Content /zh-CN/docs/MDN/Guidelines -/zh-CN/docs/MDN/Contribute/Content/CSS_style_guide /zh-CN/docs/MDN/Guidelines/CSS_style_guide +/zh-CN/docs/MDN/Contribute/Content/CSS_style_guide /zh-CN/docs/MDN/Contribute/Markdown_in_MDN /zh-CN/docs/MDN/Contribute/Content/Custom_macros /zh-CN/docs/MDN/Structures/Macros/Commonly-used_macros /zh-CN/docs/MDN/Contribute/Content/Rules_Of_MDN_Documenting /zh-CN/docs/MDN/Guidelines/Does_this_belong_on_MDN /zh-CN/docs/MDN/Contribute/Content/Style_guide /zh-CN/docs/MDN/Guidelines/Writing_style_guide @@ -1123,6 +1123,7 @@ /zh-CN/docs/MDN/Contribute/Structures/Macros /zh-CN/docs/MDN/Structures/Macros /zh-CN/docs/MDN/Feedback /zh-CN/docs/MDN/Contribute/Feedback /zh-CN/docs/MDN/Getting_started /zh-CN/docs/MDN/Contribute/Getting_started +/zh-CN/docs/MDN/Guidelines/CSS_style_guide /zh-CN/docs/MDN/Contribute/Markdown_in_MDN /zh-CN/docs/MDN/Guidelines/Rules_Of_MDN_Documenting /zh-CN/docs/MDN/Guidelines/Does_this_belong_on_MDN /zh-CN/docs/MDN/Guidelines/Style_guide /zh-CN/docs/MDN/Guidelines/Writing_style_guide /zh-CN/docs/MDN/JavaScript /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index 88c5dd775d..5aa50df6f9 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -5309,6 +5309,13 @@ "MartinJLiu" ] }, + "MDN/Contribute/Markdown_in_MDN": { + "modified": "2020-09-30T15:32:47.524Z", + "contributors": [ + "chrisdavidmills", + "shc0743" + ] + }, "MDN/Guidelines": { "modified": "2020-09-30T15:32:46.472Z", "contributors": [ @@ -5321,13 +5328,6 @@ "Sheppy" ] }, - "MDN/Guidelines/CSS_style_guide": { - "modified": "2020-09-30T15:32:47.524Z", - "contributors": [ - "chrisdavidmills", - "shc0743" - ] - }, "MDN/Guidelines/Does_this_belong_on_MDN": { "modified": "2020-09-30T15:32:46.957Z", "contributors": [ diff --git a/files/zh-cn/mdn/contribute/markdown_in_mdn/index.html b/files/zh-cn/mdn/contribute/markdown_in_mdn/index.html new file mode 100644 index 0000000000..fa4bb4ff6e --- /dev/null +++ b/files/zh-cn/mdn/contribute/markdown_in_mdn/index.html @@ -0,0 +1,842 @@ +--- +title: MDN样式指南 +slug: MDN/Contribute/Markdown_in_MDN +translation_of: MDN/Guidelines/CSS_style_guide +original_slug: MDN/Guidelines/CSS_style_guide +--- +

MDN有许多内置的全局样式，可以在设置文章样式和布局文章时使用，本文是可用类以及何时使用它们的指南。其中一些样式可以通过MDN编辑器的工具栏访问。在这种情况下，我们将在样式标题下包含短语“编辑工具栏”，以及相关工具栏按钮的图像。

+ +

请注意，这些样式的开发是为了涵盖在设置文章内容样式时出现的最常见情况，并且只要可能，您就应该尝试使用可用的类；与标准内容的外观相差太大不利于一致性和可读性。如果你觉得你的页面绝对需要某种特殊的定制样式，你应该首先在MDN讨论论坛中提出这个主题。

+ +
+

注意：如果要搜索MDN上使用给定类的位置，可以使用表单的URL执行此操作

+ +

https://developer.mozilla.org/en-US/search?locale=en-US&css_classnames=desired-css-class.   例如，要查找使用卡片网格布局的页面，请尝试URL/zh-CN/search?locale=*&css_classnames=card-grid.

+
+ +
+

重要提示: 本指南不完整。有关如何帮助我们完成此指南的信息，请参阅“更新此指南”。

+
+ +

内联样式

+ +

本节列出MDN上样式内容块可用的内联样式。

+ +

.button

+ +

MDN提供任何button样式。通常用于设置链接样式（出于安全原因，HTMLElement（“button”）元素从文章源代码中剥离。）

+ +

下载源代码

+ +
+

Example syntax

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

.external-icon and .ignore-external

+ +

指向MDN外部内容的链接会自动设置格式，以便将类外部图标添加到这些链接中，从而创建一个图标，指示它们离开站点。但是，在某些情况下，此图标是不需要的，并且会干扰其他样式。可以通过将忽略外部类添加到链接中来删除它。

+ +
+

注意: 大多数时候，我们不想用这些。外部图标将自动添加，以帮助防止用户在不知不觉中离开MDN。唯一通常可以接受的用例是指向特定于MDN的域或子域的链接，例如我们用于示例代码或其他服务的那些域或子域。

+
+ +

Link to MDN
+ Link away from MDN
+ Link away from MDN with ignore-external

+ +
+

Example syntax

+ +
<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>
+
+ + + +

这是一个类，用于设置词汇表链接的样式，以使它们在页面上不那么显眼。这个类是使用KumaScript宏添加的，如常用宏中所述，因此不会手动插入。

+ +
+

Example macro syntax

+ +

\{{Glossary("HTML")}}

+
+ +

.hidden

+ +

允许您隐藏wiki文章中的内容，但可以在编辑器中查看。通常，这用于向创建实时代码示例的脚本提供HTML、CSS和JavaScript，而只向读者显示相关语言。

+ +
+

Example syntax

+ +
<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>
+
+ +

Hidden code Sample

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

{{EmbedLiveSample("Hidden_Code_Sample", "100%", 150)}}

+
+ +

.seoSummary

+ +

这是一个对页面内容没有可见影响的类，但是，如果该类应用于元素（通常是span），KumaScript将使用元素的内容创建描述meta标记。它们提供了一个简短的描述，可用于搜索引擎和分享网站，如Facebook和Twitter。这个类可以通过MDN编辑器WYSIWYG样式下拉列表中的“SEO摘要”选项获得。

+ +

+ +
+
+

Note: If .seoSummary is not explicitly specified on a page, the first paragraph is automatically set as the SEO summary: there is no need to use this on most pages.

+
+ +

The final page display won't show any styling change, but in the editor the text that is set as the SEO summary will be marked with a dotted outline and a "SEO Summary" label", as shown below:

+ +

+ +

The below examples are taken from the Mozilla Add-ons page.

+ +

Example syntax

+ +
<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>
+ +

Example of the generated {{HTMLElement("meta")}} elements

+ +
<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.">
+ +

Example of how Facebook uses it

+ +

SEOSummary as it is used by Facebook

+
+ +
+

注意: 这与“.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.

+ +
+

Example syntax

+ +
<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张效果最好。

+ + + +
+

Example syntax

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

.column-container

+ +

 表示特定宽度列的容器。通常与其他类一起使用，如下所示。

+ +

My first equal width column.

+ +
+
+

My second equal width column.

+
+ +
+

My third equal width column.

+
+
+ +
+

Example syntax

+ +
<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 ... all the way up to .column-11

+ +

指定要由.column container包含的特定宽度的列，即列容器宽度（基于12列网格布局）的一定数量的二分之一。每对列之间都留有一个檐沟。

+ +
+
1/12
+ +
11/12
+
+ +
+
5/12
+ +
7/12
+
+ +
+
6/12
+ +
4/12
+ +
2/12
+
+ +
+

Example syntax

+ +
<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
+ +
Half
+
+ +
+
Third
+ +
Third
+ +
Third
+
+ +
+
Quarter
+ +
Quarter
+ +
Quarter
+ +
Quarter
+
+ +
+

These classes are equivalents of commonly-used numerical width classes, as follows:

+ + + +

Example syntax

+ +
<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>

+ +

可以包装在一个内容块周围以隐藏该内容，而不是显示一个“详细信息”链接，单击该链接可展开/折叠其中包含的内容。您可以在本文中看到它的用法。

+ +
+

Example syntax

+ +

This is an example syntax section for {{HTMLElement("details")}} that was hidden with {{HTMLElement("details")}}. Ooooooh, how meta.

+ +
<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

+ +

可以使用.example Good和.example bad类突出显示好的和坏的示例。它们通常用于表示示例代码段的<pre>块，但也可以用于其他块。

+ +
Good code example
+ +
<label for="test">Form label:</label>
+<input type="text" id="test">
+
+ +
Bad code example
+ +
<input type="text">
+
+ +
+

You should always use headings with these classes, as shown below — CSS is unable to add localized language to the page identifying whether they're good or bad so this is important for people who rely on screen readers, and people with different cultural backgrounds (green and red are not universally good and bad.)

+ +

Example syntax

+ +
<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 frameworks
+
Developed by Google Angular.js is one of the best known frameworks.
+
Ember.js is open source and community driven.
+
JavaScript Compilers
+
Babel lets you write ES2015 and compiles to more backwards compatible code.
+
+
+ +
+

Example syntax

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

.blockIndicator.note

+ +

将内容的一部分转换为便签框，这通常是一个有用的便签，与当前主题相切，但不直接适合信息流。

+ +
+

注意: 这就是我们通常在MDN文章中呈现注释的方式。

+
+ +
+

This is available via the "Note box" option in the MDN editor WYSIWYG styles dropdown.

+ +

Example syntax

+ +
<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

+ +

将内容拉到一边。

+ +

有些内容会偏离主题。

+ +

有些内容不太靠边站。

+ +
+

Example Syntax

+ +
<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>
+ +

Other uses

+ +
+
Combined with the .moreinfo class.
+
+ +

Some content that does not go off to the side.

+ +

Some content that does not go off to the side.

+ +
<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}}

+ +

为页面创建摘要框，在视觉上显示为带有额外填充的灰色框-应用于文章的开头段落（但不用于参考文章），以使其在页面上具有额外的重要性。

+ +
+

重要提示: 这与anch“.seoSummary”类不同，该类建立文本部分，搜索引擎使用该文本部分在结果列表中汇总页面，MDN使用该文本部分创建页面标题及其摘要的工具提示和菜单。这门课完全是一种视觉效果。如果希望同时使用这两个类，可以为页面建立可见和有效的摘要。

+
+ +

这是本文的开头。下面我们将讨论 puppies, giraffes, 和 dugongs.

+ +
+

This is available via the "Article Summary" option in the MDN editor WYSIWYG styles dropdown.

+ +

+ +

Example syntax

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

.topicpage-table

+ +

创建用粗灰色边框分隔的两列。常用于登录页。这通常最适合嵌套（“div”）。注意，这两个子元素必须被赋予.section类。

+ +
+
Column 1
+ +
Column 2
+
+ +
+

Example syntax

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

.threecolumns

+ +
+

使内容块显示在三个等宽列中。

+ +

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.

+ +

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.

+
+ +
+

This is available via the "Three columns" option in the MDN editor WYSIWYG styles dropdown.

+ +

+ +
+

Note: If you want to apply this to a list, then you should apply it to an outer wrapper {{HTMLElement("div")}} — if not, it gets applied to the {{HTMLElement("ul")}} element, which causes the list bullets to not display in Chrome.

+
+ +

Example syntax

+ +
<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

+ +

使内容块显示在两个等宽列中。 

+ +
+

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.

+ +

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.

+
+ +
+

This is available via the "Two columns" option in the MDN editor WYSIWYG styles dropdown.

+ +

+ +
+

Note: If you want to apply this to a list, then you should apply it to an outer wrapper {{HTMLElement("div")}} — if not, it gets applied to the {{HTMLElement("ul")}} element, which causes the list bullets to not display in Chrome.

+
+ +

Example syntax

+ +
<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

+ +

将内容的一部分转换为警告框，警告框通常传达读者需要非常小心的一个重要事实（例如，他们需要做一些事情，或避免一些事情来避免严重问题）

+ +
+

Warning: Here be dragons!

+
+ +
+

This is available via the "Warning box" option in the MDN editor WYSIWYG styles dropdown.

+ +

+ +

Example syntax

+ +
<div class="blockIndicator warning">
+  <p><strong>Warning</strong>:Here be dragons!</p>
+</div>
+
+ +

表格样式

+ +

MDN为HTML“table”元素提供了特定的样式。这一节包括这些。

+ +

没有添加类：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Favorite teas, December 2015
VarietyCaffeineSteeping TimeWater Temperature
BlackHigh2-3 minutes99 °C
GreenLow to Medium1-2 minutes75 to 80 °C
Caffeine free
HerbalNone3-6 minutes99 °C
+ +

.standard-table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Favorite teas, December 2015
VarietyCaffeineSteeping TimeWater Temperature
BlackHigh2-3 minutes99 °C
GreenLow to Medium1-2 minutes75 to 80 °C
Caffeine free
HerbalNone3-6 minutes99 °C
+ +
+

A standard table can be created using the Table button in the MDN editor WYSIWYG toolbar. Pressing this brings up the Table Properties dialog box, which contains a number of functions. Generally you'll just want to use it to set the number of rows and columns, which cells are table headers ({{HTMLElement("th")}}), and a visible {{HTMLElement("caption")}} and {{HTMLAttrxRef("summary", "table")}} attribute to provide more information for screenreaders, if desired.

+ +

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.

+ +

Style notes

+ + + +

Example syntax

+ +
<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">Variety</th>
+   <th scope="col">Caffeine</th>
+   <th scope="col">Steeping Time</th>
+   <th scope="col">Water Temperature</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Black</th>
+   <td>High</td>
+   <td>2-3 minutes</td>
+   <td>99&nbsp;°C</td>
+  </tr>
+  <tr>
+   <th scope="row">Green</th>
+   <td>Low to Medium</td>
+   <td>1-2 minutes</td>
+   <td>75 to 80&nbsp;°C</td>
+  </tr>
+  <tr>
+   <th scope="row">Herbal</th>
+   <td>None</td>
+   <td>3-6 minutes</td>
+   <td>99&nbsp;°C</td>
+  </tr>
+ </tbody>
+</table>
+
+ +

.standard-table.nostripe

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Favorite teas, December 2015
VarietyCaffeineSteeping TimeWater Temperature
BlackHigh2-3 minutes99 °C
GreenLow to Medium1-2 minutes75 to 80 °C
Caffeine free
HerbalNone3-6 minutes99 °C
+ +

.standard-table.fullwidth

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Favorite teas, December 2015
VarietyCaffeineSteeping TimeWater Temperature
BlackHigh2-3 minutes99 °C
GreenLow to Medium1-2 minutes75 to 80 °C
Caffeine free
HerbalNone3-6 minutes99 °C
+ +

.fullwidth-table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Favorite teas, December 2015
VarietyCaffeineSteeping TimeWater Temperature
BlackHigh2-3 minutes99 °C
GreenLow to Medium1-2 minutes75 to 80 °C
Caffeine free
HerbalNone3-6 minutes99 °C
+ +

更新本指南

+ +

本指南不完整，正在逐步更新。如果您想帮助更新或添加到本指南中，请随时更新或添加！如果您有问题或想讨论并提出改进本文的想法，或者对我们如何改进MDN Web文档的样式或布局有建议，您可以有以下几种选择：

+ +

如果你想帮助完成它，或者想报告一个丢失或错误的文档样式，请联系Chris Mills（以chrisdavidmills的身份发言，在Mozil Mozilla IRC as chrismills)

+ +
+
开始讨论MDN Web文档讨论论坛 forum
+
如果您有什么想法想与MDN Web Docs社区或工作人员讨论，请随时在Mozilla讨论站点的MDN Web Docs论坛上开始一个主题。
+
在GitHub中提交您的建议
+
如果您想在我们的官方问题跟踪系统中记录您的建议，我们鼓励您这样做。先用上面的一个频道讨论是个好主意，但这不是必需的。
+
在IRC频道提问
+
我们的写作人员和贡献者社区使用 Mozilla's IRC 服务器 进行讨论和分享想法。欢迎您加入我们，提出您的问题或建议！（请注意，IRC的参与度很低，可能会在2020年停办；对话是获得答案的最佳选择。）
+
diff --git a/files/zh-cn/mdn/guidelines/css_style_guide/index.html b/files/zh-cn/mdn/guidelines/css_style_guide/index.html deleted file mode 100644 index 4784a5682d..0000000000 --- a/files/zh-cn/mdn/guidelines/css_style_guide/index.html +++ /dev/null @@ -1,841 +0,0 @@ ---- -title: MDN样式指南 -slug: MDN/Guidelines/CSS_style_guide -translation_of: MDN/Guidelines/CSS_style_guide ---- -

MDN有许多内置的全局样式，可以在设置文章样式和布局文章时使用，本文是可用类以及何时使用它们的指南。其中一些样式可以通过MDN编辑器的工具栏访问。在这种情况下，我们将在样式标题下包含短语“编辑工具栏”，以及相关工具栏按钮的图像。

- -

请注意，这些样式的开发是为了涵盖在设置文章内容样式时出现的最常见情况，并且只要可能，您就应该尝试使用可用的类；与标准内容的外观相差太大不利于一致性和可读性。如果你觉得你的页面绝对需要某种特殊的定制样式，你应该首先在MDN讨论论坛中提出这个主题。

- -
-

注意：如果要搜索MDN上使用给定类的位置，可以使用表单的URL执行此操作

- -

https://developer.mozilla.org/en-US/search?locale=en-US&css_classnames=desired-css-class.   例如，要查找使用卡片网格布局的页面，请尝试URL/zh-CN/search?locale=*&css_classnames=card-grid.

-
- -
-

重要提示: 本指南不完整。有关如何帮助我们完成此指南的信息，请参阅“更新此指南”。

-
- -

内联样式

- -

本节列出MDN上样式内容块可用的内联样式。

- -

.button

- -

MDN提供任何button样式。通常用于设置链接样式（出于安全原因，HTMLElement（“button”）元素从文章源代码中剥离。）

- -

下载源代码

- -
-

Example syntax

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

.external-icon and .ignore-external

- -

指向MDN外部内容的链接会自动设置格式，以便将类外部图标添加到这些链接中，从而创建一个图标，指示它们离开站点。但是，在某些情况下，此图标是不需要的，并且会干扰其他样式。可以通过将忽略外部类添加到链接中来删除它。

- -
-

注意: 大多数时候，我们不想用这些。外部图标将自动添加，以帮助防止用户在不知不觉中离开MDN。唯一通常可以接受的用例是指向特定于MDN的域或子域的链接，例如我们用于示例代码或其他服务的那些域或子域。

-
- -

Link to MDN
- Link away from MDN
- Link away from MDN with ignore-external

- -
-

Example syntax

- -
<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>
-
- - - -

这是一个类，用于设置词汇表链接的样式，以使它们在页面上不那么显眼。这个类是使用KumaScript宏添加的，如常用宏中所述，因此不会手动插入。

- -
-

Example macro syntax

- -

\{{Glossary("HTML")}}

-
- -

.hidden

- -

允许您隐藏wiki文章中的内容，但可以在编辑器中查看。通常，这用于向创建实时代码示例的脚本提供HTML、CSS和JavaScript，而只向读者显示相关语言。

- -
-

Example syntax

- -
<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>
-
- -

Hidden code Sample

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

{{EmbedLiveSample("Hidden_Code_Sample", "100%", 150)}}

-
- -

.seoSummary

- -

这是一个对页面内容没有可见影响的类，但是，如果该类应用于元素（通常是span），KumaScript将使用元素的内容创建描述meta标记。它们提供了一个简短的描述，可用于搜索引擎和分享网站，如Facebook和Twitter。这个类可以通过MDN编辑器WYSIWYG样式下拉列表中的“SEO摘要”选项获得。

- -

- -
-
-

Note: If .seoSummary is not explicitly specified on a page, the first paragraph is automatically set as the SEO summary: there is no need to use this on most pages.

-
- -

The final page display won't show any styling change, but in the editor the text that is set as the SEO summary will be marked with a dotted outline and a "SEO Summary" label", as shown below:

- -

- -

The below examples are taken from the Mozilla Add-ons page.

- -

Example syntax

- -
<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>
- -

Example of the generated {{HTMLElement("meta")}} elements

- -
<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.">
- -

Example of how Facebook uses it

- -

SEOSummary as it is used by Facebook

-
- -
-

注意: 这与“.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.

- -
-

Example syntax

- -
<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张效果最好。

- - - -
-

Example syntax

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

.column-container

- -

 表示特定宽度列的容器。通常与其他类一起使用，如下所示。

- -

My first equal width column.

- -
-
-

My second equal width column.

-
- -
-

My third equal width column.

-
-
- -
-

Example syntax

- -
<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 ... all the way up to .column-11

- -

指定要由.column container包含的特定宽度的列，即列容器宽度（基于12列网格布局）的一定数量的二分之一。每对列之间都留有一个檐沟。

- -
-
1/12
- -
11/12
-
- -
-
5/12
- -
7/12
-
- -
-
6/12
- -
4/12
- -
2/12
-
- -
-

Example syntax

- -
<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
- -
Half
-
- -
-
Third
- -
Third
- -
Third
-
- -
-
Quarter
- -
Quarter
- -
Quarter
- -
Quarter
-
- -
-

These classes are equivalents of commonly-used numerical width classes, as follows:

- - - -

Example syntax

- -
<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>

- -

可以包装在一个内容块周围以隐藏该内容，而不是显示一个“详细信息”链接，单击该链接可展开/折叠其中包含的内容。您可以在本文中看到它的用法。

- -
-

Example syntax

- -

This is an example syntax section for {{HTMLElement("details")}} that was hidden with {{HTMLElement("details")}}. Ooooooh, how meta.

- -
<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

- -

可以使用.example Good和.example bad类突出显示好的和坏的示例。它们通常用于表示示例代码段的<pre>块，但也可以用于其他块。

- -
Good code example
- -
<label for="test">Form label:</label>
-<input type="text" id="test">
-
- -
Bad code example
- -
<input type="text">
-
- -
-

You should always use headings with these classes, as shown below — CSS is unable to add localized language to the page identifying whether they're good or bad so this is important for people who rely on screen readers, and people with different cultural backgrounds (green and red are not universally good and bad.)

- -

Example syntax

- -
<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 frameworks
-
Developed by Google Angular.js is one of the best known frameworks.
-
Ember.js is open source and community driven.
-
JavaScript Compilers
-
Babel lets you write ES2015 and compiles to more backwards compatible code.
-
-
- -
-

Example syntax

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

.blockIndicator.note

- -

将内容的一部分转换为便签框，这通常是一个有用的便签，与当前主题相切，但不直接适合信息流。

- -
-

注意: 这就是我们通常在MDN文章中呈现注释的方式。

-
- -
-

This is available via the "Note box" option in the MDN editor WYSIWYG styles dropdown.

- -

Example syntax

- -
<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

- -

将内容拉到一边。

- -

有些内容会偏离主题。

- -

有些内容不太靠边站。

- -
-

Example Syntax

- -
<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>
- -

Other uses

- -
-
Combined with the .moreinfo class.
-
- -

Some content that does not go off to the side.

- -

Some content that does not go off to the side.

- -
<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}}

- -

为页面创建摘要框，在视觉上显示为带有额外填充的灰色框-应用于文章的开头段落（但不用于参考文章），以使其在页面上具有额外的重要性。

- -
-

重要提示: 这与anch“.seoSummary”类不同，该类建立文本部分，搜索引擎使用该文本部分在结果列表中汇总页面，MDN使用该文本部分创建页面标题及其摘要的工具提示和菜单。这门课完全是一种视觉效果。如果希望同时使用这两个类，可以为页面建立可见和有效的摘要。

-
- -

这是本文的开头。下面我们将讨论 puppies, giraffes, 和 dugongs.

- -
-

This is available via the "Article Summary" option in the MDN editor WYSIWYG styles dropdown.

- -

- -

Example syntax

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

.topicpage-table

- -

创建用粗灰色边框分隔的两列。常用于登录页。这通常最适合嵌套（“div”）。注意，这两个子元素必须被赋予.section类。

- -
-
Column 1
- -
Column 2
-
- -
-

Example syntax

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

.threecolumns

- -
-

使内容块显示在三个等宽列中。

- -

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.

- -

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.

-
- -
-

This is available via the "Three columns" option in the MDN editor WYSIWYG styles dropdown.

- -

- -
-

Note: If you want to apply this to a list, then you should apply it to an outer wrapper {{HTMLElement("div")}} — if not, it gets applied to the {{HTMLElement("ul")}} element, which causes the list bullets to not display in Chrome.

-
- -

Example syntax

- -
<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

- -

使内容块显示在两个等宽列中。 

- -
-

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.

- -

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.

-
- -
-

This is available via the "Two columns" option in the MDN editor WYSIWYG styles dropdown.

- -

- -
-

Note: If you want to apply this to a list, then you should apply it to an outer wrapper {{HTMLElement("div")}} — if not, it gets applied to the {{HTMLElement("ul")}} element, which causes the list bullets to not display in Chrome.

-
- -

Example syntax

- -
<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

- -

将内容的一部分转换为警告框，警告框通常传达读者需要非常小心的一个重要事实（例如，他们需要做一些事情，或避免一些事情来避免严重问题）

- -
-

Warning: Here be dragons!

-
- -
-

This is available via the "Warning box" option in the MDN editor WYSIWYG styles dropdown.

- -

- -

Example syntax

- -
<div class="blockIndicator warning">
-  <p><strong>Warning</strong>:Here be dragons!</p>
-</div>
-
- -

表格样式

- -

MDN为HTML“table”元素提供了特定的样式。这一节包括这些。

- -

没有添加类：

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Favorite teas, December 2015
VarietyCaffeineSteeping TimeWater Temperature
BlackHigh2-3 minutes99 °C
GreenLow to Medium1-2 minutes75 to 80 °C
Caffeine free
HerbalNone3-6 minutes99 °C
- -

.standard-table

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Favorite teas, December 2015
VarietyCaffeineSteeping TimeWater Temperature
BlackHigh2-3 minutes99 °C
GreenLow to Medium1-2 minutes75 to 80 °C
Caffeine free
HerbalNone3-6 minutes99 °C
- -
-

A standard table can be created using the Table button in the MDN editor WYSIWYG toolbar. Pressing this brings up the Table Properties dialog box, which contains a number of functions. Generally you'll just want to use it to set the number of rows and columns, which cells are table headers ({{HTMLElement("th")}}), and a visible {{HTMLElement("caption")}} and {{HTMLAttrxRef("summary", "table")}} attribute to provide more information for screenreaders, if desired.

- -

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.

- -

Style notes

- - - -

Example syntax

- -
<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">Variety</th>
-   <th scope="col">Caffeine</th>
-   <th scope="col">Steeping Time</th>
-   <th scope="col">Water Temperature</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th scope="row">Black</th>
-   <td>High</td>
-   <td>2-3 minutes</td>
-   <td>99&nbsp;°C</td>
-  </tr>
-  <tr>
-   <th scope="row">Green</th>
-   <td>Low to Medium</td>
-   <td>1-2 minutes</td>
-   <td>75 to 80&nbsp;°C</td>
-  </tr>
-  <tr>
-   <th scope="row">Herbal</th>
-   <td>None</td>
-   <td>3-6 minutes</td>
-   <td>99&nbsp;°C</td>
-  </tr>
- </tbody>
-</table>
-
- -

.standard-table.nostripe

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Favorite teas, December 2015
VarietyCaffeineSteeping TimeWater Temperature
BlackHigh2-3 minutes99 °C
GreenLow to Medium1-2 minutes75 to 80 °C
Caffeine free
HerbalNone3-6 minutes99 °C
- -

.standard-table.fullwidth

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Favorite teas, December 2015
VarietyCaffeineSteeping TimeWater Temperature
BlackHigh2-3 minutes99 °C
GreenLow to Medium1-2 minutes75 to 80 °C
Caffeine free
HerbalNone3-6 minutes99 °C
- -

.fullwidth-table

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Favorite teas, December 2015
VarietyCaffeineSteeping TimeWater Temperature
BlackHigh2-3 minutes99 °C
GreenLow to Medium1-2 minutes75 to 80 °C
Caffeine free
HerbalNone3-6 minutes99 °C
- -

更新本指南

- -

本指南不完整，正在逐步更新。如果您想帮助更新或添加到本指南中，请随时更新或添加！如果您有问题或想讨论并提出改进本文的想法，或者对我们如何改进MDN Web文档的样式或布局有建议，您可以有以下几种选择：

- -

如果你想帮助完成它，或者想报告一个丢失或错误的文档样式，请联系Chris Mills（以chrisdavidmills的身份发言，在Mozil Mozilla IRC as chrismills)

- -
-
开始讨论MDN Web文档讨论论坛 forum
-
如果您有什么想法想与MDN Web Docs社区或工作人员讨论，请随时在Mozilla讨论站点的MDN Web Docs论坛上开始一个主题。
-
在GitHub中提交您的建议
-
如果您想在我们的官方问题跟踪系统中记录您的建议，我们鼓励您这样做。先用上面的一个频道讨论是个好主意，但这不是必需的。
-
在IRC频道提问
-
我们的写作人员和贡献者社区使用 Mozilla's IRC 服务器 进行讨论和分享想法。欢迎您加入我们，提出您的问题或建议！（请注意，IRC的参与度很低，可能会在2020年停办；对话是获得答案的最佳选择。）
-
-- cgit v1.2.3-54-g00ecf