先に学んだヘッダーとフッターの間に、メインコンテンツをいれます。

そのページの主な内容、キャンペーンやサービスの詳細情報、ブログ記事などを格納します。

　

「ヘッダー+メイン+フッター」は、基本構成なのでセットで覚えておきましょう。

ヘッダー・フッターは全ページ共通パーツでしたが、

メインコンテンツは、ページによって記載する内容が異なる点が違いますよ。

目次

1. メインコンテンツを作ろう！
2. メインコンテンツを格納！mainタグ
   1. mainのコンテンツモデル
3. ユーザーに知って欲しい情報はメインコンテンツに据える

Youtubeで動画解説しています。

このブログをベースに、解説動画を作りましたので、併せてご覧ください。

チャンネル登録、宜しくお願いします。

メインコンテンツを作ろう！

以下のコードをファイルにコピペして、確認してみましょう！

<header style="background:seashell;">
  ヘッダーエリア
</header>

<main>
  <article>
    <h1>さくうぇぶ</h1>
    <p>サクッとWEBサイトを作るために、Bootstrapを使います！</p>
  </article>
</main>

<footer style="background:seashell;">
  フッターエリア
</footer>

このように、headerタグとfooterタグの間に、mainタグを入れます。

この中に入る要素が、「メインコンテンツ」として認識されます。

h1タグとpタグはすでに学びましたね。

articleタグは、今後学ぶタグです。今はスルーで。

ちなみに、「background」は背景の指定で、「seashell」はカラーネームです。

メインコンテンツを格納！mainタグ

mainタグ・・・・メインっですね。

今日のメインディッシュは、わたしよ！！バリのドヤ顔です。

バンズやトマト、レタスなどに挟まれています。

ヘッダとフッタの間に、メインがいる構図ですね。

つまり、「header」「main」「footer」の順番でコーディングします。

mainのコンテンモデル

mainタグ

コンテンツモデル

フローコンテンツ

子要素

フローコンテンツ

親タグ

画像に記載のタグ

タグ省略

不可

headerタグ、footerタグ、articleタグ、asideタグ、navタグのなかに、mainタグを入れることはできません。

その他の情報は、以下をご覧ください。

SAKUWEB さくうぇぶ

ユーザに知って欲しい情報はメインコンテンツに据える

メインコンテンツとは、たとえばサービスの内容やキャンペーン、研究成果などなど。

ユーザーに知って欲しい情報をメインコンテンツに据えます。

なので、ヘッダーやフッターなどはメインコンテンツではないですね。

基本的には、「ヘッダー」「メイン」「フッター」の順でコーディングします。

「ヘッダー」「フッター」以外のコンテンツをメインに据えて問題ないです。

とにかく大切なのは、ユーザーに何を伝えたいかということ。

ページの役割ごとにどんな順番で、どんなレイアウトで、どんな謳い文句でを考えながら配置していきます。

キャンペーンや各ページへのバナーリンク、お知らせなどの情報を入れておいて、

ユーザーが興味のあるコンテンツの詳細情報は、下層ページに移動してもらう。という流れで、ページの構成を考えます。

次は、メインじゃないけど、補足的な役割のサイドバーを学びますよ。