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

---
title: Boxes
slug: conflicting/Learn/CSS/Building_blocks
tags:
  - CSS
  - CSS:Getting_Started
translation_of: Learn/CSS/Building_blocks
translation_of_original: Web/Guide/CSS/Getting_started/Boxes
original_slug: Web/Guide/CSS/Getting_started/Boxes
---
<div>{{CSSTutorialTOC}}</div>

<p>{{previousPage("/ja/docs/CSS/Getting_Started/Lists", "Lists")}} これは <a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting Started">CSS Getting Started</a> チュートリアルの第11章です。ここでは、要素が表示されるとき、要素の占めるスペースを CSS で操作する方法について述べます。実際に文書を作り、間隔の調整や装飾ルールの追加を試してください。</p>

<h2 class="clearLeft" id="ボックスについて">ボックスについて</h2>

<p>ブラウザに表示されると、要素は一定のスペースを占有します。このスペースは4つの部分で構成されています。</p>

<p>中央に、<em>要素（element）</em>がその内容を表示するのに必要なスペースがあります。その周りに パディング（<em>padding）</em> があり、その周りに <em>ボーダー（border）</em> があります。その周りには <em>マージン（margin）</em> があって、他要素とその要素を隔てています。</p>

<table>
 <tbody>
  <tr>
   <td style="width: 22em;">
    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
    <p style="text-align: center; margin: 0px;">マージン</p>

    <p style="text-align: center; margin: 0px 0px -.75em 0px;">ボーダー</p>

    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
    <p style="text-align: center;">パディング</p>

    <div style="background-color: #eee;">
    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">要素</p>
    </div>
    </div>
    </div>

    <p><em>薄い灰色がレイアウトの部品を示します。</em></p>
   </td>
   <td>
    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
    <p style="text-align: center; margin: 0px;"> </p>

    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>

    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
    <p style="text-align: center;"> </p>

    <div style="background-color: #fff;">
    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">要素</p>
    </div>
    </div>
    </div>

    <p><em>ブラウザではこう見えます。</em></p>
   </td>
  </tr>
 </tbody>
</table>

<p>パディング、ボーダー、マージンは要素の上下左右で異なるサイズにできます。一部または全部をゼロにすることもできます。</p>

<h3 id="Coloring" name="Coloring">彩色</h3>

<p>パディングは常に要素の背景色と同じ色です。このため背景色を設定すると、その色は要素自身とそのパディングに適用されます。マージンは常に透明です。</p>

<table>
 <tbody>
  <tr>
   <td style="width: 22em;">
    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
    <p style="text-align: center; margin: 0px;">マージン</p>

    <p style="text-align: center; margin: 0px 0px -.75em 0px;">ボーダー</p>

    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
    <p style="text-align: center;">パディング</p>

    <div style="background-color: #ded;">
    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">要素</p>
    </div>
    </div>
    </div>

    <p><em>要素の背景色は緑です。</em></p>
   </td>
   <td>
    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
    <p style="text-align: center; margin: 0px;"> </p>

    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>

    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
    <p style="text-align: center;"> </p>

    <div style="background-color: #efe;">
    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">要素</p>
    </div>
    </div>
    </div>

    <p><em>ブラウザではこう見えます</em>。</p>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="Borders" name="Borders">ボーダー</h3>

<p>ボーダーを使って、要素を線や枠囲みで装飾できます。</p>

<p>要素の境界線をすべて同じにするには、{{cssxref("border")}} プロパティを使います。幅（画面表示されるときの単位は通常 pixel です）、スタイル、色を定義します。</p>

<p>選べるスタイル:</p>

<table style="margin-left: 2em;">
 <tbody>
  <tr>
   <td style="width: 6em;">
    <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div>
   </td>
   <td style="width: 6em;">
    <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div>
   </td>
   <td style="width: 6em;">
    <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div>
   </td>
   <td style="width: 6em;">
    <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div>
   </td>
  </tr>
  <tr>
   <td style="width: 6em;">
    <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div>
   </td>
   <td style="width: 6em;">
    <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div>
   </td>
   <td style="width: 6em;">
    <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div>
   </td>
   <td style="width: 6em;">
    <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div>
   </td>
  </tr>
 </tbody>
</table>

<p>また、スタイルを <code>none</code> か <code>hidden</code> にして、明示的にボーダーを消したり、色を <code>transparent</code> にして、レイアウトを変えずにボーダーを透明にしたりできます。</p>

<p>一辺ずつボーダーを定義するには、次のプロパティを使います: {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}}。これを使うと、一辺だけボーダーを定義したり、辺ごとに違うボーダーを定義したりできます。</p>

<div class="tuto_example">
<div class="tuto_type">例</div>

<p>次のルールは、見出し要素の背景色と上辺のボーダーを定義します:</p>

<pre class="brush:css">h3 {
  border-top: 4px solid #7c7; /* mid green */
  background-color: #efe;     /* pale green */
  color: #050;                /* dark green */
}</pre>

<p>結果は次のようになります:</p>

<table>
 <tbody>
  <tr>
   <td>
    <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">スタイルつきの見出し</p>
   </td>
  </tr>
 </tbody>
</table>

<p>次のルールは、画像をミッドグレーの枠で取り囲んで見やすくします:</p>

<pre class="brush:css">img {border: 2px solid #ccc;}
</pre>
</div>

<p>結果は次のようになります:</p>

<table>
 <tbody>
  <tr>
   <td>画像:</td>
   <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" src="/@api/deki/files/47/=Blue-rule.png"></td>
  </tr>
 </tbody>
</table>

<h3 id="Margins_and_padding" name="Margins_and_padding">マージンとパディング</h3>

<p>マージンとパディングで要素の位置を調整し、周りに余白を作ります。</p>

<p>{{cssxref("margin")}} プロパティと {{cssxref("padding")}} プロパティでそれぞれ、マージンの幅、パディングの幅を設定します。</p>

<p>幅を一つだけ記述すると、要素の全ての枠（top（上辺）、right（右辺）、bottom（下辺）、left（左辺））に適用されます。</p>

<p>幅を2つ記述すると、1番目が top と bottom に、2番めが right と left に適用されます。</p>

<p>4つすべての幅を定義するには、次の順番で記述します: top、 right、bottom、left</p>

<div class="tuto_example">
<div class="tuto_type">例</div>

<p>次のルールは、<code>remark</code> クラスを持つ段落に、四辺すべてを囲むような赤い枠を与えます。</p>

<p>パディングで囲むことで、テキストから枠が少し離れます。</p>

<p>左マージンは段落を他のテキストからインデントします:</p>

<pre class="brush:css">p.remark {
  border: 2px solid red;
  padding: 4px;
  margin-left: 24px;
  }
</pre>

<p>結果は次のようになります:</p>

<table>
 <tbody>
  <tr>
   <td>
    <p>ここは通常の段落です。</p>

    <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">ここは remark 用の段落です。</p>
   </td>
  </tr>
 </tbody>
</table>
</div>

<div class="tuto_details">
<div class="tuto_type">さらに詳しく</div>

<p>マージンとパディングで要素の配置方法を調整すると、そのスタイルのルールとブラウザのデフォルトが、複雑な方法で相互作用します。</p>

<p>ブラウザによって、要素の配置方法が異なります。スタイルシートで変えなければ、結果は同じに見えるかもしれません。このため、時折スタイルシートのもたらす結果に驚くことがあります。</p>

<p>望む結果を得るには、文書のマークアップを変更する必要があるかもしれません。このチュートリアルの次のページで、このことについてもっと触れています。</p>

<p>パディング、マージン、ボーダーについての詳しい情報は、リファレンスの <a href="/ja/docs/CSS/box_model" title="CSS/box model"><span>ボックスモデル</span></a> をご覧ください。</p>
</div>

<h2 id="Action.3A_Adding_borders" name="Action.3A_Adding_borders">実習: ボーダーの追加</h2>

<p>CSS ファイル <code>style2.css を編集します。次のルールを追加して、見出しのそれぞれで、ページを横切る線を描くようにしてください</code>:</p>

<pre class="brush:css">h3 {border-top: 1px solid gray;}
</pre>

<p>前のページのチャレンジを終えていれば、そこで作ったルールを編集するか、次の新しいルールを追加して、各リスト項目の真下にスペースを置くようにしてください:</p>

<pre class="brush:css">li {
  list-style: lower-roman;
  margin-bottom: 8px;
  }
</pre>

<p>ブラウザを更新すると次の結果になります:</p>

<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
 <tbody>
  <tr>
   <td>
    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>

    <ul style="">
     <li style="margin-bottom: 8px;">Arctic</li>
     <li style="margin-bottom: 8px;">Atlantic</li>
     <li style="margin-bottom: 8px;">Pacific</li>
     <li style="margin-bottom: 8px;">Indian</li>
     <li style="margin-bottom: 8px;">Southern</li>
    </ul>

    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>

    <p><strong>1: </strong>Lorem ipsum</p>

    <p><strong>2: </strong>Dolor sit</p>

    <p><strong>3: </strong>Amet consectetuer</p>

    <p><strong>4: </strong>Magna aliquam</p>

    <p><strong>5: </strong>Autem veleum</p>
   </td>
  </tr>
 </tbody>
</table>

<div class="tuto_example">
<div class="tuto_type">チャレンジ</div>

<p>スタイルシートに一つルールを追加して、リスト項目全体を囲むような広い枠を作り、海を連想するような色にしてください — 次のような感じです:</p>

<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
 <tbody>
  <tr>
   <td>
    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>

    <div style="border: 12px solid #69b; padding-left: 1em;">
    <ul style="">
     <li style="margin-bottom: 8px;">Arctic</li>
     <li style="margin-bottom: 8px;">Atlantic</li>
     <li style="margin-bottom: 8px;">Pacific</li>
     <li style="margin-bottom: 8px;">Indian</li>
     <li style="margin-bottom: 8px;">Southern</li>
    </ul>
    </div>

    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>

    <p><strong>. . .</strong></p>
   </td>
  </tr>
 </tbody>
</table>

<p>（幅や色を正確に同じにする必要はありません。）</p>
</div>

<p><a href="/ja/docs/CSS/Getting_Started/Challenge_solutions#Boxes" title="https://developer.mozilla.org/ja/CSS/Getting_Started/Challenge_solutions#Boxes">このチャレンジの解答を見る。</a></p>

<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2>

<p>{{nextPage("/ja/docs/CSS/Getting_Started/Layout", "Layout")}}マージンやパディングを指定して、文書のレイアウトを変えることができました。次のページでは、他の方法で文書の <a href="/ja/docs/CSS/Getting_Started/Layout" title="CSS/Getting_Started/Layout">レイアウト</a> を変えます。</p>