HTMLのmain作成例

mainとは？

HTMLのmain要素は、ページの主要部分を示します。多くの場合は、ページのヘッダーとフッターに挟まれた部分で使われます。

「デザイン」で作成したトップページでは、以下の赤枠部分が該当します。

main要素を明確にすることで、例えば読み上げソフトがヘッダーを飛ばして、すぐにmain部分を読み始めることができます。

main要素は、ページ内で1箇所だけ使えます。

次からは、main部分の作り方を説明します。

トップページmainのHTML

デザインしたトップページのmain要素は、以下で構成されています。

上記をHTMLで記述すると、以下になります。文字の色は、上記画像の色と対応しています。

<main role="main" id="main">

<article id="content">
メイン記事
</article>

<aside id="submenu">
左サイドバー
</aside>

<div id="topic">
右サイドバー
</div>

</main>

次からは、それぞれの内容について説明します。

main要素

main要素は、ページの主要な部分を示します。Internet Explorerはmain要素に対応していませんが、role="main"を記述することで主要部分であることを示せます。

article要素

article要素は、それだけを切り出しても完結する記事を示します。今回は、中央のメイン記事部分に使っています。

aside要素

aside要素は、広告やサイドバーなどで使います。今回は、左サイドバーとして使っています。

<div id="topic">

<div id="topic">は、右サイトバーとして使っています。トピック的な情報を入れるため、asideは使っていません。

トップページmainのCSS

以下は、トップページmainのためのCSSです。

#main {
  margin: 0 10px 10px 10px;
  display: flex;
}

#content {
  width: 468px;
  margin: 0 10px;
  order: 2;
}

#submenu {
  width: 160px;
  order: 1;
}

#topic {
  width: 250px;
  order: 3;
}

それぞれの説明は、以下のとおりです。

orderは、フレックスアイテムが表示される順番です。order:1を左サイドバー、order:2をメイン記事、order:3を右サイドバーにすると、左を基点として左サイドバー、メイン記事、右サイドバーの順番で横に並んで表示されます。

トップページのここまでの作成結果

「HTMLのheader作成例」までの作成結果と、このページのHTMLとCSSを組み合わせたトップページの表示結果は、以下のとおりです。

なお、メイン記事と両サイドバーがわかりやすいように、枠線を付けています。

記事ページmainのHTML

記事ページのデザインで、main部分は以下の赤枠部分です。

トップページは左右にサイドバーがありましたが、記事ページでは左サイドバーだけです。

HTMLで記述すると、以下になります。

<main role="main" id="main">

<article id="content">
メイン記事
</article>

<aside id="submenu">
左サイドバー
</aside>

</main>

トップページと比べると、右サイドバーがなくなっただけです。

記事ページmainのCSS

以下は、記事ページmainのためのCSSです。

#main {
  margin: 0 10px 10px 10px;
  display: flex;
  flex-direction: row-reverse;
}

#content {
  width: 728px;
  margin-left: 6px;
  padding-left: 3px;
  border-left: solid 1px lightgray;
}

#submenu {
  width: 160px;
}

横幅などを除いて基本的にトップページと同じですが、一番違うのはflex-direction: row-reverseがある点です。

これは、フレックスアイテムを右から順番に表示します。このため、デフォルトでは左からarticle→aside要素の順に表示されますが、aside→articleの順に表示されるようになります。

記事ページのここまでの作成結果

「HTMLのheader作成例」までの作成結果と、このページのHTMLとCSSを組み合わせた記事ページの表示結果は、以下のとおりです。