確認環境：
Bootstrap ｖ4.6
Bootstrapとは
レスポンシブ対応のCSSのフレームワーク
モバイルファーストをコンセプトとしている
レスポンシブWebデザインとは
PCとかスマホとか画面サイズの違うデバイスでアクセスされたときでも対応できるようデザインしたサイト
Bootstrapのブレークポイント
| ブレークポイント | クラス識別子 | サイズ |
|---|---|---|
| X-Small | なし | <576px |
| 小さい | sm | ≧576px |
| 中 | md | ≧768px |
| 大 | lg | ≧992px |
| 特大 | xl | ≧1200px |
| 特大特大 | xxl | ≧1400px |
Bootstrapで2カラムサイトを作る
まず、以下の公式ページの通り、Bootstrapを使えるようにします。
その後、以下のようにHTMLを記載します。
<div class="container">
<div class="row">
<section class="side col-md-4">
<h2>サイドコンテンツ</h2>
<p>サイドコンテンツの内容</p>
<h2>サイドリスト</h2>
<ul>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
</ul>
</section>
<section class="main col-md-8">
<h1>メインコンテンツ</h1>
<div class="archive">
<div>
<img src="no-image.gif" alt="no-img">
<p>見出しや文章</p>
</div>
<div>
<img src="no-image.gif" alt="no-img">
<p>見出しや文章</p>
</div>
<div>
<img src="no-image.gif" alt="no-img">
<p>見出しや文章</p>
</div>
<div>
<img src="no-image.gif" alt="no-img">
<p>見出しや文章</p>
</div>
</div>
</section>
</div>
</div>
こんな感じに2カラムで表示されます。
この例では、「col-md-8」でブレークポイントを設定しているので、
画面の幅が768pxより小さい場合以下のようにブレークされて表示されます。
まとめ
Bootstrapを使えば、2カラムサイトが簡単に作れます。
Bootstrapを使わないと、cssのdisplayとか、potisionプロパティとかいろいろ設定をしないといけないので手間がかかります。
参考サイト
