じょんの美ライフ

じょんのび~新潟の方言で「のんびり、ゆったり」~

HTMLの基本文法「タグ」をわかりやすく解説

いつも購読いただき、ありがとうございます。

前回までの記事でJavaScriptや勉強を始めるために知っておいた方が良いWeb言語(HTML・CSS)の基礎知識を解説した。 
rakurakuowl.com

rakurakuowl.com


 今回はJavaScript Anywhere(以下、JSAnywhere)を使って、HTMLファイルをつくる手順とHTMLの基本文法である「タグ」の解説をしていく。

結論からまとめると、

 

  • HTMLではタグを使い文字列に「役割」を与える
  • タグには色々な種類がある
  • コンピュータはタグを読み解いてページの構造を理解する

 

といった内容。

ちなみに、今回の記事で参考にしている教本は「1冊ですべて身につくHTML&CSSとWebデザイン入門講座」。 

 専門用語がわかりやすく解説されていて、「実際にHTMLファイルを書きながらWebサイトをつくっていく」という実践型の学習ができるからおすすめ。

 

 

サンプルコードの作成手順

 今回のサンプルコードは以下のとおり。

【サンプルコード】

   <!doctype html>
   <html lang="ja">
      <head>
         <meta charset="UTF-8">
         <title>じょんの美ライフ</title>
         <meta name="description" content="新潟の方言で「ゆったり、のんびり」">
      </head>

      <body>
         <h1>「じょんのび」</h1>
         <p>新潟の方言で「ゆったり、のんびり」という意味</p>
      <body>
   </html>

f:id:RakuRakuOwl:20210507223258j:plain

JSAnywhereで作成したサンプルコード

動作確認で「じょんのび」という見出しと、「新潟の方言で「ゆったり、のんびり」という意味」という説明文が表示されれば成功。

f:id:RakuRakuOwl:20210507223507j:plain

写真のように表示されれば完成

このHTMLファイルをJSAnywhereで作成していく。

JSAnywhereはJavaScript・HTML・CSSのコード編集が行える無料の開発アプリで、作成したファイルをアプリ内のコンソールで即動作確認できる。

シンプルで使いやすく初心者にもおすすめ。

インストールと設定手順は過去記事で解説しているから、まだ学習環境を作れていない人は参考にしてみてほしい。

iPadはもちろん、今やiPhoneでもプログラミングの勉強ができる。便利な時代だ。

rakurakuowl.com

JavaScript Anywhere JSAnywhere

JavaScript Anywhere JSAnywhere

  • Tatsuya Tobioka
  • ユーティリティ
  • 無料

apps.apple.com

プロジェクト作成

 まずプロジェクト一覧の「+」をタップして新規プロジェクトを作成する。

新規プロジェクトの名称を入力する画面が表示されるので、プロジェクト名を入力する。

ここでは参考書にならってプロジェクト名を「chapter2_c2-02-1_index」とした。

別名で作成しても問題ないが、以下の3点には注意が必要。

  • 日本語は使えない
  • 空白(スペース)は使えない
  • 一部の記号は使えない(例:アスタリスク(*)、大なり(>)等)
  • 半角英字の小文字に統一する


プロジェクト名を入力したら、最後に「保存」をタップする。新規プロジェクトが作成される。

f:id:RakuRakuOwl:20210507234511j:plain

新規プロジェクトの作成手順 

コーディング

プロジェクトを作成したら、いよいよサンプルコードを見ながらHTMLファイルを書いていく。この作業を「コーディング」という。

HTMLやCSSだけでなく、JavaScriptなどのプログラムを実際に書く作業もコーディングと呼ばれる。

サンプルコードが最初は暗号に見えるけど、各文の意味や文法は今後の記事でゆっくり解説していく予定なので、何はともあれ書いてみる。

f:id:RakuRakuOwl:20210510210703j:plain

JSAnywhereでのサンプルコード作成画面

動作確認

コーディングが 終わったら、最後に動作確認をしてHTMLファイルが問題なく動いてくれるかをチェックする。

JSAnywhereでは作成したファイルをアプリ内のコンソールですぐに動作確認できる。

f:id:RakuRakuOwl:20210510213643j:plain

f:id:RakuRakuOwl:20210510214115j:plain

Webページが問題なく表示されることを確認

HTMLにおけるタグの解説

 サンプルコードで何度も出てきた「<」と「>」で文字を囲んだ部分を「タグ」と呼ぶ。

HTMLでは基本的に文章などの文字列をタグで挟んで記述していく。

タグの役割

私たちはWebページに「目次」という項目があれば、そこが目次であることを理解できる。

ページの1番上に書かれている大きな見出しがページのタイトルであることも自然にわかる。

f:id:RakuRakuOwl:20210517204439j:plain

人間は「なんとなく」でWebページの構造を理解できる

しかし、 コンピュータは文字列のどこが見出しで、どこが本文で、どこが写真なのかといった判断を自分だけで行うことができない。

ここで登場するのが「タグ」である。

タグには多くの種類があり、HTMLファイルではタグを使って「ここからここまでの文字は最初の見出しです」とか「ここの文字列は別のWebページに移動するリンクです」という具合に文字列に役割や機能を割り振っている。

つまり、コンピュータはHTMLファイルのタグを読み取ることでWebページの構造を理解し、人間の目で見やすいようにページを画面表示している。

一言でまとめると、タグとは、

「文字列の役割や機能をコンピュータに指示してWebページの構造を設定するもの」

となる。

 

タグの使い方 

f:id:RakuRakuOwl:20210517211051j:plain

サンプルコードからの抜粋を例にタグの使い方を解説する。

サンプルより抜粋

<p>新潟の方言で「ゆったり、のんびり」という意味</p>


サンプルの抜粋では、段落を意味する<p>タグを使って「新潟の方言で「ゆったり、のんびり」という意味」という部分が文章における1つの段落であることを表している。

「<」と「>」で「p」を囲んだ最初に書かれる方を「開始タグ」、「/」を加えて最後に書かれる方を「終了タグ」と呼ぶ。

タグにはさまざまな種類があるが、一部の例外を除きその多くが開始タグと終了タグがセットで使われる。

開始タグと終了タグで文字列を挟むことで、タグで役割を与える部分の始まりと終わりを指定している。

つまり、

  • 開始タグ → 「ここからここまでの文字列が〇〇」の「ここから」
  • 終了タグ → 「ここからここまでの文字列が〇〇」の「ここまで」
  • タグの種類 → 「ここからここまでの文字列が〇〇」の「〇〇」


を意味している。

開始タグと終了タグで挟まれた部分を「コンテンツ」、開始タグから終了タグまでの1つのまとまりと「要素」と呼ぶ。

サンプルの抜粋を例にすると、

  • 開始タグ → <p>
  • 終了タグ → </p>
  • コンテンツ → 新潟の方言で「ゆったり、のんびり」という意味
  • 要素 → <p>新潟の方言で「ゆったり、のんびり」という意味</p>


実際の動作画面で見ると、見出しの「じょんのび」に対する説明文として「新潟の方言で「ゆったり、のんびり」という意味」という段落が表示されているのがわかる。

f:id:RakuRakuOwl:20210517222400j:plain

まとめ

今回の記事をまとめると、

  • タグは文字列に役割と機能をもたせる
  • コンピュータはタグを読み取りWebページの構造を理解する
  • タグの多くは開始タグと終了タグで文字列を挟む
  • タグで挟まれた部分はコンテンツ、タグのまとまりを要素と呼ぶ

 

 といった感じ。

今回の記事で紹介しているサンプルコードは非常に簡単なものだし、ある程度プログラミングを学習した人からすれば笑ってしまうようなものかもしれない。

それでも、自分で書いたHTMLファイルを実際に動作させて表示させる経験は、プログラミング初学者にとっては大きな進歩。

サンプルコードの動作結果は普段見ているWebページとはかけ離れた簡素な表示だが、どんなに複雑なWebページも細かく見ていけばサンプルと同様、タグの集合で書かれてたHTMLファイルでできている。

f:id:RakuRakuOwl:20210517224845j:plain

次回のHTML記事では、タグの中にタグを入れる「入れ子」やタグに追加の情報を書き加える「属性」について解説する。

ということで、これからも「じょんのび」とブログを更新していくので、また次の記事でお会いしましょう。最後まで購読いただき、ありがとうございました。