【コーディング効率UP!】Tailwindってなに？

みなさんは、Web制作でフレームワークを使っていますか？

フレームワークを使えば、コーディングの時間短縮や、css命名地獄から抜け出すことが可能です…！

今回は、筆者が制作に導入したフレームワークであるTailwindについて紹介いたします。

また、Tailwindでの制作に役立つサイトも併せてご紹介します。

Webサイト制作の効率アップに是非ご活用ください！

そもそもフレームワークって何？

まず、今回ご紹介するTailwindなどのフレームワークとは、ビジネス用語のものとは違い、プログラミングで使われているものになります。

プログラミングでのフレームワークとは、「あらかじめサイト構築に必要なパーツがまとめて用意されており、短いコードでそのパーツを呼び出し使うことができる」というものです。つまり、簡単に言ってしまえば、「便利パーツ集」のようなものです。

フレームワークは、Tailwindだけでなくさまざまな言語ごとに存在しています。例えば、CSSならBootstrap、JavascriptならVue.js、PhyhtonならDjango…などです。どれも有名なフレームワークなので、聞き覚えがある方も多いかもしれません。

Tailwindって何？

ここから本題のTailwindの紹介に入ります。

まず、Tailwindはユーティリティファーストの考えに基づいて作られたCSSのフレームワークです。

用語解説：ユーティリティファーストって何？

そのため、TailwindではCSSのようにスタイルを当てるために個別にクラスは割り当てることは行いません。そして、その代わりにTailwindで提供されているユーティリティクラスを用います。

用語解説：ユーティリティクラスって何？

つまり、Tailwindでは以下のようなことが可能になります。

まず、この表示をHTMLとCSSでコーディングすると、下記のようになります。

次に、Tailwindの場合(今回はCDN)、下記のようにhtmlに直接クラスを3つ書き加えるだけ!

いかがでしょうか？

このように直接書き込むため新しくCSSファイルを作る必要はなくなります。そして、もしHTMLタグが増えたとしても個別のクラス名の必要もありません。

Tailwindのチートシートサイト

最後に、Tailwindを使う際に役立つ2つのチートシートサイトを紹介します。

tailwindcomponents(最新バージョン(3.x)対応)

まず、こちらのサイトは最新バージョンに対応しているためおすすめです。

検索でワードを入力すると、該当する項目のみに絞り込んで表示することが可能です。

また、クラスをワンクリックでコピーできるため大変便利に感じます。

Tailwind CHEAT SHEET(バージョン(2.x)対応)

次に、こちらのサイトは前述のサイトとは違い最新バージョンには対応しておりません。

しかし、最新を必要としないのであれば十分な機能があるチートシートです。

また、こちらも検索可能、ダブルクリックでコピーと便利なサイトです。

まとめ

いかがでしょうか。Tailwindの魅力が少しでも伝わっていたなら幸いです。

コーディングを効率化し作業を短縮することができるので是非ご活用ください！