path: root/files/ja/learn/css/building_blocks/organizing/index.html

---
title: CSS の整理
slug: Learn/CSS/Building_blocks/Organizing
tags:
  - Beginner
  - CSS
  - CodingScripting
  - Learn
  - comments
  - formatting
  - methodologies
  - organizing
  - post-processor
  - pre-processor
  - styleguide
translation_of: Learn/CSS/Building_blocks/Organizing
---
<div>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div>

<p>スタイルシートやプロジェクトが大きい状態で作業しはじめると、巨大な CSS ファイルを維持するのが難しいことがわかります。この記事では、CSS を書いていくのと保守していくのをやりやすくするためのベストプラクティスと、保守性を向上させるための解決策の一部を紹介します。</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前提条件:</th>
   <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td>
  </tr>
  <tr>
   <th scope="row">目的:</th>
   <td>スタイルシートを整理するためのヒントとベストプラクティスを学び、 CSS の整理およびチーム作業を手助けするいくつかの命名規則とツールについて調べる。</td>
  </tr>
 </tbody>
</table>

<h2 id="Tips_to_keep_your_CSS_tidy" name="Tips_to_keep_your_CSS_tidy">CSS を整理するためのヒント</h2>

<p>スタイルシートを整理して整頓するための一般的な提案を次に示します。</p>

<h3 id="Does_your_project_have_a_coding_style_guide" name="Does_your_project_have_a_coding_style_guide">プロジェクトのコーディング規約があるか？</h3>

<p>既存のプロジェクトでチームと作業している場合、最初に確認することは、プロジェクトに CSS の既存のスタイルガイドがあるかどうかです。チームスタイルガイドは常に自分の個人的な好みに勝つ必要があります。多くの場合、正しい方法や間違った方法はありませんが、一貫性が重要です。</p>

<p>例えば、<a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS">MDN コードの例の CSS ガイドライン</a>を見てみましょう。</p>

<h3 id="Keep_it_consistent" name="Keep_it_consistent">一貫性を保つ</h3>

<p>プロジェクトのルールを設定したり、単独で作業している場合、最も重要なことは、一貫性を保つことです。一貫性は、クラスに同じ命名規則を使用する、色を説明する1つの方法を選択する、一貫したフォーマットを維持するなど、あらゆる方法で適用できます（例えば、タブまたはスペースのどちらを使用してコードをインデントしますか。スペースの場合、いくつのスペース？）</p>

<p>常に従う一連のルールがあると、CSS を作成するときに必要な精神的なオーバーヘッドの量が減ります。</p>

<h3 id="Formatting_readable_CSS" name="Formatting_readable_CSS">CSS を読みやすくする</h3>

<p>CSS がフォーマットされているのを確認するには、いくつかの方法があります。一部の開発者は、次のようにすべてのルールを1行に配置します。</p>

<pre class="brush: css notranslate">.box { background-color: #567895; }
h2 { background-color: black; color: white; }</pre>

<p>他の開発者はすべてを新しい行に分割することを好みます：</p>

<pre class="brush: css notranslate">.box {
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}</pre>

<p>CSSはどちらを使用してもかまいません。個人的には、各プロパティと値のペアを新しい行に置く方が読みやすくなっています。</p>

<h3 id="Comment_your_CSS" name="Comment_your_CSS">CSS にコメントを書いておく</h3>

<p>あなたの CSS にコメントを追加することは、将来の開発者があなたの CSS ファイルを使って作業する際の助けになるだけでなく、休暇の後にプロジェクトに戻ってきたときにも役立ちます。</p>

<pre class="brush: css notranslate">/* これは CSS コメントです
複数行に分割できます。 */</pre>

<p>ヒントとしては、スタイルシートの論理セクション間にコメントブロックを追加して、スキャンするときにさまざまなセクションをすばやく見つけられるようにしたり、CSS のその部分にジャンプするために検索するものを提供したりすることもできます。コードに表示されない文字列を使用する場合は、検索することでセクションからセクションにジャンプできます。以下では <code>||</code> を使用しています。</p>

<pre class="brush: css notranslate">/* || 一般的なスタイル */

...

/* || タイポグラフィ*/

...

/* || ヘッダーとメインナビゲーション */

...

</pre>

<p>あなたのCSSにある全てのことにコメントをつける必要はありません。コメントすべきなのは、理由があって特定の決定をしたものです。</p>

<p>古いブラウザの非互換性を回避するために、CSS プロパティを特定の方法で使用した可能性があります。例えば：</p>

<pre class="brush: css notranslate">.box {
  background-color: red; /* グラデーションをサポートしない古いブラウザのフォールバック */
  background-image: linear-gradient(to right, #ff0000, #aa0000);
}
</pre>

<p>おそらく、何かを達成するためにチュートリアルに従ったのではないかと思いますが、CSSが少し自明ではなくなっているのではないかと思います。その場合は、コメントにチュートリアルの URL を追加することができます。1年後かそこらでこのプロジェクトに戻ってきたときに自分自身に感謝するだろうし、漠然とそのことについての素晴らしいチュートリアルがあったことを思い出すことができますが、それはどこにあるのでしょうか？</p>

<h3 id="Create_logical_sections_in_your_stylesheet" name="Create_logical_sections_in_your_stylesheet">スタイルシートを合理的に分割する</h3>

<p>スタイルシートで最初にすべての一般的なスタイルを設定することをお勧めします。これは、その要素で特別なことをしない限り、通常適用されるすべてのスタイルを意味します。通常、次のルールを設定します。</p>

<ul>
 <li><code>body</code></li>
 <li><code>p</code></li>
 <li><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code></li>
 <li><code>ul</code> と <code>ol</code></li>
 <li><code>table</code> プロパティ</li>
 <li>リンク</li>
</ul>

<p>スタイルシートのこのセクションでは、サイトのタイプにデフォルトのスタイルを提供したり、データテーブルとリストのデフォルトスタイルを設定したりします。</p>

<pre class="brush: css notranslate">/* || 一般的なスタイル */

body { ... }

h1, h2, h3, h4 { ... }

ul { ... }

blockquote { ... }
</pre>

<p>このセクションの後で、いくつかのユーティリティクラスを定義できます。例えば、フレックスアイテムとして、または他の方法で表示するリストのデフォルトのリストスタイルを削除するクラス。多くの異なる要素に適用したいことがわかっていることがいくつかある場合、それらはこのセクションにあります。</p>

<pre class="brush: css notranslate">/* || ユーティリティ */

.nobullets {
  list-style: none;
  margin: 0;
  padding: 0;
}

...

</pre>

<p>次に、サイト全体で使用されるすべてのものを追加できます。それは、基本的なページレイアウト、ヘッダー、ナビゲーションスタイルなどのようなものかもしれません。</p>

<pre class="brush: css notranslate">/*  || サイトワイド */

.main-nav { ... }

.logo { ... }
</pre>

<p>最後に、コンテキスト、ページ、またはそれらが使用されているコンポーネントで分類された特定のものの CSS を含めます。</p>

<pre class="brush: css notranslate">/* || 店のページ */

.product-listing { ... }

.product-box { ... }
</pre>

<p>このように物事を順番に並べることで、少なくともスタイルシートのどの部分に変更したいものがあるのかを知ることができます。</p>

<h3 id="Avoid_overly-specific_selectors" name="Avoid_overly-specific_selectors">過剰なセレクターを避ける</h3>

<p>非常に特殊なセレクタを作成した場合、別の要素に同じルールを適用するために CSS の塊を複製する必要があることに気づくことがよくあります。例えば、以下のセレクタのようなものがあるかもしれませんが、これは <code>main</code> のクラスを持つ <code>&lt;article&gt;</code> の中の <code>box</code> のクラスを持つ <code>&lt;p&gt;</code> にルールを適用します。</p>

<pre class="brush: css notranslate">article.main p.box {
  border: 1px solid #ccc;
}</pre>

<p>同じルールを <code>main</code> 以外のものや <code>&lt;p&gt;</code> 以外のものにも適用したい場合は、これらのルールに別のセレクタを追加するか、まったく新しいルールセットを作成しなければなりません。その代わりに、<code>box</code> というクラスを作成して、どこでも適用することができます。</p>

<pre class="brush: css notranslate">.box {
  border: 1px solid #ccc;
}</pre>

<p>もっと具体的にすることが理にかなっている場合もありますが、これは通常の習慣ではなく、一般的に例外です。</p>

<h3 id="Break_large_stylesheets_into_multiple_smaller_ones" name="Break_large_stylesheets_into_multiple_smaller_ones">スタイルシートが大きくなってきたら分割する</h3>

<p>特に、サイトの異なる部分に対して非常に異なるスタイルを持っている場合には、すべてのグローバルルールを含むスタイルシートと、それらのセクションに必要な特定のルールを含む小さなスタイルシートを持ちたいと思うかもしれません。一つのページから複数のスタイルシートにリンクすることができ、カスケードの通常のルールが適用され、後からリンクされたスタイルシートのルールは前からリンクされたスタイルシートのルールの後から適用されます。</p>

<p>例えば、サイトの一部としてオンラインストアがあり、ストアに必要な商品リストやフォームのスタイリングにのみ多くの CSS が使用されているとします。それらを別のスタイルシートにして、ストアページでのみリンクさせるのは理にかなっていると思います。</p>

<p><span>これにより、CSS の整理が容易になります。また、複数のユーザーが CSS で作業している場合、2人が同時に同じスタイルシートで作業する必要がなくなり、ソース管理で競合が発生する可能性も少なくなります。 </span></p>

<h2 id="Other_tools_that_can_help" name="Other_tools_that_can_help">その他の役立つツール</h2>

<p>CSS 自体には内蔵された整理の方法があまりないので、CSS の書き方に一貫性やルールを作る作業をする必要があります。また、ウェブ・コミュニティでは、大規模な CSS プロジェクトを管理するのに役立つ様々なツールやアプローチが開発されています。これらはあなたが調べてみると役に立つかもしれませんし、他の人と一緒に作業をしているときに出くわす可能性が高いので、これらのいくつかについての簡単なガイドを載せておきます。</p>

<h3 id="CSS_methodologies" name="CSS_methodologies">CSS の方法論</h3>

<p>CSS を作成するための独自のルールを考え出す必要はなく、コミュニティーによってすでに設計され、多くのプロジェクトでテストされているアプローチの1つを採用することでメリットが得られる場合があります。これらの方法論は基本的に CSS のコーディングガイドであり、CSS の作成と管理に非常に構造化されたアプローチを採用しています。通常、これらの方法論では、すべてのセレクタを作成してそのプロジェクトのカスタムルールセットに最適化した場合よりも、CSS の使用が冗長になる傾向があります。</p>

<p>しかし、1つを採用することで多くの構造を得ることができますし、これらのシステムの多くは非常に広く使われているので、他の開発者はあなたが使用しているアプローチを理解し、自分の個人的な方法論を一から作り上げるよりも、同じように CSS を書くことができる可能性が高くなります。</p>

<h4 id="OOCSS" name="OOCSS">OOCSS</h4>

<p>あなたが遭遇するであろうアプローチのほとんどは、<a href="https://github.com/stubbornella/oocss/wiki">Nicole Sullivan の業績</a>によって人気を博した Object Oriented CSS (OOCSS) のコンセプトに起因しています。OOCSS の基本的な考え方は、CSS を再利用可能なオブジェクトに分割し、サイト上の必要な場所で使用できるようにすることです。OOCSS の標準的な例は、<a href="/ja/docs/Web/CSS/Layout_cookbook/Media_objects">The Media Object</a> として記述されているパターンです。これは、片面に固定サイズの画像や動画などの要素を配置し、もう片面には柔軟なコンテンツを配置したパターンです。コメントやリスティングなどのウェブサイトでよく見かけるパターンです。</p>

<p>OOCSS の手法を採用していない場合は、このパターンが使用されるさまざまな場所に対してカスタムCSSを作成することができます。たとえば、コンポーネント・パーツに対して一連のルールを持つ <code>comment</code> というクラスを作成し、次に、いくつかの小さな違いを除いて、<code>comment</code> クラスとほとんど同じルールを持つ <code>list-item</code> というクラスを作成します。これら2つのコンポーネントの違いは、list-item には下罫線があり、comment 内のイメージには罫線がありますが、list-item のイメージにはないことです。</p>

<pre class="brush: css notranslate">.comment {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.comment img {
  border: 1px solid grey;
}

.comment .content {
  font-size: .8rem;
}

.list-item {
  display: grid;
  grid-template-columns: 1fr 3fr;
  border-bottom: 1px solid grey;
}

.list-item .content {
  font-size: .8rem;
}</pre>

<p>OOCSS では、<code>media</code> と呼ばれる1つのパターンを作成して、両方のパターンに共通の CSSをすべて持つようにします。一般的には media オブジェクトの形状を表す基底クラスです。そして、それらの小さな違いに対応するために追加のクラスを追加して、特定の方法でスタイリングを拡張します。</p>

<pre class="brush: css notranslate">.media {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.media .content {
  font-size: .8rem;
}

.comment img {
  border: 1px solid grey;
}

 .list-item {
  border-bottom: 1px solid grey;
} </pre>

<p>HTMLでは、コメントに <code>media</code> と <code>comment</code> クラスの両方を適用する必要があります。</p>

<pre class="brush: html notranslate">&lt;div class="media comment"&gt;
  &lt;img /&gt;
  &lt;div class="content"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

<p>リストアイテムは次のように <code>media</code> と <code>list-item</code> が適用されます。</p>

<pre class="brush: html notranslate">&lt;ul&gt;
  &lt;li class="media list-item"&gt;
    &lt;img /&gt;
   &lt;div class="content"&gt;&lt;/div&gt;
  &lt;/li&gt;
&lt;/ul&gt;</pre>

<p>Nicole Sullivan がこのアプローチを説明し、促進するために行った作業は、今日ではOOCSS のアプローチに厳密に従っていない人でも、一般的にはこの方法で CSS を再利用することを意味します。これは、一般的に物事に取り組むための良い方法としての理解につながりました。</p>

<h4 id="BEM" name="BEM">BEM</h4>

<p>BEM は、Block Element Modifier の略です。BEM では、ブロックはボタン、メニュー、ロゴなどのスタンドアロンエンティティです。要素とは、リストアイテムやタイトルのようなものであり、それが入っているブロックに関連付けられています。修飾子は、スタイルや動作を変更するブロックまたは要素のフラグです。CSS クラスではダッシュとアンダースコアが多用されているため、BEM を使用するコードを認識できます。例えば、<a href="http://getbem.com/naming/">BEMの命名規則</a>に関するページから、この HTML に適用されるクラスを見てみましょう。</p>

<pre class="brush: html notranslate">&lt;form class="form form--theme-xmas form--simple"&gt;
  &lt;input class="form__input" type="text" /&gt;
  &lt;input
    class="form__submit form__submit--disabled"
    type="submit" /&gt;
&lt;/form&gt;</pre>

<p>追加のクラスは、OOCSS の例で使用されているクラスに似ていますが、BEM の厳密な命名規則を使用しています。</p>

<p>BEM は大規模な Web プロジェクトで広く使用されており、多くの人がこの方法で CSS を作成しています。チュートリアルでさえ、CSS がこのように構造化されている理由について触れずに、BEM 構文を使用する例に出くわす可能性があります。</p>

<p>システムの詳細については、CSS トリックの <a href="https://css-tricks.com/bem-101/">BEM 101</a> を参照してください。</p>

<h4 id="Other_common_systems" name="Other_common_systems">その他</h4>

<p>これらのシステムは多数使用されています。その他の一般的なアプローチには、Jonathan Snook によって作成された <a href="http://smacss.com/">CSSのスケーラブルでモジュール式のアーキテクチャ（SMACSS）</a>、Harry Roberts の <a href="https://itcss.io/">ITCSS</a>、および Yahoo! によって最初に作成された<a href="https://acss.io/"> Atomic CSS（ACSS）</a>があります。これらのアプローチのいずれかを使用するプロジェクトに遭遇した場合の利点は、同じスタイルでコーディングする方法を理解するのに役立つ多くの記事とガイドを検索して見つけることができることです。</p>

<p>このようなシステムを使用することの欠点は、特に小規模なプロジェクトの場合、過度に複雑に見える可能性があることです。</p>

<h3 id="Build_systems_for_CSS" name="Build_systems_for_CSS">CSS のビルドシステム</h3>

<p>CSS を編成するもう1つの方法は、フロントエンド開発者が利用できるツールのいくつかを利用することです。これにより、CSS を書くために、よりプログラム的なアプローチを取ることができます。<em>プリプロセッサ</em>と<em>ポスト</em><em>プロセッサ</em>と呼ばれるツールは多数あります。プリプロセッサは未加工ファイルを実行してそれらをスタイルシートに変換し、ポストプロセッサは完成したスタイルシートに何かを実行します。おそらく、ロードを高速化するために最適化します。</p>

<p>これらのツールを使用するには、開発環境で前処理と後処理を行うスクリプトを実行できる必要があります。多くのコードエディタでこれを行うことができます。または、コマンドラインツールをインストールして支援することもできます。</p>

<p>最も人気のあるプリプロセッサは <a href="https://sass-lang.com/">Sass</a> です。これは Sass のチュートリアルではありませんので、Sass でできることを簡単に説明します。これは<span> Sass の他の機能を使っていなくても、整理する上で非常に便利です。 </span> Sass についてもっと知りたいのであれば、<a href="https://sass-lang.com/guide">Sass の基礎知識</a>の記事から始めて、他のドキュメントに進んでください。</p>

<h4 id="Defining_variables" name="Defining_variables">変数の定義</h4>

<p>CSS にネイティブ<a href="/ja/docs/Web/CSS/Using_CSS_custom_properties">カスタムプロパティが追加された</a>ため、この機能の重要性は低下していますが、Sass を使用する理由の1つは、プロジェクトで使用されるすべての色とフォントを設定として定義し、その変数をプロジェクトで使用できるようにすることです。これは、間違った青の色合いを使用したことがわかった場合、1つの場所で変更するだけでよいことを意味します。</p>

<p><code>$base-color</code> 以下の最初の行のように呼び出される変数を作成した場合、その色が必要な場所であればどこでも、スタイルシートを介してその変数を使用できます。</p>

<pre class="brush: css notranslate"><code>$base-color: #c6538c;

.alert {
  border: 1px solid $base-color;
}</code></pre>

<p>CSS にコンパイルすると、最終的なスタイルシートには次の CSS が含まれます。</p>

<pre class="brush: css notranslate"><code>.alert {
  border: 1px solid #c6538c;
}</code></pre>

<h4 id="Compiling_component_stylesheets" name="Compiling_component_stylesheets">コンポーネントスタイルシートのコンパイル</h4>

<p>CSS を整理する1つの方法は、スタイルシートを小さなスタイルシートに分解することであると上記で述べました。Sass を使用すると、これを別のレベルに引き上げ、非常に小さなスタイルシートをたくさん持つことができます。コンポーネントごとに個別のスタイルシートを用意することもできます。Sass のインクルード機能を使用することで、これらすべてを1つまたは少数のスタイルシートにまとめて、実際に Web サイトにリンクできます。</p>

<p>例えば、<a href="https://sass-lang.com/documentation/at-rules/use#partials">partial</a> を使って、ディレクトリ内にいくつかのスタイルファイル、例えば <code>foundation/_code.scss</code>、<code>foundation/_lists.scss</code>、<code>foundation/_footer.scss</code>、<code>foundation/_links.scss</code> などを作成し、Sass の <code>@use</code> ロールを使って他のスタイルシートにロードすることができます。</p>

<pre class="brush: css notranslate">// foundation/_index.sass
@use 'code'
@use 'lists'
@use 'footer'
@use 'links'</pre>

<p>上記のように、パーシャルがすべてインデックスファイルにロードされている場合、ディレクトリ全体を一度に別のスタイルシートにロードすることができます。</p>

<pre class="brush: css notranslate">// style.sass
@use 'foundation'</pre>



<div class="blockIndicator note">
<p><strong>注</strong>：Sass を試す簡単な方法は、<a href="https://codepen.io">CodePen</a> を使用すること<a href="https://codepen.io">です</a>。これを有効にすると、CodePen が Sass パーサを実行してくれるので、通常の CSS を適用したウェブページを見ることができます。CSS チュートリアルでは、CodePen のデモでプレーンな CSS ではなく Sass を使用しているのを見つけることがありますので、少しでも知っておくと便利です。</p>
</div>

<h4 id="Post-processing_for_optimization" name="Post-processing_for_optimization">ポストプロセッサー</h4>

<p>もし、コメントや空白を大量に追加することでスタイルシートのサイズが大きくなることを気にしているのであれば、本番バージョンでは不要なものを取り除くことで CSS を最適化することが後処理のステップになります。これを実現するポストプロセッサの例としては、<a href="https://cssnano.co/">cssnano</a> があります。</p>

<h2 id="Wrapping_up" name="Wrapping_up">まとめ</h2>

<p>これは CSS 学習ガイドの最後の部分で、ここから CSS の探求を続けるための様々な方法があることがお分かりいただけると思います。</p>

<p>CSS のレイアウトの詳細については、「<a href="/ja/docs/Learn/CSS/CSS_layout">CSSレイアウトの学習</a>」セクションを参照してください。</p>

<p>また、これで <a href="/ja/docs/Web/CSS">MDN の CSS の資料</a>の残りの部分を探索するためのスキルを身につけることができます。プロパティや値を調べたり、<a href="/ja/docs/Web/CSS/Layout_cookbook">CSS クックブック</a>で使用するパターンを調べたり、<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">Guide to CSS Grid Layout</a> などの特定のガイドを読んだりすることができます。</p>

<p>{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p>

<h2 id="In_this_module" name="In_this_module">このモジュール</h2>

<ol>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a>
  <ul>
   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li>
   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li>
   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li>
   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li>
  </ul>
 </li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li>
</ol>