asideタグの右側にできる余白を消すにはどのようにすればいいでしょうか？

ヘッダー、サイドバー、メインカラム、フッター、とシンプルなレイアウトなのですが、
現状、asideタグを使ってサイドバーを実装したところ右側に余白が生じております。

その為、asideタグを削除してdivタグにて構成を整えると余白は消えました。
asideタグを使用することで余白が生じる原因を知りたいです。
また、そもそものasideタグの使い方として間違っているのでしょうか？

よろしくお願い致します。

HTML
1<body>
2    <header class="l-header">
3      <div class="l-header__inner">
4      </div>
5    </header>
6    <main>
7      <div class="l-main">
8          <aside>
9            <div class="c-sidebar">
10              <div class="c-sidebar__inner">
11                <div class="c-sidebar__title">
12                  <h2>サイドメニュー</h2>
13                </div>
14                <div class="c-sidebar__titleDesc">
15                  <p>サイドメニューです。<br>
16                    テキストテキストテキスト
17                  </p>
18                </div>
19                <div class="c-sidebar__text">
20                  <div class="c-sidebar__subTitle">
21                    <p>タイトル</p>
22                  </div>
23                  <div class="c-sidebar__textContents">
24                    <p>テキストテキストテキストテキストテキストテキスト
25                      テキストテキストテキストテキストテキスト<br>
26                      テキストテキストテキスト
27                    </p>
28                  </div>
29                </div>
30                <div class="c-sidebar__text">
31                  <div class="c-sidebar__subTitle">
32                    <p>タイトル</p>
33                  </div>
34                  <div class="c-sidebar__textContents">
35                    <p>テキストテキスト<br>
36                      テキストテキストテキストテキスト
37                      テキストテキストテキストテキストテキスト
38                    </p>
39                  </div>
40                </div>
41              </div>
42            </div>
43          </aside>
44          <section>
45            <div class="l-section">
46              <div class="l-section__title">
47                <h1>メインコンテンツ</h1>
48              </div>
49            </div>
50          </section>
51        </div>
52      </main>
53    <footer class="l-footer">
54
55    </footer>
56</body>

css
1.l-header {
2    background-color: #141f40;
3  }
4
5  .l-header__inner {
6    height: 100px;
7  }
8
9  .l-main {
10    display: flex;
11  }
12
13  .c-sidebar {
14    width: 30%;
15    background-color: #80bfa8;
16    height: auto;
17  }
18
19  .c-sidebar__inner {
20    padding: 20px;
21  }
22
23  .l-section {
24    width: 70%;
25  }

行動規範の内容に同意します

回答1件

asideタグは単なるブロック要素のタグで、このタグそのもののが原因というわけではなさそうです。
[.c-sidebar]では[width:30%]と指定されていますので、asideのwidthに対して30%のwidthになります。
余った70%分が余白となってしまっているのが問題です。

ではなぜ、asideタグがこんなにも大きくなっているかというと、[.l-main]の[position: flex]指定によるものです。
[.l-main]の配下の要素2つに[flex-basis]を指定し、逆に[.c-sidebar]の[width: 30%]を削ってレイアウト調整を行うと良いと思います。

ちなみにaside要素の使い方についてですが
本来は補足情報を示すタグなので、今回のようなサイドメニューの用途としては向かないのかも？

投稿2022/03/03 06:22

編集2022/03/03 06:50

PlugOut777

総合スコア917

soldier

2022/03/03 06:38

ご回答ありがとうございます！試してみます。ちなみに、サイドメニューを実装する際はdivタグを使用することの方が一般的なのでしょうか？

PlugOut777

2022/03/03 06:57

調べてみましたが、asideでサイドバーを実装する例は結構あるようです。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/aside 記事とは関係のない要素を表すので、サイドメニューも確かに関係のない要素ということで良いのかもしれません。また他の文書へのリンクを表すnavという要素もあります。（最初、こちらのイメージが強かったのでasideはどうなのだろうとコメントしてしまいました） https://developer.mozilla.org/ja/docs/Web/HTML/Element/nav HTML5以前のHTMLでは、基本的にdivやtableタグなどでレイアウトを組んでいました。今は目的毎に適切なタグがあるのであれば、それを選んで配置した方が良いと思います。 (なのでdivタグを使うなと言っているわけではありません)

soldier

2022/03/03 07:28

かしこまりました！参考記事、ありがとうございます！

行動規範の内容に同意します