こちらのツイートから約1か月。

Laravel8はページネーションもtailwindcssで生成するようになったのね、ってことで次はtailwindcssですな、その次に Laravel8 +vue.js ( jetstream@inertia + tailwindcss) になりそうです。 tailwindちょいリサーチして構成考えていきます。

— 世界のアオキ🥑プログラミング×生涯学習×熊本 (@aoki_monpro) December 4, 2020

ようやくリリースする事ができました。

こちらからご覧いただけます。

クーポンはこちら

定価4,000円ですが、

割引で1,500円前後になります。(為替で変動するようです。)

CSSを知ってはいるけれどどうも苦手、という僕のような方を対象に、

CSSのよく使う機能に厳選して解説し、

動画約60本でリリースいたしました。

時間にして約6時間。

また、今後の予定として、

• Laravelでの設定方法
• Vue.jsでの設定方法
• Reactでの設定方法
• サンプル集の追加(バッジ・ヘッダーなど)

なども追加し、どんどんボリュームアップさせる予定としております。

『tailwindcss』CSS苦手な方向け講座のコンセプトなど

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

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

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

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

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

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

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

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

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

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

『tailwindcss』です。

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

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

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

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

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

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

この講座では、

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

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

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

『tailwindcss』CSS苦手な方向け講座の内容

section1 tailwindcssの基本

• HTMLのおさらい
• ボックスモデル
• margin/padding
• width/height
• hover:/focus:
• フォント(font/text)
• 色(colors/opacity)
• 線(border/divide/ring)
• 背景(background)
• 影(shadow)

section2 レイアウト周り

• display
• BoxAlignmentModel
• flexbox
• grid
• position
• z-index
• overflow
• visibility
• container
• レスポンシブ対応(モバイルファースト)　

section3 サンプル集

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

section4 その他の機能

• グラデーション
• トランジション(transform/rotate/scale/skew)
• アニメーション

section5 カスタマイズ方法

• npmを使ったインストール方法
• tailwindcss.config.js
• 色追加
• グーグルフォント追加
• ディレクティブ(@apply/@layer/@tailwind
• preflight(normalize)
• purge

section6 (後日追加予定)

• Laravelへの設定方法
• Vue.jsへの設定方法

『tailwindcss』CSS苦手な方向け講座 無料公開分

いつものように無料公開分をYoutubeにアップしていますので、
口調や雰囲気などはこちらも参考にいただければと思います。

tailwindcssの概要

ボックスモデル(margin, padding)

幅と高さ(width, height)

フォントとテキスト(font, text)

色 (colors)

線 (borders, divide, rounded, ring)

画像と背景(image, background)

CSS調整モデル (CSS Alignment Module)

表示・非表示 ( visibility)

デザイン4つの基本原則

グラデーション

『tailwindcss』CSS苦手な方向け講座 頂いた感想

next.jsに組み込むために学びました。大変分かりやすかったです。
tailwind cssの学習のみならず品名のとおりCSSが苦手な人にとっても最適だと思います。私自身ほわっとしていたCSSやデザインに対する理解が少し深まったように思います。そういう意味で一度で二度おいしい教材です^^
足立さん

とても丁寧に作りこまれている印象を受けました。
おかげさまで、nuxt.jsでのサイト構築にtailwindcssを組み込むことができました。
これからも、適宜参照し理解を深めていこうと思っています。
ありがとうございました。
Enbizさん

CSSを使って2～3週間ぐらいの人でも理解できる内容だと思います。
説明は丁寧だと思います。ただ単にCSSやtailwindの説明をするだけでなく、色の組み合わせ方など関連する知識を説明してもらえて、勉強になりました。
まだ途中までしか見ていませんが、このまま最後まで頑張ろうと思います。
tailwind関連の書籍やサイトも少ないと思うので、貴重な講座だと思います。
おすすめできます。
Lyn Ngrさん

『tailwindcss』CSS苦手な方向け講座 を作成してみて

これまでの講座と同様に、

マニュアルと、
数多のWeb記事と、
経験とをミックスして、

できるだけわかりやすく構成したつもりではおりますので、

今後主流になりそうな『tailwindcss』に取り組んでみたいという場合には、

ぜひご活用いただければ幸いです。

クーポンはこちら