０からサイト制作を学ぼう！ ７ – CSS(背景の変更) –

@charset "UTF-8"; 
h1{
color:red;
}
p{
color:blue; 　font-size:20px;
}
body{
background-color: yellow; /*　この一文を追加 */
}

style.cssを開き、仮にbodyのbackground-colorを黄色に設定してみましょう。

上のように表示されれば成功です。青や緑などにも変更してみましょう。
もっと細かく色を指定したい場合、カラーコードやRGBを使用します。

カラーコードやRGBで色を指定したいけど、指定したい色の数値がわからない。

必要な色を知るには、Googleで「カラーピッカー」と検索してください。

そうすると、ページ上部に色のスライダーが表示されます。
ここで、好きな色を選んでカラーコードやRGBを取得します。

例えば、上の画像の色をカラーコードで取得する場合は、

body{
background-color: #3a485e;
}

RGBで取得する場合は、

body{
background-color: rgb(58,72,94);
}

となります。どちらで指定しても構いません。

次は、画像を背景に設定してみましょう。
まず、背景に設定したいjpgやpngのファイルをindex.htmlと同じフォルダに用意します。
仮の背景としてsample.jpgを用意しました。

@charset "UTF-8";
h1{
color:red;
} 
p{
color:blue; 　font-size:20px;
}
body{
background-image: url(sample.jpg);
}

これで画像の指定ができましたが、背景は画像を画面いっぱいに表示する必要があります。
そこで使用するプロパティがbackground-sizeです。
値は「cover」「contain」で指定しますが、画面いっぱいに表示したい場合は「cover」を使います。
「contain」は画像の縦横比を保持して画像をすべて表示させるようにするもので、画像は全体が表示されますが、背景に余白ができてしまったりします。
今回は、画面全体に画像を表示させたいので「cover」を使用します。

@charset "UTF-8";
h1{
color:red;
} 
p{
color:blue; 　font-size:20px;
}
body{
background-image: url(sample.jpg);
background-size: cover;  /* この一文を追加 */
}

このように背景が変わると思います。
今回はここで終わります。ぜひ復習をしてみてください。