HTML aside要素でサイドバーのアウトラインを作る

HTML aside要素でサイドバーのアウトラインを作る

HTMLのaside要素で2カラムレイアウトのサイドバーをマークアップしてアウトラインを作るときに、asideの意味を調べていたら余計にasideのことが分からなくなり立ち止まってしまいました。

考えるより実際にaside要素でサイドバーのアウトラインを作ってみたほうが覚えやすいかもと思ったので、記事にしながらasideの理解を深めることにします。

 

HTMLのaside要素が持つ意味

 

HTMLのaside要素が持つ意味を先に理解しておきます。

asideタグでアウトラインを形成した要素の意味はHTML構造で「補足情報」としての意味を持つ要素になります

HTMLのasideタグは何に対しての補足情報なのか。

セクショニングルートの親要素bodyで主題になるコンテンツに対しての補足という意味が1番しっくりきます。「aside要素で作るコンテンツをページから切り離したとしても、メインコンテンツに影響を受けないコンテンツ」をaside要素で作ります。

 

Advertisement

 

そしてaside要素はHTML5で追加されたタグで「アサイド」と読みます。翻訳にすると「さておき」や「かたわらに」になる。

さておき要素…

それはさておきaside要素のボックスモデルはブロック要素を形成し、HTML5で追加されたarticle、section、navと同様にアウトラインに影響するので、aside要素で作るコンテンツは、補足した要素だとわかりやすいアウトラインを作ることができます。

 

asideタグでサイドバーのアウトラインを作る

 

HTMLのaside要素でサイドバーのアウトラインをマークアップしてみようと思います。

Webサイトのレイアウトが2カラムレイアウトのとき、メインコンテンツに対してサイドバーのコンテンツが補足情報になることが多いです。aside要素を作るだけでなく補足情報管理もしやすい場所、それが「サイドバー」です。

 

<body>
    <header>
        <div class="l_header">
            <h1>サイトタイトル</h1>
        </div>
    </header>
    <div class="wrapper">
        <div class="main">
            <section>
                <h2>セクション1</h2>
            </section>
            <section>
                <h2>セクション2</h2>
            </section>
        </div>
        <div class="l_sidebar">
            <aside>アサイド要素</aside>
        </div>
    </div>
</body>

 

aside要素を作る全体的なHTML構造は、body内部にheaderを作りdiv要素のwrapperにはmainとsidebarを作っておきます。

そしてsidebarに<aside></aside>タグでaside要素を作ります。

 

<div class="l_sidebar">
    <aside>アサイド要素</aside>
</div>

 

asideタグをHTMLファイルに記述するときには開始タグと終了タグの両方が必要です。マークアップするときは省略しないでサイドバーに要素を作ります。

上記のHTMLのように作成した2カラムの構造をCSSで横並びにしたプレビューとアウトラインの結果をheadingsMapツールで表示すると以下の画像のようになります。

 

 

ヘッダーのサイトタイトルとメインセクションのアウトラインは作ることができますが、サイドバーでaside要素のアウトラインは表示されません。

この表示結果の理由は単純にaside要素の内部にまだ見出しがないためです。

 

 

aside要素でサイドバーのアウトラインをHTML 5 Outlinerというツールで確認してもaside要素のアウトラインは「Untitled Section」になります。

やはり見出しになるh要素が、aside要素内部にないので「無題のセクション」としてアウトラインを作ってることになります。これはツール上のことらしいので問題はないようです。

 

aside要素とsectionでサイドバーのアウトライン

 

aside要素でサイドバーのアウトラインを作るときに、HTML5で追加されたasideとsectionを使用してサイドバーを作ると、HTML5仕様のアウトラインを作ることができます。

またaside要素自体のアウトラインをツールで見たときに「無題のセクション」が気になるようなら<aside>下に見出しを記述して作ります。

 

<div class="l_sidebar">
    <aside>
        <h2>サイドバー</h2>
        <section>
            <h3>サイドセクション1</h3>
        </section>
        <section>
            <h3>サイドセクション2</h3>
        </section>
    </aside>
</div>

 

上記のサイドバーのaside要素の構造はaside要素の内部にsection要素を入れて、各セクションに見出しをつけることで、サイドバーのアウトラインが以下の画像のような結果になります。

 

bodyとメインコンテンツの見出しも含めた画像です。

 

このようなHTML構造にaside要素でサイドバーのアウトラインを作ることでのaside要素が示す意味は、サイドバーをどのように扱うかにより以下の2つの意味になるかと思います。

 

「主題になるメインコンテンツに対しての補足情報のセクション」

または

サイト全体に対しての補足情報のセクション」

 

という意味を持つサイドバーの作り方になります。

HTMLではasideもsectionもセクショニングコンテンツを示すので「補足の意味を持たせたaside要素セクションの中の情報をsection要素の見出しでアウトラインを作る」という言葉にすると複雑に感じるサイドバーです。

 

Advertisement

 

サイドバーのaside要素とhタグでアウトライン

 

サイドバーのコンテンツによっては、aside要素の内部のhタグでアウトラインを作るのでもいいと思えます。

 

<div class="l_sidebar">
    <aside>
        <h2>サイドバー</h2>
        <div class="aside_inner">
            <ul>
                <li><a href="">リスト</a></li>
                <li><a href="">リスト</a></li>
                <li><a href="">リスト</a></li>
            </ul>
        </div>
    </aside>
    <aside>
        <h2>サイドバー</h2>
        <div class="aside_inner">
            <ul>
                <li><a href="">リスト</a></li>
                <li><a href="">リスト</a></li>
                <li><a href="">リスト</a></li>
            </ul>
        </div>
    </aside>
</div>

 

サイドバーのaside要素にhタグでアウトラインを作る場合は、sectionタグがないので、補足情報としてのasideタグでセクションを示したら、見出しでアウトラインを作る。というサイドバーの作り方です。

 

 

hタグは同レベル以上の見出しが出現した場合は暗黙的に閉じます。なので上の画像のアウトラインの場合、「サイドバー1でh2」「サイドバー2でh2」を記述するとサイドバー1のh2が閉じることになり、サイドバー1と2のアウトラインを形成することができます。

サイトの構造にHTML5で追加されたタグで適切なアウトラインが作りづらい場合などには、サイドバーのaside要素にhタグでアウトラインを作ることができるのですね。

「補足情報としてコンテンツがここにあるよ」ということをaside要素がセクショニングコンテンツとしての範囲を表しているのでhタグだけでアウトラインを作るのも、まだまだ有効かと思います。

 

まとめ

 

HTMLのaside要素でサイドバーのアウトラインを作るときは、サイドバーが補足情報コンテンツになるということが土台になります。

あくまでも補足なので見出し階層を深くしてアウトラインが増えることはないはずなので、見出しレベルは使ってもh3までと思います。

aside要素の内部で階層が深いアウトラインだと「補足情報が詳細過ぎるのはメインコンテンツの情報が薄いからなのかな?」の疑問が生まれてしまいそうなので、単純なアウトライン構造にするように個人的には意識しています。

HTMLカテゴリの最新記事