う～ん・・・
どうしたのアイカちゃん？
あ、ユウキくん！
実は・・・この画像の上に文字をのせたいんだけど、上手くいかなくって・・・
これ、どうにかできないかなぁ～
<!-- 見えない部分の設定 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
p {color: #CCCCCC;}
</style>
</head>
<!-- 見える部分の内容 -->
<body>
<p><img src="hanabi.jpg" /></p>
<p>真夏の花火</p>
</body>
</html>
その願い、叶えてしんぜようッピ・・・！
うさタブに任せるッピ！ ３分で片付けるッピよ～！
- 背景画像の設定
- 背景の色を設定する
- 背景を画面を１度だけ表示する
- 背景を画面いっぱいに表示する
CSSの背景について学ぶ
必要なものをそろえよう
- メモ帳
- 背景にしたい画像
が必要になるッピヨ～
元になるコード
<!-- 見えない部分の設定 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
body{
}
p {
color: #CCCCCC;
height: 500px;
width: 333px;
background-image: url(hanabi.jpg);
}
</style>
</head>
<!-- 見える部分の内容 -->
<body>
<p>真夏の花火</p>
</body>
</html>上のコードを元に学習していくッピ！
【メモ帳】にコピーして用意するッピネ！
最終的にはこんな感じになるッピよ～
ホームページに背景をつけてみよう
さっそくCSSで背景をつけてみるッピ！
<style></style>のpセレクタの間に
background-image: url(画像ファイル名);と入力するッピネ！
今回は【hanabi.jpg】というファイル名なので
background-image: url(hanabi.jpg);と入力するッピヨ
p {
color: #CCCCCC;
height: 500px;
width: 333px;
background-image: url(hanabi.jpg);
}
すごい！ 文章の後ろに画像が載せられたよっ！
ふふふふ、これがプログラミングのちからッピ！
まだまだ終わらないッピヨ～
背景の色を変更する
でもさーこれ、なんか画像が黒くて浮いてね？
後ろのページも黒い方がいいんじゃねーの？
そうね・・・
どうにか、背景の色を変えるってできないかなぁ？
ふふふふ、お安いご用ッピヨ～
そんなときは、『body』にCSSを設定するッピネ！
<style></style>の【body】の間に
body{
background-color: #000000;
}と入力してみるがッピよ～
body{
background-color: #000000;
}
p {
color: #CCCCCC;
height: 500px;
width: 333px;
background-image: url(hanabi.jpg);
}
おおお、すげえええええ！
背景が真っ黒になったわ！
背景画像を設定するbackground-image
背景画像を設定するには
background-image: url(ファイル名);プロパティを使うッピヨ～
もちろん body 以外のセレクタ に使うことができるッピ！
背景色を設定するbackground-color
背景色を設定するには
background-color: カラーコード;プロパティを使うッピネ！
背景を画面いっぱいに表示させたい
ねえウサタブさん、この画像・・・画面いっぱいに表示させるってことできないかなぁ？
ぬーむ、このサイズの画像は解像度が低いゆえ、
あまり拡大には向いてないッピが、
一応方法はッピあるヨ～
<style></style>の p クラスタの width: を100%;に変更して、下のCSSを加えるッピ！
width: 100%;
background-size: cover;と入力するッピネ！
p {
color: #CCCCCC;
height: 700px;
width: 100%;
background-image: url(hanabi.jpg);
background-size: cover;
}
なんか・・・
すごいことになってるな・・・
画像の解像度が低いとこうなってしまうッピ・・・
こんなときは、値を変えて
background-size: contain;で試してみるッピよ～！
p {
color: #CCCCCC;
height: 700px;
width: 100%;
background-image: url(hanabi.jpg);
background-size: contain;
}
できてるじゃん！
でもアイカちゃんがやりたいことは、きっとこれではないッピな～？
うん・・・
この花火を沢山じゃなく、真ん中に１つだけ表示したかったの・・・
背景画像を１度だけ表示する
もちろん、背景画像を１度だけ表示するやり方もあるッピ！
真ん中にやる方法もあるッピヨ！
<style></style>のpクラスタに
background-repeat: no-repeat;
background-position: center center;と追加するッピよ～
p {
color: #CCCCCC;
height: 700px;
width: 100%;
background-image: url(hanabi.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
すごい！ これがやりたかったの！
うまくいったなアイカちゃん！
背景画像を画面いっぱいに表示するbackground-size: cover;
background-size: cover; は画像を画面いっぱいに表示するタグッピ！
画像を画面に収まるように表示するbackground-size: contain;
background-size: contain; は、画像を画面（bodyやp,divなどのブロック）の中に収めるようにするプロパティッピ！
背景画像の繰り返し設定を決めるbackground-repeat:
次は画面を一度だけ表示する
background-repeat: no-repeat;コードがあるッピ！ 他にも
ヨコだけリピートする
background-repeat: repeat-x;タテを繰り返す
background-repeat: repeat-y;等があるッピ！
背景の配置を決めるbackground-position:
背景の配置を決めるには background-position: プロパティを使うッピ！
- 左右中央：left center right
- 上中下： top center bottom
が使用できるッピよ～！
最後に、background プロパティはほぼ１つにまとめることができるッピ！
例えば
background: url(hanabi.jpg) no-repeat center center;
background-size: contain;
といった感じッピネ！
背景だけでこんなに沢山のコードがあるなんて・・・
またひとつ勉強になったな！
全体のコードの確認
<!-- 見えない部分の設定 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
body{
background-color: #000000;
}
p {
color: #CCCCCC;
height: 700px;
width: 100%;
background: url(hanabi.jpg) no-repeat center center;
background-size: contain;
}
</style>
</head>
<!-- 見える部分の内容 -->
<body>
<p>真夏の花火</p>
</body>
</html>- background-image: url(ファイル名); で背景画像を設定する
- background-color: カラーコード; で背景の色を設定する
- background-repeat: no-repeat; 背景を画面を１度だけ表示する
- background-size: cover; 背景を画面いっぱいに表示する
- background-size: contain; 背景を画面内に収めるように表示する
- これらをまとめて、background: url( ファイル名) #000000 no-repeat cover ; のような形で記述することができる
上手くできたッピか？
これからも色んなCSSの基礎解説をしていくッピ！
次回も楽しみにしているッピよ～～！
