🎨
[TailwindCSS]グリッドレイアウトで行頭を美しく整える

2024/09/30に公開
CSS
 はじめに今回は、Tailwind CSSを使って、要素が不揃いだったレイアウトを整然とした美しいデザインに改善する方法を紹介します。記事の流れとして、まず初めに改善前のコードを見ていただき、その後、どのようにして現在のコードに改善していったのかを解説していきます。

 改善前のコードまず、こちらが改善前のコードです。このコードでは、項目名とその内容がバラバラに表示されており、統一感がありませんでした。
TypeScript
import React from "react";

const LegalNotice = () => {
  return (
    <div>
      <main className="container mx-auto px-4 py-8">
        <h1 className="text-3xl font-bold mb-6">特定商取引法に基づく表記</h1>
        <div className="border-t border-gray-300 pt-6">
          <p className="text-lg mb-4">
            <span className="font-bold">販売業者名称：</span> [代表者氏名]
          </p>
          <p className="text-lg mb-4">
            <span className="font-bold">所在地：</span> 請求があったら遅滞なく開示します
          </p>
          <p className="text-lg mb-4">
            <span className="font-bold">電話番号：</span> 請求があったら遅滞なく開示します
          </p>
          <p className="text-lg mb-4">
            <span className="font-bold">メールアドレス：</span>
            <a href="mailto:sumple-mail@gmail.com" className="text-blue-500 underline">
              sumple-mail@gmail.com
            </a>
          </p>
          <p className="text-lg mb-4">
            <span className="font-bold">運営統括責任者：</span> [代表者氏名]
          </p>
          <p className="text-lg mb-4">
            <span className="font-bold">交換及び返品ポリシー：</span> 商品に欠陥がある場合を除き、交換および返品には応じかねます。万が一、商品に欠陥があった場合は、商品到着後7日以内にご連絡ください。確認の上、交換もしくは返品の対応をさせていただきます。返品の際の送料は当社が負担いたします。
          </p>
          <p className="text-lg mb-4">
            <span className="font-bold">引渡時期：</span> 注文は 3 ～ 5 営業日以内に処理され、商品は 14 日以内に到着します。
          </p>
          <p className="text-lg mb-4">
            <span className="font-bold">受け付け可能な決済手段：</span> クレジットカード
          </p>
          <p className="text-lg mb-4">
            <span className="font-bold">販売価格：</span> 各商品ページに記載の金額
          </p>
        </div>
      </main>
    </div>
  );
};

export default LegalNotice;

このコードでは、項目名とその内容がそれぞれ左揃えと右揃えで表示されてしまい、見た目に統一感がありません。

また、全体的にスペースの使い方が狭く、情報が詰まりすぎて見えにくくなっています。

 改善のポイントこの問題を解決するために、以下のポイントに注意して改善を行いました：
グリッドレイアウトの使用
項目名と内容を左揃えに統一
余白と間隔の調整

 グリッドレイアウトの使用まず、項目名とその内容を整列させるために、TailwindCSSのグリッドレイアウトを使います。

これにより、画面の大きさに応じて項目名と内容がきれいに2列に分かれ、統一感を持たせることができます。
TypeScript
<div className="grid grid-cols-1 md:grid-cols-2 gap-y-4">
  <p className="font-bold text-gray-600">販売業者名称：</p>
  <p className="text-gray-700">[代表者氏名]</p>
  <p className="font-bold text-gray-600">所在地：</p>
  <p className="text-gray-700">請求があったら遅滞なく開示します</p>
  {/* その他の項目 */}
</div>
ここでは、grid-cols-1を使ってモバイル表示では1列に、md:grid-cols-2で中サイズ以上の画面では2列に分けています。

また、gap-y-4で各行間に適度な間隔を設け、読みやすくしました。

 項目名と内容を左揃えに統一次に、項目名とその内容を左揃えに統一しました。これにより、情報がスッキリと整理され、見た目が格段に改善されました。
TypeScript
<p className="font-bold text-gray-600">販売業者名称：</p>
<p className="text-gray-700">[代表者氏名]</p>
項目名は太字で表示し、内容部分は通常のグレーで表示することで、視認性を高めています。

 改善後のコード最終的に、以下のように改善されました。

これで、項目名と内容が一貫して左揃えになり、余白も適切に設定されたことで、読みやすいデザインになりました。
TypeScript
import React from "react";

const LegalNotice = () => {
  return (
    <div>
      <main className="container mx-auto px-4 py-8">
        <h1 className="text-3xl font-bold mb-6">特定商取引法に基づく表記</h1>
        <div className="border-t border-gray-300 pt-6 space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-y-4">
            <p className="font-bold text-gray-600">販売業者名称：</p>
            <p className="text-gray-700">[代表者氏名]</p>

            <p className="font-bold text-gray-600">所在地：</p>
            <p className="text-gray-700">請求があったら遅滞なく開示します</p>

            <p className="font-bold text-gray-600">電話番号：</p>
            <p className="text-gray-700">請求があったら遅滞なく開示します</p>

            <p className="font-bold text-gray-600">メールアドレス：</p>
            <p className="text-gray-700">
              <a
                href="mailto:sumple-mail@gmail.com"
                className="text-blue-500 underline"
              >
                sumple-mail@gmail.com
              </a>
            </p>

            <p className="font-bold text-gray-600">運営統括責任者：</p>
            <p className="text-gray-700">[代表者氏名]</p>

            <p className="font-bold text-gray-600">交換及び返品ポリシー：</p>
            <p className="text-gray-700">
              商品に欠陥がある場合を除き、交換および返品には応じかねます。万が一、商品に欠陥があった場合は、商品到着後7日以内にご連絡ください。確認の上、交換もしくは返品の対応をさせていただきます。返品の際の送料は当社が負担いたします。
            </p>

            <p className="font-bold text-gray-600">引渡時期：</p>
            <p className="text-gray-700">
              注文は 3 ～ 5 営業日以内に処理され、商品は 14 日以内に到着します。
            </p>

            <p className="font-bold text-gray-600">受け付け可能な決済手段：</p>
            <p className="text-gray-700">クレジットカード</p>

            <p className="font-bold text-gray-600">販売価格：</p>
            <p className="text-gray-700">各商品ページに記載の金額</p>
          </div>
        </div>
      </main>
    </div>
  );
};

export default LegalNotice;


 まとめこの記事では、TailwindCSSを使って項目の揃え方を改善する方法について紹介しました。

グリッドレイアウト を使用することで、項目名と内容を統一感のあるデザインに整え、読みやすいページを作成することができました。
はじめに

改善前のコード

改善のポイント

グリッドレイアウトの使用

項目名と内容を左揃えに統一

改善後のコード

まとめ

Discussion
