皆さんこんばんにちは、ユウです。
今回は以前の記事に引き続き、HTMLのタグについて紹介していきたいと思います。
以前の記事でも<head>内の重要なタグについて紹介しているのでもし良かったら読んでみて下さい。
基本となるタグを説明していこうと思います。
今回説明するタグは
- <body>
- <h1> ~ <h6>
- <p>
- <ol>
- <ul>
- <li>
- <dl>、<dt>、<dd>
についてです。
もし知りたいタグについて先に見つけた方は、目次の方からジャンプして行って下さい。
もし、お時間がある人でしたら最後まで見ていただけると嬉しいです。
それでは、早速説明していきたいと思います。
今回の記事を読むメリット
・body内タグがわかる
<body> Webページの本体を書き込む
body タグはWebページを表示するためのタグになります。
以前の記事で html タグについて紹介した際に、 html タグの中には、head と body を一つずつ配置すると説明しました。
これら2つのタグの役割は、 head ではWebページの情報について書いていき、 body ではWebページで表示される内容を書いていくというものです。
つまり、body に書かれた内容が、皆さんが普段見ているWebページの内容となっていく事になります。
<h1> ~ <h6> 見出しをつける
h1 タグなどは見出しをつける際に使用します。
この時のhはheading（見出し）と言う意味です。
h1 が一番大きく 数字が上がっていくごとに、文字は小さくなっていきます。
h2 タグを2個など同じタグを複数個使うのは、問題ありません。
ただし、h1 は1個だけにとどめておいた方が良いとは思います。
h1 タグなどはCSSを使って、簡単に文字の大きさを変えることができるます。
もし、作っているWebサイトにこの大きさは合わないかなと感じている場合は、変えてみてはどうでしょうか。
＜使用例＞
See the Pen
rNBZjaV by 悠(人) (@yutohanabusa)
on CodePen.
See the Pen
oNvPBXW by 悠(人) (@yutohanabusa)
on CodePen.
簡単なCSSだと、htmlタグのなかに style = “” と書くと、CSSをそのタグにのみ使用することが出来るので、知らなかった方はぜひ、試してみて下さい。
<p> 一つの段落を作る
p タグは一つの段落であることを表わす際に使用します。
この時のpはparagragh（段落）という意味です。
p タグは主にテキスト文章を見やすくするために使われます。
このタグは 段落を変えることが出来るので、行間の調整には有効です。
しかし、ｐ タグ以外のタグが使えそうなところは、そのタグを使うようにした方がおすすめです。
まだこの記事では触れてないのですが、section タグや address タグといったタグが有効的に使える場合などもあります。
<ol> 順序のあるリストを表示
order list の略で順序のあるリストを表示することが出来ます。
- あ
- い
- う
- え
- お
こういうのです。
リストの中身は li タグというもので書いていきます。
何も指定しない場合は、1から順に番号が振られていきますが、value 属性で番号を指定することで番号順を変えることを出来ます。
＜使用例＞
See the Pen
ZEzMLLG by 悠(人) (@yutohanabusa)
on CodePen.
See the Pen
PoYdWWd by 悠(人) (@yutohanabusa)
on CodePen.
順序を指定した場合はその数となりますが、順序を指定していない場合は、その前の数から1足された数となることが分かります。
<ul> 順序のないリストを表示
unordered list の略で、名前の通り順序のないリストを表示することが出来ます。
- か
- き
- く
- け
- こ
こういうのです。
このリストの中身も li タグで書いていきます。
＜使用例＞
See the Pen
QWLVpEE by 悠(人) (@yutohanabusa)
on CodePen.
<li> リストの中身を記述する
list item の略でリストの中身を記述するのに、使用されます。
主にol, ul タグのいずれかの子要素として、使用されるのが多いタグです。
（menu タグにも使用されますがここでは触れません。）
ol, ul タグののリストとなってお互い関連するようになります。
li タグを使った際何も指定しない場合は、黒丸（●）がつくかと思います。
これはCSSで簡単に消したり出来るので、必要ないなと思う方は下のコードを見て試してみて下さい。
＜使用例＞
See the Pen
dybqNRZ by 悠(人) (@yutohanabusa)
on CodePen.
<dl> , <dt> , <dd> 定義・説明を行う
それぞれ定義・説明をするためのものです。
| dl タグ | definition list | 定義・説明のリストを生成します。 |
| dt タグ | definition term | 定義・説明する言葉を表わします。 |
| dd タグ | definition description | dt で表わした言葉の説明をします。 |
流れ的にはこのような感じです。
まず、 dl タグでリストを作る。
→その中に説明したい単語などを dt タグで入れる。
→その単語の説明を dd タグで説明する。
dd タグと dd タグは同じ数じゃなくて大丈夫です。
1つの単語に対して複数個の説明をすることが出来ます。
＜使用例＞
See the Pen
rNBZjgm by 悠(人) (@yutohanabusa)
on CodePen.
body内タグのまとめ
・<body>は、Webページの本体を書き込む
・<h1> ~ <h6>は、見出しを表す
・<p>は、段落を表す
・<ol>は、順序のあるリストを表す
・<ul>は、順序のないリストを表す
・<li>は、リストの中身を表す
・<dl>、<dt>、<dd>は、定義・説明を表す
最後に
今回は body を始め、とても大切なタグを紹介してきました。
特に h1, p タグ等は必ずと言っても良いほど使うタグです。
しっかりとそのタグについての性質から理解しておいた方が後々楽になっていきます。
今回は以上となります。
最後まで読んでいただきありがとうございます。
