CSS入門講座|背景ついて学ぼう

CSS
CSS講座
アイカ
アイカ

う~ん・・・

ユウキ
ユウキ

どうしたのアイカちゃん?

アイカ
アイカ

あ、ユウキくん!

実は・・・この画像の上に文字をのせたいんだけど、上手くいかなくって・・・

アイカ
アイカ

これ、どうにかできないかなぁ~

<!-- 見えない部分の設定 -->
<!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>
うさタブ
うさタブ

その願い、叶えてしんぜようッピ・・・!

うさタブ
うさタブ

うさタブに任せるッピ! 3分で片付けるッピよ~!

この記事で学べること
  • 背景画像の設定
  • 背景の色を設定する
  • 背景を画面を1度だけ表示する
  • 背景を画面いっぱいに表示する

スポンサーリンク
スポンサーリンク

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;
}

ユウキ
ユウキ

できてるじゃん!

うさタブ
うさタブ

でもアイカちゃんがやりたいことは、きっとこれではないッピな~?

アイカ
アイカ

うん・・・

この花火を沢山じゃなく、真ん中に1つだけ表示したかったの・・・

背景画像を1度だけ表示する

うさタブ
うさタブ

もちろん、背景画像を1度だけ表示するやり方もあるッピ!

真ん中にやる方法もあるッピヨ!

うさタブ
うさタブ

<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 プロパティはほぼ1つにまとめることができるッピ!

例えば

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; 背景を画面を1度だけ表示する
  • background-size: cover; 背景を画面いっぱいに表示する
  • background-size: contain; 背景を画面内に収めるように表示する
  • これらをまとめて、background: url( ファイル名) #000000 no-repeat cover ; のような形で記述することができる

うさタブ
うさタブ

上手くできたッピか?

これからも色んなCSSの基礎解説をしていくッピ!

次回も楽しみにしているッピよ~~!

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うさタブ!

オレ、もっと本格的にゲームが作りたいんだ

アイカ
アイカ

私もだわ!

もっとたくさん実用的なコードを

学ぶことってできないかしら?

うさタブ
うさタブ

おお、2人ともやる気ッピね!

ゲームの作り方を学ぶなら、コレとかどうッピか?


うさタブ
うさタブ
Udemy」テレビでも有名な動画教材
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

2DアクションRPG脱出ゲーム

3Dゲーム制作講座まで

買い切り講座だからいつでも勉強し放題ッピよ~!

ユウキ
ユウキ

お!いいじゃん!

アイカ
アイカ

あと、どこか素敵な素材を売っているところはないかしら? 公式の素材販売だと、クレカ支払いしかなくて・・・

ユウキ
ユウキ

小学生じゃクレカで支払えないぜ~

うさタブ
うさタブ

ゲームの素材を買いたいなら、

DLsiteBoothとかどうッピか?

うさタブ
うさタブ

素敵なドット絵や音楽素材がいっぱい売ってるッピ!

うさタブ
うさタブ

しかもUnityアセットストアと違って

クレカ支払いじゃなく、コンビニ支払いができるのもポイントッピ!

ユウキ
ユウキ

すげーカッコいい素材がいっぱいある!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク
CSSプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました