TailwindCSSで、最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ

Post on:2019年5月8日

sponsors

デザインは奥が深いですね。
Webサイトでよく見かけるUI要素のデザインに一手間加えるだけでぐっとよくなる、ディテールにこだわった素晴らしいデザインのアイデアをTailwindCSSで実装するテクニックを紹介します。

ベースに使用するのは「TailwindCSS」で、さまざまなコンポーネントやエレメントをカスタマイズできるスタイルをまとめたユーティリティファーストのCSSフレームワークです。

TailwindCSSについては、以前の記事をご覧ください。

このTailwindCSSを使用して、Steve Schoger氏の🔥 Design Tipsを実装したのが今回紹介するCSSのデモです。デモには最近のWebサイトで見かけるUI要素がたくさんあり、すぐに次のプロジェクトに役立つと思います。

異なるサイズのテキストを同じウェイトに見せるには、大きいテキストを細くし、小さいテキストを太くします。

ドロップダウンは単なるリンクのリストではありません。ボックスを使用して、あなたは自由にデザインすることができます。

ランディングページに小さなアイコンを表示するのではなく、背後に図形を配置して背景色を加えてみましょう。

標準の箇条書き記号の代わりに矢印やチェックマークのようなアイコンを使用すると、リストに視覚的な効果を与えることができます。

テキストよりもウェイトがあるアイコンを使用している場合、通常は非アクティブ状態のテキストよりもアイコンを少し明るくします。

ボーダーや区切り線が多すぎると、デザインが込み入って見えます。これを改善する素敵なアイデアがいくつかあります。

テキストを強調または強調しないためには、フォントサイズが最適な方法とは限りません。その代わりに、カラーとフォントのウェイトを変更してみてください。

2カラムのレイアウトは長いフォームを整理したり、不格好な長いフォームフィールドを使用せずに広い画面に入力したりするのに適しています。

カラーの背景に白いテキストを使用する場合、アクセシブルなコントラスト比を調整するのは非常に困難です。柔らかい色の背景に濃い色のテキストを使用すると、アクセシブルになり、見た目も向上します。