注目キーワード
  1. Wordpress
  2. テーマ
  3. プラグイン
  4. SEO
  5. 集客

クリーンなHTMLを保てるシンプルなclassのTailwind.css用UIコンポーネント集・「daisyUI」


目次

daisyUI


daisyUIはクリーンなHTMLを保てるシンプルなclassのTailwind.css用UIコンポーネント集です。

この手のUIフレームワークの一部ではユーティリティクラスを組み合わせる事が多く、細かい設定が可能な代償としてHTMLの可視性が損なわれがちですがdaisyUIはコンポーネントクラスを追加するだけで済む、との事ですが、デフォルトとしてある程度作ってあるというだけでこれはdaisyUIに限った話ではないのでさほどメリットとは言えない気がしました。

とはいえ特に悪い印象も無く、普通に使いやすい気がしました。細かい設定が出来るユーティリティクラスはHTMLが汚くなるけど、あれはあれで必要なケースもあります。

少し脱線しましたが、以下daisyUIのサンプルです。

Ads

動作サンプルです。タブは切り替わりません。

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.1/dist/tailwind.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdn.jsdelivr.net/npm/daisyui@1.0.0/dist/full.css" rel="stylesheet" type="text/css" /> <div class="m-4 tabs"> <button class="tab tab-lg tab-lifted">Tab 1</button> <button class="tab tab-lg tab-lifted tab-active">Tab 2</button> <button class="tab tab-lg tab-lifted">Tab 3</button> </div>

例えばタブなどもシンプルなclassで実装できるのは魅力ですね。また、テーマもいろいろ選べるようになっていて、全部で21種のテーマが用意されています。

<html data-theme="cupcake">

テーマの変更はhtmlタグにdata-themeというカスタムデータ属性を追加して設定するだけでとても簡単に切り替え可能です。

勿論コンポーネントも大量に用意されているのでTailwind.cssを使うっプロジェクトの際のお供に検討してみるのも良さそうですね。ライセンスはMITとの事です。

daisyUI

#wordpress #ワードプレス #SEO #集客

「かちびと.net」を閲覧する

最新情報をチェックしよう!
>WordPressに関連する情報まとめ

WordPressに関連する情報まとめ

ブログ / ホームページの価値の最大化をさせるCMS、WordPress(ワードプレス)。フリーのブログとは違い、いくらか敷居の高い印象がありますが、一つ一つクリアにしてみるときっとあなたもWordPressのパワーの恩恵に預かれると思います。当サイトを見て、まずはトライしてみましょう!

CTR IMG