---
title: 装飾的なボックスの作成
slug: Learn/CSS/Howto/create_fancy_boxes
tags:
  - Beginner
  - CSS
  - CodingScripting
  - Learn
translation_of: Learn/CSS/Howto/create_fancy_boxes
---
<p class="summary">CSS ボックスは、CSS で装飾されたウェブページの構成要素です。 見栄えを良くすることは、楽しさとやりがいの両方です。 デザインのアイデアを実用的なコードに変えることがすべてだからです。 面倒な制約と CSS の使用における狂気の自由のために、それは挑戦的です。 いくつかの装飾的なボックスをやりましょう。</p>

<p>実用的な側面に取り掛かる前に、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model">CSS ボックスモデル</a>に慣れていることを確認してください。 いくつかの <a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウトの基本</a>を熟知していることも賢明ですが、前提条件ではありません。</p>

<p>技術面では、装飾的なボックスの作成は、CSS の境界線と背景のプロパティの習得と、それらを特定のボックスに適用する方法についてのものです。 しかし、テクニックを超えてそれはまたあなたの創造性を解き放つことに関するすべてです。 それは1日で終わらないでしょうし、何人かのウェブ開発者はそれを楽しんで一生を過ごします。</p>

<p>私たちは多くの例を見ようとしていますが、可能な限り最も単純な HTML の部分、次の単純な要素に取り組むつもりです。</p>

<pre class="brush: html">&lt;div class="fancy"&gt;Hi! I want to be fancy.&lt;/div&gt;</pre>

<p>はい、それは HTML のごく一部ですが、その要素について何を調整できるのでしょうか？ 次のすべてです。</p>

<ul>
 <li>そのボックスモデルのプロパティ: {{cssxref("width")}}、{{cssxref("height")}}、{{cssxref("padding")}}、{{cssxref("border")}} など</li>
 <li>その背景のプロパティ: {{cssxref("background")}}、{{cssxref("background-color")}}、{{cssxref("background-image")}}、{{cssxref("background-position")}}、{{cssxref("background-size")}} など</li>
 <li>その擬似要素: {{cssxref("::before")}} および {{cssxref("::after")}}</li>
 <li>そして、いくつかの脇のプロパティ: {{cssxref("box-shadow")}}、{{cssxref("transform")}}、{{cssxref("outline")}} など</li>
</ul>

<p>とても広い遊び場があります。 楽しく始めましょう。</p>

<h2 id="Box_model_tweak" name="Box_model_tweak">ボックスモデルの調整</h2>

<p>ボックスモデルだけで、単純な境界線の追加、四角形の作成など、基本的なことを行うことができます。 負の <code>padding</code> や負の <code>margin</code>、あるいはその両方を使用して、<code>border-radius</code> をボックスの実際のサイズよりも大きくすることによって、プロパティを限界にプッシュすると、面白くなり始めます。</p>

<h3 id="Making_circles" name="Making_circles">円を作る</h3>

<div class="hidden">
<pre class="brush: html">&lt;div class="fancy"&gt;Hi! I want to be fancy.&lt;/div&gt;</pre>
</div>

<p>これはとてもシンプルでとても楽しいものです。 {{cssxref("border-radius")}} プロパティは、ボックスに適用される丸い角を作成するように作られていますが、半径のサイズがボックスの実際の幅と等しいかそれより大きい場合はどうなるでしょうか？</p>

<pre class="brush: css">.fancy {
  /* 円の中では、中央揃えのテキストは見栄えがよくなります。 */
  text-align : center;

  /* テキストが境界線に触れないようにしましょう。
     テキストはまだ四角形の中を流れているので、
     そのようにするときれいに見えて、
     それが「本当の」円であるという感覚を与えます。 */
  padding : 2em;

  /* 境界線は円に見えるようになります。
     背景は境界線の半径で切り取られるので、
     背景を使用することもできます。 */
  border : 0.5em solid black;

  /* 正方形であることを確認しましょう。
     正方形でない場合は、円ではなく楕円です。 ;) */
  width  : 5em;
  height : 5em;

  /* そして正方形を円に変えましょう。 */
  border-radius: 100%;
}</pre>

<p>はい、円ができます。</p>

<p>{{ EmbedLiveSample('Making_circles', '100%', '170') }}</p>

<h2 id="Backgrounds" name="Backgrounds">Backgrounds</h2>

<p>装飾的なボックスについて話すとき、それを扱うためのコアとなるプロパティは <a href="/ja/docs/Web/CSS/CSS_Background_and_Borders">background-* プロパティ</a>です。 背景をいじり始めると、CSS ボックスはあなたが満たすための空白のキャンバスになります。</p>

<p>いくつかの実用的な例に進む前に、背景について知っておくべきことが2つあるので、少し後退しましょう。</p>

<ul>
 <li>一つのボックスに<a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">複数の背景</a>を設定することが可能です。 それらは層のように互いの上に積み重ねられています。</li>
 <li>背景は単色や画像のどちらでもかまいません。 単色は常に表面全体を塗りつぶしますが、画像は拡大縮小して配置することができます。</li>
</ul>

<div class="hidden">
<pre class="brush: html">&lt;div class="fancy"&gt;Hi! I want to be fancy.&lt;/div&gt;</pre>
</div>

<p>さて、背景を楽しんでみましょう。</p>

<pre class="brush: css">.fancy {
  padding : 1em;
  width: 100%;
  height: 200px;
  box-sizing: border-box;

  /* 背景の積み重ねの一番下を、
     霧のかかった灰色の単色にしましょう。 */
  background-color: #E4E4D9;

  /* カラーストリップエフェクトを作成するために、
     線形グラデーションを重ね合わせます。
     お気づきのとおり、
     色のグラデーションは画像と見なされ、
     そのように操作することができます。 */
  background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%),
                    linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%),
                    linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%),
                    linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%),
                    linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%),
                    linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%),
                    linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%),
                    linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%),
                    linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%),
                    linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%),
                    linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%),
                    linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%);
}</pre>

<p>{{ EmbedLiveSample('Backgrounds', '100%', '200') }}</p>

<div class="note">
<p>グラデーションは、非常に独創的な方法で使用できます。 あなたがクレイジーな例を見たいのなら、<a href="http://lea.verou.me/css3patterns/">Lea Verou の CSS パターン</a>（英語）を見てください。 こういったグラデーションの使用はかなり高くつきますが、パフォーマンス的に優れていることを忘れないでください。 グラデーションについてもっと知りたい場合は、気軽に<a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">専用記事</a>にアクセスしてください。</p>
</div>

<h2 id="Pseudo_elements" name="Pseudo_elements">疑似要素</h2>

<p>1つのボックスを装飾するときに、自分自身が制限されていることに気付き、さらに素晴らしい装飾を作成するためにもっとボックスを追加したいと思うかもしれません。 ほとんどの場合、これは独自の装飾の目的で HTML 要素を追加することによって DOM を汚染することにつながります。 たとえそれが必要であっても、それはやや悪い習慣と考えられています。 そのような落とし穴を回避するための1つの解決策は、<a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 疑似要素</a>を使用することです。</p>

<h3 id="A_cloud" name="A_cloud">雲</h3>

<div class="hidden">
<pre class="brush: html">&lt;div class="fancy"&gt;Hi! I want to be fancy.&lt;/div&gt;</pre>
</div>

<p>ボックスを雲に変える例を見てみましょう。</p>

<pre class="brush: css">.fancy {
  text-align: center;

  /* 以前に円を作るために使用したのと同じトリックです。 */
  box-sizing: border-box;
  width     : 150px;
  height    : 150px;
  padding   : 80px 1em 0 1em;

  /* 雲の「耳」のための場所を空けます。 */
  margin    : 0 100px;

  position: relative;

  background-color: #A4C9CF;

  /* それで、私たちは雲の底を平らにしたいので、
     実際に一周していません。
     この例を気軽に微調整して、
     底が平らでない雲にしてください。 ;) */
  border-radius: 100% 100% 0 0;
}

/* これらは、::before 疑似要素と ::after 疑似要素
   の両方に適用される共通のスタイルです。 */
.fancy::before,
.fancy::after {
  /* これは、たとえ値が空の文字列であっても、
     疑似要素の表示を許可するために必要です。 */
  content: '';

  /* 擬似要素をボックスの左右に配置しますが、
     常に一番下に配置します。 */
  position: absolute;
  bottom  : 0;

  /* これにより、疑似要素は、何が起こっても
     ボックスのコンテンツの下になります。 */
  z-index : -1;

  background-color: #A4C9CF;
  border-radius: 100%;
}

.fancy::before {
  /* これは雲の左耳の大きさです。 */
  width  : 125px;
  height : 125px;

  /* 少し左に動かします。 */
  left    : -80px;

  /* 雲の底が平らに保たれるようにするには、
     左耳の正方形の右下角を作る必要があります。 */
  border-bottom-right-radius: 0;
}

.fancy::after {
  /* これは右耳の雲の大きさです。 */
  width  : 100px;
  height : 100px;

  /* 少し右に動かします。 */
  right   : -60px;

  /* 雲の底が平らに保たれるようにするには、
     右耳の正方形の左下角を作る必要があります。 */
  border-bottom-left-radius: 0;
}</pre>

<p>{{ EmbedLiveSample('A_cloud', '100%', '160') }}</p>

<h3 id="Blockquote" name="Blockquote">ブロッククォート</h3>

<p>擬似要素を使用するより実用的な例は、HTML の {{HTMLElement('blockquote')}} 要素のための素晴らしいフォーマットを構築することです。 それでは、少し異なる HTML スニペットを使った例を見てみましょう（デザインのローカライゼーションもどのように処理するかを見る機会を提供してくれます）。</p>

<pre class="brush: html">&lt;blockquote&gt;People who think they know everything are a great annoyance to those of us who do. &lt;i&gt;Isaac Asimov&lt;/i&gt;&lt;/blockquote&gt;
&lt;blockquote lang="fr"&gt;L'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase. &lt;i&gt;Pierre Desproges&lt;/i&gt;&lt;/blockquote&gt;</pre>

<p>それで、これが装飾です。</p>

<pre class="brush: css">blockquote {
  min-height: 5em;
  padding   : 1em 4em;
  font      : 1em/150% sans-serif;
  position  : relative;
  background-color: lightgoldenrodyellow;
}

blockquote::before,
blockquote::after {
  position: absolute;
  height  : 3rem;
  font    : 6rem/100% Georgia, "Times New Roman", Times, serif;
}

blockquote::before {
  content: '“';
  top    : 0.3rem;
  left   : 0.9rem;
}

blockquote::after {
  content: '”';
  bottom : 0.3rem;
  right  : 0.8rem;
}

blockquote:lang(fr)::before {
  content: '«';
  top    : -1.5rem;
  left   : 0.5rem;
}

blockquote:lang(fr)::after {
  content: '»';
  bottom : 2.6rem;
  right  : 0.5rem
}

blockquote i {
  display   : block;
  font-size : 0.8em;
  margin-top: 1rem;
  text-style: italic;
  text-align: right;
}</pre>

<p>{{ EmbedLiveSample('Blockquote', '100%', '300') }}</p>

<h2 id="All_together_and_more" name="All_together_and_more">すべて一緒に、他</h2>

<p>ですから、これらすべてを混ぜ合わせると素晴らしいエフェクトを生み出すことができます。 ある時点で、そのようなボックス装飾を達成することは、CSS プロパティの設計と技術的使用の両方において、創造性の問題です。 このようにすることで、この例のようにボックスを生き生きとさせることができる錯視を作成することが可能です。</p>

<div class="hidden">
<pre class="brush: html">&lt;div class="fancy"&gt;Hi! I want to be fancy.&lt;/div&gt;</pre>
</div>

<p>部分的なドロップシャドウ・エフェクトを作りましょう。 {{cssxref("box-shadow")}} プロパティを使用すると、内部光と平らなドロップシャドウ・エフェクトを作成できますが、ちょっとした追加作業で、擬似要素と {{cssxref("transform")}} プロパティを使用してより自然なジオメトリを作成することが可能になります。</p>

<pre class="brush: css">.fancy {
  position: relative;
  background-color: #FFC;
  padding: 2rem;
  text-align: center;
  max-width: 200px;
}

.fancy::before {
  content: "";

  position : absolute;
  z-index  : -1;
  bottom   : 15px;
  right    : 5px;
  width    : 50%;
  top      : 80%;
  max-width: 200px;

  box-shadow: 0px 13px 10px black;
  transform: rotate(4deg);
}</pre>

<p>{{ EmbedLiveSample('All_together_and_more', '100%', '100') }}</p>

<h2 id="What's_next" name="What's_next">次は何ですか？</h2>

<p>多くの点で、装飾的なボックスを作ることは主に背景の中に色と画像を追加することなので、<a href="/ja/docs/Learn/CSS/Howto/manage_colors_and_images">色と画像の管理</a>を掘り下げる価値があるかもしれません。 また、装飾的なボックス自体がより大きなレイアウトの一部でなければ、それ自体はまったく役に立ちません。 まだチェックしていないのであれば、<a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">レイアウトの基本</a>を見てください。</p>

<div class="grammarly-disable-indicator"> </div>