階層を理解しよう!

はじめに

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

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

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

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

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

今回の内容

今回は、階層について学んでいきましょう。

階層とは

みなさんが想像する階層のイメージは「ビルのような上下に重なった階」だと思います。
そして実は、プログラミングでも同じなんです。

たとえば、大型ショッピング施設をイメージしてもらうと良いでしょうか。
多くの施設は、地下が駐車場、1階が食品売り場、2階が日用品、…というような作りになっていると思います。
これを無理やりhtmlで表現するなら、こうなります。

<大型ショッピング施設>
  <地下>
    <駐車場></駐車場>
  </地下>
  <1階>
    <食品></食品>
  </1階>
  <2階>
    <日用品></日用品>
  </2階>
</大型ショッピング施設>

実はこの構造、知らず識らずのうちにみなさん使っていますよね。
ここまでブログを読んでくださっているみなさんならhtmlで、PCを使っている方はフォルダやファイルの整理で、ネットサーフィンしている方はURLで見覚えがあると思います。

階層を指定してみよう!

今回の本題はここから。
CSSでタグや名前を指定するというのは、過去に解説しましたよね。
ただ、それでももっと指定を詳細にしていきたい場面も出てくると思います。

そこで、この階層を指定する方法を学んでいきましょう。
実際に使用する階層は以下の通りです。

<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <title>階層を理解しよう!</title>
  </head>
  <body>
    <p>ここは変わりません。</p>

    <div>
      <p>ここは赤色になります。</p>
    </div>

    <div>
      <p class="blue">ここは青色になります。</p>
    </div>
  </body>
</html>

今回はこれらの文字色を変えてみましょう。

実際にコーディング!

CSSでの階層指定は、「タグ名または名前」「半角スペース」「タグ名または名前」というように行います。
実際の動作は以下の動画をご覧ください。

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

/* div内のpに赤色を設定しましょう */
div p{
  color: red;
}

/* div内のclass="blue"に青色を設定しましょう */
div .blue{
  color: blue;
}

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

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

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

さいごに

今回は階層についてお話をさせていただきました。
普段何気なく使っていることを理解するのも大切ですよね♪

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

ADVANCEでは

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

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

↓↓↓

アクティビティ詳細

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