【tailwindcss】初心者向け講座・CSSが苦手な人向け 【わかりやすさ重視】【次世代のCSS】にじっくり取り組む
What you'll learn
- モダンなフロントエンドデザイン方法
- CSSが苦手でも取り組みやすい方法
- tailswindcssの使い方
- tailwindcssのカスタマイズ方法
- モバイルファーストのコード記述方法
Requirements
- インターネット接続可能なパソコン
- HTML/CSSを多少知っておくといいです(動画内で簡単な解説はしています)
- わからない事があったら遠慮なく質問する主体性
Description
「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
Who this course is for:
- CSSが苦手な方
- モダンなフロントエンドデザインを知りたい方
- tailwindcssに興味のある方
- Vuejsなどに組み込みたいと思っている方
Instructor
生成AI術士/システムエンジニア/キュレーター/Webマーケッター/
(要はなんでも屋)
子ども向けSTEAM教育から、法人新人向け教育まで。
難しいことをわかりやすく伝える事が生きがいです。
次世代の教育に関心あり。
プログラミング講座の作成にあたり、
プログラミング初心者だった頃の自分に向けるよう、
できるだけ専門用語を減らし、
イメージ重視で少しでもわかりやすくなるよう
画像や図を使い、
抽象的な表現から具体的に落とし込むようにしています。
■生成AI
ChatGPT (GPT-4)
Midjourney
■フロントエンド
HTML/CSS/Tailwindcss
JavaScript/TypeScript
Vue.js/Nuxt.js
React.js
P5.js
■バックエンド
PHP/Laravel
Python/Django
■インフラ
Git/Docker/AWS
■オフィスワーク
GAS/ExcelVBA
■データサイエンス
基礎数学/統計学
などなど