minablog

hugo/github/wordpress/プログラミング言語/美容/ビジネス/マーケティングなど、ミレニアム世代やZ世代に有益な情報を共有するブログ。

小学生でもわかるHTML/CSSタグ講座 アウトライン編

みなさんこんにちは!minablog管理人のみなです。

 

今回は小学生でもわかるHTML/CSSタグ講座としてアウトラインについてご紹介します。

 

アウトラインアルゴリズムを理解できるようになれば、プロが書いたみたいに美しいコーディングを行うことができますよ!

 

今までの小学生でもわかるHTML/CSSタグ講座はこちらからどうぞ。

www.mkmkblog.site

 

目次

 

アウトラインって何?

アウトラインとは、検索エンジンにWebページの構造を教えるためのものです。

 

下の図で見てみましょう。

f:id:mkmkblog:20200123110351p:plain

ドラえもんというアニメをメインコンテンツとして、登場人物のドラえもんのび太くんのを書いています。

 

 第一の階層 = アニメの主題(ドラえもん

 第二の階層 = 登場人物(ドラえもんのび太くんなど)

 

アウトラインは階層構造(入れ子構造)をとっており、検索エンジンに対してページの構成を伝えているのです。

 

また、アウトラインのように検索エンジンに対する情報を記述するものとして、metaタグ、linkタグがあったことは覚えているでしょうか。

 

改めて確認しましょう。

www.mkmkblog.site

 

www.mkmkblog.site

 

アウトラインの種類

アウトラインには明示的アウトライン暗黙的的アウトラインの2つの種類があります。

 

明示的アウトライン

こちらはセクショニングコンテンツとセクショニングルートと呼ばれる2つの方法を使い、アウトラインを目に見える形で記述します。

 

セクショニングコンテンツ

セクショニングコンテンツはコードの中のまとまりを分けるための要素です。

 

 ・section = 一般的なセクションに用いる

 ・article = 記事に対して用いる

 ・nav = サイト内のナビゲーションに対して用いる

 ・aside メインテーマとは違う情報に対して用いる

 

このセクショニングコンテンツを使う場合には、基本的に見出し要素<h1>~<h6>が必要です。

 

見出し要素を付けなかった場合は、そのセクションはUntitled sectionとしてタイトルなしを見なされます。

 

※ただし、どうしても構成上見出し要素がない場合は無理に付ける必要はありません。

 

セクションルート

セクションルートとは、そのページの中に独立したアウトラインを持ちたいときに使用します。

 

文章全体とは切り離されているため、全体のアウトラインには影響しません。

 

 ・blockquote = 引用のときに用いる

 ・body = 全体のアウトライン構成に用いる

 ・details = 詳細を記述するときに用いる

 ・fieldset = フォームを作るときに用いる

 ・figure = 図や画像に用いる

 ・td = 表に用いる

 

セクショニングコンテンツとセクショニングルートの違い

セクショニングコンテンツとセクショニングルートの違いは文章のアウトラインに影響を与えるか与えないかです。

 

セクショニングコンテンツ = 全体のアウトラインに影響を与える

セクショニングルート = 全体のアウトラインに影響を与えない

 

このように覚えましょう。

 

暗黙的アウトライン

暗黙的アウトラインは明示的アウトラインと違って記述していなくても勝手に生成されるアウトラインです。

 

見出し要素<h1>~<h6>を使うと自動で生成されます。

 

見出し要素が同等もしくはそれ以上の見出しが出てきたり、明示的アウトラインが記述されていると勝手にセクショニングを閉じ、新たなセクショニングを行ってくれるという便利機能なのです。

 

明示的アウトラインと暗黙的アウトラインの使い分けは?

さて、今まで見てきた明示的アウトラインと暗黙的アウトラインは、どのタイミングでどのアウトラインをつかうといいのでしょうか。

 

その正解はありません。

 

どのタイミングにどちらを使っても問題ありませんが、これだとわかりずらいので個人的な使い分けをご紹介します。

 

ブログ記事作成は暗黙的アウトライン

ブログ記事の構成はかなりわかりやすいですよね。

 

大見出しがあってその中に小見出しがいくつかあって、最後にまとめがあります。

 

このように分かりやすい構成となる場合には暗黙的アウトラインで全く問題ありません

 

LPページ作成は明示的アウトライン

LPページなどを作成するときはコーディングもかなり複雑になってきますよね。

 

アウトラインが複雑化しそうなものについては明示的アウトラインでしっかり記述していきます

 

なぜなら、暗黙的アウトラインは複雑化したアウトライン作成には向いていないからです。

 

正しいアウトラインを作成してSEO対策をしましょう

正しいアウトラインを作成することでサイトの評価は上がり、SEO対策にも有効です。

 

しかも、誰が見ても分かりやすい、美しいコードを作ることが可能となりますので、アウトラインについて正しく理解しましょう。

 

f:id:mkmkblog:20191226170302j:plain