４ボックスの装飾

CSSの新しい規格である「CSS3」では、グラデーションや影（ドロップシャドウ）といった、リッチな表現が可能になっています。

<div>で作ったボックスに、CSSのデザインを追加し、下のような角の丸い長方形を作成してください。<div> タグの範囲内には好きなメッセージを記入してください。

以下の作成例のように表示されるページ rensyu4.html を作成してください。

作成手順

先の問題と同様に、rensyu4.html と rensyu4.css を rensyu フォルダ内に新たに作成します。
rensyu4.html の本文は削除し、 rensyu4.css を読み込むよう、適宜修正します。
rensyu4.css の内容は削除して、空の状態にします。
HTMLを準備します。

好きなメッセージを記入し、スタイルシートが設定しやすいようにクラスを設定します。ここでは boxClass というクラス名にします。

<div class="boxClass">CSSを使った飾り罫線</div>

これでHTMLの編集は終わりです。（たったこれだけ）
スタイルシートの設定を行います。CSSファイルを開いてください。

まずページの背景色を変えます。背景色は、<body>に対して background-color プロパティを使って好きな色を設定してください。ここでは薄いグレー（#eeeeee）とします。

body { background-color: #eeeeee; }

ページ全体の背景色がグレーになりました。
<div>に対してスタイルシート設定を行い、ボックスを作ります。

背景色と罫線を設定します。ここでは boxClass に対して、背景色を background-color で、枠線を border で設定します。さらに、周囲に余白を設けるため、1文字（1em）分の margin と padding もそれぞれ追加し、余白を確保します。
```
body { background-color: #eeeeee; }

.boxClass { background-color: white;
            border: solid 1px #666666;
            margin: 1em;
            padding: 1em;
}
```
実行例

CSSを使った飾り罫線
<div>要素は通常、長方形で表示されますが、CSSを使って角を丸くできます。
角を丸くするには、border-radius プロパティを使用します。使い方は以下のとおりです。
```
border-radius: 角丸の半径;
(例)
border-radius: 0.5em;
```
角を丸くする border-radius プロパティの基本形

具体的には、以下のように設定します。
```
body { background-color: #eeeeee; }

.boxClass { background-color: white;
            border: solid 1px #666666;
            margin: 1em;
            padding: 1em;
            border-radius: 0.5em; }
```
実行例

CSSを使った飾り罫線

角が丸くなりました。 0.5em の部分を変更すれば、丸さが変わります。
<div> の内部にグラデーションのかかった色を塗ります。

グラデーションは、background プロパティに linear-gradient() という値を指定して設定します。

background: linear-gradient(to bottom, #ddeeff, #aabbdd);

上の例の場合、下方向（to bottom）に向かって、#ddeeff から #aabbdd へのグラデーションがかかります。

具体的には、以下のように設定します。（グラデーションの色は、好みで別の色を試してもかまいません）
```
body { background-color: #eeeeee; }

.boxClass { background-color: white;
border: solid 1px #666666;
margin: 1em;
padding: 1em;
border-radius: 0.5em;
background: linear-gradient(to bottom, #ddeeff, #aabbdd); }
```
実行例

CSSを使った飾り罫線

なお上の例を見ると background に関するプロパティが二箇所に存在してますが、問題はありません。ただし必ず背景色の指定より下の行にグラデーションの設定を書くようにしましょう。
```
.boxClass {
background-color: white;
　： 省略
background: linear-gradient(to bottom, #ddeeff, #aabbdd); }
```
linear-gradient( ) は比較的新しい機能なので、少し古い端末などでは対応しておらず、機能しないことがあります。
そこで、CSSの「後から書いた設定の効果が、それ以前の設定効果を上書きする」という仕様を利用して、どんなブラウザでもそれなりに表示されるようにするために、このようになっています。具体的には、以下のような動作になります。
1. グラデーション設定 linear-gradient( ) に対応しているブラウザでは、background-color: white; の効果がグラデーション設定によって上書きされ、問題なくグラデーションが表示されます。
2. 一方グラデーション設定に対応していない古いブラウザでは、グラデーション設定は無視されます。結果、background-color: white; の効果によって背景色が塗られます。
上記の仕組みによって、どんな機種のブラウザでもそれなりの表示が期待できるのです。
<div>に影をつけます。影は box-shadow プロパティで設定できます。

box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
影をつける box-shadow プロパティの基本形

box-shadow プロパティの設定のしかたは少々複雑なので、詳しく知りたい場合は「css box-shadow」などのキーワードでインターネット検索して調べてみましょう。
```
body { background-color: #eeeeee; }

.boxClass { background-color: white;
border: solid 1px #666666;
margin: 1em;
padding: 1em;
border-radius: 0.5em;
background: linear-gradient(to bottom, #ddeeff, #aabbdd);
box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2); }
```
実行例

CSSを使った飾り罫線

影をつけたことで立体感が生まれました。なんとなく高級な感じがしますね！
以上で完成です。

解説

CSSによる装飾デザイン

CSS では、さまざまなプロパティを駆使することで、凝ったデザインを表現できます。ここで紹介した、角を丸くするborder-radius、グラデーションを行うlinear-gradient()、影をつけるbox-shadow といった機能もデザインに貢献しています。

従来の HTML では、こういったデザインは画像などで表現するしかなく、データ容量の増大や、HTML の複雑化が問題になっていました。しかし CSS を使えば、複雑なデザインを行っても、HTML は比較的シンプルなままで、可読性を高く保つことができます。

デザインに関するプロパティは、他にもまだまだあるので、気になる場合は各自検索などして調べてみましょう。

角を丸める border-radius

通常ボックスは角がある長方形として描かれますが、border-radiusプロパティは角を丸めることができる特殊なプロパティです。

「10px」のような値を設定すると、角の丸さを調整できます。なおこの数字は角丸の円の半径を意味しています。

5px

10px

20px

30px

40px

ちなみに値として「50%」と設定すると、円を描けます。

50%

様々な場所で円が使えることでデザインの可能性が広がります。

以下はborder-radiusを使ったデザインの例です。こんなこともできるという参考にしてください。

<div class="RoundMark">404</div>

.RoundMark {
  width:100px; height:100px;    /* 要素の幅と高さを100pxに設定 */
  background-color:#66cc44;     /* 背景色を緑色に */
  border-radius:50%;            /* 角を丸くして円にする */
  line-height:100px;            /* １行の高さを100pxに設定（上下中央に文字を書くため） */
  text-align:center;            /* 要素内の文字を左右中央揃えにする */
  font-size:45px;               /* 文字の大きさを指定 */
  color:white;                  /* 文字の色を白色に */
  font-weight:bold;             /* 文字の太さを太文字に */
}

404

border-radius の使い方はやや難しいので、詳しい使い方は検索して調べてみましょう。

４ ボックスの装飾

作成例

作成手順

解説

CSSによる装飾デザイン

角を丸める border-radius

４ボックスの装飾