PR

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

スポンサーリンク

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

 

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

 

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

 

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

 

なんでこうなるの?

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

 

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

 

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

 

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

 
 
<div class=”row”>
 
<div class=”col-8″>
<main>

メインコンテンツ
</main>
</div><!–/ col-8–>

 
<div class=”col-4″>
<aside>
サイドバーのコンテンツ
</aside>
</div><!–/ col-4–>
 
</div><!–/ row–>
 

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

 

以上備忘録でした

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

コメント