目次
TL;DR
- 上のタグに
flexとflex-wrapを使用して、2カラムのレイアウトを作成する。 - メインコンテンツとサイドバーの幅を
w-2/3とw-1/3で設定する。 - メインとサイドバーの間に余白を追加するために、
p-4を使用する。
普段仕事ではフロントエンドを触らない私ですが、このブログは自分でTailwind CSSを利用して作成しました。
Tailwind CSSを使うと簡単に2カラムのレイアウトを作成できたので、備忘録として残しておきます。
Tailwind CSSの導入
プロジェクトにTailwind CSSを導入していない場合は、公式ドキュメントに従って導入してください。
Taiwldindで2カラムのブログレイアウトを作る
flexとflex-wrapを使用して2カラムにする
2カラムのレイアウトを作成するために、flexとflex-wrapを使用します。
- flex: 要素をフレックスコンテナにします。
- flex-wrap: 要素を折り返しするために使用します。
<div class="flex flex-wrap">
<div class="">
<!-- メインコンテンツ -->
ここにメインのコンテンツが入ります。
</div>
<div class="">
<!-- サイドバー -->
ここにサイドバーのコンテンツが入ります。
</div>
</div>
このコードでは、flexクラスで親要素をフレックスコンテナに変更し、子要素をフレックスアイテムに変更しています。
メインコンテンツとサイドバーの幅を設定する
2カラムに分けたので、次にカラムをメインコンテンツとサイドバーとして設定するために幅を設定します。Tailwind CSSでは、w-{分子}/{分母}の形式で幅を指定できます。
- w-2/3: メインコンテンツの幅を2/3に設定します。
- w-1/3: サイドバーの幅を1/3に設定します。
<div class="flex flex-wrap">
<div class="w-2/3">
<!-- メインコンテンツ -->
ここにメインのコンテンツが入ります。
</div>
<div class="w-1/3">
<!-- サイドバー -->
ここにサイドバーのコンテンツが入ります。
</div>
</div>
色々試しましたが、w-2/3とw-1/3でメインコンテンツとサイドバーの幅を設定するのがブログのレイアウトには一番合っていると感じました。
ちなみにtailwindのデフォルトでは、12分割までの幅を指定できるので、w-1/12などとすることもできます。
詳細は公式ドキュメントを参照してください。
メインとサイドバーの間に余白を追加する
メインコンテンツとサイドバーの間に余白を追加するために、p-4を使用します。
<div class="flex flex-wrap">
<div class="w-2/3 p-4">
<!-- メインコンテンツ -->
ここにメインのコンテンツが入ります。
</div>
<div class="w-1/3 p-4">
<!-- サイドバー -->
ここにサイドバーのコンテンツが入ります。
</div>
</div>
余白については、p-4で上下左右に4単位の余白を追加しています。p-の後に好きな値を入れると長さを調整できるので適宜設定してください。
横幅だけや縦幅だけ変更したい場合は、px-4やpy-4を使用してください。片側だけ余白を追加したい場合は、pl-4やpr-4を使用してください。
詳細は公式ドキュメントを参照してください。
