【React】daisyUIを触ってみた！かなり楽しいw
daisyUIとは The most popular, free and open-source Tailwind CSS component library Tailwind CSSをベースとしたCSSライブラリで、No JavaScriptでかわいくて機能的な見た目を実現できるスグレモノ。 Bootstrapのような使い勝手でいろんなコンポーネントを実現できる。実態はTailwind CSSなので拡張も簡単。 今回はこちらのライブラリをReact（Next.js）で色々触ってみましたので、感想などをお伝えします。 なぜ興味を持ったか 最近プロジェクトでChakra UIを触っている。かなり便利なのだが、機能もスタイリングも提供されたものを使っているゆえにロックインされている感じが少し怖い。 特に機能（ロジック）面の実装においては思うところが色々あって、 慣れていないときにあらゆるコンポ
Tailwind CSS製UIデザインのHTMLコードをコピペできるFlowrift（便利ツールまとめも公開）
Tailwind CSSという言葉、最近よく耳にするようになっています。 カードやボタンなどUIデザインを基本としたCSSスタイリングが特長のBootstrapなどのフレームワークに比べ、Tailwind.cssはHTMLに直接スタイリングを行ってしまおうという考えで、今までのCSS設計のアプローチと全く真逆とも言えます。 そのため、ひとつの要素に追加された膨大なクラス名を見ると、カスタマイズしにくいと感じるひとも多いようです。 そんなときは、Tailwind.cssで利用可能なUIデザインのHTMLスニペットを集めた便利ライブラリFlowriftを活用してみましょう。 ヘッダーやフッター、ナビメニューといった基本から、ヒーローイメージ、CTA、サービス、お問い合わせフォーム、値段表、ギャラリー、404ページといったホームページ制作でよく利用するUIコンポーネントのコードをボタンひとつでコ
Web制作者が見落としがちな、ハンバーガーメニューをスマホに実装する時の注意すべきポイント
スマホでWebサイトを見ると、Appleをはじめ、DisneyやWikipediaやThe New York Timesなど多くのサイトでハンバーガーメニューが採用されています。Web制作者が見落としがちなハンバーガーメニューをスマホに実装する時の注意すべきポイントを紹介します。 特に、メニューをposition:absolute;で配置している場合は注意が必要です。 The mistake developers make when coding a hamburger menu by Jared Tong 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ハンバーガーメニューをiOS Safariで機能させる ハンバーガーメニューの実装でよく見かける問題 ハンバーガーメニューの実装方法 終わりに ハンバーガーメニューをiOS S
エンジニアが知っておくべきデザインの基本。「デザインガイドライン」と「コンポーネント」を学ぶ！ - エンジニアHub｜Webエンジニアのキャリアを考える！
エンジニアが知っておくべきデザインの基本。「デザインガイドライン」と「コンポーネント」を学ぶ！ Appleをはじめとする多くの成功企業がデザイナを役員に据えるなど、デザインに対する重要度が年々上がっているこの時代、若手のうちにUIデザインに関する基本的な考えを身につけ、より良いプロダクトを制作できるエンジニアを目指しましょう。 こんにちは。 グロースデザイナ/フロントエンジニアとしてWebサービス開発に携わっている右寺（@migi）と申します。最近は複数の企業で、数値解析から企画提案、開発も含めてサービスを成長させるためのお手伝いをしています。 現在はフリーランスとして活動していますが、直近では株式会社グッドパッチというUI（ユーザインターフェイス）デザインに特化した会社に勤めており、そこではデザインとの距離がとても近いところで開発をしていました。 そんな私の経験から、この記事では「エンジ
もっと細かい値を基準にしたVertical Rhythm - yuhei blog
本文のline-heightを基数としたVertical Rhythmは、値が大きくなりすぎるのでどうしても細かい調整がしたくなってうまくいかない。 それに悩んでいて@terkelに聞いてみたら、「本文のline-heightより細かい数字を基準にしてる、4pxとか。Material Designも多分そういうルールに則ってる」という話を聞いた。なるほど良さそうと思ったものの、細かい数字になってくると計算がめんどくさそう。 Rhythmic Sizingを利用できれば、それはかなり簡単に実現できる。要素のサイズやline-heightの値を、必ず指定した数値の倍数になるようにできるというやつだ。以下はline-heightを4pxの倍数にする例。 html { line-height-step: 4px; } .text { font-size: 1rem; // 16px line-he
8つの事例から学ぶ！優れたナビゲーションメニューの作り方
Webサイトを作る上では欠かせないナビゲーションメニュー。基本的にはヘッダーからドロップダウンでメニューが表示される例が多いですが、8つの事例を元にその作成方法を学んでいきます。ユーザーにとって分かりやすいメニューをぜひ作りましょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、Jake Rocheleau氏によって投稿されました。 モダ
脳に優しいデザインを！「Vertical Rhythm」の基本と実現方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。 どうも近頃はいぬ肌が恋しく、無性にワンコちゃんをなでなですりすりしたくてうずうずしるのですが・・ こういう写真を眺めているだけで心がほわ～っとしてきますよね 久しぶりに記事を書きます。「Vertical Rhythm」と呼ばれているデザイン手法ご存知でしょうか？さり気なく取り入れることで、文章が読みやすくなったり、レイアウトが整ったりすることが期待できるという。 デザインに限った話ではないが、完璧な正解など存在しないと思うので、あくまで一つの考え方として捉えて頂ければと思います。 実例を挙げながら進めて行きますので、「Vertical Rhythm」の考え方とその良さ、便利さをきっと理解してもらえるんじゃないかと思います。 前書き クライアントに「説得力のあるデザイン」を届けよう！ LIGでデザイナーをやってて、よくベテランデザイナーさんにこういう風に言わ
入力フォームにおけるユーザビリティの再確認
ユーザー登録などに必要な入力フォームですが、今もなお使いにくいフォームを見かけることがあります。U-Siteでは入力フォームについて何度も取り上げてきましたので、ここで、これまでの記事を引用して基本をおさらいします。 HCD事業部・宮内 2016年5月12日 イードではHCD関連の調査業務を多数請け負っております。最近ではユーザー理解のための調査が増えていますが、一方で、基本的なユーザビリティ評価業務も日々行っております。その主な内容としては、ユーザビリティテストやヒューリスティック評価によって現状のサイトやアプリの問題点を明らかにし、改善方針を提案するというものがあります。 サイトやアプリの規模、サービスの種類、運用体制などにより、存在するユーザビリティ上の問題点は様々で、新しいデバイスやデザインパターンの出現によっても変化していますが、共通した問題点もあります。その一つが、ユーザー登録
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ravixUI
daisyUI — Tailwind CSS Components ( version 4 update is here )
Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました