Tailwind CSS

ダッシュボードのレイアウトを作るときに「フッターを下部に固定するにはどうするんやっけ？」って、よくなるのでメモ！ やり方 ※ すぐに試せるようにCDNでTailwind CSSを読み込んでいます。 とりあえず必要なところだけ &lt;!DOCTYPE html&gt; &lt;html lang=&quot;ja&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt; &lt;title&gt;DashboardLayout&lt;/title&gt; &lt;/head&gt; &lt;body class='flex flex-col h-screen w-screen'&gt; &lt;header&gt;Header&lt;/header&gt; &lt;main class='flex h-full'&gt; &lt;aside class='w-1/6'&gt;Sidebar&lt;/aside&gt; &lt;section class='w-5/6'&gt;MainContainer&lt;/section&gt; &lt;/main&gt; &lt;footer&gt;Footer&lt;/footer&gt; &lt;/body&gt; &lt;/html&gt; 色を付けてわかりやすく &lt;!DOCTYPE html&gt; &lt;html lang=&quot;ja&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt; &lt;title&gt;DashboardLayout&lt;/title&gt; &lt;/head&gt; &lt;body class='flex flex-col h-screen w-screen'&gt; &lt;header class='bg-red-500'&gt;Header&lt;/header&gt; &lt;main class='flex h-full'&gt; &lt;aside class='w-1/6 bg-yellow-500'&gt;Sidebar&lt;/aside&gt; &lt;section class='w-5/6 bg-green-500'&gt;MainContainer&lt;/section&gt; &lt;/main&gt; &lt;footer class='bg-blue-500'&gt;Footer&lt;/footer&gt; &lt;/body&gt; &lt;/html&gt; ユーティリティクラス flex flex-col 子要素を垂直方向へ配置 h-screen w-screen 高さと幅を画面サイズいっぱいにする h-full 高さを親要素いっぱいにする w-1/6 w-5/6 幅を指定の比率にする

Tailwind CSS

【SvelteKit x Tailwind CSS】SvelteKitプロジェクトにTailwind CSSを適用する

【Tailwind CSS】ダッシュボードレイアウト