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.02.19

HTML・CSS

CSSプロパティ::-webkit-scrollbarでブラウザのスクロールバーをカスタマイズ

webkit系ブラウザのSafariとChromeは、CSSプロパティの::-webkit-scrollbarでスクロールバーの見た目をカスタマイズできます。デ…

2022.05.11

HTML・CSS

CSSのcalc記述時の注意点

CSSのcalcはCSS3で追加された関数です。calc記述時は以下の点に注意が必要です。 加算・減算の演算子の左右には半角スペースが必要 乗算は掛けられる方(…

2022.08.30

HTML・CSS

linear-gradientを利用した文字の下線

background-imageプロパティのlinear-gradientを利用して複数行の文字に下線を引きます。複数行に対応させるため、inline要素に適用…

2024.02.19

HTML・CSS

Photoshopのグラデーションオーバーレイをlinear-gradientで適用

Photoshopのグラデーションオーバーレイを、background-imageプロパティのlinear-gradientで適用します。グラデーションの角度は…

2020.10.12

HTML・CSS

CSSプロパティをショートハンドで記述

CSSプロパティをショートハンドで記述します。プロパティによって記述順や省略可・不可のルールがあります。 ■ fontプロパティfont-style・font-…

上に戻る