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

---
title: CSS の構成要素
slug: Learn/CSS/Building_blocks
tags:
  - Beginner
  - CSS
  - Learn
  - building blocks
translation_of: Learn/CSS/Building_blocks
---
<div>{{LearnSidebar}}</div>

<p class="summary">このモジュールは <a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>から派生しています。CSS の言語や文法に慣れてきて、それを使う上での基本的な経験を得てきたという前提で、もう少し掘り下げてみましょう。カスケードと継承・セレクターの全種類・単位・サイズ設定・背景と枠線・デバッグなどを見ていきます。</p>

<p class="summary">ここでの目的は、<a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a>や <a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>などのより具体的な分野に進む前に、適切な CSS を書くための手法を知り、すべての重要な理論を理解できるようになることです。</p>

<div class="callout">
  <h4 id="Looking_to_become_a_front-end_web_developer">フロントエンドのウェブ開発者を目指している方へ</h4>

  <p>目標に向かって努力するために必要なすべての必須情報を含むコースをまとめました。</p>

  <p><a href="/ja/docs/Learn/Front-end_web_developer"><strong>始めましょう</strong></a></p>

</div>

<h2 id="Prerequisites">前提知識</h2>

<p>このモジュールを始める前に、次のものを身につけておいてください。</p>

<ol>
 <li>コンピューターの使い方と (ウェブを見たりコンテンツを消費したりといった) ウェブの受動的な使い方に関する基本的な知識に慣れ親しんでいること。</li>
 <li><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>で説明されている基本的な作業環境と、<a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い方</a>で説明されているファイルの作り方や管理の仕方について理解していること。</li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>で説明されている HTML についての基礎知識に慣れ親しんでいること。</li>
 <li><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>で説明されている CSS の基本について理解していること。</li>
</ol>

<div class="note">
<p><strong>注</strong>: 自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは <a href="https://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> といったオンラインコーディングプログラムで試すことが可能です</p>
</div>

<h2 id="Guides">ガイド</h2>

<p>このモジュールは、 CSS 言語のもっとも重要な部分をカバーする以下の記事で構成されています。各記事には理解度を試す練習問題も含まれています。</p>

<dl>
 <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></dt>
 <dd>このレッスンでの目的は、CSS を HTML に適用する方法と競合した場合の解決方法について、もっとも基本的な概念 (カスケード・詳細度・継承) の理解を深めていくことです。</dd>
 <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a></dt>
 <dd>CSS セレクターにはさまざまな種類があり、スタイルを設定する要素を厳密に指定することができます。この記事と以下のサブ記事では、それらがどのように機能するかを詳しく見ていきます。サブ記事は以下の通りです。
 <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>
 </dd>
 <dt><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></dt>
 <dd>CSS のすべてにはボックスの概念があり、これを理解することは CSS でレイアウトを作成したりアイテム同士を揃えたりするためのコツとなります。このレッスンでは CSS ボックスモデルを詳しく解説し、その仕組みと関連する用語を理解することで、より複雑なレイアウトに進んでいけるようにします。</dd>
 <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></dt>
 <dd>このレッスンでは、CSS の背景と枠線を使ってできるクリエイティブなことをいくつか見ていきます。グラデーションや背景画像や角丸について、背景と枠線は CSS のスタイリングに関する多くの疑問の解決策です。</dd>
 <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></dt>
 <dd>近年では、右から左へだけでなく上から下へのコンテンツ（日本語など）を含むコンテンツのさまざまな向きをより適切にサポートするために CSS サポートが進化しています。これらのさまざまな向きの考え方については "<strong>writing modes" </strong>と呼ばれます。レイアウトの学習を進めて進めていくと "writing modes" の理解がとても役に立っていきますので、この記事ではそれらを紹介していきます。</dd>
 <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">コンテンツのはみ出し (オーバーフロー)</a></dt>
 <dd>このレッスンでは、CSS のもう 1 つの重要な概念である <strong>オーバーフロー</strong> (<strong>overflow</strong>) を見ていきます。オーバーフローは、ボックス内にコンテンツが収まりきらないときに発生します。このガイドでは、その詳細とそれらについてどのように対処するかを学びます。</dd>
 <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></dt>
 <dd>CSS で使用されるすべてのプロパティには、特定の値または値の組み合わせのみが許可されます。このレッスンでは、もっともよく使用される値と単位について見ていきます。</dd>
 <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></dt>
 <dd>これまでのさまざまなレッスンで、CSS を使用してウェブページ上の項目のサイズを調整するいくつかの方法に出会いました。デザイン作業をしていくうえで、それぞれの手法がどれほど大きく異なっているのかを理解することが重要です。このレッスンでは、CSS によって要素のサイズを設定する方法をまとめ、サイジングに役立ついくつかの用語を定義します。</dd>
 <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></dt>
 <dd>このレッスンでは、特定の要素が CSS でどのように扱われるかを見ていきます。画像・メディア・フォーム要素では、CSS でスタイルを設定するにあたって通常のボックスとは少し異なる動作をします。何が可能で何が不可能であるのかを理解することで、フラストレーションを軽減することができます。このレッスンでは、知っておくべきことをいくつか取り上げます。</dd>
 <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></dt>
 <dd>HTML 表を装飾することは、世界で最も魅力的な仕事ではありませんが、時にはそれをしなければならないこともあります。この記事では、表をスタイリングするテクニックとともに、HTML 表を見栄え良くするためのガイドを提供します。</dd>
 <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></dt>
 <dd>CSS を書くとき、期待どおりに動作していないように見える問題が発生する場合があります。この記事では CSS の問題をデバッグする方法について案内し、何が起こっているかを調べるのに、すべてのモダンブラウザーに入っている開発者ツールがどう役立つかを示します。</dd>
 <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></dt>
 <dd>スタイルシートやプロジェクトが大きい状態で作業しはじめると、巨大な CSS ファイルを維持するのが難しいことがわかります。この記事では、保守しやすい CSS を書くためのベストプラクティスと、他の人が保守性を向上させるための解決策の一部を紹介します。</dd>
</dl>

<h2 id="Assessments">評価テスト</h2>

<p>CSS スキルをテストしたいですか？以下の各評価では上記のガイドで説明されている CSS の理解度をテストできます。</p>

<dl>
 <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension">基本的な CSS の理解</a></dt>
 <dd>この評価では基本的な構文・セレクター・詳細度・ボックスモデル・その他の理解度をテストします。</dd>
 <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper">装飾的なレターヘッド付きの便箋の作成</a></dt>
 <dd>好印象を与えたいのなら、素敵なレターヘッドの便箋に手紙を書くのはとても良い考えです。この評価では、そのような見た目のオンラインテンプレートの作成に挑戦します。</dd>
 <dt><a href="/ja/docs/Learn/CSS/Building_blocks/A_cool_looking_box">かっこいいボックス</a></dt>
 <dd>ここでは背景と枠線のスタイリングを使った人目を引くボックスの作り方を実践します。</dd>
</dl>

<h2 id="See_also">関連情報</h2>

<dl>
 <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">ボックスの高度な効果</a></dt>
 <dd>この記事はトリックの箱として機能し、ボックスの影・ブレンドモード・フィルターのような、ボックスの装飾に使用できる高度な機能のいくつかを紹介します。</dd>
</dl>