Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSS
入門編

トップページ
CSS入門編 - 背景画像を指定してみよう

背景画像を指定してみよう

アップルさんのキャッチコピーはいつもものすごい直球な直訳でたまに笑っちゃうのですがなんだか妙な説得力を感じます。

というわけでみなさまどうもこんにちわ。

続いて背景画像を指定してみましょう。

背景画像を指定できるプロパティは『background-image』です。そして『background-image』プロパティはブロックレベル要素やインラインレベル要素などほぼ全ての要素に指定することが可能です。

『image/img1.png』を読み込むとした場合の記述例は以下のような感じになります。

p {
    width: 300px;
    height: 300px;
    background-image: url("image/img1.png");
}
div {
    width: 300px;
    height: 300px;
    background-image: url('image/img2.png');
} 
span {
    background-image: url(image/img2.png);
}

注目すべきは値の記述方法です。このような形で記述します。

url("ここに画像のパス");

上記のように括弧の中に画像のパスを記述します。
※パスについて忘れちゃった方はこちらへ

さて、最初の記述例で『url()』のパスの記述部分に少し違いがありますね。『'』(シングルクォーテーション)と『"』(ダブルクオーテーション)で括られているもの、そして括られていないものがあります。これ、基本的にどの記述方法でも構いません。以下すべて正解です。

url("image/img1.png");
url('image/img1.png');
url(image/img1.png);

ただしディレクトリ名やファイル名に半角スペースが含まれていたりする場合は『"』か『'』で括る必要があります。その場合は注意してくださいね。

画像を相対パスで記述する場合、HTMLファイルにインラインでCSSが記述されていた場合はそのHTMLファイルからの相対パスとなりますが、外部スタイルシートに相対パスが記述してある場合はその外部スタイルシートからの相対パスになりますのでご注意下さい。

基本的にLinux系のOSとunix系のOSではディレクトリ名やファイル名に半角スペースを含めることはNGです。ファイル名などに半角スペースが含まれている場合、様々な処理の過程でバグを引き起こす可能性があります。

少しむずかしい話になってしまいますが、みなさんが普段見ているウェブサイトのサーバーは大多数がLinuxOSです。

将来みなさんはレンタルサーバーなどを借りて自身で作ったウェブサイトを公開することもあるかと思います。そのレンタルサーバーはほぼ全てLinuxOSです。なぜかというとLinuxOSは無料だからでございます。低料金なレンタルサーバーサービスを展開するならば大人の事情でLinuxOSになってしまうのです。

つまりウェブ関係で仕事をしていたりすると知らず知らずのうちにLinuxOSと関わってしまうことが多いということです。

というわけでみなさんもウェブサービスで使用するディレクトリ名やファイル名などに半角スペースを使用しないよう注意してください。『_』(アンダースコア)などで代用するようにしましょう。

『background-image』プロパティの初期値は『none』となっています。何も指定してないよ、という意味ですね。これも覚えておきましょう。

さてでは実際にファイルを読み込ませて記述してみましょう。

いつもどおりHTMLファイルを用意してください。今回はstyle要素に記述していきます。

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<meta charset="utf-8"> 
<title>CSS 練習中！</title>
<style>

</style>
</head> 
<body> 

<div class="bk_img">横幅100%高さ500pxのdiv要素だよ</div>

</body>
</html>

ではstyle要素に以下のように記述してみましょう。当サイトのサーバーに置いてあるサンプル画像を使用したい場合は以下のようにurlを指定してください。練習がてら、ご自身で画像ファイルを用意してみるのも一興かと思います。

div.bk_img {
    height: 500px;
    background-image: url(https://wp-p.info/reps/css-beginner/img/19_01.jpg);
}

では組み込みして

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<meta charset="utf-8"> 
<title>CSS 練習中！</title>
<style>
div.bk_img {
    color: white;
    height: 500px;
    background-image: url(https://wp-p.info/reps/css-beginner/img/19_01.jpg);
}
</style>
</head> 
<body> 

<div class="bk_img">横幅100%高さ500pxのdiv要素だよ</div>

</body>
</html>

ブラウザで表示させてみましょう。

このような形になったかと思います。

サンプルをみてみる。

問題なく表示されたでしょうか？なんだかちょっと変な感じがしますね。ちなみに今読み込ませた元の画像はこちらになっています。大きさもそのままです。猫ちゃんです。

(´-`).｡oO（ちなみに画像は写真素材ぱくたそ様より拝借させて頂いています。)
(´-`).｡oO（素敵な画像がいっぱいありますので素材をお探しの方はぜひ。)

なんだか一枚の画像が繰り返し表示されているようですね。これが『background-image』プロパティで画像を配置した場合のデフォルトの表示方式となります。初期値では画像が繰り返しで配置されます。

では背景画像の繰り返し方法を変更してみましょう。それを指定できるCSSプロパティは『background-repeat』です。

記述例はこちらです。

p {
    background-image: url(https://wp-p.info/reps/css-beginner/img/19_01.jpg);
    background-repeat: no-repeat;
}
div {
    background-image: url(https://wp-p.info/reps/css-beginner/img/19_01.jpg);
    background-repeat: repeat-x;
}
span {
    background-image: url(https://wp-p.info/reps/css-beginner/img/19_01.jpg);
    background-repeat: repeat-y;
}

取れる値は以下となります。

repeat	背景画像が縦横繰り返しで表示されます。これが初期値です。
no-repeat	繰り返し表示なし(1回だけしか表示しないという意味です)
repeat-x	x軸方向(横方向)にのみ繰り返し表示
repeat-y	y軸方向(縦方向)にのみ繰り返し表示

こちらもよく使うプロパティなので覚えておきましょう。というわけで先ほど記述したソースをちょっと修正して繰り返ししないようにしてみます。

以下の様な感じになりますね。

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<meta charset="utf-8"> 
<title>CSS 練習中！</title>
<style>
div.bk_img {
    color: white;
    height: 500px;
    background-image: url(https://wp-p.info/reps/css-beginner/img/19_01.jpg);
    background-repeat: no-repeat;
}
</style>
</head> 
<body> 

<div class="bk_img">横幅100%高さ500pxのdiv要素だよ</div>

</body>
</html>

んでもってサンプルは以下へどぞ。

サンプルをみてみる。

どうでしょうか。背景画像が繰り返しで表示されてなければバッチリです。

さて、この『background-image』ですがちょっとだけやっかいなことがあります。背景画像の読み込みが失敗してもブラウザは何にも教えてくれません。なのでバグを出しているのか何なのか気づきにくいところがあります。

というわけでよく初心者の方が
「background-imageを記述したのに画像がでねぇぜ…久しぶりに…キレちまったよ…」
となってしまいがちな注意点を上げていきたいと思います。

まず要素の幅や高さが0になっていないか注目してください。特にブロックレベル要素では要素の中身が空だと横幅は親要素の幅100%になりますが高さが0になります。つまり見えません。インラインレベル要素でも中身が空だと幅が0になるのでこれまた見れません。img要素に画像を指定した場合はデフォルトで画像の大きさと同じ大きさの要素として表示されるので要素のサイズを気にせず表示させることができますが『background-image』プロパティで背景画像を指定した場合はそういう振る舞いになりません。背景画像の大きさと要素の大きさは連動しませんので注意です。まずはこの辺を確認してみましょう。

次に画像のパスが間違っていないか、ですね。img要素のsrc属性で画像を指定した場合はパスが間違えていてもブラウザが自動で四角い枠を作ってくれたりするので視覚的に確認することができますが、『background-image』プロパティの場合は『none』、つまり背景画像を指定していない状態と同じになります。「パスが間違えているよ！」とブラウザは教えてくれません。ただ黙って『none』になります。こちらもミスしやすい点なので注意しましょう。

というわけでCSSの背景画像の指定についての基本的なところは以上となります。いかがだったでしょうか。

背景画像を自分のイメージ通りに指定できると創作の幅が広がりますのでバッチリ覚えてしまいましょう。

さて、ここまでお読み頂き誠にありがとうございました。今回の記事がCSS入門編の最後の項目になります。次の記事で総まとめをしていきたいと思いますのでそこで今までやってきたことを確認していきましょう。

ではまたお会いしましょう。

この記事は桜舞が執筆致しました。