Tailwind CSSで要素・テキストを右寄せする最適解｜初心者でもわかる使い分け＆実践例付き

<h2 class="text-right">右寄せされた見出し</h2>
<p class="text-right">このテキストは右側に寄せられています。Webサイトのデザインによっては、こうした配置が視覚的な興味を引き立てることがあります。</p>

<div class="flex w-full">
  <button class="ml-auto bg-blue-500 text-white px-4 py-2 rounded">送信する</button>
</div>

<div class="flex justify-end">
  <div class="bg-green-200 p-4">右寄せ要素</div>
</div>

<div class="grid grid-cols-3">
  <div class="col-start-3 bg-purple-200 p-4">右端のセルに配置</div>
</div>

<div class="max-w-md mx-auto bg-white shadow-md rounded-lg overflow-hidden">
  <div class="p-4">
    <h3 class="text-lg font-semibold">請求書サマリー</h3>

    <div class="mt-4 space-y-2">
      <div class="flex justify-between">
        <span>商品代金</span>
        <span class="text-right">¥12,800</span>
      </div>
      <div class="flex justify-between">
        <span>送料</span>
        <span class="text-right">¥550</span>
      </div>
      <div class="flex justify-between">
        <span>消費税</span>
        <span class="text-right">¥1,335</span>
      </div>
      <div class="mt-2 pt-2 border-t border-gray-200 flex justify-between font-bold">
        <span>合計</span>
        <span class="text-right">¥14,685</span>
      </div>
    </div>
  </div>
</div>

<!-- ボタンを右寄せするパターン -->
<div class="bg-gray-100 p-6 rounded-lg">
  <h3 class="text-xl font-bold">メールマガジン登録</h3>
  <p class="mt-2 text-gray-600">最新の情報をいち早くお届けします。週に一度のペースでお送りしています。</p>

  <div class="mt-4 flex">
    <input type="email" placeholder="メールアドレス" class="flex-grow px-4 py-2 border rounded-l" />
    <button class="bg-blue-500 text-white px-4 py-2 rounded-r hover:bg-blue-600 transition-colors">
      登録する
    </button>
  </div>

  <div class="mt-4 flex justify-end">
    <button class="text-sm text-gray-500 hover:underline">
      設定を変更する
    </button>
  </div>
</div>

<!-- 画像を右寄せするパターン -->
<div class="bg-white p-6 shadow-md rounded-lg">
  <h2 class="text-2xl font-bold">サービスの特徴</h2>
  <div class="mt-4 flex flex-col md:flex-row items-center">
    <div class="md:w-2/3">
      <p class="text-gray-700">
        当サービスは、あらゆるニーズに対応した柔軟なソリューションを提供します。
        最新のテクノロジーを駆使し、使いやすさと機能性を両立させた設計になっています。
      </p>
    </div>
    <div class="mt-4 md:mt-0 md:w-1/3 md:pl-6 flex justify-center md:justify-end">
      <img src="/path/to/image.jpg" alt="サービスイメージ" class="rounded-lg shadow-sm max-w-full h-auto" />
    </div>
  </div>
</div>

<!-- ダッシュボードのカード要素 -->
<div class="bg-white shadow-lg rounded-lg overflow-hidden">
  <!-- カードヘッダー -->
  <div class="bg-gray-50 px-4 py-3 flex items-center justify-between">
    <h3 class="font-medium">月間アクティビティ</h3>
    <div class="flex space-x-2">
      <button class="text-gray-500 hover:text-gray-700">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <!-- SVGパス（省略） -->
        </svg>
      </button>
      <button class="text-gray-500 hover:text-gray-700">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <!-- SVGパス（省略） -->
        </svg>
      </button>
    </div>
  </div>

  <!-- カードコンテンツ -->
  <div class="p-4">
    <div class="flex flex-col space-y-4">
      <!-- アクティビティアイテム -->
      <div class="flex items-start">
        <div class="bg-blue-100 rounded-full p-2">
          <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <!-- SVGパス（省略） -->
          </svg>
        </div>
        <div class="ml-3 flex-grow">
          <p class="text-sm">新しいユーザーが登録しました</p>
          <p class="text-xs text-gray-500">2時間前</p>
        </div>
        <button class="ml-auto text-sm text-blue-500 hover:underline">
          詳細を見る
        </button>
      </div>

      <!-- 別のアクティビティアイテム -->
      <div class="flex items-start">
        <div class="bg-green-100 rounded-full p-2">
          <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <!-- SVGパス（省略） -->
          </svg>
        </div>
        <div class="ml-3 flex-grow">
          <p class="text-sm">タスク「デザインレビュー」が完了しました</p>
          <p class="text-xs text-gray-500">昨日</p>
        </div>
        <div class="ml-auto flex items-center space-x-2">
          <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">完了</span>
          <button class="text-sm text-blue-500 hover:underline">
            詳細
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- カードフッター -->
  <div class="bg-gray-50 px-4 py-3 border-t border-gray-200">
    <div class="flex justify-between items-center">
      <span class="text-sm text-gray-600">全10件中 5件表示</span>
      <div class="flex space-x-1">
        <button class="px-3 py-1 bg-white border rounded text-sm disabled:opacity-50">前へ</button>
        <button class="px-3 py-1 bg-blue-500 text-white rounded text-sm">次へ</button>
      </div>
    </div>
  </div>
</div>

<!-- 問題のあるコード -->
<div class="w-auto">  <!-- 親要素の幅が子要素に合わせられている -->
  <button class="ml-auto">右寄せされないボタン</button>
</div>

<!-- 修正後のコード -->
<div class="w-full">  <!-- 親要素が利用可能な最大幅を取る -->
  <button class="ml-auto">右寄せされるボタン</button>
</div>

<!-- 問題のあるコード -->
<div class="w-full">  <!-- flexが設定されていない -->
  <button class="ml-auto">右寄せされないボタン</button>
</div>

<!-- 修正後のコード -->
<div class="w-full flex">  <!-- flexを追加 -->
  <button class="ml-auto">右寄せされるボタン</button>
</div>

<!-- 問題のあるコード -->
<span class="ml-auto">右寄せされないテキスト</span>  <!-- spanはデフォルトでinline -->

<!-- 修正後のコード -->
<span class="inline-block ml-auto">右寄せされるテキスト</span>  <!-- inline-blockに変更 -->

<!-- 問題のあるコード -->
<div class="flex w-full">
  <div class="w-full ml-auto">右寄せされないコンテンツ</div>  <!-- 要素が親の100%幅を使用 -->
</div>

<!-- 修正後のコード -->
<div class="flex w-full">
  <div class="w-auto ml-auto">右寄せされるコンテンツ</div>  <!-- 要素の幅をコンテンツに合わせる -->
</div>

<div class="flex flex-col md:flex-row w-full">
  <div class="bg-blue-100 p-4">
    左側のコンテンツ
  </div>
  <!-- モバイルでは左寄せ、md以上では右寄せ -->
  <div class="bg-green-100 p-4 mt-4 md:mt-0 md:ml-auto">
    デバイスによって配置が変わる要素
  </div>
</div>

<div class="text-left sm:text-center md:text-right">
  <!-- 画面幅に応じてテキスト配置が変化 -->
  <p>小さい画面では左寄せ、中間サイズでは中央、大きい画面では右寄せになります。</p>
</div>

<!-- 複雑なレスポンシブパターン -->
<div class="flex flex-col w-full">
  <div class="flex flex-col sm:flex-row items-center justify-between mb-4">
    <h2 class="text-xl font-bold">最新ニュース</h2>
    <!-- モバイルでは幅100%で中央、sm以上では右寄せ -->
    <div class="w-full sm:w-auto mt-2 sm:mt-0 flex justify-center sm:justify-end">
      <button class="bg-blue-500 text-white px-4 py-2 rounded">
        もっと見る
      </button>
    </div>
  </div>

  <!-- ニュースリスト -->
  <div class="space-y-4">
    <!-- アイテム -->
    <div class="flex flex-col md:flex-row bg-white shadow-sm rounded-lg overflow-hidden">
      <div class="md:w-1/4">
        <img src="/placeholder.jpg" alt="ニュース画像" class="w-full h-48 md:h-full object-cover" />
      </div>
      <div class="p-4 md:w-3/4 flex flex-col">
        <h3 class="font-semibold">ニュースタイトル</h3>
        <p class="text-gray-600 flex-grow">ニュースの詳細内容...</p>
        <!-- モバイルでは左、md以上では右に配置 -->
        <div class="mt-4 flex md:justify-end">
          <span class="text-sm text-gray-500">2025年4月19日</span>
        </div>
      </div>
    </div>
    <!-- 他のアイテム... -->
  </div>
</div>

<!-- テキストのみの右寄せにはtext-right -->
<p class="text-right">シンプルなテキスト右寄せ</p>

<!-- フォーム要素などのボタン配置にはflex justify-end -->
<div class="flex justify-end">
  <button class="bg-blue-500 text-white px-4 py-2 rounded">送信</button>
</div>

<!-- 親要素の中で一つの要素を右に寄せるにはml-auto -->
<div class="flex items-center">
  <span>左側の要素</span>
  <button class="ml-auto bg-green-500 text-white px-4 py-2 rounded">右側のボタン</button>
</div>

<!-- 推奨：論理的なグループでクラスを整理 -->
<div class="flex items-center w-full p-4 bg-white rounded-lg shadow">
  <img src="/logo.svg" alt="ロゴ" class="h-8 w-8" />
  <h2 class="ml-2 text-lg font-semibold">タイトル</h2>
  <button class="ml-auto px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
    アクション
  </button>
</div>

<!-- 共通のパターンはコンポーネント化する -->
<!-- 例：右寄せされたアクションボタン付きのカードヘッダー -->
<div class="flex items-center justify-between p-4 border-b">
  <h3 class="font-medium">{{title}}</h3>
  <button class="px-3 py-1 bg-blue-500 text-white text-sm rounded">
    {{buttonText}}
  </button>
</div>

<!-- デバッグ用に一時的にクラスを追加 -->
<div class="flex w-full bg-red-100"> <!-- 親要素の範囲を確認 -->
  <div class="bg-blue-100">左側コンテンツ</div>
  <div class="ml-auto bg-green-100">右寄せしたい要素</div> <!-- 右寄せ要素の範囲を確認 -->
</div>

<!-- 右寄せボタンのタッチ領域を適切に確保 -->
<div class="flex justify-end">
  <button class="px-4 py-2 bg-blue-500 text-white rounded min-h-[44px] min-w-[44px]">
    続ける
  </button>
</div>

<!-- スクリーンリーダー用の補足情報 -->
<div class="text-right">
  <span class="text-red-500">*</span>
  <span class="text-sm text-gray-600">必須項目</span>
  <span class="sr-only">フォーム内の*がついた項目は必須入力です</span>
</div>