|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/tailwindcss_beginner/
课程评论：没有评论
课程名称：【tailwindcss】初心者向け講座・CSSが苦手な人向け 【わかりやすさ重視】【次世代のCSS】にじっくり取り組む 课程概述： 本课程专为对CSS感到有些困惑的初学者设计，尤其是那些虽然了解CSS但在网页设计中频繁感到困难的人士。在现代网页制作中，CSS是不可避免的，但随着页面数量的增加，许多人发现CSS代码变得混乱难以管理。在响应式设计和移动优先的趋势下，这种情况尤为突出。 尽管有许多开发者倾向于使用如"Bootstrap"等传统的CSS框架，但这通常导致设计的单一化。为了满足对更灵活简易框架的需求，"tailwindcss"应运而生，它提供了一套精心挑选的CSS属性，允许用户进行简单的微调与高度定制，极大地提高了设计的灵活性和自由度。随着流行PHP框架"Laravel"的更新，从"Bootstrap"迁移到"tailwindcss"，其热度预期会进一步上升。 在这门课程中，针对像我一样对设计不太自信的学习者，提供了多种技巧与方法，助力其创建视觉美观的网站。课程分为多个部分，覆盖从基本概念到具体应用的方方面面，助你逐步掌握tailwindcss的使用技巧。 课程内容： 1. tailwindcss基础：HTML复习、盒模型、边距、内边距、宽高、状态伪类、字体、颜色、阴影、边框、透明度、背景等基础知识。 2. 布局相关：显示、盒模型对齐、Flexbox、Grid、定位、层叠上下文、响应式设计等。 3. 示例集：SVG、Flexbox布局、按钮、卡片、表单设计等。 4. 其他功能：渐变、过渡、动画等效果。 5. 定制方法：使用npm进行安装、编辑tailwindcss配置、添加颜色和Google字体等。 6. Laravel课程相关的页面讲解。 7. 介绍tailwindcss ver3的新特性。 本课程将帮助学习者建立CSS设计的信心，充分运用tailwindcss创建美观、实用的网页设计。
「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
