【入門】Tailwind CSS入門に役立つ技術ブログ6つの紹介
公開日:2022年8月10日 更新日:2022年8月10日
記事概要
今回、Tailwind CSS入門の良い記事を紹介します。
これからTailwind CSS入門したい人にとって「どの記事が自分に合っているのやら」と探しても、どの記事が良い記事で、どの記事よくないかを判断することはなかなか時間がかかる作業かと思います。その悩みの軽減が少しでもできたら嬉しいと思ったことが執筆のきっかけです。
1. Tailwind CSS公式サイト「Core Concepts」で原点を知る
公式ドキュメントに7つの「Core Concepts」が記載してあります。
「Core Concepts」を読むのがオススメです。なぜなら、作者の言いたいTailwind CSSの特徴が書いてあるからです。この7つの「Core Concepts」を読んでから、他のネット記事を読むと、その記事のどこまでが事実で、どこまでが書いた人の解釈なのか判断できるようになります。
本来は、全て読んでおいた方が良いのですが、以下の3つが特に重要なので、そこだけをじっくりと読んでみるのが良いでしょう。残りは、実装しながら必要になるところなので、斜め読みで構わないと思います。
- Utility-First Fundamentals(ユーティリティ ファーストの原則)
- Handling Hover, Focus, and Other States(Hover、Focus、その他Statusの処理)
- Responsive Design(レスポンシブルデザイン)
2. 「ユーティリティファーストの原則」を知る
Tailwind CSSの「ユーティリティファーストの原則」が、BEMを代表とするコンポーネントベースのCSS設計の考え方と大きく異なることを知っておくことが重要です。その違いを知るにはこの記事がオススメです。
記事の筆者は、現在、ディレクター的な役割が仕事ですが、CSSについては、IE5.5(1999年頃)からIE9(2011年頃)まで、ずっとメインスキルとして書いてきた方とのことです。
筆者の一番、伝えたいことは以下の通り。
- まずはユーティリティーで書く
- 2度目に登場したらそこで初めてコンポーネント化する
ユーティリティーファーストでHTML/CSSを記述して、必要になったらコンポーネント化する。
3. 「Hover、Focus、その他Statusの処理」を知る
フォームをもとに、Hover、Focusについて実装例が詳しく記載されています。
コピペすればそのままフォームが表示されるので、Tailwind CSSの便利さと、Hoverの具体的な実装方法を知ることができます。Hover、Focus以外も基本的な実装例を掲載しているのでそちらも参考になります。
4. 「レスポンシブルデザイン」対応方法を知る
レスポンシブルデザインの対応方法については、公式ドキュメントが詳しく、かつわかりやすく解説してくれています。異なるブレークポイント(画面サイズによって)背景色が変わる例など面白いですね!
5.「開発環境の構築方法」を知る
1-4の記事で、Tailwind CSSの良さが理解できたら、早速、開発環境を構築してみましょう。
6. 「Tailwind CSSテンプレート(実装例)」を参考にする
開発環境構築ができたら、次はTailwind CSSテンプレートを参考に実装していきます。その時に、 Tailwind CSS使ったテンプレートを参考にすると良いコードの書き方を学ぶことができます。以下の記事は600以上の実装例を無料でコピペできて非常に役立ちます。
おわりに
初学者向けのTailwind CSS記事紹介はいかがだったでしょうか?
以下、5つにそって記事検索して、自分に合った記事を探してみると良いかもしれません
Tailwind CSS記事検索のキーワード
- Utility-First Fundamentals(ユーティリティ ファーストの原則)
- Handling Hover, Focus, and Other States(Hover、Focus、その他Statusの処理)
- Responsive Design(レスポンシブルデザイン)
- 開発環境構築
- Tailwind CSSテンプレート
[宣伝] GASプログラミング入門の教材 - Udemy
- 2023年11月時点で、約3,000人の受講生を獲得し、「Udemy Business」に選定されてます。
- 「Udemy Business」とは、Udemyが「企業研修」向けに提供しているサービスのことです。
- Udemyで販売している全ての講座の中から、「企業研修」に提供できる高品質な講座をレビューや内容を加味して厳選していることが特徴のサービスです。
- その「Udemy Business」で、このGAS講座は採用されております。
- 教材の詳細は、以下のUdemyに記載しておりますので内容ご確認ください
- 以下のバナーから購入すると、通常、定価27,800円が1,500円に割引される特別クーポンが適用されます!
- 有効期限は、です。