勉強していたらdivというものが出てきたんだけどこれはどういう意味？
divはdivisionの略で色んな要素を囲ったりすることでまとまりを作るタグだよ
今回はそんなdivをはじめとしたグループ分けにつかうタグについて解説します！
今日のテーマ
- グループ分けをする意味がわかる
- グループ分けをするタグについて学ぶ
1.グループ分けとは何か
Webページを作るとき、文章や画像、フォーム、またはもっと大きな要素を意味ごとにまとめることが大切です。
グループ分けをすると、次のようなメリットがあります
- CSSやJavaScriptで操作しやすくなる
- アクセシビリティ（読み上げや支援技術）にやさしい
- SEOにもプラス効果がある
こちらがグループ分けによく使うタグです。
| タグ | 用途・意味 |
|---|---|
<div> | 最も汎用的。意味のないグループに使う |
<section> | セクション単位の意味あるまとまり |
<article> | ブログ記事・レビューなど単体で完結する内容 |
<nav> | ナビゲーションリンクのグループ |
<aside> | 関連情報・補足情報のグループ |
2.Webページをグループ化するためのタグ
グループ化するためのタグにはいくつかの種類があります。
それらをうまく使い分けることで、きれいなレイアウトを作り、見やすいサイトを作る事ができます。
では順番に見ていきましょう。
2-1.divタグ
divタグはどの用途にも当てはまらなかったりスタイルのためだったりに使われ、それ自身には特に意味を持っていないタグです。
またdivで囲うことによって一つの塊のブロックになります。
<div class="block">
<h1>ここにタイトルが入ります</h1>
<p>テキストが入ります！テキストが入ります！</p>
</div>divタグは便利で良く使いますが使いすぎには気をつけましょう！
2-2.sectionタグ
章や節という意味で汎用的に使われ、１つのセクションであることを示す際に使うので見出しとセットで使う必要があります。
またsectionタグで明示化すればこの中では見出しとしてh1タグを使うことも良いとされてます。
意味のあるグループにまとめる
<section>
<h2>CSSについて</h2>
<p>CSSとは…</P>
</section>2-3.articleタグ
それだけで独立したコンテンツ、記事として成り立ち自己完結タイプのかたまりを作ります。
こちらも見出しとセットで使うのが基本です。
ニュースサイトやブログなど
<article>
<h2>新メニューが決まりました！</h2>
<p>ことしの夏もやってきました…</p>
</article>2-4.headerタグ
ページ上部にある導入的なコンテンツです。
ページタイトル、ロゴ画像、ナビメニューなど
<header>
</header>2-5.mainタグ
ページの主要なコンテンツを構成します。
ページ内で１つしか使えなく、この中に他のタグが入る事が多い
<main>
</main>2-6.footerタグ
多くはページの下部にあり締めくくりのコンテンツを構成します。
snsリンクや著作権情報などが入る
<footer>
</footer>2-7.navタグ
ヘッダーに含まれる事が多く他のページへのリンクやそのページのリンクで構成されます。
ナビゲーションリンク
<nav>
<ul>
<li>Home</li>
<li>会社概要</li>
<li>お問い合わせ</li>
</il>
</nav>2-8.asideタグ
メインコンテンツと関連性の薄いコンテンツ、補足に使われます。
コンテンツの補足、プロフィール、広告など
<aside>
</aside>3.まとめ
- CSSやJavaScriptで管理しやすくなる
- SEOにもプラス効果がある
- アクセシビリティ（読み上げや支援技術）にやさしい
- レイアウトのためのみならずコンピューターに対しても知らせる用途もある。
| タグ名 | 主な用途 |
|---|---|
| header | ページタイトルやナビページなどページ上部にある導入的なコンテンツ |
| main | 主要なコンテンツ |
| footer | 著作権情報やSNSのリンクなど |
| nav | ナビゲーションメニュー |
| aside | メインと関連性の薄いコンテンツや補足、広告 |
| article | 独立した記事。自己完結タイプの塊を作る |
| section | 章や節のように意味のあるグループにまとめる |
| div | まとまりを作る |
- 記事を配信する意味合いが強い場合は
articleタグ - 補足情報や関連性の薄い情報、広告は
asideタグ - ナビゲーションは
navタグ - それ以外にとりあえずグループ化したい時は
divタグ（使い過ぎには注意）
「こんな感じでWebサイトは構成されているんだ」っていうのがわかればとりあえずは大丈夫です
人によってどのタグで囲うかというのも違いがあり厳密な正解はありませんのでご安心を！
HTML/CSSをもっと学びたい方はこちらもオススメです！
コメント