【tailwindcss】CSSが苦手な人向け じっくり取り組んでみよう【次世代のCSS】【わかりやすさ重視】
【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
近年人気急上昇中のCSSフレームワーク。CSSが苦手だからこそ取り組む価値のある厳選されたCSSプロパティ集を初歩からじっくり解説しています。CSS基礎/モバイルファースト/レスポンシブ対応/Flexbox/Grid/
Url: View Details
What you will learn
- モダンなフロントエンドデザイン方法
- CSSが苦手でも取り組みやすい方法
- tailswindcssの使い方
Rating: 4.55
Level: Beginner Level
Duration: 7 hours
Instructor: 世界のアオキ (Akihiro Aoki)
Courses By: 0-9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
About US
The display of third-party trademarks and trade names on this site does not necessarily indicate any affiliation or endorsement of hugecourses.com.
View Sitemap