More than 1 year has passed since last update.

デモ付！コピペ可！未経験大歓迎！FlexとGridによるTailwindCSSの基本レイアウトサンプル

Last updated at 2022-10-21Posted at 2022-10-20

環境

TailwindCSS 3
Chrome

はじめに

基本的に

具体的なサイズ（100%,100px,100remなど）を指定しなくて、自動幅調整を指定
FlexとGridを中心

ベースHTML

必要なタブ、とてもきれいなスタイルを追加

<!--index.html--> 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/main.css" />
    <title>Tailwindcss Layout</title>
  </head>

  <!--body--> 
　<body class="font-bold text-gray-700">
    <div class="bg-cyan-100 pl-2">header</div>
    <div class="bg-yellow-100 pl-2">content</div>
    <div class="bg-purple-100 pl-2">footer</div>
  </body>
</html>

ベースCSS

html,body要素の高さを指定

/*main.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html,body {
        /*ニーズによって指定、ここはフル画面*/
        @apply min-h-screen;
    }
}

CodePenを使う場合

/* <script src="https://cdn.tailwindcss.com"></script> */
html,
body {
	min-height: 100vh;
}

1カラム

Flex

  <body class="font-bold text-gray-700 flex flex-col">
    <div class="bg-cyan-100 pl-2">header</div>
    <div class="bg-yellow-100 pl-2 flex-grow">content</div>
    <div class="bg-purple-100 pl-2">footer</div>
  </body>

🌐 CodePen

See the Pen 1カラム-Flex by kensoz (@kensoz) on CodePen.

Grid

  <body class="font-bold text-gray-700 grid grid-rows-[auto_1fr_auto]">
    <div class="bg-cyan-100 pl-2">header</div>
    <div class="bg-yellow-100 pl-2">content</div>
    <div class="bg-purple-100 pl-2">footer</div>
  </body>

🌐 CodePen

See the Pen 1カラム-Grid by kensoz (@kensoz) on CodePen.

2カラム

Flex

  <body class="font-bold text-gray-700 flex flex-col">
    <div class="bg-cyan-100 pl-2">header</div>
    <div class="flex-grow flex">
      <div class="bg-rose-100 px-2">navi</div>
      <div class="bg-yellow-100 pl-2 flex-grow">content</div>
    </div>
    <div class="bg-purple-100 pl-2">footer</div>
  </body>

🌐 CodePen

See the Pen 2カラム-Flex by kensoz (@kensoz) on CodePen.

Grid

  <body class="font-bold text-gray-700 grid grid-rows-[auto_1fr_auto] grid-cols-[auto_1fr]">
    <div class="bg-cyan-100 pl-2 col-span-full">header</div>
    <div class="bg-rose-100 px-2">navi</div>
    <div class="bg-yellow-100 pl-2">content</div>
    <div class="bg-purple-100 pl-2 col-span-full">footer</div>
  </body>

🌐 CodePen

See the Pen 2カラム-Grid by kensoz (@kensoz) on CodePen.

2カラム（ナビ強調）

Flex

  <body class="font-bold text-gray-700 flex flex-col">
    <div class="bg-cyan-100 pl-2">header</div>
    <div class="flex-grow flex">
      <div class="bg-rose-100 px-2">navi</div>
      <div class="flex flex-col flex-grow">
        <div class="bg-yellow-100 pl-2 flex-grow">content</div>
        <div class="bg-purple-100 pl-2">footer</div>
      </div>
    </div>
  </body>

🌐 CodePen

See the Pen 2カラム（変種）-Flex by kensoz (@kensoz) on CodePen.

Grid

  <body class="font-bold text-gray-700 grid grid-rows-[auto_1fr_auto] grid-cols-[auto_1fr]">
    <div class="bg-cyan-100 pl-2 col-span-full">header</div>
    <div class="bg-rose-100 px-2 row-span-2">navi</div>
    <div class="bg-yellow-100 pl-2">content</div>
    <div class="bg-purple-100 pl-2">footer</div>
  </body>

🌐 CodePen

See the Pen 2カラム（変種）-Grid by kensoz (@kensoz) on CodePen.

2カラム（フルナビ）

Flex

  <body class="font-bold text-gray-700 flex">
    <div class="bg-rose-100 px-2">navi</div>
    <div class="flex-grow flex flex-col">
      <div class="bg-cyan-100 pl-2">header</div>
      <div class="bg-yellow-100 pl-2 flex-grow">content</div>
      <div class="bg-purple-100 pl-2">footer</div>
    </div>
  </body>

🌐 CodePen

See the Pen 2カラム（フルナビ）-Flex by kensoz (@kensoz) on CodePen.

Grid

  <body class="font-bold text-gray-700 grid grid-rows-[auto_1fr_auto] grid-cols-[auto_1fr]">
    <div class="bg-rose-100 px-2 row-span-3">navi</div>
    <div class="bg-cyan-100 pl-2">header</div>
    <div class="bg-yellow-100 pl-2">content</div>
    <div class="bg-purple-100 pl-2">footer</div>
  </body>

🌐 CodePen

See the Pen 2カラム（フルナビ）-Grid by kensoz (@kensoz) on CodePen.

3カラム/聖杯レイアウト

Flex

  <body class="font-bold text-gray-700 flex flex-col">
    <div class="bg-cyan-100 pl-2">header</div>
    <div class="flex-grow flex">
      <div class="bg-rose-100 px-2">navi</div>
      <div class="bg-yellow-100 pl-2 flex-grow">content</div>
      <div class="bg-rose-100 px-2">navi</div>
    </div>
    <div class="bg-purple-100 pl-2">footer</div>
  </body>

🌐 CodePen

See the Pen 3カラム/聖杯レイアウト-Flex by kensoz (@kensoz) on CodePen.

Grid

  <body class="font-bold text-gray-700 grid grid-rows-[auto_1fr_auto] grid-cols-[auto_1fr_auto]">
    <div class="bg-cyan-100 pl-2 col-span-full">header</div>
    <div class="bg-rose-100 px-2">navi</div>
    <div class="bg-yellow-100 pl-2">content</div>
    <div class="bg-rose-100 px-2">navi</div>
    <div class="bg-purple-100 pl-2 col-span-full">footer</div>
  </body>

🌐 CodePen

See the Pen 3カラム/聖杯レイアウト-Grid by kensoz (@kensoz) on CodePen.

カード

Flex

カードサイズ.basis-1/4 .m-2を指定（flex-basis:25%；magrin:0.5rem）

  <body class="font-bold text-gray-700 flex flex-wrap">
    <div class="bg-cyan-100 pl-2 m-2 basis-[calc(25%-1rem)]">card</div>
    <div class="bg-cyan-100 pl-2 m-2 basis-[calc(25%-1rem)]">card</div>
    <div class="bg-cyan-100 pl-2 m-2 basis-[calc(25%-1rem)]">card</div>
    <div class="bg-cyan-100 pl-2 m-2 basis-[calc(25%-1rem)]">card</div>
    <div class="bg-cyan-100 pl-2 m-2 basis-[calc(25%-1rem)]">card</div>
    <div class="bg-cyan-100 pl-2 m-2 basis-[calc(25%-1rem)]">card</div>
    <div class="bg-cyan-100 pl-2 m-2 basis-[calc(25%-1rem)]">card</div>
    <div class="bg-cyan-100 pl-2 m-2 basis-[calc(25%-1rem)]">card</div>
    <div class="bg-cyan-100 pl-2 m-2 basis-[calc(25%-1rem)]">card</div>
  </body>

🌐 CodePen

See the Pen カード-Flex by kensoz (@kensoz) on CodePen.

Grid

  <body class="font-bold text-gray-700 grid grid-cols-4 gap-4 p-2">
    <div class="bg-cyan-100 pl-2">card</div>
    <div class="bg-cyan-100 pl-2">card</div>
    <div class="bg-cyan-100 pl-2">card</div>
    <div class="bg-cyan-100 pl-2">card</div>
    <div class="bg-cyan-100 pl-2">card</div>
    <div class="bg-cyan-100 pl-2">card</div>
    <div class="bg-cyan-100 pl-2">card</div>
    <div class="bg-cyan-100 pl-2">card</div>
    <div class="bg-cyan-100 pl-2">card</div>
  </body>

🌐 CodePen

See the Pen カード-Grid by kensoz (@kensoz) on CodePen.

タイルレイアウト

Columns

  <div class="columns-4">
    <img class="mb-4" src="https://source.unsplash.com/random/1" />
    <img class="mb-4" src="https://source.unsplash.com/random/2" />
    <img class="mb-4" src="https://source.unsplash.com/random/3" />
    <img class="mb-4" src="https://source.unsplash.com/random/4" />
    <img class="mb-4" src="https://source.unsplash.com/random/5" />
    <img class="mb-4" src="https://source.unsplash.com/random/6" />
    <img class="mb-4" src="https://source.unsplash.com/random/7" />
    <img class="mb-4" src="https://source.unsplash.com/random/8" />
    <img class="mb-4" src="https://source.unsplash.com/random/9" />
  </div>

🌐 CodePen

See the Pen タイルレイアウト-Columns by kensoz (@kensoz) on CodePen.

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up