2022.05.12

HTML・CSS

asideタグの使い方

asideタグはメインコンテンツの内容と関連はしているが、メインコンテンツではない補足情報を表します。主に「バナー広告」「関連記事」「サイドバー」「モーダルコンテンツ」等で使用します。

以下はサイドバーにasideタグを使用した例です。

<body>
  <header></header>

  <!--サイドバーにasideタグを使用-->
  <aside id="sidebar">
    <nav id="sidenav">
      <ul>
        <li><a href="/"></a></li>
        <li><a href="/"></a></li>
        <li><a href="/"></a></li>
      </ul>
    </nav>
  </aside>

  <main>
    <section>
      <h2></h2>
    </section>
    <section>
      <h2></h2>
    </section>
  </main>

  <footer></footer>
</body>

sectionタグ内はh1~h6タグの見出しを入れることが必須であるのに対し、asideタグ内は見出しを入れることが必須ではありません。

asideタグは1ページ内で複数使用できます。ただし、asideタグの入れ子はできません。

関連記事

2021.09.13

HTML・CSS

nth-childとlast-childの複合条件

デモページはこちら 3カラムで複数行のコンテンツの両側にCSSで角丸を設定します。コンテンツ数は可変の前提で、部分的に2カラムや1カラムになった時のパターンも考…

2021.03.03

HTML・CSS

tableの横スクロール時にタッチデバイスでアニメーション表示

ブラウザの幅がtableの幅よりも狭くなった時に、CSSのoverflow-xを利用して横スクロールでtableを表示します。ただしiOS13以降safariで…

2023.02.22

HTML・CSS

縦積みinline-flexの折り返しとwriting-modeによる代用

inline-flexで縦積みにした場合の折り返しと、writing-modeで縦積みにした場合の折り返しを確認します。デモページはこちら htmlは以下の単純…

2021.02.06

HTML・CSS

高さを判定してoverflow-yプロパティで縦スクロール

画面の高さが要素の高さよりも低くなった場合、要素にoverflow-yプロパティを適用して要素内のコンテンツを縦スクロールで表示します。デモページはこちら 画面…

2024.06.18

HTML・CSS

z-index: -1;指定時の注意点

z-indexプロパティの重なりで、z-index: -1;を指定した時の注意点を確認します。デモページはこちら 以下のhtml構造で確認します。クラス名div…

上に戻る