【tailwindcss】CSSが苦手な人向け じっくり取り組んでみよう【次世代のCSS】【わかりやすさ重視】

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

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

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

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

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

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

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

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

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

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

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

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

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

『tailwindcss』です。

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

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

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

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

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

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

この講座では、

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

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

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

■講座の内容

・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への設定方法/Vue.jsへの設定方法