Tailwind CSSの基礎を初心者向けに徹底解説！元ぼっち大学生のフリーランスエンジニアがおすすめの本を紹介しつつ詳しく説明します
今回はプログラミング初心者のぼっち大学生のみなさんに向けて、大学ぼっち時代にプログラミングを学び始め、在学中にフリーランスエンジニアとして独立した経歴を持つ僕が、Tailwind CSSの基礎知識について、できるだけ分かりやすく解説していきます。初心者におすすめの本も何冊か紹介しますので、興味のあるぼっち大学生はぜひ一度読んでいってください。
たっちゃん
ぼっちユニバーシティの運営者です。
大学ぼっち時代にプログラミングを学び始め、在学中にフリーランスのWebエンジニアとして独立。
本業はWebアプリケーションやWebサイトの受託開発がメインですが、最近はFlutterにハマっています。
趣味はバックパッカー旅行と立ち飲み屋さん巡り。
現在は都内でひとり法人を経営しながら、現役のぼっち大学生のみなさんへお役立ち情報を発信しています。
0. はじめに
ぼっち大学生のみなさんこんにちは！
この記事では、プログラミングに興味のあるぼっち大学生のみなさん向けに、Tailwind CSSの基礎的な知識を解説していきます。
Tailwind CSSは近年利用者数が爆増している、人気のCSSフレームワークの1つ。
実は当サイトでも、このTailwind CSSをガッツリ使用していたりします。
今回は、初めてTailwind CSSについて学ぶぼっち大学生のみなさんにも、できるだけ分かりやすく解説していますので、興味のあるぼっち大学生はぜひ読んでいってください。
また、こちらの記事では、CSSの基礎について詳しく解説をしていますので、併せて読んでみていただけたら嬉しいです。
1. Tailwind CSSの基礎を徹底解説していきます
1-1. Tailwind CSSの世界へようこそ
今日は、Webデザインをもっと簡単に、もっと楽しくする方法として、「Tailwind CSS」というツールを紹介していきますね！
この記事では、Tailwind CSSの基本的な使い方や、その人気の理由をぼっち大学生のみなさんにも伝わるようにしっかりと説明していきます。
1-2. Tailwind CSSとは何か
Tailwind CSSは、平たく言うとWebサイトのデザインを簡単にするためのツールです。
たくさんの短い命令（CSSクラス）を組み合わせることで、綺麗なWebページが手軽に作れます。
1-2-1. Tailwind CSSの特徴
Tailwind CSSの特徴は、たくさんの便利なクラスが用意されていて、それを組み合わせてデザインできることです。
これにより、簡単にオリジナルなデザインが作れます。
1-2-2. なぜTailwind CSSが人気なのか
Tailwind CSSが人気な理由は、短い命令を組み合わせるだけで、綺麗なデザインが作れることです。
また、学びやすさや、使いやすさが魅力です。
2. Tailwind CSSの基本的な使い方
2-1. Tailwind CSSの導入手順
2-1-1. CDNを利用した導入
Tailwind CSSを使うには、まず導入する必要があります。
CDNという方法を使えば、簡単に導入できます。
HTMLファイルの <head> タグ内に以下のコードを貼り付けてください。
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">2-1-2. npmを利用した導入
もう1つの導入方法は、 npm というツールを使う方法です。
まず、ターミナルで以下のコマンドを実行してください。
npm install tailwindcss次に、プロジェクト内に tailwind.config.js ファイルを作成し、以下のコードを記述します。
module.exports = {
purge: [],
darkMode: false,
theme: {
extend: {},
},
variants: {},
plugins: [],
}最後に、CSSファイルでTailwind CSSを読み込むために、以下のコードを追加します。
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';2-2. クラスの使い方
2-2-1. マージンとパディング
Tailwind CSSでは、マージン（外側の余白）とパディング（内側の余白）を簡単に設定できます。
たとえば、下のコードは、上のマージンを16ピクセル、左右のパディングを8ピクセルに設定したボタンを作ります。
<button class="mt-4 px-2 py-1 bg-blue-500 text-white">ボタン</button>mt-4 は上のマージンを16ピクセルに、 px-2 は左右のパディングを8ピクセルに、 py-1 は上下のパディングを4ピクセルに設定します。
2-2-2. 文字のスタイル
Tailwind CSSで文字のスタイルを変更するのも簡単です。
例えば、下のコードは、文字の大きさを24ピクセルにし、太字にした見出しを作ります。
<h1 class="text-2xl font-bold">見出し1</h1>text-2xl は文字の大きさを24ピクセルに、 font-bold は太字に設定します。
他にも、文字の色やスタイルを変えるクラスがたくさんあります。
以上が、Tailwind CSSの基本的な使い方です。
これらのクラスを組み合わせることで、素敵なWebページが作れます。
次の章では、もっと効率的なデザイン方法を紹介します。
3. 効率的なデザイン方法
3-1. よく使うクラスのリスト
3-1-1. 色の設定
Tailwind CSSでは、簡単に色を設定できます。
たとえば、文字の色を青にするには、 text-blue-500 というクラスを使います。
<p class="text-blue-500">青い文字です。</p>背景の色を変えたい場合は、 bg- で始まるクラスを使います。
<div class="bg-red-200">赤い背景のブロックです。</div>3-1-2. ボタンのデザイン
ボタンを作る時によく使うクラスを紹介します。
以下の例では、青い背景に白い文字のボタンを作ります。
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
クリックしてね
</button>hover:bg-blue-700 は、マウスがボタンの上に乗った時に背景色が濃い青に変わります。
3-2. コンポーネントを活用する方法
3-2-1. コンポーネントの作成方法
コンポーネントは、同じデザインの部品を何度も使いたい時に便利です。
例えば、カード型のコンポーネントを作るには、以下のようなコードを書きます。
<div class="card">
<img class="card-img" src="画像のURL" alt="画像の説明">
<div class="card-body">
<h2 class="card-title">タイトル</h2>
<p class="card-text">説明文です。</p>
</div>
</div>3-2-2. 既存のコンポーネントをカスタマイズする方法
コンポーネントを自分好みにカスタマイズするには、新しいクラスを追加してスタイルを変えます。
例えば、カードの背景色を変えたい時は、以下のように書きます。
<div class="card bg-green-100">
<!-- 以前のコード -->
</div>4. カスタムデザインの実現
4-1. Tailwind CSSの設定方法
4-1-1. 設定ファイルの作成
Tailwind CSSをカスタマイズするには、設定ファイル tailwind.config.js が必要です。
先ほどの導入方法で作成したファイルを使います。
4-1-2. カスタムクラスの追加
設定ファイルでカスタムクラスを追加できます。
例えば、新しい文字色を追加したい場合は、以下のように設定ファイルに記述します。
module.exports = {
theme: {
extend: {
textColor: {
'my-color': '#123456',
},
},
},
variants: {},
plugins: [],
}これで、 my-color という新しい文字色が使えるようになりました。
4-2. オリジナルのコンポーネントを作る方法
4-2-1. コンポーネントの設計
オリジナルのコンポーネントを作る時は、まずどのようなデザインにしたいか考えます。
例えば、アイコンとテキストが並んだボタンを作ることにしましょう。
4-2-2. コンポーネントの再利用
オリジナルのコンポーネントを作ったら、他の場所でも簡単に使えます。
先ほどのアイコン付きボタンを使うには、以下のように書きます。
<button class="icon-button">
<img class="icon" src="アイコンのURL" alt="アイコンの説明">
<span class="text">ボタンのテキスト</span>
</button>こうすることで、同じデザインのボタンを何度でも簡単に使えます。
5. レスポンシブデザインの作成
5-1. ブレークポイントの設定
5-1-1. デフォルトのブレークポイント
Tailwind CSSでは、デフォルトでいくつかのブレークポイントが用意されています。
これによって、様々なデバイスで見やすいデザインを作れます。
例えば、以下のコードは、スマートフォンで見た時に文字が小さく、タブレットやパソコンで見た時に文字が大きくなるように設定しています。
<p class="text-sm md:text-lg">この文字は、デバイスによって大きさが変わります。</p>md: は、デフォルトで設定されているブレークポイントのひとつで、タブレットやパソコンで見た時に適用されます。
5-1-2. カスタムブレークポイントの設定
もし、デフォルトのブレークポイントだけでは不十分な場合は、設定ファイルでカスタムブレークポイントを追加できます。
module.exports = {
theme: {
screens: {
'custom': '600px',
// 他の設定...
},
},
variants: {},
plugins: [],
}これで、 custom: という新しいブレークポイントが使えます。
5-2. レスポンシブデザインのコツ
5-2-1. フレキシブルなレイアウト
フレキシブルなレイアウトを作るには、 flex というクラスを使います。
これにより、コンテンツのサイズに合わせて自動的にレイアウトが調整されます。
<div class="flex">
<div class="flex-1">左側のコンテンツ</div>
<div class="flex-1">右側のコンテンツ</div>
</div>5-2-2. 画像の適切なサイズ調整
画像のサイズを自動的に調整するには、 w-full や h-full などのクラスを使います。
<img class="w-full" src="画像のURL" alt="画像の説明">6. 他のCSSフレームワークとの比較
6-1. Bootstrapとの違い
6-1-1. デザインの自由度
Tailwind CSSは、Bootstrapよりもデザインの自由度が高いです。
Bootstrapは、あらかじめデザインされたコンポーネントが用意されているため、独自のデザインを作りにくいことがあります。
しかし、Tailwind CSSは基本的にスタイルを自分で組み合わせるため、独自のデザインが作りやすくなっています。
6-1-2. 学習コスト
Bootstrapは、すぐに使えるコンポーネントがたくさんあるため、学習コストが低いです。
しかし、Tailwind CSSはクラスを組み合わせる必要があるため、最初は少し学習コストが高いかもしれません。
ただ、慣れてくるとデザインの自由度が高いので、長期的には有利です。
6-2. Bulmaとの違い
6-2-1. 機能の充実度
Bulmaは、Tailwind CSSと同様にユーティリティファーストのアプローチを取っていますが、機能面でTailwind CSSがより充実しています。
例えば、レスポンシブデザインやカスタムデザインの設定がTailwind CSSの方が柔軟で簡単です。
6-2-2. ユーザーコミュニティの規模
Tailwind CSSは、ユーザーコミュニティが大きく、情報も豊富です。
そのため、サポートや質問がしやすく、学習も進めやすいです。
一方、Bulmaはユーザーコミュニティが小さめで、情報が少ないことがあります。
6-2-3. パフォーマンスの違い
Tailwind CSSとBulmaのパフォーマンスは、どちらも高速です。
ただ、Tailwind CSSはPurgeCSSを使って不要なCSSを削除することができるため、最適化がしやすく、最終的なパフォーマンスが高くなります。
6-3. どのフレームワークが自分に合っているかの見極め方
6-3-1. プロジェクトの目的と規模
プロジェクトの目的や規模によって、適切なフレームワークが変わります。
例えば、簡単なプロジェクトであればBootstrapが便利ですが、独自のデザインを作りたい場合はTailwind CSSがおすすめです。
6-3-2. 自分のスキルレベルと学習意欲
自分のスキルレベルや学習意欲によっても、適切なフレームワークが変わります。
初心者であれば、BootstrapやBulmaのような使いやすいフレームワークがおすすめです。
しかし、デザインスキルやCSSの知識がある程度ある場合、または学習意欲が高い場合は、Tailwind CSSを使って独自のデザインを作ることができます。
最後に、各フレームワークの特徴や自分のニーズに照らし合わせて、適切なフレームワークを選ぶことが大切です。
それぞれのフレームワークには一長一短があるので、プロジェクトや自分のスキルに合ったものを選ぶことが成功の鍵となります。
7. プログラミング初心者のぼっち大学生におすすめのTailwind CSS本を紹介します
この章では、Tailwind CSSを学ぶぼっち大学生のみなさんに、ぜひおすすめしたい書籍を紹介していきますね。
7-1. Tailwind CSS まとめ
Tailwind CSSを解説した書籍は数が少ないのですが、今回紹介する「Tailwind CSS まとめ」は、Tailwind CSSを初心者にも分かりやすく解説した書籍。
CSSの基礎を一通り学び、これからTailwind CSSの知識を学んで活用していこうとお考えのぼっち大学生のみなさんは、この「Tailwind CSS まとめ」を手元に置きながら、みなさんのプロジェクトにTailwind CSSを導入していただき、実際に手を動かしながら学んでみるのがGoodです。
8. まとめ
今回は、プログラミング初心者のぼっち大学生向けに、Tailwind CSSの基礎知識を解説させていただきました。
今回紹介したTailwind CSSは、これからぼっち大学生のみなさんがWebサイト制作やWebアプリケーション開発をしようと考えた場合、覚えておいて損はないCSSフレームワークです。
プログラミングを学ぶぼっち大学生のみなさんは、ぜひこの記事の内容を参考にしていただき、Tailwind CSSの知識をしっかりと身につけていって欲しいと思います。
最後に、これからTailwind CSSについて本格的に学んでみようと考えるぼっち大学生のみなさんに、おすすめのプログラミングスクールを紹介させていただきます。
ぼっち大学生のみなさんは、サブスク型プログラミングスクールのSAMURAI TERAKOYA（侍テラコヤ）であれば、飲み会1回分ほどの費用で、Tailwind CSSを効率的かつ確実に学ぶことが可能です！
SAMURAI TERAKOYA（侍テラコヤ）の詳細については、こちらの記事で詳しく解説していますが、
- 40種類以上に及ぶ学び放題の教材
- 平均回答スピード30分以内のQ&A掲示板
- 月1回〜の現役エンジニアとのオンラインレッスン
- プログラミング学習を継続できる学習ログ
を、月額2,980円〜という破格の料金で利用することができます。
もちろん、独学でTailwind CSSの知識を習得することは不可能ではありません。
しかし、実際に業務でTailwind CSSを毎日のように使用するエンジニアのメンターに、Tailwind CSSについて直接質問ができる環境で学んだほうが、より実践的な知識が身に付きますし、みなさんのTailwind CSSを習得するスピードは圧倒的に速くなります。
プログラミングスクールで学ぶことも視野に入れていたが、その費用面がネックとなり、なかなかプログラミングの学習を本格的に始められなかったというぼっち大学生のみなさんは、ぜひ一度SAMURAI TERAKOYA（侍テラコヤ）に無料で相談をしてみてはいかがでしょうか？
