教育動画法人研修メンバー紹介TECH BLOGお問い合わせ
教育動画法人研修メンバー紹介TECH BLOGお問い合わせ

【入門】Tailwind CSS入門に役立つ技術ブログ6つの紹介

Home > TECH BLOG >【入門】Tailwind CSS入門に役立つ技術ブログ5つの紹介
公開日：2022年8月10日　更新日：2022年8月10日
著者：藤澤 勇樹(FUJISAWA Yuki)

記事概要

今回、Tailwind CSS入門の良い記事を紹介します。
これからTailwind CSS入門したい人にとって「どの記事が自分に合っているのやら」と探しても、どの記事が良い記事で、どの記事よくないかを判断することはなかなか時間がかかる作業かと思います。その悩みの軽減が少しでもできたら嬉しいと思ったことが執筆のきっかけです。

1. Tailwind CSS公式サイト「Core Concepts」で原点を知る

公式ドキュメントに7つの「Core Concepts」が記載してあります。
「Core Concepts」を読むのがオススメです。なぜなら、作者の言いたいTailwind CSSの特徴が書いてあるからです。この7つの「Core Concepts」を読んでから、他のネット記事を読むと、その記事のどこまでが事実で、どこまでが書いた人の解釈なのか判断できるようになります。
本来は、全て読んでおいた方が良いのですが、以下の3つが特に重要なので、そこだけをじっくりと読んでみるのが良いでしょう。残りは、実装しながら必要になるところなので、斜め読みで構わないと思います。
  1. Utility-First Fundamentals(ユーティリティ ファーストの原則)
  1. Handling Hover, Focus, and Other States(Hover、Focus、その他Statusの処理)
  1. Responsive Design(レスポンシブルデザイン)

2. 「ユーティリティファーストの原則」を知る

Tailwind CSSの「ユーティリティファーストの原則」が、BEMを代表とするコンポーネントベースのCSS設計の考え方と大きく異なることを知っておくことが重要です。その違いを知るにはこの記事がオススメです。
記事の筆者は、現在、ディレクター的な役割が仕事ですが、CSSについては、IE5.5(1999年頃)からIE9(2011年頃)まで、ずっとメインスキルとして書いてきた方とのことです。
筆者の一番、伝えたいことは以下の通り。
  1. まずはユーティリティーで書く
  1. 2度目に登場したらそこで初めてコンポーネント化する
ユーティリティーファーストでHTML/CSSを記述して、必要になったらコンポーネント化する。

3. 「Hover、Focus、その他Statusの処理」を知る

フォームをもとに、Hover、Focusについて実装例が詳しく記載されています。
コピペすればそのままフォームが表示されるので、Tailwind CSSの便利さと、Hoverの具体的な実装方法を知ることができます。Hover、Focus以外も基本的な実装例を掲載しているのでそちらも参考になります。

4. 「レスポンシブルデザイン」対応方法を知る

レスポンシブルデザインの対応方法については、公式ドキュメントが詳しく、かつわかりやすく解説してくれています。異なるブレークポイント（画面サイズによって）背景色が変わる例など面白いですね！
レスポンシブデザイン - Tailwind CSS
Tailwindのすべてのユーティリティクラスは、さまざまなブレークポイントに条件付きで適用できます。これにより、HTMLを離れることなく、複雑なレスポンシブインターフェイスを構築することが簡単になります。 一般的なデバイスの解像度に触発された、デフォルトで4つのブレークポイントがあります。 ユーティリティを追加し、特定のブレークポイントでのみ有効にするには、ユーティリティの前にブレークポイント名を付け、その後に: 文字を付けるだけです。 これは フレームワーク内のすべてのユーティリティクラス で機能します。つまり、文字間隔やカーソルスタイルなど、特定のブレークポイントで文字通り何でも変更できます。 これは、小さな画面ではスタックレイアウトを使用し、大きな画面ではサイドバイサイドレイアウトを使用するマーケティングページコンポーネントの簡単な例です （ブラウザのサイズを変更して実際の動作を確認してください） ： 上記の例の仕組みは次のとおりです。 デフォルトでは、外側のdivはdisplay:blockですが、md:flexユーティリティを追加すると、中規模以上の画面ではdisplay:flexになります。 親がフレックスコンテナの場合、画像が縮小しないようにする必要があるため、中規模以上の画面で縮小しないようにmd:flex-shrink-0を追加しました。 技術的には、小さい画面では何もしないのでflex-shrink-0を使用することもできますが、それはmd画面でのみ重要なので、クラス名でそれを明確にすることをお勧めします。 小さな画面では、画像はデフォルトで自動的に全幅になります。中程度の画面以上では、md:w-56を使用してその幅を固定サイズに制限しました。 小さな画面では、コンテンツセクションはmt-4を使用して、コンテンツと画像の間にマージンを追加します。このマージンは水平レイアウトでは必要ないため、md:mt-0を使用してそのマージンを元に戻し、代わりにmd:ml-6を使用して左マージンを追加しました。 この例ではブレークポイントを1つだけ使用しましたが、 sm, lgまたは xl レスポンシブプレフィックスを使用して、このコンポーネントを他のサイズに簡単にカスタマイズできます。 デフォルトでは、Tailwindは、BootstrapまたはFoundationで慣れているものと同様に、モバイルファーストブレークポイントシステムを使用します。 つまり、接頭辞なしのユーティリティ（大文字など）はすべての画面サイズで有効になりますが、接頭辞付きのユーティリティ（ md:uppercaseなど）は指定されたブレークポイント 以上 でのみ有効になります。 これは、異なるブレークポイントでいくつかの背景色を循環する簡単な例です （背景色の変化を確認するためにブラウザのサイズを変更します） ： Throughout the documentation, you'll often see this interactive widget which we use to quickly demonstrate how some code would look on different screen sizes without forcing you to resize the browser - simply click the device icons at the top to see how the code below would render at that breakpoint: このような例は、意図的に ブラウザのサイズの変更に反応しません 。これは仕様によるものです。小さな画面でドキュメントを読んでいる人でも、デスクトップディスプレイでコードがどのように表示されるかをプレビューできます。 このアプローチが人々を最も驚かせるのは、モバイル向けに何かをスタイル設定するには、 sm:プレフィックス付きバージョンではなく、プレフィックスなしバージョンのユーティリティを使用する必要があるということです。 sm:を「小さな画面上」を意味するものとは考えないでください。「小さな ブレークポイント 」として考えてください。 モバイルデバイスをターゲットにするためにsm:を使用しないでください 接頭辞のないユーティリティを使用してモバイルをターゲットにし、より大きなブレークポイントでそれらを上書きします このため、最初にデザインのモバイルレイアウトを実装してから、 sm画面に意味のある変更を重ねてから、 md 画面などを重ねることをお勧めします。 Tailwindのブレークポイントには ...
https://tailwindcss.jp/docs/responsive-design

5.「開発環境の構築方法」を知る

1-4の記事で、Tailwind CSSの良さが理解できたら、早速、開発環境を構築してみましょう。

6. 「Tailwind CSSテンプレート(実装例)」を参考にする

開発環境構築ができたら、次はTailwind CSSテンプレートを参考に実装していきます。その時に、 Tailwind CSS使ったテンプレートを参考にすると良いコードの書き方を学ぶことができます。以下の記事は600以上の実装例を無料でコピペできて非常に役立ちます。

おわりに

初学者向けのTailwind CSS記事紹介はいかがだったでしょうか？
以下、5つにそって記事検索して、自分に合った記事を探してみると良いかもしれません
💡
Tailwind CSS記事検索のキーワード
  1. Utility-First Fundamentals(ユーティリティ ファーストの原則)
  1. Handling Hover, Focus, and Other States(Hover、Focus、その他Statusの処理)
  1. Responsive Design(レスポンシブルデザイン)
  1. 開発環境構築
  1. Tailwind CSSテンプレート

[宣伝] GASプログラミング入門の教材 - Udemy

  • 2023年11月時点で、約3,000人の受講生を獲得し、「Udemy Business」に選定されてます。
    • 「Udemy Business」とは、Udemyが「企業研修」向けに提供しているサービスのことです。
    • Udemyで販売している全ての講座の中から、「企業研修」に提供できる高品質な講座をレビューや内容を加味して厳選していることが特徴のサービスです。
    • その「Udemy Business」で、このGAS講座は採用されております。
  • 教材の詳細は、以下のUdemyに記載しておりますので内容ご確認ください
    • 以下のバナーから購入すると、通常、定価27,800円が1,600円に割引される特別クーポンが適用されます！
Xでポスト