Tailwind CSS のコンセプトを読んでいる(後で更新する)
状態
途中だけど公開する。また後で書き足す。
Tailwind CSS
Utility-First のページ
感想
- 書き方を覚えれば書きやすそう
- クラス名の与え方にブレが発生しなくなる
- 他者と共同作業しやすくなる
メモ
- flexbox ユーティリティ
- https://tailwindcss.com/docs/display#flex
flex
,flex-shrink-0
- padding ユーティリティ
- max-width ユーティリティ
- margin ユーティリティ
- background-color ユーティリティ
- border-radius ユーティリティ
- https://tailwindcss.com/docs/border-radius
rounded-xl
- box-shadow ユーティリティ
- https://tailwindcss.com/docs/box-shadow
shadow-md
- width ユーティリティ
- height ユーティリティ
- space-between ユーティリティ
- https://tailwindcss.com/docs/space
space-x-4
space-x-4 > * + *
--tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
- font size ユーティリティ
- text color ユーティリティ
- https://tailwindcss.com/docs/text-color
text-black
- font-weight ユーティリティ
- https://tailwindcss.com/docs/font-weight
font-medium
- コロン区切り
- hover や ブレークポイントの指定
- @apply
デザイン: HIG
デザイナーが本業なはずなので、ヒューマンインターフェースガイドラインのように、当たり前にやってることを人に説明できるようにならないとなとは思ってはいる。
思ってはいるもののコード書く方が楽しいのでうっかりプログラミングの学びの方が進みやすい……。目に見えてできることが増えるからかもしれない。
しかしやらねばなー。なんとなくデザインしている状況を脱却したい。
https://twitter.com/becolomochi/status/1346694019204534273?s=21
雑記: 作業する前に手順書を作るようになった
フィヨルドブートキャンプで学び始めてから言語化の楽しさがさらに加速しており、何をするにも一旦テキストに書き残すようになった。
仕事や学びのときに手順書も書くようになった。
書く場所は esa かフィヨルドブートキャンプの日報なことが多い。
そういや esarea が本当に便利でやばい。もっと早く使いたかった。
手順書は箇条書きで大体でざっくりと書き始めて、作業しながら思いついたタイミングで追記したり順番を変えたりしている。
作業に集中できなかったのが改善されつつある。
言語化する時間は無駄だと思っていたが、急がば回れじゃないけど結局時間短縮につながることが多い。
書き慣れてくるようになると時間もそれほどかからないし。
頭がすっきりする感じがあってよい。
WordPressの編集画面を元に戻す
久しぶりに WP を入れたらエディタが新しくなっており、タグの入れ方がわからず。
旧スタイルのエディタはプラグインで入れられるらしい。
Classic Editor – WordPress プラグイン | WordPress.org 日本語
Classic Editor (クラシックエディター) は、WordPress チームがメンテナンスしている公式プラグインです。以前の WordPress エディターおよび投稿編集画面を復元します。
公式なので安心感がある。