<h2 id="tl%3Bdr" data-line="1" class="code-line"><a class="header-anchor-link" href="#tl%3Bdr" aria-hidden="true"></a> TL;DR</h2>
<ul data-line="2" class="code-line">
<li data-line="2" class="code-line">上のタグに<code>flex</code>と<code>flex-wrap</code>を使用して、2カラムのレイアウトを作成する。</li>
<li data-line="3" class="code-line">メインコンテンツとサイドバーの幅を<code>w-2/3</code>と<code>w-1/3</code>で設定する。</li>
<li data-line="4" class="code-line">メインとサイドバーの間に余白を追加するために、<code>p-4</code>を使用する。</li>
</ul>
普段仕事ではフロントエンドを触らない私ですが、このブログは自分でTailwind CSSを利用して作成しました。
Tailwind CSSを使うと簡単に2カラムのレイアウトを作成できたので、備忘録として残しておきます。
<h2 id="tailwind-css%E3%81%AE%E5%B0%8E%E5%85%A5" data-line="10" class="code-line"><a class="header-anchor-link" href="#tailwind-css%E3%81%AE%E5%B0%8E%E5%85%A5" aria-hidden="true"></a> Tailwind CSSの導入</h2>
プロジェクトにTailwind CSSを導入していない場合は、<a href="https://tailwindcss.com/docs/installation" target="_blank" rel="nofollow noopener noreferrer">公式ドキュメント</a>に従って導入してください。

 <iframe 
 class="hatenablogcard" 
 style="width:100%;height:155px;max-width:680px;" 
 src="https://hatenablog-parts.com/embed?url=https://tailwindcss.com/docs/installation" 
 width="300" 
 height="150" 
 frameborder="0" 
 scrolling="no">
 </iframe> 
 
<h2 id="taiwldind%E3%81%A72%E3%82%AB%E3%83%A9%E3%83%A0%E3%81%AE%E3%83%96%E3%83%AD%E3%82%B0%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B" data-line="15" class="code-line"><a class="header-anchor-link" href="#taiwldind%E3%81%A72%E3%82%AB%E3%83%A9%E3%83%A0%E3%81%AE%E3%83%96%E3%83%AD%E3%82%B0%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B" aria-hidden="true"></a> Taiwldindで2カラムのブログレイアウトを作る</h2>
<h3 id="flex%E3%81%A8flex-wrap%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A62%E3%82%AB%E3%83%A9%E3%83%A0%E3%81%AB%E3%81%99%E3%82%8B" data-line="16" class="code-line"><a class="header-anchor-link" href="#flex%E3%81%A8flex-wrap%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A62%E3%82%AB%E3%83%A9%E3%83%A0%E3%81%AB%E3%81%99%E3%82%8B" aria-hidden="true"></a> flexとflex-wrapを使用して2カラムにする</h3>
2カラムのレイアウトを作成するために、<code>flex</code>と<code>flex-wrap</code>を使用します。
<ul data-line="19" class="code-line">
<li data-line="19" class="code-line">flex: 要素をフレックスコンテナにします。</li>
<li data-line="20" class="code-line">flex-wrap: 要素を折り返しするために使用します。</li>
</ul>
<div class="code-block-container"><pre class="language-html"><code class="language-html code-line" data-line="22">&lt;div class="flex flex-wrap"&gt;
 &lt;div class=""&gt;
 &lt;!-- メインコンテンツ --&gt;
 ここにメインのコンテンツが入ります。
 &lt;/div&gt;
 &lt;div class=""&gt;
 &lt;!-- サイドバー --&gt;
 ここにサイドバーのコンテンツが入ります。
 &lt;/div&gt;
&lt;/div&gt;
</code></pre></div>このコードでは、flexクラスで親要素をフレックスコンテナに変更し、子要素をフレックスアイテムに変更しています。
<h3 id="%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%A8%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC%E3%81%AE%E5%B9%85%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B" data-line="37" class="code-line"><a class="header-anchor-link" href="#%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%A8%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC%E3%81%AE%E5%B9%85%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B" aria-hidden="true"></a> メインコンテンツとサイドバーの幅を設定する</h3>
2カラムに分けたので、次にカラムをメインコンテンツとサイドバーとして設定するために幅を設定します。Tailwind CSSでは、w-{分子}/{分母}の形式で幅を指定できます。
<ul data-line="40" class="code-line">
<li data-line="40" class="code-line">w-2/3: メインコンテンツの幅を2/3に設定します。</li>
<li data-line="41" class="code-line">w-1/3: サイドバーの幅を1/3に設定します。</li>
</ul>
<div class="code-block-container"><pre class="language-html"><code class="language-html code-line" data-line="43">&lt;div class="flex flex-wrap"&gt;
 &lt;div class="w-2/3"&gt;
 &lt;!-- メインコンテンツ --&gt;
 ここにメインのコンテンツが入ります。
 &lt;/div&gt;
 &lt;div class="w-1/3"&gt;
 &lt;!-- サイドバー --&gt;
 ここにサイドバーのコンテンツが入ります。
 &lt;/div&gt;
&lt;/div&gt;
</code></pre></div>色々試しましたが、<code>w-2/3</code>と<code>w-1/3</code>でメインコンテンツとサイドバーの幅を設定するのがブログのレイアウトには一番合っていると感じました。
ちなみにtailwindのデフォルトでは、12分割までの幅を指定できるので、<code>w-1/12</code>などとすることもできます。
詳細は公式ドキュメントを参照してください。

 <iframe 
 class="hatenablogcard" 
 style="width:100%;height:155px;max-width:680px;" 
 src="https://hatenablog-parts.com/embed?url=https://tailwindcss.com/docs/width" 
 width="300" 
 height="150" 
 frameborder="0" 
 scrolling="no">
 </iframe> 
 
<h3 id="%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A8%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC%E3%81%AE%E9%96%93%E3%81%AB%E4%BD%99%E7%99%BD%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B" data-line="64" class="code-line"><a class="header-anchor-link" href="#%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A8%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC%E3%81%AE%E9%96%93%E3%81%AB%E4%BD%99%E7%99%BD%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B" aria-hidden="true"></a> メインとサイドバーの間に余白を追加する</h3>
メインコンテンツとサイドバーの間に余白を追加するために、<code>p-4</code>を使用します。
<div class="code-block-container"><pre class="language-html"><code class="language-html code-line" data-line="67"> &lt;div class="flex flex-wrap"&gt;
 &lt;div class="w-2/3 p-4"&gt;
 &lt;!-- メインコンテンツ --&gt;
 ここにメインのコンテンツが入ります。
 &lt;/div&gt;
 &lt;div class="w-1/3 p-4"&gt;
 &lt;!-- サイドバー --&gt;
 ここにサイドバーのコンテンツが入ります。
 &lt;/div&gt;
 &lt;/div&gt;
</code></pre></div>余白については、<code>p-4</code>で上下左右に4単位の余白を追加しています。<code>p-</code>の後に好きな値を入れると長さを調整できるので適宜設定してください。
横幅だけや縦幅だけ変更したい場合は、<code>px-4</code>や<code>py-4</code>を使用してください。片側だけ余白を追加したい場合は、<code>pl-4</code>や<code>pr-4</code>を使用してください。
詳細は公式ドキュメントを参照してください。

 <iframe 
 class="hatenablogcard" 
 style="width:100%;height:155px;max-width:680px;" 
 src="https://hatenablog-parts.com/embed?url=https://tailwindcss.com/docs/padding" 
 width="300" 
 height="150" 
 frameborder="0" 
 scrolling="no">
 </iframe>

Tailwind CSSでMarkdownブログのサイドバーを2カラムで実装する方法