LoginSignup
0
0

More than 1 year has passed since last update.

Tailwindcssを使ってカードデザインを作ってみた!

Last updated at Posted at 2021-07-23

rectangle_large_type_2_005455f1162dd165f077f0261dd84bdd.png

Tailwindcssとは、ユーティリティファーストのCSSフレームワークです。

ユーティリティファーストなのでCSS設計など考慮しなくてもいいので、個人的に好きです!

Tailwindcssのカードデザイン

codepenに残しておいたのでHTMLのコードはそこから拾って使ってみてください。

See the Pen tailwindcss-card by usu-blog (@usu-blog) on CodePen.

できなかったこと

  • 当然ですがクリック時の「ripple efect」(波紋のアニメーション)の表現ができないのは残念ですね...。
  • ボタンを押した後のアクションなどの指定をしたかったのですが、設定ファイルに記述が必要でCDNでは無理そうでした。 → したがってフォーカス時の色を変えるような指定で対応してみました。

ひとこと

こまったときは、公式ドキュメントがしっかりしているので最初は調べること多いかもですが慣れると直感で大体わかるのでとても良いかと思います!
また他のコンポーネントにも挑戦してみようと思います😆

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0