背景を変えてみよう!

はじめに

皆様、お疲れ様です。
プログラミングスクールADVANCEの福島です。

Scratchが小学校の授業にも導入されるようになり、Scratchでのゲームクリエイターが増えてきました。
そして、来年以降は中学校・高等学校でもプログラミングの授業を追加することが予定されています。

ということで、僕の担当回ではScratchより難しい、文字で作成する本格派プログラミングを担当させていただきますので、よろしくお願いしますね♪

※当校の授業・ブログでは「VSCode」を使った説明をさせていただくことになりますので、インストールをお勧めします。
インストール手順はこちらをご覧ください。

※当ページに関係のある過去記事は以下の通りですので、先にご覧いただくことをお勧めします。
HTMLの基礎  CSSの基礎  ショートカットキー

今回の内容

今回は、webページの背景の変え方を学んでいきましょう。
もちろん、前回に引き続きCSSを使っての変更です。

CSSの書き方

背景変更の前に、前回説明できなかったCSSの書き方について説明しておきます。

CSSでは、はじめにhtmlで設定したタグを指定して、そのあとに変更したい内容を記述します。
と、言葉だけではわかりづらいと思うので、前回使用したcssファイルの中身をみてみましょう。

p {
  font-size: 20px;
  color: red;
}

上記のコードで言うと、まずpのタグを変更しますと言う宣言をし、その後{}で囲った部分に変更内容を書いています。
ここでは、文字の大きさを20pxにするのと文字色を赤色に変更しています。

このように、一度の記述で複数のタグに変更を加えることができるため、スタイルの変更は基本的にCSSで行います。

それでは、試しに背景を変更してみましょう。

実際にコーディング!

背景を変えるには、 CSSでbackgroundを指定します。
色を変える場合は「background-color」、画像にする場合は「background-img」と言うように記述します。
実際の動作は以下の動画をご覧ください。

以下のコードをコピペしてもOKです♪

body{
  /* このコメント文の下に背景変更のコードを書いてみよう。*/
  background-color: lime;
}

以下のzipファイルにhtmlファイルや解説等の必要データをまとめていますので、ダウンロードして同じ様に動かしてみましょう。

今回は《style.css》というファイルを用意していますので、動画と同じ様に動かしていただければ大丈夫です。
※動画内ではショートカットキーを使用しています。ショートカットキーについてはこちらをご覧ください。

手順は「記述→保存→表示の確認」となります。
表示の確認は『文字を表示してみよう!』の記事をご覧ください。

さいごに

今回は背景の変更についてお話をさせていただきました。
ページを見る人の気持ちになって、よりよい背景を設定しましょう♪

それでは、ご覧いただきありがとうございました!

ADVANCEでは

ゲーム制作をメインとして小学生・中学生・高校生に向けてのプログラミング教室を運営しております。

無料のイベント(アクティビティ)も開催しているのでご覧くださいね☆

↓↓↓

アクティビティ詳細

また、解説ブログは随時更新!
更新日時は公式ホームページでご確認ください☆