Web制作

【body内タグ】HTMLのタグまとめてみた【No.3】

ユウ
ユウ

皆さんこんばんにちは、ユウです。

今回は以前の記事に引き続き、HTMLのタグについて紹介していきたいと思います。

以前の記事でも<head>内の重要なタグについて紹介しているのでもし良かったら読んでみて下さい。

【metaタグ攻略】HTMLのタグまとめてみた【No.2】今回はmetaタグについて簡単に紹介してみました。Web制作初心者の方はmetaタグってよく見るけど一体何なの?と思う方もいるかもしれませんね。そんな方に向けて,name属性,http-equiv,charsetなどを比較的わかりやすく書いているので足を運んでみて下さい。 ...

基本となるタグを説明していこうと思います。

今回説明するタグは

  • <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 タグは主にテキスト文章を見やすくするために使われます。

このタグは 段落を変えることが出来るので、行間の調整には有効です。

しかし、p タグ以外のタグが使えそうなところは、そのタグを使うようにした方がおすすめです。

まだこの記事では触れてないのですが、section タグや address タグといったタグが有効的に使える場合などもあります。

ユウ
ユウ
無理に p タグを使わずにそれらのタグを使用した方が、Webページを作りやすくなっていくと思います。

<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 descriptiondt で表わした言葉の説明をします。

 

流れ的にはこのような感じです。

まず、 dl タグでリストを作る。
→その中に説明したい単語などを dt タグで入れる。
→その単語の説明を dd タグで説明する。

dd タグと dd タグは同じ数じゃなくて大丈夫です。

1つの単語に対して複数個の説明をすることが出来ます。

<使用例>

See the Pen
rNBZjgm
by 悠(人) (@yutohanabusa)
on CodePen.

body内タグのまとめ

body内タグのまとめ

<body>は、Webページの本体を書き込む

<h1> ~ <h6>は、見出しを表す

・<p>は、段落を表す

・<ol>は、順序のあるリストを表す

・<ul>は、順序のないリストを表す

・<li>は、リストの中身を表す

<dl>、<dt>、<dd>は、定義・説明を表す

最後に

今回は body を始め、とても大切なタグを紹介してきました。

特に h1, p タグ等は必ずと言っても良いほど使うタグです。

しっかりとそのタグについての性質から理解しておいた方が後々楽になっていきます。

今回は以上となります。

最後まで読んでいただきありがとうございます。

ABOUT ME
ユウ
ユウ
プログラミング担当です。夜行性大学生やってます。 メンバーの中で一番プログラミングが得意で、将来はBMIという研究をしてALSの患者さんへの医療機器の開発を目標にしています。(すごそう) 無線LAN有線LANより便利。