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

---
title: 背景と枠線
slug: Learn/CSS/Building_blocks/Backgrounds_and_borders
tags:
  - Background
  - Beginner
  - CSS
  - Image
  - Learn
  - Position
  - borders
  - color
translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
---
<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "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>ボックスの背景と枠線をスタイルする方法を学ぶ。</td>
  </tr>
 </tbody>
</table>

<h2 id="Styling_backgrounds_in_CSS" name="Styling_backgrounds_in_CSS">CSS による背景の設定</h2>

<p>CSSの {{cssxref("background")}} プロパティは、このレッスンで説明する多くの個別指定プロパティ(<strong>longhand property</strong>)を一度に指定する一括指定プロパティ(<strong>shorthand property</strong>)です。スタイルシートで複雑な背景プロパティを見かけると、一度に多くの値を渡していて理解するのが少し難しく感じるかもしれません。</p>

<pre class="brush: css notranslate"><code>.box {
  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
  url(big-star.png) center no-repeat, rebeccapurple;
} </code>
</pre>

<p>一括指定の仕方については後ほど改めて扱います。まずは背景に対してCSSで何ができるのかを知るために、ひとつひとつのプロパティを見ていきましょう。</p>

<h3 id="Background_colors" name="Background_colors">背景色</h3>

<p> {{cssxref("background-color")}} プロパティは、要素の背景色を定義します。このプロパティは、有効な<a href="/ja/docs/Web/CSS/color_value">&lt;color&gt;</a>値を受け入れます。<code>background-color</code>は、要素の <a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model#Parts_of_a_box"><strong>Content box</strong>, <strong>Padding box</strong></a> の範囲でコンテンツの下に広がります。</p>

<p>次の例では、さまざまな色の値値を使用して、ボックス(<code>.box</code>)、見出し(<code>h2</code>)、および {{htmlelement("span")}} 要素に背景色を指定しています。</p>

<p><strong>利用可能な <a href="/ja/docs/Web/CSS/color_value">&lt;color&gt;</a> を使ってみましょう。</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 600)}}</p>

<h3 id="Background_images" name="Background_images">背景画像</h3>

<p> {{cssxref("background-image")}} プロパティは、要素の背景に表示する画像を指定します。次の例には、2個のボックスがあります。片方のボックスでは背景画像がボックスより大きく、他方のボックスの背景画像は小さな星の画像です。</p>

<p>この例は、背景画像に関する2つのことを示しています。<br>
 デフォルトでは、大きな画像はボックスに収まるように縮小されず、一部分のみが表示されます。いっぽう、小さな画像はボックスの内側いっぱいまで繰り返されます。この場合、実際の画像は星1個のみです。</p>

<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 600)}}</p>

<p>背景画像と背景色を同時に指定すると、背景色より手前に背景画像が表示されます。上記の例に<code>background-color</code>プロパティを追加して、動作を確認してみましょう。</p>

<h4 id="Controlling_background-repeat" name="Controlling_background-repeat">背景画像の繰り返しの指定</h4>

<p> {{cssxref("background-repeat")}} プロパティは、画像の繰り返し表示の動作を制御するために使用されます。使用可能な値には次のものがあります:</p>

<ul>
 <li><code>no-repeat</code> — 背景画像が繰り返されるのを完全に防ぎます。</li>
 <li><code>repeat-x</code> — 水平方向に繰り返します。</li>
 <li><code>repeat-y</code> — 垂直方向に繰り返します。</li>
 <li><code>repeat</code> — デフォルト; 両方の方向に繰り返します</li>
</ul>

<p><strong>以下の例でこれらの値を試してみましょう。値を<code>no-repeat</code>に設定したため、星が1つだけ表示されます。異なる値(<code>repeat-x</code>や<code>repeat-y</code>)に変えてみて、その効果を確認してみましょう。</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 600)}}</p>

<h4 id="Sizing_the_background_image" name="Sizing_the_background_image">背景画像のサイズ指定</h4>

<p>先ほどの例では、背景を設定したい要素より画像のほうが大きいため画像の一部しか表示されませんでした。 {{cssxref("background-size")}} プロパティを使用して、背景内に収まるように画像のサイズを調整できます。</p>

<p><code>background-size</code>プロパティは、<a href="/ja/docs/Web/CSS/length">&lt;length&gt;</a> または <a href="/ja/docs/Web/CSS/percentage">&lt;percentage&gt;</a> の値をとることができます。</p>

<p>また、次のキーワードを使うこともできます：</p>

<ul>
 <li><code>cover</code> —ブラウザは、アスペクト比を維持したままボックスの領域を完全に覆うように画像の大きさを調整します。<br>
  この場合、画像の一部が箱の外に出る可能性があります。</li>
 <li><code>contain</code> —ブラウザは、画像がボックス内にちょうど収まるように画像の大きさを調整します。<br>
  この場合、画像とボックスのアスペクト比が異なる場合、画像の左右または上下に隙間ができる可能性があります。</li>
</ul>

<p>次の例では、<strong>&lt;length&gt;</strong>値を使用して先ほどの大きな画像がボックス内におさまる大きさに変更しました。結果として、画像が歪んでいることがわかります。</p>

<p>以下を試してみましょう。</p>

<ul>
 <li>背景のサイズをあらわす<strong>&lt;length&gt;</strong>値を変更します。</li>
 <li><strong>&lt;length&gt;</strong>値を削除し、<code>background-size: cover</code>や<code>background-size: contain</code>を使うとどうなるかを確認します。</li>
 <li>画像がボックスより小さい場合は、<code>background-repeat</code>の値を変更して画像を繰り返すことができます。</li>
</ul>

<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 750)}}</p>

<h4 id="Positioning_the_background_image" name="Positioning_the_background_image">背景画像の位置の指定</h4>

<p> {{cssxref("background-position")}} プロパティを適用すると、そのボックス上で背景画像を表示する位置を選択できます。このプロパティでは、ボックスの左上隅を<code>(0, 0)</code>として、水平方向の座標軸(<strong>horisontal axis</strong>)を<code>x</code>軸(<strong><code>x</code> axis</strong>, 複数形はaxes）、垂直方向の座標軸(<strong>vertical axis</strong>)を<code>y</code>軸(<strong><code>y</code> axis</strong>)とする座標系にそって画像を配置します。</p>

<div class="blockIndicator note">
<p><strong>注</strong>: デフォルトの<code>background-position</code>の値は<code>(0, 0)</code>です。</p>
</div>

<p>最も一般的な<code>background-position</code>の値は、2個の値をとります—水平方向、垂直方向の順で値を指定します。</p>

<p><code>top</code>や<code>right</code>などのキーワードを使用できます (詳しくは{{cssxref("background-image")}}ページを参照):</p>

<pre class="brush: css notranslate"><code>.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top center;
} </code>
</pre>

<p>そして、 <a href="/ja/docs/Web/CSS/length">&lt;length&gt;</a>および<a href="/ja/docs/Web/CSS/percentage">&lt;percentage&gt;</a>を使用できます:</p>

<pre class="brush: css notranslate"><code>.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px 10%;
} </code>
</pre>

<p>次のように、キーワードの値を&lt;length&gt;や&lt;percentage&gt;の値と混在させてもかまいません。</p>

<pre class="brush: css notranslate">.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px;
}</pre>

<p>最後に、4つの値をとる構文を使って、ボックスのいずれかの端からの距離を示すこともできます。この場合の長さは、その直前の値で指定した位置からの距離（オフセット, <strong>offset</strong>）です。下のCSSでは、背景を上(<code>top</code>)から<code>20px</code>、右(<code>right</code>)から<code>10px</code>に配置しています。</p>

<pre class="brush: css notranslate"><code>.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px right 10px;
} </code></pre>

<p><strong>次の例を使い、プロパティの値を変えてボックス内で星を動かしてみましょう。</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 600)}}</p>

<div class="blockIndicator note">
<p><strong>注</strong>: <code>background-position</code> は {{cssxref("background-position-x")}} および {{cssxref("background-position-y")}} の一括指定プロパティで、それぞれの座標軸の方向の位置を個別に設定できます。</p>
</div>

<h3 id="Gradient_backgrounds" name="Gradient_backgrounds">グラデーション背景</h3>

<p>グラデーション(<strong>gradient</strong>, <strong><ruby>勾配<rp>(</rp><rt>こうばい</rt><rp>)</rp> </ruby></strong>)は、背景に使用する場合には画像と同じようにふるまいます。グラデーションは{{cssxref("background-image")}}プロパティを使用して設定されます。</p>

<p><a href="/ja/docs/Web/CSS/gradient">&lt;gradient&gt;</a>データ型のMDNページで、さまざまな種類のグラデーションとそれらを使ってできることについて詳しく読むことができます。Webで数多く提供されているCSSグラデーションジェネレーター(例えば "<cite><a href="https://cssgradient.io/">CSS Gradient</a></cite>")を使用して、グラデーションを楽しく試せます。このWebサービスでは、グラデーションを作成したのち、グラデーションを生成するソースコードをコピー&amp;ペーストできます。</p>

<p>以下の例でいろいろなグラデーションを試してみましょう。 1つめのボックスには、ボックス全体に広がる線形グラデーション(linear gradient)を指定しています。2つめのボックスには、サイズを設定して(そのために繰り返されている)放射状グラデーション(radial gradinet)を指定しています。</p>

<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 600)}}</p>

<h3 id="Multiple_background_images" name="Multiple_background_images">複数の背景画像</h3>

<p><code>background-image</code>プロパティにコンマ区切りで複数の画像を指定することで、複数の背景画像を使用することもできます。</p>

<p>これを行うと、背景画像が互いに重なり合う可能性があります。背景は、最後に指定したものが一番下に置かれ、先のものが順に上に重ねられます。</p>

<div class="blockIndicator note">
<p><strong>注</strong>: グラデーションを通常の背景画像と同じように重ね合わせることができます。</p>
</div>

<p>他の<code>background-*</code>プロパティも、<code>background-image</code>と同じ方法でコンマ区切りの値を持つことができます:</p>

<pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px,  top right;</pre>

<p>プロパティに指定した複数のプロパティ値は、他のプロパティの同じ位置にある値と対応します。上の例で、<code>image1</code>の<code>background-repeat</code>値は<code>no-repeat</code>です。では、プロパティごとに値の個数が異なるとどうなるでしょうか？答えは、個数が少ない値が繰り返し使われる、ということです。上の例では、4つの背景画像がありますが、2つの <code>background-position</code> の値しかありません。最初の2つの位置の値は対応する位置の画像に適用され、その後は繰り返されます。つまり、<code>image3</code>には1番目、<code>image4</code>には2番目の値がふたたび使われます。</p>

<p><strong>実際に試してみましょう。以下の例には2つの画像があります。重ね合わせの順序を確かめるために、どの背景画像を先にするかを変えてみてください。また、他のプロパティを操作して、位置、サイズ、繰り返し方法を変えてみてください。</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 500)}}</p>

<h3 id="Background_attachment" name="Background_attachment">スクロール時の背景画像の固定</h3>

<p>背景に使用できるもうひとつのオプションは、コンテンツがスクロールするときのスクロール方法を指定することです。これは, {{cssxref("background-attachment")}} プロパティを使用して制御され、次の値を取ることができます:</p>

<ul>
 <li><code>scroll</code>: ページ全体のスクロールに応じて要素の背景を移動します。要素のコンテンツがスクロールされた場合には、背景は移動しません。<br>
  実際には背景はページ上の同じ位置に固定されているため、ページがスクロールするとスクロールします。</li>
 <li><code>fixed</code>: 要素の背景をビューポート(viewport)に固定します。ページや要素のコンテンツがスクロールされても移動せず、画面上の同じ位置にとどまります。</li>
 <li><code>local</code>: 要素の背景をその要素自身に対して固定します。要素のコンテンツをスクロールした場合にもそれにあわせて背景が移動します。<br>
  <code>local</code>値は、多くの場合に<code>scroll</code>値の挙動が期待どおりではないことから新しく追加されました（他の値はInternet Explorer 4以降でサポートされますが、<code>local</code>はIE 9以降のみでサポートされます）。</li>
</ul>

<p> {{cssxref("background-attachment")}} プロパティはスクロールするコンテンツがある場合にのみ効果があります。3つの値の違いを示す<a href="https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">デモ（background-attachment.html）</a>を作成したのでご覧ください（<a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">ソースコード</a>も公開しています）。</p>

<h3 id="Using_the_background_shorthand_property" name="Using_the_background_shorthand_property">背景に関する指定をまとめておこなう</h3>

<p>このレッスンの冒頭で、 {{cssxref("background")}} プロパティを使って背景が指定されている場合についてふれました。この一括指定プロパティを使うと、複数のプロパティを一度に設定できます。</p>

<p>複数の背景を使用する場合は、最初の背景に対するプロパティをすべて指定してから、カンマで区切って次の背景を追加します。以下の例では、サイズと位置を伴った<a href="#Gradient_backgrounds">グラデーション</a>、<code>no-repeat</code>と位置指定を伴った<a href="#Background_images">背景画像</a>、最後に<a href="#Background_colors">背景色</a>を指定しています。</p>

<p>背景画像に関する一括指定を書くとき、いくつかのルールを守る必要があります。例えば：</p>

<ul>
 <li> <code>background-color</code> は最後のコンマの後にのみ指定できます。</li>
 <li><code>background-size</code>の値は、<code>center / 80％</code>のように、<code>background-position</code>の値の直後に<code>/</code>文字を挟んだ位置でのみ使うことができます。</li>
</ul>

<p>すべての注意点を確認するには、 {{cssxref("background")}} のMDNページをご覧ください。</p>

<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 700)}}</p>

<h3 id="Accessibility_considerations_with_backgrounds" name="Accessibility_considerations_with_backgrounds">アクセシビリティの観点での注意点</h3>

<p>テキストを背景画像や背景色の上に配置する際には、閲覧者がテキストを読み取れるだけの十分なコントラストを確保するよう注意する必要があります。画像の上にテキストを配置する場合は、画像が読み込まれない場合でもテキストが読み取れるような背景色も指定する必要があります。</p>

<p>スクリーンリーダーは背景画像を解析できないため、画像は装飾としての役割のみを担うべきです。重要なコンテンツはすべてHTMLページのなかで表現するべきで、背景画像のなかに含めるべきではありません。</p>

<h2 id="Borders" name="Borders">枠線</h2>

<p>ボックスモデルについて学習するとき、枠線(border)がボックスのサイズにどのように影響するかを見てきました。このレッスンでは、枠線をクリエイティブに活用する方法を見ていきます。</p>

<p>通常、CSSで要素に枠線を追加するときは、CSSの1行で枠線の色、幅、スタイルを指定する一括指定プロパティを使います。</p>

<p> {{cssxref("border")}}:を使用して、ボックスの4辺すべてに枠線を設定できます。</p>

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

<p>または、次のように、ボックスの1つの辺を対象にすることができます。:</p>

<pre class="brush: css notranslate"><code>.box {
  border-top: 1px solid black;
} </code></pre>

<p>一括指定で指定した個々のプロパティは次のとおりです：</p>

<pre class="brush: css notranslate"><code>.box {
  border-width: 1px;
  border-style: solid;
  border-color: black;
} </code></pre>

<p>一辺ごとの個別指定については次のようになります：</p>

<pre class="brush: css notranslate"><code>.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
} </code></pre>

<div class="blockIndicator note">
<p><strong>注</strong>: top, right, bottom, leftの各方向の枠線を指定するプロパティには、HTML文書の書字モード（writing mode）と結びついた<em>論理</em>プロパティ（<em>logical</em> property）が割り当てられています（書字モードは、左から右、右から左、上から下といったテキストの方向を制御するものです）。次のレッスンでは、さまざまなテキストの方向の処理について説明します。</p>
</div>

<p>枠線にはさまざまなスタイルを指定できます。以下の例では、ボックスの4辺にそれぞれ異なる枠線スタイルを使用しています。枠線の色、幅、スタイルを試して、枠線の動作を確認しましょう。</p>

<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 700)}}</p>

<h3 id="Rounded_corners" name="Rounded_corners">角の丸み</h3>

<p>{{cssxref("border-radius")}}一括指定プロパティと、各々の角に対応した個別指定プロパティを使用して、ボックスの角の丸みを実現できます。各プロパティは2個の&lt;length&gt;または&lt;percentage&gt;を値として使用できます。最初の値は水平方向の半径(radius)を定義し、2番目の値は垂直方向の半径を定義します。多くの場合、1つの値のみを指定して両方向に適用します。</p>

<p>例えば、ボックスの4つの角すべてに半径 10px の丸みを持たせるには:</p>

<pre class="brush: css notranslate"><code>.box {
  border-radius: 10px;
} </code></pre>

<p>または、右上角の水平方向の半径を1em、垂直方向の半径を 10％ にするには:</p>

<pre class="brush: css notranslate"><code>.box {
  border-top-right-radius: 1em 10%;
} </code></pre>

<p>以下の例では、はじめに4つの角すべてについて角の丸みを設定したのち、右上角を他と異なる値に変更しました。値を変えて試してみましょう。使用できる構文は{{cssxref("border-radius")}} プロパティのページを見て確認してください。</p>

<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 650)}}</p>

<h2 id="Playing_with_backgrounds_and_borders" name="Playing_with_backgrounds_and_borders">背景と枠線を試す</h2>

<p>学んだ知識を試すために、背景と枠線を使って次のものを作成してみてください。コード例を出発点として使ってください:</p>

<ol>
 <li>ボックスに幅が5pxの黒い実線の境界線を付け、角に半径が10pxの丸みをつけてください。</li>
 <li>背景画像を追加し（URL <code>balloons.jpg</code>を使用）、ボックスを覆うようにサイズを変更してください。</li>
 <li><code>&lt;h2&gt;</code>に半透明の黒い背景色を指定し、テキストを白にしてください。</li>
</ol>

<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%',650)}}</p>

<div class="blockIndicator note">
<p><strong>注</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">ここで正解を確認できます</a>が、まずは自分の力で解答してみてください！</p>
</div>

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

<p>このレッスンではかなり多くのことを説明してきましたが、そのなかで背景や枠線をボックスに追加する方法がたくさんあることがわかりました。これまでに説明した機能について詳しく知りたくなったら、各プロパティのMDNページに目を通してみましょう。これらのページには知識を活用したり強化したりするための使用例が書かれています。</p>

<p>次のレッスンでは、ドキュメントの書字モードがCSSとどのように相互作用するかを説明します。テキストが左から右以外の方向に流れる場合に何が起こるのでしょうか？</p>

<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "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>