- 更新日: 2017年03月23日
- 公開日: 2015年12月05日
Webページ作成に必須！定番のページ構成とは？ゼロから始めるHTML/CSS講座Vol17
ゼロから始めるHTML/CSS講座Webページの構成
ページ構成
Webページのページ構成は大枠似たようなものになりやすく、例えばブログやニュースサイトでは、下記のようなページ構成となっていることが多いです。
セクションの定義
セクションは区切りという意味があり、ページ構成はセクションの組み合わせで成り立っています。先ほど紹介したページ構成をHTMLの要素で定義すると下記のようになります。
それぞれセクションとしての役割を持っています。
サンプルとして、以下のHTMLとCSSを作成してみましょう。
ファイル名: cooking.html, cooking.css
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Cooking</title>
<link rel="stylesheet" href="cooking.css">
</head>
<body>
<header>
<h1>お料理紹介</h1>
<p>当サイトは様々な料理の紹介をしております。</p>
</header>
<nav>
<h1>カテゴリ</h1>
<ul>
<li><a href="#">野菜</a></li>
<li><a href="#">お肉</a></li>
<li><a href="#">魚</a></li>
<li><a href="#">麺</a></li>
<li><a href="#">デザート</a></li>
</ul>
</nav>
<article>
<h1>洋食 肉料理</h1>
<img src="yos-meat-1.jpg">
<p>自慢の一品です。甘いソースを絡めてお召し上がりください。</p>
</article>
<aside>
<img src="aside.jpg">
</aside>
<footer>
<p><small>Copyright © TribeUniv All Rights Reserved.</small></p>
</footer>
</body>
</html>
header, footer, nav, aside, article, section {
border: solid 1px;
}
img {
width: 300px;
}
各セクションが表示されました。区切りが分かりやすくするためborderプロパティを適用しています。まずはHTMLについて説明し、この後にCSSの解説と追記をします。
header要素・footer要素・nav要素・aside要素
section要素やarticle要素と同じく、1つのグループや区切りとして利用します。それぞれの要素が示す意味は以下となります。
header要素
見出しや概略など、ページのヘッダーを表す。
footer要素
作成者やコピーライトなど、ページのフッターを表す。
nav要素
同じWebサイト内の別ページへのリンク(ナビゲーション)を表す。
aside要素
ページ内容と関連しているが、あまり重要ではないもの(広告、補足記事など)を表す。
それぞれ要素名通りの役割を持っています。
課題
料理を紹介するWebページを次に示す画像と同じ配置になるようCSSを作成してください。HTMLは以前作成したcooking.htmlを利用し、必要があれば追記してください。
ファイル名: cooking.html、 cooking.css
header要素・footer要素・nav要素・article要素・aside要素の配置が課題であり、文字や画像の大きさ等は同じである必要はありません。
NEXT LESSON ☛ floatを使ったレイアウト①
PREV LESSON ☛ HTMLフォームを作成しよう②
- この記事を書いた人
- CodeCampus編集部
