【初心者向け】グループ分けに使うタグでレイアウトをしやすくする【HTML】

今回の内容

1.今までのまとめ
2.Webページをグループ化するためのタグ
3.まとめ

1.今までのまとめ

こばゆた

今まで習ってきた事でなんとなくWebサイトができました

〇〇プログラミングスクール

学べること

お問い合わせ

©︎2020 こばゆた

チャッピー

ただ並べただけだけど僕がWebページを作れたぞ！

きなこ

まだまだシンプルだけどうれしいね！

こばゆた

ちなみに上のサイトをタグで分けたものがこちら

こばゆた

本当になんとなくですが今まで見てきたタグだけで土台はできます

でもこれだけだとさすがにシンプルすぎるのでCSSと呼ばれるもので色をつけたり位置の調節などをして装飾をしていきます。

きなこ

いよいよ色を着けられるのね

何色にしようかなぁ

こばゆた

その前にグループにわけてスタイリングをしやすくしたり、レイアウトをしやすくするためのタグで囲ったりするよー

グループ化とは

<h1>Hello World!</h1>
<p>今日も頑張りましょう</p>
<p>疲れたら休みましょう</p>

タグでグループ分けをしていないとただ単に表示されるだけですが…

<header>
  <h1>Hello World!</h1>
</header>
<main>
  <p>今日も頑張りましょう</p>
</main>
<footer>
  <p>疲れたら休みましょう </p>
</footer>

タグでグループ分けする事でそれぞれグループごとに色をつけたり等が簡単に可能になります。

2.Webページをグループ化するためのタグ

グループ化するためのタグにはいくつかの種類があります。

それらをうまく使い分けることで、きれいなレイアウトを作り、見やすいサイトを作る事ができます。

では順番に見ていきましょう。

2-1.headerタグ

ページ上部にある導入的なコンテンツです。

使用例

ページタイトル、ロゴ画像、ナビメニューなど

<header>

</header>

2-2.mainタグ

ページの主要なコンテンツを構成します。

使用例

ページ内で１つしか使えなく、この中に他のタグが入る事が多い

<main>

</main>

2-3.footerタグ

多くはページの下部にあり締めくくりのコンテンツを構成します。

使用例

snsリンクや著作権情報などが入る

<footer>

</footer>

2-4.navタグ

ヘッダーに含まれる事が多く他のページへのリンクやそのページのリンクで構成されます。

使用例

ナビゲーションリンク

<nav>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </il>
</nav>

2-5.articleタグ

それだけで独立したコンテンツ、記事として成り立ち自己完結タイプのかたまりを作ります。

使用例

ニュースサイトやブログなど

<article>
  <h2>新メニューが決まりました！</h2>
  <p>ことしの夏もやってきました…</p>
</article>

2-6.sectionタグ

章や節という意味で汎用的に使われ、１つのセクションであることを示す際に使うので見出しとその内容が必要となります。またarticleタグ内に含まれることもあります。

sectionタグで明示化すればこの中では見出しとしてh1タグを使うことも良いとされてます。

使用例

意味のあるグループにまとめる

<section>
  <h2>CSSについて</h2>
  <p>CSSとは…</P>
</section>

2-7.asideタグ

メインコンテンツと関連性の薄いコンテンツ、補足に使われます。

使用例

コンテンツの補足、プロフィール、広告など

<aside>

</aside>

2-8.divタグ

どの用途にも当てはまらなかったりスタイルのためだったりそれ自身には特に意味を持っていないタグでdivタグで挟むことによってグループ化ができます。

<div>
  <p></p>
  <p></p>
</div>

こばゆた

まとめるとこんな感じになります。

header 導入的なコンテンツ

ナビ１
ナビ２
ナビ３

article 記事

section 章や節

footer 締めくくりのコンテンツ

<header>
 <p> header 導入的なコンテンツ</p>
 <ul>
  <li>ナビ１</li>
  <li>ナビ２</li>
  <li>ナビ３</li>
 </ul> 
</header>
<main>
 <div class="main-container">
  <article>
    article 記事
  </article>
  <section>
   section 章や節
  </section>
 </div> 
  <aside>
    aside 広告や補足
  </aside>
</div>
<footer>
 footer 締めくくりのコンテンツ
</footer>

3.まとめ

グループ分けをするタグまとめ

タグ名	主な用途
header	ページタイトルやナビページなどページ上部にある導入的なコンテンツ
main	主要なコンテンツ
footer	著作権情報やSNSのリンクなど
nav	ナビゲーションメニュー
aside	メインと関連性の薄いコンテンツや補足、広告
article	独立した記事。自己完結タイプの塊を作る
section	章や節のように意味のあるグループにまとめる
div	まとまりを作る