Bootstrap5で＜main＞＜aside＞などのタグを使うときの注意

新しく出るBootstrap5は、HTML5で構成されているので、それに沿ったサイト作りをしようと取り組んでいます。

このBootstrapを使うときに必ず使う<row>タグ。

コンテンツ部分に<row>タグを使い、<main>に主な内容、<aside>にサイドバーを作り、パソコン上で左右に分かれるようにしようと思っていました。

しかし、カラム落ちするんです。

なんでこうなるの？

と半日悩んだ結果、(おそらく)ですが、原因が判明しました。

<row>タグの外側に<main><aside>を書くと、カラム落ちしてしまうが、<row>タグの内側に<main><aside>を書くとカラム落ちしないしないことが分かりました。

Bootstrap5がまだBeta2なので、こんなことになるのかもしれませんが、備忘録のため、ブログに書いておくことにしました。

具体的に書くと以下のようになります。

このように、<main><aside>要素は、<div>の内側に入れる必要がありそうです。

以上備忘録でした

書いたのは
東大阪のヘアーサロン
オーパス21の前田でした