Tailwind CSSを使った余白設定とFlexboxレイアウト

簡単なレイアウトを、Tailwind CSSのユーティリティクラスのみでコーディングしてみましょう。
公式ドキュメントを使ったクラスの探し方も解説します。

Tailwind CSSでの余白設定

前回のレッスンで、Tailwild CSSのCDN版を導入に使ったPlay CDNのサンプルコード。
こちらではbodyにp-5クラスが指定されていました。
クラス名やブラウザ表示から「paddingのpかな」とお察しの方も多いと思います。

せっかくですから、余白（paddingとmargin）設定のユーティリティクラスを見ていきましょう。

paddingの設定

Tailwind CSSのDocumentsで、padding設定のためのクラスを見ていきましょう。
左側メニュー部分の、見出しがSpacingとなっているブロックに「padding」があります。

https://tailwindcss.com/docs/padding

ページ上部には、使用可能なClass名と適用されるスタイル指定が書かれています。
その下に Basic usage（基本的な使い方）として、以下のようにクラスの規則性と使い方が書かれています。

Add padding to a single side
Control the padding on one side of an element using the p{t|r|b|l}-{size} utilities.

これは、paddingを追加する位置と大きさを組み合わせたクラスが使える、という意味です。


sizeを意味する数字は、数の小さいものでは0.5刻みで設定されています。
数が大きくなってくると、72,80,96……と刻み方も大きくなるので、その点だけ注意してください。
なお、sizeの数 1 あたり0.25rem（0.5につき0.125reｍ）ずつ増えるのはpadding、margin共通です。

sizeで使う数字、それぞれ何remになるかは暗記する必要はありません。
クラス名からどうpaddingを設定したいのかざっと把握ができ、必要に応じてTailwind CSSのDocumentsで調べられれば大丈夫です。

◇ paddingを調整してみよう

では、Play CDNのページからコピペしてきたHTMLを変更してみましょう。

bodyにpaddingが付けられていると、全幅で背景色や背景画像を設定したいときに不便。
なので、見出しを囲う形でdivタグを作り、そちらにpaddingを設定します。
横方向は今まで通りのpaddingを付けるためpx-5、縦方向は倍の余白を設定するpy-10クラスを指定します。

<body>
  <div class="px-5 py-10">
    <h1 class="text-3xl font-bold underline text-orange-500">
      Hello world!
    </h1>
  </div>

</body>

上書き保存して、ブラウザで表示を確認してください。
変更前よりも、H1の文字上の余白（空いているスペース）が広くなっていたら、成功です。

marginの設定

もう一つの余白設定プロパティ、marginも見てみましょう。
marginを設定するためのクラスも、paddingと同じ仕組みでクラス名が決められています。

https://tailwindcss.com/docs/margin

ただし、marginプロパティの値には、paddingプロパティでは使わない以下2つがあります。

  • auto
  • ネガティブ（-1remなど）

値がautoの場合

marginの値でautoを使いたい場合はsizeの位置にautoと書けばOKです。
中央配置にしたい時のmx-autoクラスは、特に使う機会が多いかなと思います。

ネガティブな値を使う時

marginの特徴として、ネガティブ（マイナス）の数値を設定できるという事があります。
親要素からはみ出させた配置を作る、要素を重ねたいときなどに使いますよね。

Tailwind CSSのクラスで、ネガティブな値を指定したい時は、クラス名の最初に-（半角のマイナス/ダッシュ）を付けます。

末尾につくsizeの数字は、通常のmarginと同じものが使えます。
例えば-mx-2クラスを指定した場合は、左右マージンが0.5remずつマイナスされる（親要素よりも大きくなる）ことになります。

Tailwind CSSでのFlexレイアウト作成

レイアウトを作りやすく、コーディングで使われる機会が多いCSS Flexbox。
これもTailwind CSSを使うと、ユーティリティクラスの組み合わせで作ることが出来ます。

よくあるページレイアウトを、Tailwind CSSのクラスだけで作ってみましょう。
下図の配置を、Flexboxで作ります。

解説では、以下のUnsplashのフリー画像を使用させていただいています。
お手持ちの画像があれば、そちらを使われても構いません。

素材

URL：https://unsplash.com/ja/%E5%86%99%E7%9C%9F/p6KMIFzWwy8

DL Size：中間（1920 × 1280）

URL：https://unsplash.com/ja/%E5%86%99%E7%9C%9F/fhuPrCwAzaw

DL Size：中間（1920 × 1439）

コンテンツ幅を設定する「コンテナ」

Tailwind CSSのcontainerクラス

多くのWebページにはコンテンツ幅が設定されているかと思います。
ページコンテンツ、特はテキストは横長になりすぎると読みにくいですしね。フレームワークを使わずに自分でCSSを書く場合も、「container」「contants-wrapper」などのクラスを作って最大幅を定義されている方が多いでしょう。

Tailwind CSSでもコンテンツ幅を制限するためのcontainerクラスが用意されています。
Layoutのグループに、そのものズバリContainerという項目があるので見てみましょう。

https://tailwindcss.com/docs/container

表示領域に合わせて最大幅はかわり、最大1565pxまでになるよう設定されています。

注意点として、Tailwind CSSのcontainerクラスは、max-widthのみが指定された状態である事が挙げられます。
Bootstrapなどのように中央配置や、左右paddingは設定されていません。

ちょっと言葉だけだと分かりにくいですね。
H1を囲っているdivのpx-5クラスをなくし、containerクラスを指定してみましょう。

<body>
  <div class="container py-10">
    <h1 class="text-3xl font-bold underline text-orange-500">
      Hello world!
    </h1>
  </div>

こんな感じになります。
配置も左右paddingも無いので、あまり綺麗ではありません。

先程なくしたpx-5クラス、中央配置のためのmx-autoクラスを加えます。 

<body>
  <div class="container mx-auto px-5 py-10">
    <h1 class="text-3xl font-bold underline text-orange-500">
      Hello world!
    </h1>
  </div>

これでやっと、コンテンツ幅を設定したようなレイアウトになりました。

ちなみに、左右paddingを加えたのは表示幅によって左端ピッタリまでコンテンツが来てしまうことがあるため。
キワまで文字が来ると見にくいので、最低限の余白を入れています。

◇ 作ってみよう

コーディングレイアウト図のコンテンツ幅部分を作ってみましょう。

ページ全体に背景色を入れ、コンテンツ幅は背景色を白に設定します。

背景色指定に使うクラスは、Backgroundグループ > Background Colorで確認できます。
上画像の色でなくとも構いませんので、お好きな色のclassを使ってみてください。

https://tailwindcss.com/docs/background-color

色々書き方はあると思いますが、シンプルに以下のように書いてみました。
paddingのサイズはお好みで調整してください。

<body class="bg-zinc-400">
  <div class="container mx-auto px-5 py-10">
    <h1 class="text-3xl font-bold underline text-orange-500">
      Hello world!
    </h1>
  </div>
  <div class="container bg-white mx-auto px-5 py-20">
    test
  </div>

</body>


中身を入れるための、白背景部分が出来ました。

displayプロパティの指定

作った.container.bg-whiteのdivに中身を入れていきます。

上段と下段、それぞれ横並びレイアウトを作るためにflexコンテナを用意します。
CSSで display:flex を指定したいので、そのためのユーティリティクラスを探しましょう。

検索する、もしくはLayout > Displayを開いて確認します。

https://tailwindcss.com/docs/display

flexクラスを適用すれば良いことがわかります。

◇ 作ってみよう

上段用と下段用のflexコンテナを追加します。

<div class="container bg-white mx-auto px-5 py-20">
    <div class="flex">

    </div>
    <div class="flex">

    </div>
</div>

divタグを使っていますが、コンテンツに応じてarticleやsectionタグでもOK。
空divが加わっただけですので、まだ表示に変化はありません。

widthプロパティとグリッド分割

上段下段それぞれの中身（Flexアイテム）を作っていきます。
flexアイテムの横幅・コンテナに占める割合は、width関連のユーティリティクラスを使うと設定ができます。
グリッドデザインのページコーディングに便利なクラスも用意されていますよ。

Tailwind CSSのDocuments、Sizingグループの一番上にwidthがあります。
上の方には、paddingなどと同じようなクラス名とスタイルの対応が書かれていますね。

https://tailwindcss.com/docs/width

一覧表部分で、下の方へスクロールダウンしてみましょう。
w-1/2やw-2/3など、marginやpaddingとは少し違うクラス名が出てくるはずです。

Tailwind CSSで幅を定義するクラスには、大きく3つの形式があります。

FlexboxやCSS Gridでレイアウトを作る時は、「fraction」系を使う事が多いでしょう。
分割数（分母）の最大12を使うと、Webデザインでよく使われる12分割グリッドシステムのコーディングも楽にできます。

ちなみにw-1/6とw-2/12のように、同じ結果になるクラスもあります。
このあたりの使い分けは、ページもしくはセクション全体で分母を揃えたいか、簡潔に書きたいか、お好み次第。

◇ 作ってみよう

上段と下段、それぞれのFlexアイテムの幅を設定しながら、中身を入れていきましょう。
widthで設定する幅は以下のようにします。

まず上段。
画像や、h2タグ・pタグ内のテキストはお好きに設定してください。 

<div class="flex">
    <div class="w-3/5">
        <h2>
            ここに見出しがはいります。
        </h2>
        <p>
            ここは説明の文章が入ります。<br>
            sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS
        </p>
    </div>
    <div class="w-2/5">
        <img src="img/vince-lee-p6KMIFzWwy8-unsplash.jpg" alt="">
    </div>
</div>

次に下段。
ここは1/4サイズのアイテムを1つ作って、コピペで増やしちゃいましょう。 

<div class="flex">
    <div class="w-1/4">
        <img src="img/grooveland-designs-fhuPrCwAzaw-unsplash.jpg" alt="">
        <h3>Sample Tomato</h3>
        <p>
            sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS
        </p>
    </div>
    <!-- div.w-1/4をあと3つ貼り付け -->
</div>

このあたりで一度保存して、ブラウザで見てみましょう。
余白も一切なく、横並びにしたアイテムも、上下段も、ピッタリくっついています。

見出し（hタグ）の標準スタイルがリセットされているなど色々難点はありますが……まずは大枠のレイアウトを整えてみましょう。

flexレイアウト向けのCSSクラス

Tailwind CSSのドキュメントでは、FlexboxもしくはCSS Gridでのレイアウト・子要素の配置に使用するCSSプロパティのクラスはFlexbox & Gridのグループにまとめられています。

Flexアイテム間の間隔を簡単に設定してしまいましょう。
Gapのページを開きます。

https://tailwindcss.com/docs/gap

クラス名のルールは、概ねpaddingやmarginと同じですね。
横方向にだけすき間を作りたい時はgap-x-10のように間に「ｘ」を、縦方向にだけすき間を作りたい時は「ｙ」を入れれば良いことがわかります。

◇ 作ってみよう

上段、下段、それぞれを囲う<div class="flex">のclass属性に、Gap指定のユーティリティクラスを加えてみましょう。
下段の方には、margin-topを指定できるmt-20クラスも入れておきます。

<div class="container bg-white mx-auto px-5 py-20">
    <div class="flex gap-x-10">
        <!-- 中身部分 省略 -->
    </div>
    <div class="flex gap-10 mt-20">
        <!-- 中身部分 省略 -->
    </div>
</div>

一気に見やすくなりました！

そのほかのクラスも見てみましょう

Flexbox & Gridの見出し以下にある、その他のリンク項目も見てみましょう。

例えば、一番上にはFlex Basisがあります。
今回は子要素の大きさをw-1/4などwidthプロパティのクラスで設定しましたが、Flex Basisを設定するbasis-1/4を使っても良いですね。

その下には子要素を並べる方法を設定するFlex Direction、更に下の方まで見ていくと揃え位置を決める「Align Items」や「Place Content」などもあります。ほぼCSSプロパティ名と同じなので、加えたいスタイル指定があれば探せるでしょう。

探すのが面倒なら、検索するのが最も手っ取り早いです。
が、ドキュメントをふわっと眺めるのも、時々知らなかったCSSを発見したりと勉強になりますよ。

前のレッスン 次のレッスン レッスン一覧へ

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

関連する講座

CSSの書き方入門 - はじめてのWe...
【図解たっぷり】Chrome検証ツール...
HTML&CSSでつくるWebサイト制...
レスポンシブ・デザイン入門【図解たっぷ...
基礎から学びたい人のためのCSS入門【...
新HTML/CSS入門講座（応用編）
プロコーダー育成講座
イラストレーター入門講座 - はじめて...
HTMLの書き方入門 - はじめてのW...
フォトショップ入門講座 - はじめての...
JavaScriptの書き方入門 - ...
レンタルサーバーを使ったWebサイト公...
Wordpress制作入門講座 - は...
Photoshopで作って学ぶサムネイ...
×