作りながら覚えるHTMLの構造 2nd【webデザイン 基本】
<body>の中の<header>、<nav>、<main>、<footer>はセクション系タグと呼ばれており<body>をセクショニング（情報のエリア分け）をしていきます。
このセクショニングをしていくことで<body>内のタグの意味をより明確にしていきます。
それはタイトルなのかナビゲーションなのか、コンテンツ領域なのかフッター領域なのか…。
今までは<div>にクラス名をつけて曖昧に分けていましたがタグを創設することで明確に何の情報かわかるようになっています。
<main>内で使用するタグの構成
それでは<main>の中を見てみましょう。
基本<main>にはそのホームページの文字通りメインの情報を置きます。
企業などのホームページでしたらその企業の伝えたい情報や販売している商品、社員の方のメッセージだったりリクルートや沿革など様々です。
個人ではblogなどの個人発の記事情報や広告などです。
具体的には<h>系と<p>をセットで使用します。
<h>系は<h1>から<h6>までの数字で分けることができます。
数字が小さいほど重要な情報で数字が大きいほど重要ではないという括りになります。
<p>は本文のときに使用します。読ませる文章ですね。
具体的に分けると一番重要な見出しやタイトルは<h1>、大見出しは<h2>、中見出しは<h3>、小見出しは<h4>それ以外は<h5><h6>になります。
そして<h1>の扱いですが<h1>はそのページの一番重要な情報のときに使用します。
一番なので１つしか使えません。そういう意識で使用してください。
<main>
<h2>大見出し</h2>
<h3>中見出し</h3>
<h4>小見出し</h4>
<p>本文</p>
</main>ただHTML5から例外が設けられまして１つの<article>や１つの<section>の中に１つだけ<h1>が使用できるように策定されました。
ということは<article>や<section>を量産すれば自動的に<h1>も量産されます。
仕様が変わりましたのでそういう作り方でも問題ありません。
<main>
<section>
<h1>重要な見出し</h1>
<p>本文</p>
</section>
<section>
<h1>重要な見出し</h1>
<p>本文</p>
</section>
</main><article>と<section>の使い方はよく分からない？！
あと説明が遅れましたが<article>と<section>もセクション系タグになります。
ただ<article>と<section>は使い方の説明が曖昧です。
ですので具体的に使用する場合は何となく使えば良いと思います。
特にエラーとか出てくるわけでは無いです。
また使い方がわからなければ使わないのも手だと思います。
もし使うのであれば注意点があります。
まず<section>ですが必ず<h>系と<p>をセットで使ってください。
例えば<section>の中に<p>だけとか<h>系だけにならないよう注意してください。
<article>は内容が記事の時に使用するように決められています。
ですので<article>はどの場所でもOKですが内容に例えば企業サイトでしたら新着情報とか個人でしたらblog記事が入ってれば大丈夫です。
<footer>もセクション系のタグになりますがあまり重要では無いようです。
主に制作・著作権情報や関連記事へのリンクになります。
最後にviewportとontouchstartを設定
<head>の中にモバイルに対応した<meta>を追加しておきます。
viewportです。
この記述はスマートフォンでウェブページを表示した際、タテで表示しても横で表示しても最適化して表示するようになります。
最近のSEOではウェブサイトがモバイル・フレンドリーになっているかどうかも最適化の要因になりますので、取り敢えず置いておきましょう。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">そして<body>にontouchstart=””を記述します。
特に値は入りません。
これはCSSで:hoverとか:activeとか設定する場合があります。
PCで見ると正常に動作してくれますがontouchstartを設定しておかないとモバイルでは擬似セレクタが反応しません。
:hoverなどをモバイルで動かすための設定です。
<body ontouchstart="">現時点でのHTMLの構成です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body ontouchstart="">
<header>
<h1>ページタイトル</h1>
<nav>
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h1>重要な見出し</h1>
<p>本文</p>
</section>
<section>
<h1>重要な見出し</h1>
<p>本文</p>
</section>
</main>
<footer>
<p>Copyright</p>
</footer>
</body>
</html>webページは上記のHTMLを基本に構築してください。
次にアイキャッチやサイドバーを追加していきます。