復習と、擬似クラスを使ったCSSアニメーション
TailwindCSSでは、擬似クラスを使ったホバーアニメーションも、用意されているユーティリティクラスのみで設定出来ます。
独自クラス（コンポーネント）の作成など、TailwindCSSを便利に活用する方法を紹介します。
復習：カード風デザインの作成
TailwindCSSのクラスを使って、4つ横並びのdivを下図のカード風デザインにアレンジします。
ここまでの復習にもなりますね。
やることは、主に4つです。
- 全体を線で囲う
- 4つ角を丸くする
- うっすらドロップシャドウを追加
- 右下に作成日時を追加
1~3：カード風枠組みの設定
まず、カード風に見せるための枠を作ります。
アイテムの幅を指定しているdivの直下に、もう一つdivを加えます。
img、h3、pタグを囲む形です。
追加したdivタグに、TailwindCSSのクラスを設定していきます。
- 全体を線で囲う→border
- 4つ角を丸くする→rounded-md
- うっすらドロップシャドウを追加→shadow-sm
roundedやshadowのサイズは、お好みに合わせて変えてください。
<div class="md:w-1/2 md:px-5 xl:w-1/4">
<div class="border rounded-md shadow-sm">
<img src="img/grooveland-designs-fhuPrCwAzaw-unsplash.jpg" alt="">
<h3 class="text-xl xl:text-2xl font-medium text-blue-700 underline line-clamp-1">
Sample Tomato
</h3>
<p class="line-clamp-2">
sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS
</p>
</div>
</div>
カード風の“枠”部分は問題なくできています。
文字の部分（h3、p）が、キワまでピッタリ来ていて読みにくいので、余白を入れましょう。
これから、pタグのテキストの下に、日時も加える予定です。
ですので、文字部分全体を囲うdivを追加、そちらに余白を指定した方がわかりやすいですね。
<div class="md:w-1/2 md:px-5 xl:w-1/4">
<div class="border rounded-md shadow-sm">
<img src="img/grooveland-designs-fhuPrCwAzaw-unsplash.jpg" alt="">
<div class="p-4"><!-- このdivを追加 -->
<h3 class="text-xl xl:text-2xl font-medium text-blue-700 underline line-clamp-1">
Sample Tomato
</h3>
<p class="line-clamp-2">
sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS
</p>
</div>
</div>
</div>
4：作成日時を追加
line-clamp-2を指定したpタグの下に、作成日時を追加します。
下記のスタイリングができるTailwindCSSのクラスを指定してください。
- 右寄せ
- 文字サイズはデフォルト（p）より小さめ
- 文字色はデフォルト（p）より薄め
pを使う場合は、mb-0クラスも入れると余白のバランスが良いです。
<div class="md:w-1/2 md:px-5 xl:w-1/4">
<div class="border rounded-md shadow-sm">
<img src="img/grooveland-designs-fhuPrCwAzaw-unsplash.jpg" alt="">
<div class="p-4">
<h3 class="text-xl xl:text-2xl font-medium text-blue-700 underline line-clamp-1">
Sample Tomato
</h3>
<p class="line-clamp-2">
sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS
</p>
<p class="text-right text-sm text-slate-400 mb-0">
2023/10/10
</p>
</div>
</div>
</div>
それっぽい見た目になったのではないでしょうか。
Tailwind CSSでの擬似クラスとトランジション
Tailwind CSSでは、擬似クラスなどを使ったスタイリングもできます。
以下の「マウスカーソルが重なったときに影が濃くなる（カードが浮き上がって見える）」ホバーアニメーションも、用意されているクラスを使うだけで設定できますよ。
擬似クラスを使った指定
擬似クラス (pseudo-classes)は、特定の状態にのみスタイルを当てたいときに使います。
マウスカーソルが重なったときの表示を作る:hover以外に、決まった位置の子要素だけにスタイルを当てる:first-childや:nth-child(n)なんかもよく使いますね。
TailwindCSSで設定できる擬似クラスについては、以下のページで詳しく解説されています。
擬似クラスだけではなく、疑似要素（Pseudo-elements）や属性セレクター (Attribute selectors) もある、と紹介されています。
これは、かなり便利。
https://tailwindcss.com/docs/hover-focus-and-other-states
ともあれ、今回は擬似クラス:hoverを使います。
レスポンシブな表示にするために、クラス名の頭にmd:などブレイクポイントを意味するワードを付け足しました。
それと同じで、マウスホバー時に適用したいスタイルのクラス名を探して、頭にhover:と付けるだけでOK。
クラス名の冒頭で「～なら適用する」という条件を付けているイメージです。
作成中のHTMLファイルに、TailwindCSSのクラスを追加します。
shadow-smクラスを指定しているdivタグに、マウスホバー状態だと影が大きくなるようにhover:shadow-lgクラスを追加。
何もないのにホバーで変化するのも妙なので、ついでにaタグで囲っておきます。
<div class="md:w-1/2 md:px-5 xl:w-1/4">
<a href="#">
<div class="border rounded-md shadow-sm hover:shadow-lg">
<img src="img/grooveland-designs-fhuPrCwAzaw-unsplash.jpg" alt="">
<div class="p-4">
<h3 class="text-xl xl:text-2xl font-medium text-blue-700 underline line-clamp-1">
Sample Tomato
</h3>
<p class="line-clamp-2">
sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS
</p>
<p class="text-right text-sm text-slate-400 mb-0">
2023/10/10
</p>
</div>
</div>
</a>
</div>
ブラウザで、変化を確認してください。
トランジションの設定
ホバーアクションが実装できましたが、今の状態だとON/OFFの差がくっきりしています。
CSSトランジションを設定して、滑らかな動きになるようにしましょう。
TailwindCSSの公式ドキュメントでは、CSSアニメーションの設定関連はTransitions & Animationにまとめられています。
まずはTransition Propertyのページを見てみましょう。
https://tailwindcss.com/docs/transition-property
トランジション効果を適用するCSSプロパティによって、クラスが分けられていますね。
今回の場合は、以下どちらかのクラスを使えば良いでしょう。
- 全プロパティに適用するtransition-allクラス
- ボックスシャドウにのみ適用するtransition-shadowクラス
また、transition-**クラスでは、アニメーション速度（transition-duration）が150msと短めに設定されています。
変化をわかりやすくするためにduration-500クラスを追加し、アニメーション速度も変更しておきます。
<div class="md:w-1/2 md:px-5 xl:w-1/4">
<a href="#">
<div class="border rounded-md shadow-sm hover:shadow-lg transition-all duration-500">
<img src="img/grooveland-designs-fhuPrCwAzaw-unsplash.jpg" alt="">
<div class="p-4">
<h3 class="text-xl xl:text-2xl font-medium text-blue-700 underline line-clamp-1">
Sample Tomato
</h3>
<p class="line-clamp-2">
sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS
</p>
<p class="text-right text-sm text-slate-400 mb-0">
2023/10/10
</p>
</div>
</div>
</a>
</div>
ゆっくり影が大きくなり、カードが浮き上がるようなアニメーションになりました。
今回のようにマウスホバー時にシャドウを変えたり、背景色を変えたりするのは、ボタンを作るときにもよく使います。
他3つにもデザインを反映する
ここまで作ってきたカード風デザインを、2つ目以降のアイテムにも適用しましょう。
部分テンプレートをレンダーする、ループするなど、実質一回しか書かないコード（完成見本としてHTMLで4つ入れてあるだけ）の場合は、作ったものを丸ごとコピペして増やせばOKです。
独自クラスを作成する場合
他の場所でも使いたい、一部のスタイルは再利用出来るようにまとめておきたい。
そうした場合には、独自クラス（コンポーネント）を作ることもできます。
例えば、カードの枠組みのデザインを「card-simple」クラスにまとめる場合は、以下のように書きます。
<style type="text/tailwindcss">
@layer base {
p {
@apply my-3;
}
}
@layer components {
.card-simple {
@apply border rounded-md shadow-sm hover:shadow-lg transition-all duration-500;
}
}
</style>
<div class="md:w-1/2 md:px-5 xl:w-1/4">
<a href="#">
<div class="card-simple">
<img src="img/grooveland-designs-fhuPrCwAzaw-unsplash.jpg" alt="">
今回作成する独自クラスは、コンポーネントレイヤーに入れます。
@applyの後ろに、class属性で指定していたTailwindCSSのユーティリティクラスを全部貼り付け。
そして、HTMLファイルではユーティリティクラスの代わりに、自分で作った独自クラスを指定します。
検証ツールで確認すると、ちゃんと独自クラスが出来ていることがわかります。
このように、必要に応じてクラスを作ることもできるわけです。
独自クラスを作るにしろ、他３つのdivへの反映は手打ちが必要。
最終的に4枚同じスタイリングになるようにコピペしておいてください。
ここまで出来れば、TailwindCSSのクラスを使った基本的なコーディングはバッチリ。
最初はクラス名を探しながらになるので時間がかかるかもしれませんが、CSSの基礎知識があれば問題なく使いこなせると思います。
使ってみるとTailwindCSSの特徴やメリット、デメリットも掴めてきます。
最初から仕事、本番環境だとゲンナリしてしまうので、最初はちょっと適当に、遊び感覚で使ってみるのがオススメです。
無料ビデオ講座のお知らせ
Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。
