【TailwindCSS】初心者向け講座・CSSが苦手な人向け 【わかりやすさ重視】【次世代のCSS】にじっくり取り組む

「CSSを知ってはいるけれど、どうも苦手で・・」

Webページを作成するうえで、避けては通れないのがCSS。

少し書くのは問題ないけれど、

ページ数が増えてくるにつれ、ぐちゃぐちゃになりがちなのもCSSの特徴で。

最近ではレスポンシブ対応・モバイルファーストという事もあいまって、

さらにややこしさが増しています。

CSSの設計をかじってみるも、

つい『Boostrap』などのCSSフレームワークに頼ってデザインする事になり、

結果的に、いつも他のサイトと同じようなデザインになってしまう。。

『Boostrap』よりも微調整がしやすくて、

CSSよりも簡単に書ける方法はないのだろうか・・・

そんな需要を知ってか知らずか颯爽と登場し、

近年人気急上昇中のCSSフレームワークが、

『tailwindcss』です。

『Bootstrap』を筆頭とするこれまでのCSSフレームワークと違い、

厳選されたCSSプロパティ集になっていて、

簡単に微調整でき、さらにカスタマイズしやすい事がウリになっています。

PHPの人気フレームワーク『Laravel』でも、

『Laravel8』から『Bootstrap』->『tailwindcss』へ移行された事で、

今後さらに人気が高まってくることが予想されます。

この講座では、

CSSを知ってはいるけれどデザインが苦手な僕のような方を対象に、

デザインが苦手でもそれなりにきれいなサイトをつくれるような方法・コツを

ギュッと詰め込んだ方法を解説しています。

■更新情報

2021/12 ver3追加

■講座の内容

section1〜6までは tailwindcss ver2 で解説をしています。

・section1  tailwindcssの基本

　HTMLのおさらい/ボックスモデル/margin/padding/width/height/hover:/focus:/font/

　color/shadow/border/ring/opacity/background

・section2  レイアウト周り

　display/BoxAlignmentModel/flexbox/grid/position/z-index/overflow/visibility/container

　レスポンシブ対応(モバイルファースト)　

・section3 サンプル集

　SVG/Flexboxのレイアウト集/ボタン/カード/フォーム

・section4 その他の機能

　グラデーション/トランジション/アニメーション

・section5 カスタマイズ方法

　npmを使ったインストール方法/tailwindcss.config.js/色追加/グーグルフォント追加/

　@apply/@layer/preflight(normalize)/purge

・section6 Laravel講座で扱ったページの解説

・section7 tailwindcss ver3