婚活LABより、ブライダルネットの期間限定クーポン配布中!!

第4回 WEBサイト作成講座『レイアウト案に沿った記述』

第4回 WEBサイト作成講座『レイアウト案に沿った記述』

 前回までで、おおまかなレイアウト案を作成しました。今回では作成したレイアウト案に沿ってHTMLを記述していこうと思います。

 前回までの講座は以下よりご覧ください。

第1回 WEBサイト作成講座 『HTMLの基礎中の基礎』

第2回 WEBサイト作成講座 『必須となる要素の解説』

第3回 WEBサイト作成講座 『サイトの構造とデザイン』

セクション分けを行うタグ

 前回までで作成したindex.htmlを前回作成したレイアウト案をもとに、まとまり毎にマークアップする際に使用するタグを確認します。
 今回使うタグはheader、footer、main、asideタグです。これらのタグはHTML5になってから実装された新しいタグです。コードを可読性を向上させ明示的にセクショニングする事が可能です。SEOの観点からしても各コンテンツが何に属しているか明確にすることは効果的だと考えられています。

header、nav、footer、main、asideについて

header要素 コンテンツの最上部に配置する。
一般的な用途ではサイトタイトルやナビゲーションメニューなどを内包する。
全ページ共通であることが多い。
nav要素 ナビゲーションメニューであることを明示的にする。
一般的なheader要素に内包されることが多い。
全ページ共通であることが多い。
footer要素 コンテンツの最下部に配置する。
一般的な用途ではコピーライト表示などを内包する。
全ページ共通であることが多い。
main要素 ページ独自のメインコンテンツに配置する。
同じページに2つとあってはならない。
aside要素 asideとは余談や補足を意味する。
関係性はあるが重要でないコンテンツに用いられる。
実際はサイドバーなどに用いられる。

 セクション分けに使用するタグは、他には記事を表すarticleなど様々なものが存在します。

SEOとは・・・

 Search Engine Optimizationの頭文字を取ったものであり、日本語では検索エンジン最適化と呼ばれます。検索エンジンにおける検索結果を上位表示させる為に、WEBサイトの構成などを調整する一連の取り組み、手法のことを指します。

レイアウト案にそってマークアップする

 では実際にサンプルコードのindex.htmlをマークアップしていきます。
 まずは前回作成したレイアウト案を確認しましょう。今回からは色分けした各要素ごとにセクション分けに使用するタグを左上に新たに追加しました。

セクション分けしたデザイン案

header、nav、footer、main、asideをマークアップする

 今回は以下の内容をマークアップします。

  1. サイトタイトルのh1要素が入れ子となるようにheader要素を記述
  2. h1要素の直下にnav要素を記述
  3. header要素の直下にmain要素を記述
  4. main要素の直下にaside要素を記述
  5. aside要素の直下にfooter要素を記述
 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>サンプル株式会社</title>
        <meta name="description" content="このサイトはサンプル株式会社のサイトです。サンプルサイトの為、自由に説明していただいて結構です。descriptionは100字程度が良いとされています。">
	</head>
	<body>
		<header>
			<h1>サンプル株式会社</h1>
			<nav>
			</nav>
		</header>
		<main>
		</main>
		<aside>
		</aside>
		<footer>
		<footer>
	</body>
</html>

 コードも少しずつ複雑になってきた為、インデントさせコードを見やすくしています。

インデントとは・・・

 インデントとは、字下げのことを意味します。行頭にルールに基づいた余白を設けることによりコードが読みやすくなります。HTMLでは一般的に入れ子になるたびに一段ずつ下げていきます。開始タグから終了タグまでインデントさせるようにしてください。
 インデントさせることにより入れ子構造が明確になります。
 サンプルコードの例ではheader、main、aside、footer要素は同一の間隔でインデントされているためそれぞれ独立していることがわかると思います。
 またheader要素の中にh1とnav要素が入れ子とっていることがよくわかると思います。

 次回は、各要素のブラウザに表示される内容をマークアップしていきたいと思います。

第5回 WEBサイト作成講座『各セクションのマークアップ』

グループサイト。婚活LABより!婚活無料診断実施中!

CTA-IMAGE 簡単な質問に答えるだけですあなたに最適な婚活タイプが丸わかり!