Webアプリケーション開発を効率的に進める方法の1つに、CSSフレームワークを利用する方法があります。
CSSフレームワークは、有名なもので Bootstrapなど、コンポーネントを中心にデザインするスタイルのフレームワークと、今回紹介する Tailwind CSSのように、ユーティリティファースト思想を基とするフレームワークが存在します。
今回の記事では、それぞれのフレームワークの違いや、Tailwind CSSの具体的な使い方について、解説していきたいと思います。
Tailwind CSSとは？
Tailwind CSSは、「ユーティリティファースト」 という設計思想を採用している CSSフレームワークです。
ユーティリティファーストとは、コンポーネント単位ではなく小さなスタイル単位のクラス (ユーティリティクラス) の組み合わせでデザインを構築する考えであり、柔軟で再利用性の高いデザインを可能とする設計思想のことを言います。
Tailwind CSSには、文字サイズ、余白、色、配置など、あらかじめ用意された様々なスタイルのユーティリティクラスが存在します。
従来のCSSでは、スタイルを適用する要素ごとにクラス名などを決め、CSSファイルに対応するセレクタを記述して適用させる必要がありましたが、Tailwind CSSの場合は既存のユーティリティクラス名を HTMLに記述するだけでスタイルを適用させることができるため、CSSファイルをほとんど記述することなくレイアウトできる特徴があります。
また、設定ファイルを編集することで既存のクラスをカスタマイズすることも可能で、その自由度の高さから大規模なWebアプリケーションの開発にも幅広く利用されています。
Tailwind CSSのメリット
Tailwind CSSのメリットは、上述した以下の3点が主に挙げられます。
・CSSファイルを記述する必要がない
・スタイルの再利用性が高い
・カスタマイズ性が高い
CSSをほとんど書かずにページが作れる
Tailwind CSSの最大のメリットは、CSSファイルをほとんど書かずにレイアウトを調整できる点です。
通常のCSSの場合、以下のように要素ごとに指定されたクラス名や ID名を使用して、適用したいスタイルを記述する必要があります。
.button {
background-color: blue;
color: white;
padding: 8px;
}一方、Tailwind CSSの場合は、適用したいスタイルを表すユーティリティクラス名を対象の要素に直接指定します。
<button class="bg-blue-500 text-white p-2">このように、各要素のクラス名でスタイルを直接指定するため、CSSファイルとHTMLファイルを行き来する必要がなくなり、開発速度が向上するメリットがあります。
修正や追加などを行う際もCSSファイルを編集する必要がなく、作業効率が高くなりやすいのが特徴です。
また、既存のクラス名を適用するだけでレイアウトが完了するため、要素ごとにクラス名を考える手間を削減できる利点もあります。
スタイルの再利用性が高い
各ユーティリティクラスで設定するスタイルが最小限に留められているため、同一のスタイルを複数の要素に適用しやすく、再利用性が高いのも Tailwind CSS特徴の1つです。
例えば、以下のようなスタイルを複数で設定する必要がある場合に、クラス名をそのまま適用させることができます。
class="text-lg font-bold text-red-500"従来の CSSでも、同一のクラス名を使用して同じスタイルを適用させることは可能ですが、重複によるスタイル崩れや、記述内容の編集時に意図せぬ影響が発生するリスクなどがあるため、基本的には一意的な名前を使用することが効果的とされています。
一方、Tailwind CSSの場合は、クラス名を指定することと要素ごとにプロパティ単位でスタイルを指定することがほぼ同義であるため、同じクラス名を複数の要素で使用しても上記のようなリスクが発生する可能性が低く、スタイルの再利用を安定して行うことができます。
また、同じクラス名を安全に再利用できることにより、記述するコード量が減らせる他、デザインルールを統一することで保守性を高めることができるメリットもあります。
カスタマイズ性が高い
既存のユーティリティクラスでも様々なスタイルが用意されていますが、Tailwind CSSでは設定ファイル（tailwind.config.js）を使ってクラスを自由にカスタマイズすることができます。
例えば、以下のような内容を独自に設定することが可能です。
- 色を追加する
- フォントサイズを変更する
- 余白のサイズを変更する
既存のデザインに合わせたレイアウトを行う必要がなく、プロジェクトの要件に沿って柔軟にデザインすることができます。
Tailwind CSSを使ってみよう
それでは、Tailwind CSSを実際に導入してみましょう。
導入方法
Tailwind CSSは、使用する環境などに合わせて以下の導入方法が用意されています。
- Viteプラグインとしてインストールする方法
- PostCSSプラグインとしてインストールする方法
- Tailwind CLIツールを使う方法
- CDN を使用する方法
今回は、上記の中でも一般的な、Node.js環境を前提とする PostCSSプラグインでのインストール方法と、試験的な導入時に有効な CDNを使用する方法について解説したいと思います。
Node.js環境での導入方法（npmパッケージを使用する）
Node.js環境の構築やプロジェクトの作成などの事前準備が完了したら、以下のコマンドを実行して Tailwind CSSをインストールします。
npm install tailwindcss @tailwindcss/postcss postcssインストールが完了したら、「postcss.config.mjs」 というファイルを作成し、以下の内容を記述します。
export default {
plugins: {
"@tailwindcss/postcss": {},
}
}設定ファイルの編集が完了したら、Tailwind CSSを読み込むためのCSSファイルを作成し、以下の内容を記述します。
@import "tailwindcss";記述が完了したら、HTML側で読み込む用のCSSファイル (dist/styles.css) をビルドして作成しましょう。
以下のコマンドを実行するか、package.jsonファイルにビルドコマンドを追記している場合はそちらを利用してビルドします。
npm run devビルドを実行後、作成されたファイルをHTMLで読み込めば導入は完了です。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/styles.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>プレーンHTMLで使用したい場合の導入方法（CDNを使用する）
練習用としての試験的な導入や、機能検証などで一時的に導入したい時などに便利なのが、CDNを利用する方法です。
必要なコードを記述するだけで、事前インストールや設定ファイルの編集などを行うことなく Tailwind CSSを導入することができます。
方法は簡単で、以下のコードを headタグ内に記述するだけです。
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>また、以下のようなコードを記述することで、カスタムCSSを追加することもできます。
<style type="text/tailwindcss">
@theme {
--color-clifford: #da373d;
}
</style>ただし、CDNを利用する方法は本番環境での使用は想定されていないため、あくまで開発段階での試験導入のみに利用するようにしましょう。
Tailwind CSSの使い方
ここからは、具体的な使用方法について解説していきます。
クラス名の基本構文
Tailwind CSSでは基本的に、「プロパティ + 値」 の形式でクラス名が指定されています。
例:
- text-red-500
- bg-blue-300
- p-4
- m-2
- flex
値の細かい定義についてはクラス名から推測することは少々難しいため、公式ドキュメントなどを確認しながら覚えていくようにしましょう。
よく使うユーティリティクラス
使用可能なユーティリティクラスは多岐に渡り、全てをここで紹介することは難しいため、中でもよく使用されるクラスを抜粋して紹介します。
⚪︎テキストに関係するクラス
文字サイズ
- text-sm (14px)
- text-base (16px)
- text-lg (18px)
文字の太さ
- font-bold (太文字)
位置調整
- text-left (左揃え)
- text-right (右揃え)
- text-center (中央揃え)
文字サイズは、任意でサイズを指定できるクラスの他に、固定値が割り振られているクラスが別途用意されています。
よく使用するサイズのクラス名を覚えておくと有効的です。
⚪︎余白に関するクラス
- p-{size} (パディング)
- m-{size} (マージン)
{}内に任意の値を指定して、余白を設定することができます。
また、上方向のみの場合は t、横方向のみの場合は x、縦方向のみの場合は yを付けることで、一定方向だけに適用することも可能です。
例:
- px-6
- my-3
⚪︎色に関するクラス
- text-white (テキストカラー)
- bg-blue-500 (背景色)
- border-gray-300 (枠線の色)
「対象名＋カラー名」 の組み合わせで、それぞれの色を変更することができます。
カラー名の後ろに記述されている数値は色の濃さを表すもので、各色ごとに合計11段階の濃さが定義されています。
⚪︎レイアウトに関するクラス
- flex (Flexbox)
- grid (グリッドレイアウト)
- justify-center (横方向の中央揃え)
- Items-center (縦方向の中央揃え)
⚪︎サイズに関するクラス
横幅
- w-{number} (任意の幅)
- w-full (横幅100%)
- max-w-{size} (任意の最大幅)
高さ
- h-screen (100vh)
カスタマイズしたクラスを使用する
クラスを独自にカスタマイズしたい場合は、CSSファイルに以下のような形式で追加したい内容を記述します。
@import "tailwindcss";
@theme {
--color-mint-500: oklch(0.72 0.11 178);
}追加時の基本構文は、「 規定された名前空間 ＋ 任意のクラス名: 指定するスタイル 」 となっており、デフォルトに存在しないクラス名であれば新たにユーティリティクラスを追加し、既存のクラス名の場合はスタイルを上書きすることができます。
規定の名前空間は、例えば以下のようなものが存在します。
- –font-* (フォントファミリー)
- –text-* (フォントサイズ)
- –color-* (テキストや背景などのカラー)
- –breakpoint-* (ブレークポイント)
その他の名前空間については、公式ドキュメントを参照してください。
他のCSSフレームワークとの違い
Tailwind CSSの他にも、有用な CSSフレームワークはいくつか存在します。
今回はその中から、Bootstrap と Material UI との違いについてそれぞれ解説したいと思います。
Bootstrap
Bootstrapと Tailwind CSS の大きな違いは、既存のコンポーネントが用意されているかどうかです。
Bootstrapは、ナビゲーションバーやボタン、モーダルなどのあらかじめ用意されたコンポーネントと、強力なグリッドシステムを活用して Web アプリケーションを開発することができる、コンポーネント型のCSSフレームワークです。
デザイン済みのコンポーネントを使うことでレイアウトの統一性が高められ、気軽に使用できることから開発効率にも優れているのが特徴です。
一方、Tailwind CSSはユーティリティファーストのCSSフレームワークであり、既存で用意されているコンポーネントはありません。
その代わりに、Bootstrapよりも幅広いユーティリティクラスが含まれており、カスタム機能と合わせて活用することでより細かなニーズに柔軟に対応することができます。
クラス名などをある程度把握しておく必要があるため、Bootstrapと比べると学習コストが高い傾向にありますが、複雑なニーズより応えやすいのは Tailwind CSSの方であると言えるでしょう。
Material UI (MUI)
Material UIは、Bootstrapと同様にコンポーネントを中心とする React用のUIライブラリです。
GoogleのMaterial Designに基づいたコンポーネントが多数用意されており、一貫性のあるデザインを手軽に構築することができるのが大きな特徴です。
Material Designとは、Googleが2014年に提唱したデザインシステムのことを言います。
色や部品のデザインから、余白の配置の仕方など、UIのあらゆるポイントについて具体的に定義されているため、使用することで様々なユーザーが使いやすく統一感のあるデザインを実現することができます。
Material UI では、強力なテーマ設定機能が合わせて用意されており、Material Designに基づいたコンポーネントと組み合わせることで、表現したいテーマに沿ったレイアウト調整を可能とします。
React用のライブラリであるため、Tailwind CSSと比べると使用できる環境には限りがありますが、洗練されたデザインを気軽に取り入れられる点で実用性が高いCSSフレームワークとなります。
その一方で、既存のデザインを基とするため、多用しすぎるとオリジナリティの無いありふれたデザインとなってしまう場合もあります。
カスタマイズ性の高さやデザインのユニーク性などを求める場合は Tailwind CSSを、安定かつ効率的に一貫性のあるデザインを実現したい場合は Material UIの使用を検討するといいでしょう。
まとめ
CSSフレームワークは、上手く活用することでアプリケーションをより効率的にデザインできる便利なツールとなっています。
それぞれの特徴をよく把握し、プロジェクトの要件に合わせて使い分けしていきましょう。
HTML/CSSの学習方法は？
書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。
ただ、HTML/CSSに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。
プログラミングスクールならテックマニアがおすすめ！
ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。
＜テックマニアの特徴＞
・たしかな育成実績と親身な教育 ～セカンドキャリアを全力支援～
・講師が現役エンジニア ～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート ～「わからない」を徹底解決～
・実務ベースでスキルを習得 ～実践的な凝縮カリキュラム～
このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。
