Tailwind CSSでの背景画像指定、装飾

TailwindCSSではデザイン装飾まで、用意されているユーティリティクラスのみでスタイリングが出来ます。
背景画像の設定なども手軽にできるので、やってみましょう！

これからのレッスンで行うこと

基本コードと素材

1.Tailwind CSSでの背景画像設定方法

1-1.下準備
1-2.背景画像を指定
1-3.要素の高さを任意に設定する
1-4.背景画像の表示基準位置・大きさ指定

2.ヒーローのタイトル部分を作成

2-1.レイアウト作成
2-2.CSSフィルターを適用する（Filters）
2-3.角を丸くする（Borders）
2-4.シャドウを付ける（Effects）

これからのレッスンで行うこと

ここからは、Flexレイアウトを作成したHTMLファイルを、よりWebページらしいビジュアルに変えていきます。

↓

今回はページ上部、ファーストビューやヒーローと呼ばれる部分を作成します。

前回までの復習に役立つ設定も多いので、一緒に書いていきましょう！

基本コードと素材

【前回までに書いたHTML】

<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">
    <div class="md:flex gap-x-10">
      <div class="md:w-2/5">
        <img src="img/vince-lee-p6KMIFzWwy8-unsplash.jpg" alt="">
      </div>
      <div class="md:w-3/5 md:order-first">
        <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>
    <div class="flex flex-col md:flex-row gap-10 mt-20">
      <div class="md:w-1/2 md:px-5 xl: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.md:w-1/2 をあと３つコピペで複製 /// -->
    </div>
  </div>
</body>

【使用画像について】

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

素材	URL：https://unsplash.com/ja/%E5%86%99%E7%9C%9F/dcNHyPAVD8E DL Size：L（2400 × 1502）
	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）

1.Tailwind CSSでの背景画像設定方法

1-1.下準備

最初に、背景画像を設定するためのdivタグを追加してください。
bodyで背景色を指定しているクラスは不要なので、合わせて取り除いておきましょう。

1-2.背景画像を指定

では、追加したdivに背景画像を設定していきます。
背景画像を指定できるCSSプロパティはbackgroundもしくはbackground-imageですね。

Tailwind CSSの公式ドキュメントで見てみましょう。
Background Imageのページを開くと、下図のように線形グラデーションを作るためのクラスが出てきます。

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

背景に画像を使う場合の方法は、ページの下部に掲載されています。
右側のサイドバーから「Arbitrary values」を選択してください。

1 回限りのbackground-image値を設定するなら、角括弧を使ってダイレクトに書け、というような説明がされていますね。

掲載されているサンプルコードを参考に書いてみましょう。
コピー・アンド・ペーストして、画像パスだけ打ち替えてもOK。

<body>
  <div class="bg-[url('img/ricardo-gomez-angel-dcNHyPAVD8E-unsplash.jpg')]">

上書き保存して、ブラウザで背景画像が表示されるか確認します。

1-3.要素の高さを任意に設定する

背景画像を指定したdivが細いので、最低でも確保する高さ（min-height）を指定します。
height系も、widthと同じくh-96など値が設定されているクラスが沢山用意されています。

ですが、使いたいサイズがない、vh単位で指定したい……なんて場合もありますよね。
ページ下部にあるUsing custom values > Arbitrary valuesを見てみましょう。

https://tailwindcss.com/docs/min-height#using-custom-values

先程のbackground-imageと同様に、角括弧（[]）を使うと好きな値を設定できるようです。
高さの指定も1回しか使わないので、この方法でやってみましょう。

背景画像を設定したdivで、min-height: 45vhを設定してみます。

<body>
  <div class="min-h-[45vh] bg-[url('img/ricardo-gomez-angel-dcNHyPAVD8E-unsplash.jpg')]">

ブラウザで確認して、CSSとして適用されていれば成功です。

1-4.背景画像の表示基準位置・大きさ指定

背景画像の表示方法を決めましょう。

背景画像の表示開始位置を決めるbackground-position
背景画像のサイズを設定するbackground-size

それぞれのページで使えるクラスを確認して、クラス属性として追加していきます。

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

<body>
  <div  class="min-h-[45vh] bg-[url('img/ricardo-gomez-angel-dcNHyPAVD8E-unsplash.jpg')]  bg-center bg-cover">

指定通りになっているか、ブラウザで表示を確認してください。

2.ヒーローのタイトル部分を作成

2-1.レイアウト作成

最初に、タイトル部分の大まかなレイアウトを作ります。
やることは大きく3つ。

h1の下にキャッチコピーを入れる
文字の後ろに背景を設定するためのdivを追加
Flexboxを使って、heroの中央に追加したdivを配置

キャッチコピーは見えにくいため、ドラッグで選択して反転させています。

HTML、クラス属性部分をゴリゴリ書き足します。
練習ですので、テキストはお好きに入力してみてください。

<body>
  <div class="flex place-content-center py-10 min-h-[45vh] bg-[url('img/ricardo-gomez-angel-dcNHyPAVD8E-unsplash.jpg')] bg-center bg-cover">
    <div class="container px-5 place-self-center flex place-content-center">
      <div class="">
        <h1 class="text-3xl font-bold underline text-orange-500">
          Tailwind トマト農園
        </h1>
        <span>
          キレイな空気と水で育てた自慢のトマト
        </span>
      </div>
    </div>
  </div>

文字を囲うdivが上下左右中央に配置されていればOKです。

2-2.CSSフィルターを適用する（Filters）

h1とspanを囲っているdivに、白いすりガラス風の背景を設定します。
Tailwind CSSではCSSフィルターのクラスまで用意されていますよ。

今回使うのはbackdrop-filterのblur。
ですので、Filters >Backdrop Blurを開きます。

https://tailwindcss.com/docs/backdrop-blur

定義されているClass一覧の下に、用例（Basic usage）があります。
サンプルコードのクラスをコピーして、作成中のHTMLに貼り付けてみましょう。
backdrop-filterのユーティリティクラスbackdrop-blur-smだけではなく、bg-white/30も一緒に追加してください。

<div class="backdrop-blur-sm bg-white/30">
    <h1 class="text-3xl font-bold underline text-orange-500">
        Tailwind トマト農園
    </h1>
    <span>
        キレイな空気と水で育てた自慢のトマト
    </span>
</div>

　↓

半透明の白い背景色が入り、かつ背景画像が少しぼやけて見えます。
ただ、文字を読みやすくするためには、もう少し白い背景色を濃くした方が良さそうですね。

背景色の透明度は、色指定クラス名の / 以降の部分で設定されています。
この部分を、TailwindCSSではopacity modifier(不透明度修飾子)と呼んでいます。

今回使ったbg-white/30を検証ツールで見てみると、RGBAのA（alpha）の値に30％＝0.3として反映されていることがわかります。

もう少し不透明度を上げたいので、bg-white/50に変えてみましょう。
黒色の文字が読みやすくなると思います。

※/の後に書く不透明度を示す数はopacityユーティリティと同じものがデフォルトで使用できるようです。

【バージョンによる透明度指定の差】

TailwindCSSのバージョンにより、不透明度を指定するための書き方に違いがあります。
今回使用したbg-white/50など、色名/不透明度と1つにまとめて書けるのは、v3系から導入された方法になっています。

v2系まではclass="bg-black bg-opacity-25"のように、「背景色」と「背景色の不透明度」２つのクラスを使っていました。
これから新しいバージョンを使う際には必要ありませんが、違いがあるということは頭の片隅においておいくと良いでしょう。

TailwindCSS Documents
Upgrade Guide > New opacity modifier syntax

2-3.角を丸くする（Borders）

次は、半透明になっているdivの四隅の角を丸くします。

四隅の角を丸めるCSSプロパティはborder-radius。
検索するか、BordersのグループにあるBorder Radiusを開いて、使用可能なクラスを見てみましょう。
側面ごと、角それぞれに個別指定するためのクラスがあり、かなり数が多いですね。

https://tailwindcss.com/docs/border-radius

今回は角4つどれも同じように丸めたいので、rounded-2xlを使います。
ついでにpaddingのユーティリティクラスも加えて、余白も設定しておきましょう。

<div class="rounded-2xl p-8 backdrop-blur-sm bg-white/50">
    <h1 class="text-3xl font-bold underline text-orange-500">
        Tailwind トマト農園

2-4.シャドウを付ける（Effects）

テキストを囲うdivに、ドロップシャドウをつけます。

CSSのbox-shadowプロパティを指定してくれるクラスは、Effectsグループの中にあります。
影のサイズ・向きを決めるのが「Box Shadow」。
影の色を決めるのが「Box Shadow Color」と2つに分かれています。

https://tailwindcss.com/docs/box-shadow

まずは、Box Shadowのページから影をつけるためのクラスを貼り付けてみましょう。

<div class="rounded-2xl p-8 backdrop-blur-sm bg-white/50 shadow-md">
    <h1 class="text-3xl font-bold underline text-orange-500">
        Tailwind トマト農園

「気持ち、影がついたかな」くらいの見え方ですね。

Box Shadow Colorのページに掲載されているクラスの方も使ってみましょう。
クラス名の頭がbox-shadowを示す「shadow」になっているだけで、色名や不透明度の指定方法は背景色bg-と全く同じ。
お好きに設定してみてください。

見本ではデフォルトよりも黒っぽくなるようshadow-black/40を使いました。

<div class="rounded-2xl p-8 backdrop-blur-sm bg-white/50 shadow-md shadow-black/40">
    <h1 class="text-3xl font-bold underline text-orange-500">
        Tailwind トマト農園

これでヒーロー部分の装飾ができました。
文字部分は、次のタイポグラフィでまとめて設定していきましょう。

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

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

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

無料講座一覧を見る