11 背景画像と半透明の演出

CSSでは、背景に画像を敷き詰めることができることはすでに説明しましたが、大きな画像でページ全体をカバーするように配置することもできます。

また、半透明機能を使用することで、さらに特殊な効果を得ることができます。

このページの背景のような効果が得られる rensyu11.html を作成してください。

作成手順

背景に配置するための画像を用意します。ここでは以下の画像を使用します。

yama01.jpg

「右クリック」→「画像を名前をつけて保存」などで、rensyuフォルダ内に保存してください。

もしも、さらに高画質な映像を使用したい場合は、お好みでこちらの高解像度版の画像を使ってください。（細かく描写されますが、データ容量が大きく、「重い」ページになります）
上の画像をページの背景に配置します。しかしタイル状に敷き詰めるのではなく、ページ全体をカバーするように配置します。ページ全体をカバーするように画像を配置するには background-size: cover; と設定します。

<body>に以下の設定行い、背景画像を配置します。

body {
width:100%;
background: url('yama01.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

　

ウインドウの横幅を大きくしたり小さくしたりして、画像がページ全体をカバーしていることを確認してください。

デスクトップ上のファイルを直接ダブルクリックして表示を確認しても、Internet Explorer の場合、正しく表示されないかもしれません。もし正しく表示されない場合は、必要なファイル（HTML、CSS、画像ファイル）をすべてサーバーにアップロードし、「http://～」のようなURLでページにアクセスして表示を確認しなおしてください。
ページ上に直接文字を表示させると背景と重なって読みにくいので、白い背景を設定し、すこしだけ画像が見えるように半透明に設定します。

以下のように設定します。

　：省略 <body> <div class="main"> ここには自由な文章を記入してください。<br>
何行か記入した方が結果が分かりやすいです。<br>
なんとかかんとか<br>
なんとかかんとか<br>
</div> </body> 　：省略
```
.main {
width:800px; /* 幅を800ピクセルに固定します */
background-color:rgba(255,255,255,0.85);
             /* 背景色を白色にし、透明度を「0.85 (85%)」にして半透明にします */
margin:1em auto;
             /* マージンを設定し、周囲に余白を作ります */
padding:1em; /* 文字と周囲との間に余白を作ります */
}
```
これはサンルテキストです。
これはサンルテキストです。
これはサンルテキストです。
これはサンルテキストです。
これはサンルテキストです。

以上で設定完了です。

解説

背景画像の配置方法

上の例では、<body>に対して background 関連のプロパティを設定することで、画像を配置しています。

background: url('yama01.jpg') no-repeat center center fixed;

上の設定は、１行で以下の４行分の設定と同じ効果を持っています。

background-image: url('yama01.jpg'); /* 背景に配置する画像を指定します */ background-repeat: no-repeat; /* 背景をタイル状に敷き詰めません */ background-position: center center; /* 背景を上下左右中央揃えで配置します */ background-attachment fixed; /* ページをスクロールしても背景を移動させません */

ページ全体をカバーするように背景配置を配置するためには、background-size プロパティを使用します。

-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

ちなみに -webkit- や -moz- -o- といった文字が行頭についているものは、ベンダープレフィックスと言って、Chrome や Firefox のようなさまざまなブラウザで同様の効果になるよう対応させるおまじないです。

半透明の設定方法

上の例では、半透明背景のためのボックスを<div>で作り、スタイルシートで設定しやすいように「main」という名前のクラスをつけています。

そして、CSSでは「main」クラスに対して設定を追加しています。

.main {
width:800px; /* 幅を800ピクセルに固定します */
background-color:rgba(255,255,255,0.85);
             /* 背景色を白色にし、透明度を「0.85 (85%)」にして半透明にします */
margin:1em auto;
             /* マージンを設定し、周囲に余白を作ります */
padding:1em; /* 文字と周囲との間に余白を作ります */
}

ここでは半透明を表現するために、特殊な色の指定方法を使用しています。

background-color: rgba(255,255,255,0.85);

「rgba(255,255,255,0.85)」の部分が半透明の白色を表しています。この色を background-color に設定することで、背景色を半透明の白色にしています。

通常 background-color には、カラーネーム（white）やカラーコード（#ffffff）を使って色を指定しますが、「rgba( )」を使って色を設定することもできるのです。

rgba( ) を使うと、通常の色の他に半透明色も表現できます。「( )」の中には、赤、緑、青の明るさをそれぞれ 0 ～ 255 の整数で記入し、最後に透明度を 0～1 の小数で指定します。

rgba( 赤の明るさ, 緑の明るさ, 青の明るさ, 透明度 )

赤・緑・青の明るさは、0 が最も暗く、255 が最も明るいです。（すべて255に設定すると、白色になります）

透明度は、0 が完全な透明で、1 が完全な不透明です。例えば 0.85 に設定すると、わずかに半透明になります。

#ff8800 のような「カラーコード」の場合は、00 ～ FF の16進数で色の明るさを指定しますが、rgba( ) を使う場合は、0 ～ 255 の10進数で指定する必要があるので注意が必要です。

rgba( )の詳しい使い方については、検索するなどして調べてみましょう。

余白 ( margin ) の設定

margin:1em auto;

margin プロパティや padding プロパティには、２つの値を指定することもできます。この場合、前者が上下方向のマージン、後者が左右方向のマージン値となります。（上下・左右と覚えると良いでしょう）

width が固定されている場合に、左右方向マージンを auto に設定すると、親要素（<body>=ページ全体）の左右中央に配置されるようになります。この特徴を利用して、margin は要素を中央揃えする用途にも使われます。

つまり上の例は、上下方向に「1em」の余白、左右方向は中央揃えするという効果があります。

なお、margin や padding プロパティに４つの値を指定することもできます。この場合、先頭から順番に上・右・下・左方向のマージン値となります。上から時計回りと覚えると良いでしょう。

margin: 0 1em 1em 2em;

上の設定は、１行で以下の４行分の設定と同じ効果を発揮します。

margin-top: 0; /* 上方向マージンなし */ margin-right: 1em; /* 右方向 1文字分マージン */ margin-bottom: 1em; /* 下方向 1文字分マージン */ margin-left: 2em; /* 左方向 2文字分マージン */

このように margin や padding プロパティの挙動には少々癖がありますが、参考にしてください。

11 背景画像と半透明の演出

作成例

作成手順

解説

背景画像の配置方法

半透明の設定方法

余白 ( margin ) の設定