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

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

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

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

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

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

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

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

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

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

アイカ
アイカ

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

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