dev TailwindCSS

Tailwind CSS rounded shadow ring を実践ハンズオン｜角丸・影・リングの基礎から応用まで

Tailwind CSS rounded shadow ring の ユーティリティクラスを基礎から実践まで10問のハンズオンで完全理解。border・bg・opacity との組み合わせや、hover・focus バリアントの使い方も解説します。

Contents

読者がこの記事から得られる知識

この記事では、Tailwind CSS rounded shadow ring（角丸・影・リング）のユーティリティクラスを、実際にコードを書きながら学びます。Tailwind CSS Playground を使ったハンズオン形式なので、手を動かしながら理解を深められます。

  • rounded ユーティリティのサイズ指定（sm 〜 full）と方向指定（t, b, tl など）の使い分け
  • shadow ユーティリティのサイズ指定（sm 〜 2xl）と hover: バリアントの組み合わせ
  • ring ユーティリティの幅・色の2クラス指定と focus: バリアントの活用
  • border、bg、opacity と組み合わせた実践的なUI構築
  • transition を常時適用してホバー・フォーカス時のアニメーションを滑らかにするテクニック

基礎5問で各ユーティリティの基本を押さえ、実践5問で商品カードやプロフィールカードなど実務に近いUIを作ります。読み終えるころには、角丸・影・リングを自在に組み合わせてカードUIやフォームを作れるようになっているはずです。

今回ハンズオンした内容

今回は Tailwind CSS 公式ドキュメントの以下のページを参考に、Tailwind CSS Playground（https://play.tailwindcss.com/）で実際にコードを書いて動作確認しました。

参考にした公式ドキュメント:

  • Border Radius（rounded）: https://tailwindcss.com/docs/border-radius
  • Box Shadow（shadow）: https://tailwindcss.com/docs/box-shadow
  • Ring Width（ring）: https://tailwindcss.com/docs/ring-width
  • Border Width（border）: https://tailwindcss.com/docs/border-width

学習は「基礎問題5問 → 実践問題5問」の構成で進めました。git ブランチは feature/tw-rounded-shadow-ring を作成して管理しています。

ハンズオンで学習したコードと結果の画像

先にハンズオンで書いたコード全体を紹介しておきます。

<div class="flex flex-col gap-2 ml-2">
  <div class="basic-1-container">
    <div class="w-32 h-32 bg-blue-500 rounded-lg"></div>
  </div>
  <div class="basic-2-container">
    <div class="flex gap-4">
      <div class="w-32 h-32 bg-blue-500"></div>
      <div class="w-32 h-32 bg-blue-500 rounded-lg"></div>
      <div class="w-32 h-32 bg-blue-500 rounded-full"></div>
    </div>
  </div>
  <div class="basic-3-container">
    <div class="flex gap-8 p-8">
      <div class="w-32 h-32 bg-white rounded-lg shadow-sm"></div>
      <div class="w-32 h-32 bg-white rounded-lg shadow-lg"></div>
      <div class="w-32 h-32 bg-white rounded-lg shadow-2xl"></div>
    </div>
  </div>
  <div class="basic-4-container">
    <div class="flex gap-8 p-8">
      <button class="px-4 py-2 bg-white rounded-lg ring-2 ring-blue-500">Button A</button>
      <button class="px-4 py-2 bg-white rounded-lg ring-4 ring-green-500">Button B</button>
      <button class="px-4 py-2 bg-white rounded-lg ring-0">Button C</button>
    </div>
  </div>
  <div class="basic-5-container">
    <div class="p-8">
      <div class="w-64 p-6 bg-white rounded-xl shadow-lg ring-1 ring-gray-200">
        Hello TailwindCSS
      </div>
    </div>
  </div>
  <div class="practice-1-container">
    <div class="p-8">
      <div class="w-64 rounded-2xl shadow-md bg-white">
        <div class="bg-gray-200 h-40 rounded-t-2xl"></div>
        <div class="p-4">
          <p>ワイヤレスイヤホン</p>
          <p class="font-bold">¥3,980</p>
        </div>
      </div>
    </div>
  </div>
  <div class="practice-2-container">
    <div class="p-8">
      <input type="email" placeholder="メールアドレスを入力" class="w-80 px-4 py-2 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500"/>
    </div>
  </div>
  <div class="practice-2-container">
    <div class="p-8">
      <div class="relative inline-block">
        <div class="w-16 h-16 bg-gray-400 rounded-full ring-2 ring-white"></div>
        <div class="rounded-full absolute top-0 right-0 w-4 h-4 bg-red-500 ring-2 ring-white"></div>
      </div>
    </div>
  </div>
  <div class="practice-4-container">
    <div class="w-72 p-6 bg-white rounded-xl shadow-md hover:shadow-2xl transition-shadow duration-300">
      <div class="font-bold text-lg">お知らせ</div>
      <div class="text-gray-600 mt-2">新機能をリリースしました</div>
    </div>
  </div>
  <div class="practice-5-container">
    <div class="w-80 bg-white rounded-2xl shadow-lg p-6">
      <div class="w-20 h-20 bg-gray-300 rounded-full ring-4 ring-blue-100 mx-auto"></div>
        <div class="font-bold text-xl text-center mt-4">田中 太郎</div>
        <div class="text-gray-500 text-center mt-1">フロントエンドエンジニア</div>
        <button class="mt-4 w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 focus:ring-2 focus:ring-blue-300 transition-colors duration-200">フォローする</button>
    </div>
  </div>

</div>

上記コードを Tailwind PLAY に貼り付けた結果については、以下のスクショを参照して下さい。

Tailwind Play 全体の結果画像1つめ
Tailwind Play 全体の結果画像2つめ
Tailwind Play 全体の結果画像3つめ

基礎 第1問: rounded-lg で四隅を丸くする

最初の一歩として、rounded-lg でdivの四隅を丸くします。

コード:

<div class="w-32 h-32 bg-blue-500 rounded-lg"></div>

各クラスの意味:

  • w-32 h-32: 幅・高さを 8rem（128px）に設定
  • bg-blue-500: 背景色を青に設定
  • rounded-lg: 四隅に 0.5rem の角丸を適用（border-radius: 0.5rem）

意図: rounded-lg を付けるだけで、四隅すべてに均一な角丸が適用されることを確認します。

実行結果:

Tailwind CSS rounded-lg で四隅を丸くした結果

四隅が均一に丸くなりました。rounded-lg は border-radius: 0.5rem に対応しています。

基礎 第2問: rounded-none・rounded-lg・rounded-full の比較

角丸のバリエーションを横並びで比較します。

コード:

<div class="flex gap-4">
  <div class="w-32 h-32 bg-blue-500"></div>
  <div class="w-32 h-32 bg-blue-500 rounded-lg"></div>
  <div class="w-32 h-32 bg-blue-500 rounded-full"></div>
</div>

各クラスの意味:

  • クラス指定なし（または rounded-none）: 角丸なし（border-radius: 0）
  • rounded-lg: 四隅に 0.5rem の角丸
  • rounded-full: border-radius: 9999px で完全な円形

意図: 角丸なし、適度な角丸、完全な円形の3段階を視覚的に比較し、rounded のサフィックスによる変化を理解します。

実行結果:

Tailwind CSS rounded-none・rounded-lg・rounded-full の比較

左から角丸なし、適度な角丸、完全な円形。正方形の要素に rounded-full を適用すると真円になります。

基礎 第3問: shadow-sm・shadow-lg・shadow-2xl の比較

影のサイズの違いを横並びで比較します。

コード:

<div class="flex gap-8 p-8">
  <div class="w-32 h-32 bg-white rounded-lg shadow-sm"></div>
  <div class="w-32 h-32 bg-white rounded-lg shadow-lg"></div>
  <div class="w-32 h-32 bg-white rounded-lg shadow-2xl"></div>
</div>

各クラスの意味:

  • shadow-sm: 小さい影（ほんのり薄い影）
  • shadow-lg: 大きい影（しっかりした影）
  • shadow-2xl: 最大級の影（かなり広がった大きな影）

意図: 影のサイズによる視覚的な奥行き感の違いを確認します。背景色を白にして影を見やすくしています。

実行結果:

Tailwind CSS shadow-sm・shadow-lg・shadow-2xl の比較

左から右に向かって影が大きくなっています。shadow-sm はほぼ平面的に見え、shadow-2xl は要素が浮き上がっているように見えます。

基礎 第4問: ring の幅と色の指定

ring ユーティリティでボタンにリングを適用します。

最初の回答（色指定なし）:

<div class="flex gap-8 p-8">
  <button class="px-4 py-2 bg-white rounded-lg ring-2">Button A</button>
  <button class="px-4 py-2 bg-white rounded-lg ring-4">Button B</button>
  <button class="px-4 py-2 bg-white rounded-lg ring-0">Button C</button>
</div>
Tailwind CSS ring の色指定なしの状態

リング幅は効いていますが、色がデフォルト（黒系）のまま。ring は幅と色の2クラスを組み合わせて使う必要があります。

修正後のコード:

<div class="flex gap-8 p-8">
  <button class="px-4 py-2 bg-white rounded-lg ring-2 ring-blue-500">Button A</button>
  <button class="px-4 py-2 bg-white rounded-lg ring-4 ring-green-500">Button B</button>
  <button class="px-4 py-2 bg-white rounded-lg ring-0">Button C</button>
</div>

各クラスの意味:

  • ring-2 ring-blue-500: 幅2pxの青いリング
  • ring-4 ring-green-500: 幅4pxの緑のリング
  • ring-0: リングなし

意図: ring は border と違い、要素のサイズに影響しない（box-shadow ベース）ことを確認します。

実行結果:

Tailwind CSS ring の幅と色の指定結果

青い細めのリングと緑の太めのリングが表示されました。ring はフォーカス表現などでよく使います。

基礎 第5問: rounded・shadow・ring の組み合わせ

3つのユーティリティを組み合わせてカード風UIを作ります。

最初の回答（タイポあり）:

<div class="p-8">
  <div class="w-64 p-6 bg-white rounder-xl shadow-lg ring-1 ring-gray-200">
    Hello TailwindCSS
  </div>
</div>

rounder-xl というタイポがあり、角丸が効いていませんでした。正しくは rounded-xl です。

Tailwind CSS rounded タイポで角丸が効かない状態

修正後のコード:

<div class="p-8">
  <div class="w-64 p-6 bg-white rounded-xl shadow-lg ring-1 ring-gray-200">
    Hello TailwindCSS
  </div>
</div>

各クラスの意味:

  • rounded-xl: 四隅に 0.75rem の角丸
  • shadow-lg: しっかりした影
  • ring-1 ring-gray-200: 薄いグレーの細いリング（カードの輪郭線として機能）

実行結果:

Tailwind CSS rounded・shadow・ring を組み合わせたカード

rounded-xl + shadow-lg + ring-1 ring-gray-200 の組み合わせで、実際のWebサイトでもよく見るカード風UIの基本形ができました。

実践 第1問: ECサイト風の商品カード

メルカリのような ECサイトを参考に、商品カードを作ります。

最初の回答（構造の問題あり）:

<div class="p-8 w-64 rounded-2xl bg-white">
  <div class="bg-gray-200 h-40 rounded-t-2xl"></div>
  <div class="p-4">
    <p>ワイヤレスイヤホン</p>
    <p class="font-bold">¥3,980</p>
  </div>
</div>
Tailwind CSS 商品カード構造の問題で余白が発生

p-8 がカード本体に付いているため、画像エリアの周囲に余白ができてしまいました。また shadow-md が抜けていました。ラッパーとカード本体を別の div に分ける必要があります。

修正後のコード:

<div class="p-8">
  <div class="w-64 rounded-2xl shadow-md bg-white">
    <div class="bg-gray-200 h-40 rounded-t-2xl"></div>
    <div class="p-4">
      <p>ワイヤレスイヤホン</p>
      <p class="font-bold">¥3,980</p>
    </div>
  </div>
</div>

各クラスの意味:

  • rounded-2xl: カード全体の角丸
  • rounded-t-2xl: 画像エリアの上側だけ丸くする
  • shadow-md: 中程度の影

意図: カード全体は rounded-2xl だが、画像エリアは上側だけ丸くする必要がある。rounded-t-* で特定の方向だけ角丸を適用できます。

実行結果:

Tailwind CSS rounded-lg で四隅を丸くした結果

画像エリアがカード端まで広がり、影もきれいに表示されています。

実践 第2問: フォーカス時にリングが表示される入力フォーム

focus: バリアントと ring を組み合わせた入力フォームを作ります。

最初の回答（タイポあり）:

<input type="email" placeholder="メールアドレスを入力"
  class="w-80 px-4 py-2 rounded-lg border border-gray-300
         focus:border-blue-500 focus:ring-2 focus:focus:ring-blue-500"/>

focus:focus:ring-blue-500 と focus: が二重になっていました。

修正後のコード:

<div class="p-8">
  <input type="email" placeholder="メールアドレスを入力"
    class="w-80 px-4 py-2 rounded-lg border border-gray-300
           focus:border-blue-500 focus:ring-2 focus:ring-blue-500"/>
</div>

各クラスの意味:

  • border border-gray-300: 通常時のグレーボーダー
  • focus:border-blue-500: フォーカス時にボーダー色を青に変更
  • focus:ring-2 focus:ring-blue-500: フォーカス時に青いリングを表示

意図: focus: バリアントで、ユーザーが入力欄をクリックしたときだけスタイルを切り替えます。

実行結果:

Tailwind CSS フォーカス前の入力フォーム
Tailwind CSS フォーカス時のリング表示

フォーカス時に青いリングとボーダーが表示されました。focus: バリアントと ring の組み合わせは、フォーム系UIで非常によく使うパターンです。

実践 第3問: 通知バッジ付きのアバター

rounded-full と ring を組み合わせて、SNSでよく見るアバターUIを作ります。

最初の回答（2つの問題あり）:

<div class="p-8">
  <div class="relative">
    <div class="w-16 h-16 bg-gray-400 rounded-full ring-2 ring-white"></div>
    <div class="absolute top-0 right-0 w-4 h-4 bg-red-500 ring-2 ring-white"></div>
  </div>
</div>
Tailwind CSS アバターバッジの位置とrounded-fullの問題

2つの問題がありました。バッジに rounded-full がなく四角いまま。また relative のコンテナに幅指定がないため、親要素が画面幅いっぱいに広がり、バッジが右端に飛んでしまいました。

修正後のコード:

<div class="p-8">
  <div class="relative inline-block">
    <div class="w-16 h-16 bg-gray-400 rounded-full ring-2 ring-white"></div>
    <div class="rounded-full absolute top-0 right-0 w-4 h-4 bg-red-500 ring-2 ring-white"></div>
  </div>
</div>

各クラスの意味:

  • relative inline-block: 位置基準かつアバターサイズに縮小
  • rounded-full ring-2 ring-white: 完全な円形 + 白い縁取り（アバター・バッジ両方に適用）
  • absolute top-0 right-0: バッジをアバターの右上に配置

実行結果:

Tailwind CSS 通知バッジ付きアバター完成

アバターの右上に赤い通知バッジがきれいに表示されました。SNSやチャットアプリでよく使われるパターンです。

実践 第4問: ホバーで浮き上がるカード

hover: バリアントと transition を組み合わせたカードを作ります。

最初の回答（transition の配置ミス）:

<div class="w-72 p-6 bg-white rounded-xl shadow-md
            hover:shadow-2xl hover:transition-shadow hover:duration-300">
  <div class="font-bold text-lg">お知らせ</div>
  <div class="text-gray-600 mt-2">新機能をリリースしました</div>
</div>
Tailwind CSS hover:transition の誤った指定

transition-shadow と duration-300 に hover: を付けてしまいました。トランジションの定義は常時適用しておくものです。hover: を付けると、ホバーを外したときに瞬時に戻ってしまいます。

修正後のコード:

<div class="p-8">
  <div class="w-72 p-6 bg-white rounded-xl shadow-md
              hover:shadow-2xl transition-shadow duration-300">
    <div class="font-bold text-lg">お知らせ</div>
    <div class="text-gray-600 mt-2">新機能をリリースしました</div>
  </div>
</div>

各クラスの意味:

  • shadow-md: 通常時の影
  • hover:shadow-2xl: ホバー時に影を大きくする
  • transition-shadow duration-300: 影の変化を300msかけて滑らかにする（常時適用）

ポイント: transition は「どのプロパティをどれくらいの時間で変化させるか」という設定。ホバー時だけでなく、ホバーを外したときもスムーズに戻るために常時適用が必要です。

実行結果:

Tailwind CSS ホバーカード通常時の影
Tailwind CSS ホバーカードホバー時の影

通常時とホバー時で影のサイズが滑らかに変化します。

実践 第5問: プロフィールカード（総まとめ）

すべてのユーティリティを組み合わせてプロフィールカードを作ります。

最初の回答（HTML構造の問題）:

<div class="w-80 bg-white rounded-2xl shadow-lg p-6">
  <div class="w-20 h-20 bg-gray-300 rounded-full ring-4 ring-blue-100 mx-auto">
    <div class="font-bold text-xl text-center mt-4">田中 太郎</div>
    <div class="text-gray-500 text-center mt-1"></div>
    <div class="mt-4 w-full bg-blue-500 text-white py-2 rounded-lg">フォローする</div>
  </div>
</div>
Tailwind CSS プロフィールカード HTML構造のネストミス

名前やボタンがアバターの div の中にネストされてしまい、丸い枠の中にすべてが収まってしまいました。アバターの div を自己完結させ、名前以降はその外に出す必要があります。

修正後のコード:

<div class="p-8">
  <div class="w-80 bg-white rounded-2xl shadow-lg p-6">
    <div class="w-20 h-20 bg-gray-300 rounded-full ring-4 ring-blue-100 mx-auto"></div>
    <div class="font-bold text-xl text-center mt-4">田中 太郎</div>
    <div class="text-gray-500 text-center mt-1">フロントエンドエンジニア</div>
    <button class="mt-4 w-full bg-blue-500 text-white py-2 rounded-lg
                   hover:bg-blue-600 focus:ring-2 focus:ring-blue-300
                   transition-colors duration-200">フォローする</button>
  </div>
</div>

各クラスの意味:

  • rounded-2xl shadow-lg: カード全体の角丸と影
  • rounded-full ring-4 ring-blue-100 mx-auto: 円形アバター + 薄い青のリング + 中央揃え
  • hover:bg-blue-600: ホバー時にボタンの色を濃くする
  • focus:ring-2 focus:ring-blue-300: フォーカス時にリングを表示
  • transition-colors duration-200: 色の変化を200msで滑らかにする

ポイント: ボタンは <div> ではなく <button> タグを使います。<button> はデフォルトでテキストが中央揃えになるうえ、セマンティクスとしても正しく、キーボード操作やスクリーンリーダーにも対応できます。

実行結果:

Tailwind CSS プロフィールカード完成 通常時
Tailwind CSS プロフィールカード完成 ホバー時

rounded、shadow、ring、hover:、focus:、transition が組み合わさったプロフィールカードが完成しました。

ハンズオンの中で疑問に感じた点や失敗した点

失敗1: rounded のタイポ（rounder-xl）

基礎第5問で rounded-xl を rounder-xl と書いてしまい、角丸が効きませんでした。Tailwind CSS はクラス名の文字列で CSS を生成するため、1文字でも間違うと完全に無視されます。ブラウザのDevToolsで要素を確認すれば、適用されていないクラスに気づけるので、意図通りにならないときはまずDevToolsをチェックしましょう。

失敗2: ring は幅と色の2クラスが必要

基礎第4問で ring-2 だけ書いて色指定を忘れました。ring は border と同じく、幅と色を別々のクラスで指定する設計です。ring-2 ring-blue-500 のように必ずセットで使いましょう。

失敗3: transition は hover: を付けない

実践第4問で hover:transition-shadow としてしまいました。transition はアニメーションの定義なので常時適用しておく必要があります。hover: を付けると、ホバーを外したときにトランジションが無効になり、瞬時に元に戻ってしまいます。

失敗4: HTML構造のネストミス

実践第5問で名前やボタンをアバターの div の中に入れてしまいました。TailwindCSS のクラス指定は正しくても、HTMLの構造が間違っていると意図通りのレイアウトになりません。スタイルだけでなく、要素の親子関係・兄弟関係を意識することが大切です。

失敗5: div と button の使い分け

実践第5問で「フォローする」ボタンを <div> で作ったため、テキストが左寄せになりました。<button> タグはデフォルトで中央揃えになるうえ、セマンティクスとしても正しい選択です。クリック可能な要素には <button> を使いましょう。

今回のまとめ

お疲れさまでした。基礎5問と実践5問のハンズオンで、Tailwind CSS の角丸・影・リングをひと通り体験しました。

  • rounded ユーティリティ: rounded-none 〜 rounded-full のサイズ指定と、rounded-t-* などの方向指定で角丸を柔軟に制御できる
  • shadow ユーティリティ: shadow-sm 〜 shadow-2xl で奥行き感を表現し、hover: バリアントと transition-shadow を組み合わせてインタラクティブなUIを作れる
  • ring ユーティリティ: 幅と色の2クラスで指定し、focus: バリアントとの組み合わせでフォーカス表現に最適。border と違いレイアウトに影響しない

また別の記事でお会いしましょう。次回も一緒にハンズオンしていきましょう。

関連記事

この記事で紹介した内容の他にも学習した内容を記事にしています。是非、ご覧になってみて下さい。

Tailwind CSS flex items-center justify-center を使った水平方向の中央揃え実装例
Tailwind CSS flex items-center justify-center 完全ガイド - 実践的な中央揃えテクニック

Tailwind CSS flex items-center justify-center（中央揃え）の使い方を、基礎から実践まで6つの演習問題で完全マスター。企業サイトでよく使うヘッダーナビ、カード ...

続きを見る
Tailwind CSS spacing utilities 完全ガイド - padding/margin 基礎を6問で習得のロゴ
Tailwind CSS spacing utilities 完全ガイド - padding/margin 基礎を6問で習得

Tailwind CSS spacing utilities（スペーシングユーティリティ）の基本である padding と margin を、公式ドキュメントに基づく6つの実践問題で完全習得。p-4、 ...

続きを見る
Tailwind CSS width height utilities の完全ガイド 基礎から実践まで10問で習得のロゴ
Tailwind CSS Width Height 完全ガイド - 基礎から実践まで10問で習得

Tailwind CSS width height utilities（幅・高さユーティリティ）の基本から実践的な使い方まで、10問の演習問題で体系的に学べる完全ガイド。固定値・相対値・分数値の使い分 ...

続きを見る
Tailwind CSS bg text color 背景色・テキスト色ユーティリティの学習ガイド アイキャッチ
【実践10問】Tailwind CSS bg text color で背景色・テキスト色を完全習得

Tailwind CSS bg text color（背景色・テキスト色）のユーティリティを、基礎5問＋実践5問のハンズオン形式で完全解説。bg-, text- の基本パターンから企業サイトでの実践的 ...

続きを見る
Tailwind CSS rounded shadow ring ユーティリティ実践ハンズオン アイキャッチ
Tailwind CSS rounded shadow ring を実践ハンズオン｜角丸・影・リングの基礎から応用まで

Tailwind CSS rounded shadow ring の ユーティリティクラスを基礎から実践まで10問のハンズオンで完全理解。border・bg・opacity との組み合わせや、hove ...

続きを見る

-dev, TailwindCSS