Bootstrap 4のサイドバーの作成方法

まず、基本的なサイドバーレイアウトを作成する方法です。以下のHTMLコードを使用します。

<div class="container-fluid">
  <div class="row">
    <div class="col-3">
      <!-- サイドバーのコンテンツ -->
    </div>
    <div class="col-9">
      <!-- メインコンテンツ -->
    </div>
  </div>
</div>

このコードでは、container-fluidクラスを使用して全体のコンテナを作成し、rowクラスを使用して行を作成します。col-3とcol-9クラスを使用して、サイドバーとメインコンテンツの幅を指定します。この例では、サイドバーの幅は全体の3分の1、メインコンテンツの幅は残りの9分の1となります。

次に、サイドバーレイアウトにコンテンツを追加する方法です。以下の例では、サイドバーにナビゲーションメニューを追加します。

<div class="container-fluid">
  <div class="row">
    <div class="col-3">
      <ul class="list-group">
        <li class="list-group-item">メニュー1</li>
        <li class="list-group-item">メニュー2</li>
        <li class="list-group-item">メニュー3</li>
      </ul>
    </div>
    <div class="col-9">
      <!-- メインコンテンツ -->
    </div>
  </div>
</div>

この例では、list-groupクラスとlist-group-itemクラスを使用して、ナビゲーションメニューを作成します。list-groupクラスはリストをグループ化し、list-group-itemクラスは各リストアイテムをスタイリングします。

これらのコード例を参考にしながら、Bootstrap 4を使用して独自のサイドバーレイアウトを作成してみてください。また、自身のウェブサイトやアプリケーションに合わせてカスタマイズすることもできます。