Tailwind CSSで爆速デザインマークアップ!

Tailwind CSSで爆速デザインマークアップ!

2020年7月18日にYouTube Liveで開催された「サマーインターン前にツヨツヨになっちゃおうの会」で登壇した際の資料です。
https://connpass.com/event/181419/

Twitter: https://twitter.com/920oj
Web: https://920oj.net/
Contact: oj[at]920oj.net

9af444e4e7110845f0b3319efb1ca252?s=128

おーじぇい

July 18, 2020
Tweet

Transcript

  1. Tailwind CSS で 爆速 デザインマークアップ! by おーじぇい (@920OJ)

  2. こんにちは おーじぇいといいます 東京都市大学 メディア情報学部 社会メディア学科 B3 - Web開発者を目指しています - 主にVue.js(Nuxt.js)でWebフロントエンド開発

    - 学生エンジニア団体Steg 技術統括 - 五目ご飯が大好き @920OJ
  3. とりあえず予防線張っておくか…… つよつよな話・難しい話ではないので リラックスして聴いてね❤

  4. みなさん デザイン って難しくないですか?

  5. 見る人によっては強いストレスを与える画像(閲覧注意)

  6. 【驚愕】人類の叡智を集結させた結果がこちら…… CSSフレームワーク の登場

  7. 【驚愕】人類の叡智を集結させた結果がこちら…… - デザインがわからなくても“ある程度”きれいな見た目が作れる - ややこしいレスポンシブ対応が比較的ラクに (フレームワークごとのメディアクエリのルールに乗っかる) - 場合によっては一行もCSSを書かないでOKな場面も……(後述)

  8. ドのつく素人のワタシでもWebサイトが作れたこれだけの理由 定番CSSフレームワーク「Bootstrap」 - Twitter社が作った - 特定のクラス名を付与するとスタイルが当たる - 「コンポーネント」の考え方 →部品を組み合わせてWebページを構築する -

    jQueryによって動的な表示も実現(v4まで) →モーダルや表示/非表示トグルなどの よく使う機能がすぐに使える
  9. ドのつく素人のワタシでもWebサイトが作れたこれだけの理由 定番CSSフレームワーク「Bootstrap」 - Twitter社が作った - 特定のクラス名を付与するとスタイルが当たる - 「コンポーネント」の考え方 →部品を組み合わせてWebページを構築する

  10. Bootstrapはつらい - 細かい調整がやりにくい →結局CSSを書いてグチャグチャになる 特にpadding/margin指定が……orz - 似たりよったりのデザインになる →分かる人には「これBootstrapだ!」とバレる 現 実

    の 世 界 は 、 ど う し て こ ん な に つ ら く き び し い の だ ろ う … 。
  11. 颯爽と登場……!

  12. 颯爽と登場……! https://tailwindcomponents.com/

  13. Tailwind CSSってなんぞや ユーティリティー ファースト な CSSフレームワーク

  14. ユーティリティーファーストの会

  15. ボタンのコードを見てみよう

  16. ボタンのコードを見てみよう

  17. ボタンのコードを見てみよう

  18. Bootstrap VS Tailwind CSS .btn .btn-primary .bg-blue-500 .hover:bg-blue-700 .text-white .font-bold

    .py-2 .px-4 .rounded
  19. Bootstrap VS Tailwind CSS

  20. Bootstrap VS Tailwind CSS .btn: ボタンの形・フォントウェイト、margin/paddingなど .btn-primary: ボタンの色 .bg-blue-500 背景色をblue-500に

    .hover:bg-blue-700 ホバーしたら背景色blue-700 .text-white 文字の色は白に .font-bold 文字のを太字に .py-2 y方向paddingを2(0.5rem) .px-4 x方向paddingを4(1rem) .rounded まるみをつける
  21. Bootstrap VS Tailwind CSS .btn: ボタンの形・フォントウェイト、margin/paddingなど .btn-primary: ボタンの色 .bg-blue-500 背景色をblue-500に

    .hover:bg-blue-700 ホバーしたら背景色blue-700 .text-white 文字の色は白に .font-bold 文字のを太字に .py-2 y方向paddingを2(0.5rem) .px-4 x方向paddingを4(1rem) .rounded まるみをつける コンポーネントクラス 大きく区切る
  22. Bootstrap VS Tailwind CSS .btn: ボタンの形・フォントウェイト、margin/paddingなど .btn-primary: ボタンの色 .bg-blue-500 背景色をblue-500に

    .hover:bg-blue-700 ホバーしたら背景色blue-700 .text-white 文字の色は白に .font-bold 文字のを太字に .py-2 y方向paddingを2(0.5rem) .px-4 x方向paddingを4(1rem) .rounded まるみをつける ユーティリティクラス 部品ではなく効用
  23. いやいやいやいや って、おーい(笑) ちょっとマテ茶✋(^し^)

  24. ギモン1・えっそもそもなんでこれが必要なの? .btnクラスを作れば良いのでは? - クラスの命名規則に悩む必要がない! どうせ命名規則は守られない(?) - containerの中身はflexだけ、なんてことも 冗長になるのを防ぐ - 後のCSS変更時に不具合が生じない

    複数使われているクラスを変更するのは怖い HTML上でどうなっているのかがすぐ分かる
  25. ギモン2・インラインCSSで良くない? コード的には同じでは? - 色コード・サイズ値などを直接書かなくて良い Tailwind CSSでは基準となるサイズ・色などが 定義されている →値を書かなくて良い - レスポンシブデザイン対応がラク

    - 疑似要素(:hoverなど)が簡単
  26. 魅力を語るよ~ デフォルトのカラーパレット - もう配色に悩まなくて良い…… - .bg-blue-400で背景を「青400」に .text-blue-400で文字を「青400」に - Sassの変数っぽい https://tailwindcss.com/docs/customizing-colors/

  27. 魅力を語るよ~ レスポンシブ対応が簡単 - 面倒なメディアクエリ Tailwind CSSのルールに従えばラク - それぞれのクラス名の冒頭に「sm:」や「md:」 をつけるだけでOK! https://tailwindcss.com/docs/customizing-colors/

    ↓ 横幅によって背景色が変わる
  28. ギモン3・冗長じゃない? 毎回同じこと書くのはメンドイ!!!!! コードの再利用はJSフレームワーク等で担えばOK VueやReactを使って、コンポーネントに切り分ける

  29. ギモン3・冗長じゃない? 毎回同じこと書くのはメンドイ!!!!! コードの再利用はJSフレームワーク等で担えばOK VueやReactを使って、コンポーネントに切り分ける ※Nuxt.jsでの簡単な例です

  30. ギモン3・冗長じゃない? 毎回同じこと書くのはメンドイ!!!!! コードの再利用はJSフレームワーク等で担えばOK VueやReactを使って、コンポーネントに切り分ける ※簡単な例です

  31. なぜ爆速でマークアップできるのか?(タイトル回収) - HTMLのみで完結 →CSSと行ったり来たりしなくてOK - 決められた大きさ・色ルールに則る →自分で決めなくて良い、 チームで統一することもできる - クラス名を考える必要がない

    →実は結構なコスト削減 - VSCodeの拡張機能もあります - チートシートなんてものも…… https://nerdcave.com/tailwind-cheat-sheet
  32. Tailwind UIなんてのもあります

  33. まとめ - 紹介しきれなかった便利な機能はいっぱいあります!! カスタムテーマでの拡張 PurgeCSSでの未使用CSSの削除など - 「Utility First」というアプローチでのフレームワーク 低レベルから攻めることで柔軟に・爆速でデザインマークアップが可能 CSSフレームワークでありがちな「◦◦っぽさ」を無くせる

    Tailwindとは「追い風」 爆風を背に、この夏を駆け抜けろ!!