IP01-08 WebページとWebサイトの仕組み｜スターAI・情報塾教材

情報活用編プラス

第2章「コミュニケーションと情報デザイン」

IP01-08

WebページとWebサイトの仕組み

HTMLの記述方法

学習の目的

1. タグを記述しないWebページの表示を確認する
2. タグを記述したWebページの表示を確認する
3. 自己紹介ページのHTML構造を確認する
4. セクションの定義
5. 表示内容を作るタグ

簡単な自己紹介の文章を例に、HTMLをどのように記述してWebページを作成するか確認しましょう。

1. タグを記述しないWebページの表示を確認する

簡単な自己紹介をWebページとして表示します。

次の文章は、簡単な自己紹介文です。

項目ごとに改行して、分かりやすく作成しています。

私の自己紹介ページ

プロフィール
こんにちは！私は目田　育人です。高校1年生で、Webデザインを勉強中です。

趣味
・読書
・プログラミング
・サイクリング

連絡先
インスタ：https://www.instagram.com/○○

タグを記述しなくてもWebページとして見ることができるのですか？

はい。タグを記述していなくてもWebブラウザでWebページとして表示することができます。

このページをWebページとしてWebブラウザで見るとどのように表示されるでしょうか？

下記のリンクボタンからWebブラウザで表示してみましょう。上記の内容がWebページとして表示されます。

タグのないWebページを開く

Webブラウザで表示を行うと次のように表示されます。

タグのないWebページの表示

Webブラウザで自己紹介のWebページを見ると、おかしな所は無いですか？

あれ？改行されないで表示されてる？？？

ファイルの内容は改行されているのに、Webブラウザで見るとすべてつながって表示されるのはなんでだろう？

そうなのです！Webページは、ファイルの内容を改行していてもWebブラウザで見ると、改行せず、続けて表示をします。

改行したい場合は、<br>タグや<p>タグを使って改行を行います。

2. タグを記述したWebページの表示を確認する

同じ自己紹介を標準的なタグを使って表示します。

標準的なタグを入れた例を見てみましょう。

<DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>私の紹介ページ</title>
  </head>
  <body>
    <main>
      <section>
        <h1>私の自己紹介ページ</h1>
      </section>
      
      <section>
        <h2>プロフィール</h2>
        <p>こんにちは！私は目田　育人です。高校1年生で、Webデザインを勉強中です。</p>
      </section>

      <section>
        <h2>趣味</h2>
        <ul>
          <li>読書</li>
          <li>プログラミング</li>
          <li>サイクリング</li>
        </ul>
      </section>

      <section>
        <h2>連絡先</h2>
        <p>インスタ：<a href="https://www.instagram.com/○○">https://www.instagram.com/○○</a></p>
      </section>
    </main>
  </body>
</html>

上のHTMLファイルを下記のリンクボタンからWebブラウザで表示してみましょう。

タグをつけたWebページを開く

Webブラウザで表示を行うと次のように表示されます。

タグを記述したWebページの表示

おー　改行されているし、見出しが見出しっぽくなってる！

箇条書きもきちんとできてるし、見やすいですね。

表示している内容は同じですが、タグを使って、見出しや、段落、箇条書き(リスト)など、文章の意味をタグで定義するだけで、きちんと見やすく作ることができます。

続いて、今回の自己紹介で使ったHTMLの内容を確認しましょう。

3. 自己紹介ページのHTML構造を確認する

今回の自己紹介Webページは、大きく4つの「タイトルセクション」、「プロフィールセクション」、「趣味セクション」、「連絡先セクション」に分けられます。

セクションは、見出し単位で作成します。

ということは、太字になっている部分ですね。

はい、そうです。

見出しを先頭に、関連する内容をセクションを単位として記述します。

4. セクションの定義

HTMLではセクションは「sectionタグ」で定義します。

sectionタグの中で見出しと、その見出しに関係する内容を記述します。

sectionタグの基本的な書き方は次のとおりです。

<section>
　<h〇>見出し</h〇>
　：見出しに関係する内容の記述
</section>

sectionタグは、sectionの開始を表す<section>と、終了を表す</section>でセクションの範囲を指定し、その範囲内に見出しと関係する内容を記述します。

参考

タグの多くは、開始タグと終了タグがあります。

開始タグ：<タグ名>

終了タグ：</タグ名>

「/」がついたタグが終了タグです。

他に、改行を表す<br>や、画像を表示する<img>など終了タグが無いものもあります。

自己紹介文にある4つのセクションのHTML定義は次のようになります。

セクション	タグ	説明
	<section> <h1>私の自己紹介ページ</h1> </section>	ページのタイトルを表すのでh1タグを使って記述する。
	<section> <h2>プロフィール</h2> <p>こんにちは！私は目田　育人です。高校1年生で、Webデザインを勉強中です。</p> </section>	「プロフィール」は自己紹介の中の項目のためh2タグを使う。説明などの文章は、<p>～</p>で囲む。
	<section> <h2>趣味</h2> <ul> <li>読書</li> <li>プログラミング</li> <li>サイクリング</li> </ul> </section>	「趣味」は自己紹介の中の項目のためh2タグを使う。趣味は複数あるので、箇条書きにする。箇条書きはulタグ(後述)を使う。
	<section> <h2>連絡先</h2> <p>インスタ：<a href="https://www.instagram.com/○○">https://www.instagram.com/○○</a></p> </section>	「連絡先」は自己紹介の中の項目のためh2タグを使う。ハイパーリンクはaタグ(後述)を使う。