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の基礎解説をしていくッピ!

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

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

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

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

ちびっこのみんな、スクールで
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

ちびっこのみんなは、スクールで
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

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

CSSCSS基礎プログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました