タグの形を知ろう!

はじめに

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

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

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

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

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

今回の内容

今回は、HTMLのタグの形を学んでいきましょう。

タグの形って?

今まで何気なく学んできていたタグですが、実は2種類の形(要素)があります。
それが、「ブロック要素」と「インライン要素」です。(今回の記事はこの色分けでいきます)

ブロック要素タグが大きなかたまりとして存在しています。
対して、インライン要素ブロック要素の中身の部分というイメージです。

それぞれ特徴がいくつかありますが、まず覚えておきたいのは、

  • ブロック要素インライン要素は入れてもOK、その逆はダメ
  • ブロック要素縦に並び(改行が入る)インライン要素横に並ぶ

という2点です。
これがわかっていれば、見分けることと使い分けることができます。

それぞれを代表する便利なタグ

タグはどちらかの要素に分類されているわけですが、もっともわかりやすいものとして、<div>タグ<span>タグというものがあります。
どちらも要素を持っているだけのタグとなり、CSSでのレイアウト調整に使われます。

それぞれの使い方は、以下のような感じとなります。

<div>
  <p><span>構造の例</span></p>
  <img src="test.png" alt="テスト画像">
</div>

このように、ブロック要素には複数のタグを入れることができます(タグのルール上ダメなパターンもあります)
もちろん、divとpはブロック要素なので、spanで囲ってはいけません

よく使われる上記のような構成であれば、CSSでdivを指定するだけでその中身を丸々レイアウト調整できますよね。
というわけで、この2つのタグはこういった使い方が基本となります。

それでは、どのような形となっているのかを背景色とリンクの範囲を使って確認してみましょう。

実際にコーディング!

今回はHTMLファイルにdivとspanを指定します。
CSSファイルはそのままで大丈夫です。

実際の動作は以下の動画をご覧ください。

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

<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <title>タグの形を知ろう!</title>
  </head>
  <body>
    <a href="https://programming-school-advance.com/">
      <div>これはブロック要素です。</div>
    </a>
    <br>
    <a href="https://programming-school-advance.com/">
      <span>これはインライン要素です。</span>
    </a>
  </body>
</html>

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

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

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

さいごに

今回はタグの形についてお話をさせていただきました。
divとspanはよく使うタグなのでぜひ覚えておきましょう♪

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

ADVANCEでは

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

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

↓↓↓

アクティビティ詳細

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