はい、どうもこんにちは。双極くんです。今回ですけども…。
前回に引き続きHTMLの基礎を学んで行きましょう！
前回紹介したのは、HTMLに必ず必要なタグでした。
それに対して今回は、よく使われるタグを紹介していきます。
HTMLでよく使われるタグ
meta(メタ）
このタグは文書の情報を伝えるためのものです。
title(タイトル）
このタグは「この文書」のタイトルを伝えるために使われます。
div(ディブ）
このタグは一つの塊を示すものです。
span(スパン）
このタグは文章の一部を示すものです。
実際にどのように使われるのか確認して行きましょう
前回作ったファイルはこのようなものでしたね。
- <!doctype html>
- <html lang="ja">
- <head>
- </head>
- <body>
- </body>
- </html>
このなかに、今回紹介いていくタグを書きながら学んで行きましょう。
まずはmetaタグです。
metaタグの書き方
（以降、VScodeを使って書いて行きます。）
このようにheadタグの内側にmetaタグを書いてみます。
metaと書いたあとcharset(キャラセット）と書いてUTF-8を" "(ダブルクォーテーション)で囲む、という書き方をします。
metaは情報を伝えるタグですので、ここからここまでのような二つのタグで挟む必要はありません。
今回のmetaタグは、この文書がUTF-8という文字コードで書かれたことを示しています。
続いてtitleタグです。
titleタグの書き方と実際の表示
titleタグの書き方は<title>を書いて、titleタグで閉じ</title>ます。その内側に今回はMyPageと名前を付けてみました。
これによって、このHTML文書のタイトルがMyPageと言うものである、ということを伝えることが出来ます。
では、実際にどのように表示されるのか、確認をしてみましょう。
一旦、このファイルを保存して、開いて見ましょう。（私はGooglechromeで開きました）
上のスクリーンショットのようにGooglechromeのタブの所にMyPageと表示されました。
では、ファイルに戻りましょう。
続いては、divタグとspanタグの書き方を紹介します。
divタグとspanタグのの書き方
divは表示させる内容なのでbodyの内側に書くことになります。
divタグを書いて、これはdivです。と書いてみます。
では、これを保存して表示させてみましょう。
ブラウザを更新してみます。
すると、このように、これはdivです。と表示されました。
同じようにして、次の行にspanタグを書いてみます。
こちらには、これはspanです。と書いてみましょう。
divの時と同様に、保存して更新します。
すると、上のように表示されました。
これだけでは、この二つの違いが良く分からないかも知れません。
ただdivタグは”これで一塊である”という事を示すブロック要素と呼ばれるものです。
それに対してspanタグは”文章の一部”を示すインライン要素である、という事がポイントです。
また、タグは入れ子と言われるタグの内側にタグがある、という状態で使われる事があります。
実際に今回も、htmlの内側にbodyがあり、その内側にdivタグがある状態になっています。
では、divタグのさらに内側にspanタグを足してみましょう。
divという3文字を囲むようにspanタグを書いてみます。
保存して、ブラウザを更新します。
あれ？
見た目は何も変わりませんでした。
実際にはdivの3文字がspanタグで囲まれています。
この時、あくまでspanタグは文章の一部を選択している状態になっていますので、特に見た目に変化はないわけです。
それに対して、この部分がdivになるとどうなるのかやってみましょう。
spanで囲んだ3文字"div"を、今度はdivタグで囲むように変更します。
保存して、更新をすると…
このようになりました。
divというタグは、一つのブロックを示しています。
前の内容、そして後ろの内容とは別になるように表示される。
これが、ブロック要素の基本です。
今回も”これは”の次で改行された形、そして、”div”が終わった後で改行という形で表示をされていたわけです。
このように、ブロック要素とインライン要素という2種類があるという事は非常に重要なポイントです。
ぜひこの2つを覚えていてください。
まとめ
今回は、HTMLでよく使われるタグの4つ
「meta」「title」「div」「span」
について学びました。今回の学習を私になりにまとめますと、
- metaによって、今回、この文書がUTF-8という文字コードで書かれたこと示すものと理解しました。
- titleによって、ブラウザのページのタブにタイトル名を表示させることが出来ると理解しました。
- divは、divタグで囲まれた文字を一塊として表示するブロック要素であることを確かめました。
- spanは、spanで囲まれた文字が文章の一部として表示するインライン要素であることを学びました。
次回からも、前回学んだHTMLに必ず必要なタグと、今回学んだ良く使われるタグを念頭に置きながら、HTMLを学んで行きたいと思います！
学び
それにしても、ウクライナにおける戦争はなかなか終わりそうにありませんね。
この戦争のニュースをあまり見たくないと思いながらも、どうしても目に入って来て
しまいます。
とはいえ、私に何か出来ることはあるでしょうか？人道的寄付でしょうか？
残念ながら、私には人に寄付出来るようなお金は、悲しくて情けない事に、本当にないのです(´;ω;｀)
私に出来るのは、命の危険にさらされている民間の人たち、子供たちが安全に、出来る限り平穏な気持ちでいられるように心から祈るだけです。
敵を愛し続け…なさい。
イエス・キリスト（マタイ5:44）
