タグに名前をつけよう!

はじめに

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

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

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

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

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

今回の内容

今回は、タグに名前をつける方法を学んでいきましょう。

名前をつける必要性について

まず、名前をつける必要性について説明しておきます。
記事『タグの形を知ろう!』で、空の要素であるdivspanについて解説し、その中で「複数の要素をまとめて変更するときに役立つ」という話もしたと思います。

ただ、どうしてもタグごとに設定したいレイアウトは違ってきますし、設定できる数にも限界があります。
そこで、「タグに名前を付けてその名前で判別しよう!」というのが

名前をつけるための属性

そこで、名前をつけるためにid属性とclass属性というものがあります。
これらの違いを簡単に説明すると、1つのページ内で使える回数が違います。
idは同一の名前を1度しか使えませんが、classであれば複数回使用できます

詳細はコーディングの項でアップしているファイルにある解説をご覧いただけると幸いです。

実際にコーディング!

それでは、コーディングしてみましょう。
実際の動作は以下の動画をご覧ください。

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

<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <title>タグに名前をつけよう!</title>
  </head>
  <body>
    <!-- pにidで"id"と名付けてみよう! -->
    <p id="id">これは"id"です。</p>

    <!-- divにclassで"class"と名付けてみよう! -->
    <div class="class">
      <p>これは</p>
      <p>"class"</p>
      <p>です。</p>
    </div>

    <!-- pにclassで"class"と名付けてみよう! -->
    <p class="class">複数の"class"にレイアウト変更を行うことができます。</p>
  </body>
</html>

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

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

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

さいごに

今回はタグに名前をつけることについてお話をさせていただきました。
classについては必須知識ですので、必ず覚えておきましょう♪

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

ADVANCEでは

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

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

↓↓↓

アクティビティ詳細

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