@@ -24,11 +24,11 @@
| header|ヘッダー|表紙|
| footer|フッター|背表紙|
| nav|ナビゲーション|目次|
| main|主たるコンテンツ|表紙、背表紙、目次を除いたもの|
| section|コンテンツのまとまり|章や節|
-| article|独立できるsection|別冊付録にできる記事|
+| article|独立できるsection|別冊付録にできる章や節|
| aside|補足コンテンツ|本の最後や欄外の注釈文など|
| h1~h6|見出し|見出し|
これらは**文章構造を示すものでありページのレイアウトを示すものではありません**（超超超超重要）
@@ -57,26 +57,69 @@
・h2（中見出し）、h3（小見出し）を使って階層化し構造をよりわかりやすくする
■ aside（補足情報）やheader（ヘッダー）やfooter（フッター）はbody（視覚的に見えてるページ全体）直下のみで使用し、section（章）内では使用しない
→入れ子にせずシンプルな構造にする
-■ section（章）の範囲はコンテンツのまとまりであり、見出しタグ（h2）が必須
+■ section（章）の範囲はコンテンツのまとまりであり、見出しタグ（h2 or h3）が必須
→逆に言うと、h2があるならsectionで囲う
+■ aside（補足情報）内の見出しレベルはh3まで
+→asideは**おまけコンテンツ**なので階層深くする必要がない（Google先生にアピールする必要なし）
+
■ 迷ったらOutline（chromeのアドオン）を基準にする
+# コードで見るアウトライン構成
+```
+<head>
+ // ページタイトル、キーワード、description、外部ファイルの読み込みなどページの裏側情報
+</head>
+<body>//視覚的に見えるページ全体
+ <header>
+ // ページのヘッダー
+ </header>
+ <nav>
+ // ナビゲーション（メニュー）
+ </nav>
+ <main>
+ <h1>ページの内容を示すタイトル</h1>
+ <section>
+ <h2>コンテンツ1のタイトル（中見出し）</h2>
+ <h3>コンテンツ1配下のコンテンツ1-1のタイトル（小見出し）</h3>
+ <p>コンテンツ内容</p>
+ <h3>コンテンツ1配下のコンテンツ1-2のタイトル（小見出し）</h3>
+ <p>コンテンツ内容</p>
+ </section>
+ <section>
+ <h2>コンテンツ2のタイトル（中見出し）</h2>
+ <p>コンテンツ内容</p>
+ </section>
+ </main>
+ <aside>//ページのおまけ情報
+ <section>
+ <h3>サブコンテンツ1のタイトル</h3>
+ <p>サブコンテンツ1の内容</p>
+ </section>
+ <section>
+ <h3>サブコンテンツ2のタイトル</h3>
+ <p>サブコンテンツ2の内容</p>
+ </section>
+ </aside>
+ <footer>
+ // ページのフッター
+ </footer>
+</body
+```
+
# ひと目で分かる！アウトラインはこれだ！
-長々と書いてきましたが、なんのこっちゃかさっぱりわからないので視覚的に見てみましょう。
+コードなんか見てもなんのこっちゃかさっぱりわからないので可視化してみましょう。
※画像サイズの都合でfooterは載せていませんが、ページ下部にフッターが付きます
上記のルールでページごとにきちんとタグを埋め込んだ結果がこちら。
※Outline（chromeのアドオン）を使用しています。
一目瞭然。階層化されていてこのページの内容が目次化されています。
-そのページに何が記述されているかわかるから、Googleさんも読みやすいですよね。
-
-デザイナーチームではUI・UXといった見た目の部分だけでなく、目に見えないところでこのようなページの整理整頓をしています。
-
-
+ページに何が記載されているかわかるから、Google先生も読みやすいですよね。
+デザイナーチームではUI・UXといった見た目の部分だけでなく、目に見えないところでページの整理整頓をしています。