Webページ作成に必須!定番のページ構成とは?ゼロから始めるHTML/CSS講座Vol17



Webページ作成に必須!定番のページ構成とは?ゼロから始めるHTML/CSS講座Vol17
目次
  1. ゼロから始めるHTML/CSS講座Webページの構成
  2. ページ構成
  3. セクションの定義
  4. header要素・footer要素・nav要素・aside要素
  5. 課題

ゼロから始めるHTML/CSS講座Webページの構成

ページ構成

Webページのページ構成は大枠似たようなものになりやすく、例えばブログやニュースサイトでは、下記のようなページ構成となっていることが多いです。

page-layout-639

セクションの定義

セクションは区切りという意味があり、ページ構成はセクションの組み合わせで成り立っています。先ほど紹介したページ構成をHTMLの要素で定義すると下記のようになります。

page-layout-2-639

それぞれセクションとしての役割を持っています。

サンプルとして、以下の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 &copy; TribeUniv All Rights Reserved.</small></p>
    </footer>
</body>
</html>
header, footer, nav, aside, article, section {
    border: solid 1px;
}

img {
    width: 300px;
}

page-layout-2-639

画像1

画像2

page-layout-4-639

各セクションが表示されました。区切りが分かりやすくするためborderプロパティを適用しています。まずはHTMLについて説明し、この後にCSSの解説と追記をします。

header要素・footer要素・nav要素・aside要素

section要素やarticle要素と同じく、1つのグループや区切りとして利用します。それぞれの要素が示す意味は以下となります。

header要素
見出しや概略など、ページのヘッダーを表す。

footer要素
作成者やコピーライトなど、ページのフッターを表す。

nav要素
同じWebサイト内の別ページへのリンク(ナビゲーション)を表す。

aside要素
ページ内容と関連しているが、あまり重要ではないもの(広告、補足記事など)を表す。

それぞれ要素名通りの役割を持っています。

課題

料理を紹介するWebページを次に示す画像と同じ配置になるようCSSを作成してください。HTMLは以前作成したcooking.htmlを利用し、必要があれば追記してください。

ファイル名: cooking.html、 cooking.css

cooking-html

header要素・footer要素・nav要素・article要素・aside要素の配置が課題であり、文字や画像の大きさ等は同じである必要はありません。

NEXT LESSON ☛ floatを使ったレイアウト①

PREV LESSON ☛ HTMLフォームを作成しよう②

関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp