Bootstrapを使わずにサイドバイサイドのレイアウトを実現する方法

1. floatプロパティを使用する方法: HTMLの要素に対して、floatプロパティを使用して左右に配置することができます。以下は例です。

HTML:

<div class="container">
  <div class="left">左側のコンテンツ</div>
  <div class="right">右側のコンテンツ</div>
</div>

CSS:

.container {
  width: 100%;
}
.left {
  float: left;
  width: 50%;
}
.right {
  float: right;
  width: 50%;
}

2. flexboxを使用する方法: flexboxはCSSの機能であり、要素を柔軟に配置することができます。以下は例です。

HTML:

<div class="container">
  <div class="left">左側のコンテンツ</div>
  <div class="right">右側のコンテンツ</div>
</div>

CSS:

.container {
  display: flex;
}
.left {
  flex: 1;
}
.right {
  flex: 1;
}

3. gridを使用する方法: CSSのgridシステムを使って、要素をグリッド形式で配置することができます。以下は例です。

HTML:

<div class="container">
  <div class="left">左側のコンテンツ</div>
  <div class="right">右側のコンテンツ</div>
</div>

CSS:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.left {
  grid-column: 1;
}
.right {
  grid-column: 2;
}

これらの方法を使用することで、Bootstrapを使わずにサイドバイサイドのレイアウトを実現することができます。適切な方法を選択し、プロジェクトに合わせてカスタマイズしてください。