オンライン教材

【tailwindcss】CSSが苦手な方向けの講座をリリースしました。【Udemy】

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

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

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

クーポンはこちら

定価4,000円ですが、

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

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

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

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

時間にして約6時間。

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

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

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

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

アオキ
CSSを知ってはいるけれど、どうも苦手で・・

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

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

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

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

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

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

つい『Boostrap』などの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苦手な方向け講座 を作成してみて

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

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

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

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

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

クーポンはこちら


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. CG関連

    【P5.js】初心者向けの動画をリリースしました(プログラミング×数学物理)【U…
  2. オンライン教材

    【ExcelVBA】初心者向け講座をリリースしました。【Udemy】
  3. 数学

    【三角関数】とは わかりやすくまとめてみた【動画あり】
  4. オンライン教材

    【PHP/Laravel】初心者向けの動画をリリースしました【Udemy】
  5. オンライン教材

    【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【t…
PAGE TOP