未経験でも気軽に！サブスク型プログラミングスクール【Freeks】

困ってた自分に届けたい話

CSSって実装方法いろいろありますよね。

• .css ファイル作ってインポート
• タグに style={{}} で直接書く
• Sass や CSS Modules、Styled Components などのライブラリも…

「とりあえず動くけど、チーム開発だとCSSが競合してグチャグチャになる…」
「時間かけてUI組んだのに、おしゃれにならない…」
そんな悩みを抱えていた自分が「これだ！」と思えたのが、shadcn/ui というUIライブラリでした。

てんハロ運営者

この記事は、同じように困っていた方への備忘録兼シェアとして書いています。

shadcn/uiとは？

shadcn/ui は、Tailwind CSS をベースにした、柔軟で拡張可能な UI コンポーネント集です。

よく使うパーツ（ボタン、モーダル、チェックボックスなど）がすぐ使える状態で提供され、しかも自分のプロジェクトに直接コンポーネントのコードが追加されるのが特徴です。

他のUIライブラリとの比較

❌ 普通のUIライブラリ（npmパッケージ）

• npm install で ライブラリをインストールするだけ
• 中身（ボタンの見た目など）は 触れない・カスタムしにくい
• 例：MUI、Chakra UI、Bootstrap

✅ shadcn/ui（プロジェクトに直接追加される）

• コマンドで UI コンポーネントの実物のコードを自分のプロジェクトにコピーしてくれる
• コピーされたコンポーネントは /components/ui/button.tsx などに置かれる
• 自分で見た目や動きを好きに変更できる（完全に自作と同じ感覚）

▶ UIライブラリの比較表

shadcn/uiは「柔軟さ」と「今風の設計」が強み。
プロジェクトのデザインや設計方針にこだわりたいチームやエンジニアに向いています。

shadcn/ui 導入手順

下記の前提条件のもと、shadcn/ui 導入手順をご説明します。

• Next.js（React）プロジェクト
• Tailwind CSSがすでに導入済み

STEP１：初期化

# 初期セットアップ（初回のみ）
npx shadcn@latest init

⚠️ 注意「shadcn-ui@latest」は非推奨？

npx shadcn-ui@latest init のコマンドは古いコマンドです。これを使うと「古い CLI です」とエラーが出ることがあります。現在は上記のように shadcn に名前が変更されています。

STEP２：初期設定 バージョン

Need to install the following packages:
shadcn@2.9.2
Ok to proceed? (y) y

• shadcn のバージョン 2.9.2 を一時的にインストールして使ってもいいか？
• npx は必要なパッケージをその場で取得して実行する

という確認です。
y を入力すれば、そのまま shadcn CLI が使えるようになります。

STEP３：初期設定 UIの色選択

Which color do you want to use as base color?
  - Slate
  - Gray
  - Zinc
  - Neutral
  - Stone
  - Red
  - Blue
  - Green

UIのカラー選択について聞かれています。

📝 補足：色選択の戦略

STEP４：UIコンポーネントを追加

下記のコマンドを実行すると　src/components/ui配下にそれぞれのUIファイルが作成されます。

Tailwind CSS のクラスを使ってスタイリングされており、即他のコンポーネントでimportして利用できます。フォルダ移動しても問題ありません。

# ボタンを追加
npx shadcn@latest add button

# inputタグを追加
npx shadcn@latest add input

# チェックボックスを追加
npx shadcn@latest add checkbox

shadcn/ui 実装

import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/checkbox";
import { Button } from "@/components/ui/button";

export default function Home() {
  return (
      <div className=" flex flex-col items-center space-y-4 mt-10">
        <Input placeholder="メールアドレスを入力" className="w-[18rem]" />

        <div className="flex items-center">
          <Checkbox id="terms" />
          <label htmlFor="terms" className="ml-2 text-sm">
            利用規約に同意する
          </label>
        </div>
        
        <Button>送信</Button>
      </div>
  );
}

import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/checkbox";
import { Button } from "@/components/ui/button";

export default function Home() {
  return (
      <div className=" flex flex-col items-center space-y-4 mt-10">
        <Input placeholder="メールアドレスを入力" className="w-[18rem]" />

        <div className="flex items-center">
          <Checkbox id="terms" />
          <label htmlFor="terms" className="ml-2 text-sm">
            利用規約に同意する
          </label>
        </div>
        
        <Button>送信</Button>
      </div>
  );
}

▶ 実際に表示されるUI

たった数行のコードで、ここまでスタイリッシュなフォームが作れます！
初期化してから10分かからないくらいです。とても簡単です。

知っておきたい実装方法「スタイルの切り替えスイッチ」

CSSを書いていると、同じ見た目のように見えて少しだけスタイルが違う、というパターンが増えてきます。

たとえば…

• 青い「送信」ボタン
• 赤い「削除」ボタン
• 枠だけの「戻る」ボタン

こんなふうに種類を切り替えたい時に、毎回 className を条件分岐するのって大変です。そんなときに便利なのが、variant という考え方です。

variant を使うと、スタイルの管理が楽！

variant はざっくり言うと、「スタイルの種類をキーワードで切り替える仕組み」です。

ボタンを例にすると、このように実装できます。

import { Button } from "@/components/ui/button";

export default function Home() {
  return (
      <div className=" flex flex-col items-center space-y-4 mt-10">
        <Button>デフォルト</Button>
        <Button variant="destructive">削除</Button>
        <Button variant="outline">戻る</Button>
      </div>
  );
}

import { Button } from "@/components/ui/button";

export default function Home() {
  return (
      <div className=" flex flex-col items-center space-y-4 mt-10">
        <Button>デフォルト</Button>
        <Button variant="destructive">削除</Button>
        <Button variant="outline">戻る</Button>
      </div>
  );
}

▶ 実際に表示されるUI

文字列で渡すだけで、見た目がガラッと変わります。
この variant="◯◯" がスタイルの切り替えスイッチになるんです。

中身はカスタマイズOK！

実はこの variant の仕組みは button.tsx に定義されています。

たとえば以下のように書かれています。

// components/ui/button.tsx の一部
const buttonVariants = cva(
  "inline-flex items-center justify-center text-sm font-medium",
  {
    variants: {
      variant: {
        default:
          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
        destructive:
          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline:
          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

// components/ui/button.tsx の一部
const buttonVariants = cva(
  "inline-flex items-center justify-center text-sm font-medium",
  {
    variants: {
      variant: {
        default:
          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
        destructive:
          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline:
          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

つまり、この button.tsx ファイルを自由に編集ができます！

たとえば、次のように variant に custom を追加すれば…

custom: "bg-purple-500 text-white hover:bg-purple-600"

custom: "bg-purple-500 text-white hover:bg-purple-600"

オリジナルのスタイルが使えるようになります。

<Button variant="custom">カスタム</Button>

<Button variant="custom">カスタム</Button>

と書くだけで、紫色のカスタムボタンが表示されます。

ライブラリに依存せず、自分好みのデザインに柔軟にカスタマイズできるのが shadcn/ui の大きな魅力です。

shadcn/ui のメリット・デメリット

メリット

• ✅ 自由に編集できる
  コードがプロジェクトに含まれるため、業務要件に合わせて修正可能
• ✅ Tailwindと相性抜群
  スタイリングが統一され、CSS設計に悩まなくて済む
• ✅ 導入が簡単
  npx shadcn@latest add xxx でどんどん追加できる
• ✅ 全てオープンな React コンポーネント
  依存性を最小限に抑えられる

デメリット

• ❌ バージョン管理は自己責任
  一括更新されないのでメンテの工夫が必要
• ❌ 生成ファイルが増える
  チーム内で「どこから来たファイルか」把握する工夫が必要

UIライブラリで次におすすめなのはこちらです🤞

MUIとは？ReactでおしゃれなUIがすぐ作れるライブラリを解説！

MUIはReactで美しいUIを簡単に作れるライブラリ。豊富なコンポーネントと柔軟なカスタマイズが魅力です。

it-bokenki.com

どんなプロジェクトに向いてる？

てんハロ運営者

おつかれさまでした！

The post 【初心者向け】shadcn/uiとは？導入方法・使い方・メリットを徹底解説｜Tailwind対応のUIライブラリ first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

フォントサイズの指定方法には、絶対サイズ・相対サイズ・キーワード値があります。それぞれの利点と欠点を見ていきましょう。

選択肢①：絶対サイズ

px（ピクセル）など、固定されたサイズを指定します。

利点： 一貫したサイズが保証される。

欠点： レスポンシブデザインが難しい。

選択肢②：相対サイズ

emやrem、%など、親要素やルート要素に対する相対的なサイズを指定します。

利点：レスポンシブデザインに適している。

欠点：親要素のサイズに依存するため、設定が複雑になる場合がある。

選択肢③：キーワード値

CSSには、small、medium、largeなどのキーワード値もあります。これはブラウザによって定義された相対的なサイズです。

利点：シンプルで読みやすい。一貫した相対サイズを簡単に設定できる。

欠点：具体的なサイズの調整ができない。ブラウザごとに解釈が異なる場合がある。

おすすめのフォントサイズの設定方法

現代のWEBデザインにおいて、相対サイズのremを使用することが最も推奨されます。

これにより、ルート要素のサイズに基づいてフォントサイズを設定でき、レスポンシブデザインが簡単になります。

実際の現場での使用状況

多くのプロフェッショナルなウェブデザイナーや開発者は、以下の理由からremを使用しています。

• 一貫したユーザー体験を提供できる。
• メンテナンスが簡単。
• レスポンシブデザインに適している。

ココナラのクリエイターに依頼する

まとめ

ウェブサイトのフォントサイズを設定する際は、相対サイズのremを使用することをオススメします。

絶対サイズのpxも一部のケースでは有用ですが、全体的なデザインの一貫性を保つためには相対サイズの方が適しています。

状況に応じて、設定してみてください！

HTMLでの＜script＞タグのベストな配置位置とは？

HTMLでのタグの最適な配置場所を解説。ページの表示速度とユーザー体験を向上させるコツを紹介します。

it-bokenki.com

The post 絶対サイズ・相対サイズってなに？CSSでのフォントサイズ設定 first appeared on てんハロ｜未経験エンジニアのIT学習ログ.