UIコンポーネントの大きさは外から制御しよう - Qiita

2024/07/03 50 users Qiita prop コンポーネント CSS スタイリング

昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるよう... 続きを読む

デジタル庁デザインシステムβ版

2024/05/30 660 users インタラクション ユーザビリティ アクセシビリティ 実装 設計

デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化するUIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。 デジタル庁のミッションである「誰一人取り残されない、... 続きを読む

これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります

2023/06/08 279 users 開閉 フォーカス Popover API HTML 新機能

先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに... 続きを読む

HashiCorp、UIデザインシステム「Helios」をオープンソースで公開。UIコンポーネントやアイコンなど

2023/02/01 100 users Helios Vagrant hashicorp 原則 公開

HashiCorp、UIデザインシステム「Helios」をオープンソースで公開。UIコンポーネントやアイコンなど TerraformやVagrantなどで知られるHashiCorpは、同社製品のユーザーインターフェイス開発に使われているデザインシステム「Helios」をオープンソースで公開しました。 デザイン設計の原則やサンプルと共に、25種類のUI... 続きを読む

レスポンシブ対応のレイアウトやUIコンポーネントの実装が簡単！ min(), max(), clamp() の便利な使い方を詳しく解説

2022/10/13 118 users CLAMP ＭＡＸ min CSS メディアクエリ

CSSの比較関数が主要ブラウザすべてにサポートされてから早2年が経ちました。これらの比較関数は、今まではJavaScriptを使用しないとできなかったこと、メディアクエリで複雑に実装していたことをシンプルなCSSで実装できます。 最近のWebサイトで使用されている、CSSの比較関数 min(), max(), clamp() の便利な使い方を... 続きを読む

AWS、自社製品のために開発したデザインシステム「Cloudscape」オープンソースで公開。UIコンポーネント、デザインパターンなど

2022/07/25 92 users Cloudscape マネジメントコンソール AWS 公開

AWSは、マネジメントコンソールなど同社が提供する製品やサービスのWebアプリケーション画面を構築するために開発したデザインシステム「Cloudscape」をオープンソースで公開しました。 Cloudscape Design System, an AWS solution for building intuitive user experiences, is now open source! Cloudscape consists o... 続きを読む

Tailwind CSSの入門に！ コピペで簡単に実装できるUIコンポーネントとページレイアウトのまとめ -Preline UI

2022/06/16 155 users コピペ Tailwind CSS 各UIコンポーネント 入門

Webサイトでよく使用されるさまざまなUIコンポーネントとページレイアウトをTailwind CSSで実装したコンポーネント集を紹介します。 Tailwind CSSをこれから始めるという人にも簡単で、デフォルト構成のまま機能し、各UIコンポーネントとページレイアウトはHTMLをコピペするだけで簡単に実装できます。 Preline UI Preli... 続きを読む

これまでとは異なるCSSフレームワークが登場！ 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props

2022/04/05 189 users CSSフレームワーク 一貫性 カスタムプロパティ 登場 くら

これまでとは異なるCSSフレームワークが登場しました！ Tailwind CSSのようにユーティリティファーストで、すべての値がCSS変数（カスタムプロパティ）で記述されています。レスポンシブ対応で一貫性のあるUIコンポーネントを簡単に、素早く実装できます。 単独でも他のフレームワークとの併用も可能で、カラーのみグラ... 続きを読む

最近のWebサイトで見かける！ フロントエンドのデベロッパーにもデザイナーにも役立つCSSの実装テクニックのまとめ

2022/03/31 202 users エフェクト デベロッパー CSS テクニック 一昔前

最近のWebサイトやアプリで見かけるUIコンポーネントやエフェクトを実装するCSSのテクニックを紹介します。 一昔前まではJavaScriptが必要だったりしましたが、現在ではCSSのみで実装できるようになり、覚えておくと非常に便利です。 10 Useful CSS Tricks for Front-end Developers by Alex Ivanovs 下記は各ポイントを... 続きを読む

CSSによるレイアウトの崩れやおかしな挙動を解決するテクニックのまとめ -Defensive CSS

2022/01/20 269 users 挙動 CSS レイアウト テクニック Flexbox

WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニックを紹介します。 FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問... 続きを読む

Tailwind CSSの入門に！コピペで簡単に利用できるUIコンポーネントのまとめ

2021/10/20 202 users コピペ Tailwind CSS HTML コンポーネント集

Webサイトやスマホアプリで見かけるUIコンポーネントをTailwind CSSで実装されたコンポーネント集を紹介します。 Tailwind CSSを初めて触れる人にも簡単で、デフォルト構成で機能し、HTMLをコピペするだけで簡単に使用できます。 Flowrift Flowrift -GitHub 他にも、Tailwind CSSで実装されたUIコンポーネントを探してい... 続きを読む

よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ | コリス

2021/02/18 748 users スニペット ナビゲーション CSS Layout レイアウト

Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね... 続きを読む

これぞプロの実装テクニック！フロントエンドのデベロッパーはCSSで実装する時に何を考えるか | コリス

2020/12/08 358 users ＭＡＸ min コリス デベロッパー スクリーン

ページのレイアウトやUIコンポーネントを実装する時に、フロントエンドのデベロッパーはいろいろなことを考えます。スクリーンのサイズが小さい時はどうなるのか、デザインでは中央配置に見えるけど実装はどうすべきか、要素が少ない場合や多い場合があるのか、max-やmin-を定義した方がよいのか、、、 フロントエンドの... 続きを読む

しっかり理解しておくと便利なCSSのテクニック、minmax()関数の使い方 | コリス

2020/11/26 171 users minmax コリス グリッド CSS 関数

minmax()はCSSの関数で、要素サイズの最小値と最大値を定義することができます。カードを配置するグリッド、記事を中央配置で画像を幅いっぱいにするフルブリードなど、ページのレイアウトやUIコンポーネントの実装に非常に便利です。 CSS Gridにおけるminmax()関数の実用的で、便利な使い方を紹介します。 A Deep Dive ... 続きを読む

これで完璧！CSS GridとFlexboxの違いと使い分け方、よく見かけるUIコンポーネントを実装するテクニックのまとめ | コリス

2020/06/25 351 users Flexbox コリス フォールバック CSS Grid

CSS GridとFlexboxのどちらを使った方がよいか悩んだことはありませんか？ CSS GridとFlexboxの違い、使い分け方、CSS Gridの実装例、Flexboxの実装例、CSS GridとFlexboxを組み合わせた実装例、フォールバックと古いブラウザのサポート方法を解説します。 Grid for layout, Flexbox for components by Ahmad Shadeed 下... 続きを読む

よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ | コリス

2019/12/13 421 users コリス GitHub フレームワーク CSS レイアウト

Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub... 続きを読む

管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla | コリス

2019/11/18 575 users コリス スペ 商用 テンプレート レイアウト

商用のプロジェクトでも無料で利用できる、管理画面・ダッシュボードのレイアウトやUIコンポーネントが揃ったテンプレートを紹介します。 このテンプレートを使用すると、管理画面・ダッシュボードで必要なコンテンツを簡単に作成できます。 Stisla 管理画面・ダッシュボードに特化されたUIコンポーネントがほとんどすべ... 続きを読む

UIコンポーネントにはマージンをつけるな！絶対にだ！！ - Qiita

2019/09/03 131 users Qiita マージン

.button { display: block; margin: 50px auto 0; padding: 8px 20px; border: solid 2px #ddd; border-radius: 10px; font-size: 16px; } See the Pen button_01 by Otsuka Yuhi (@boltkeep) on CodePen. パット見、いい感じのボタンです。 しかし、このボタンには一点重大な欠点があります。 それは、このボタンは必ず... 続きを読む

Design Systemへの取り組み 〜Frontend編〜 - Mercari Engineering Blog

2019/08/26 71 users Mercari Engineering Blog 会社

この記事は、Mercari Bold Challenge Monthの1日目の記事です。 こんにちは、MercariのArchitectチームでDesign Systemに取り組んでいる@usagi-fです。 Design Systemはただのスタイルガイドラインではなく、会社として保持するデザインフィロソフィーから実装コードに落とし込まれたUIコンポーネントまで、広い範囲をさ... 続きを読む

Vue.jsベースのオープンソースな管理画面テンプレート・「Vuestic Admin」 | かちびと.net

2019/08/08 235 users Vue.jsベース net Bootstrap レイアウト

Vuestic Admin Vuestic AdminはVue.jsベースのオープンソースな管理画面テンプレートです。40以上のUIコンポーネントも同梱されています。 レイアウトはBootstrapが導入されており、レスポンシブ対応となっています。管理画面系のコンテンツによく必要とされるコンポーネントは概ね揃えられているので、1から作るよりは... 続きを読む

レイアウトやUIコンポーネントなど、最近のランディングページで使用されているアイデアのまとめ -SaaS Pages | コリス

2019/07/29 202 users コリス ブッダ ヘッダ コピーライティング レイアウト

ランディングページがどのようにデザインされ、レイアウトされているのか、そしてコピーライティングがどのようにデザインされているのか、その参考資料となるアイデアをまとめたSaaS Pagesを紹介します。 ランディングページのデザインや実装、ヘッダやフッタやナビゲーション、特徴やボタンの目立たせ方など、デザイン... 続きを読む

スマホ用の気持ちいいインタラクションを豊富に備えた、オープンソースのUIコンポーネント -Cuberto | コリス

2019/07/19 209 users コリス スワイプ アニメーション ロンドン タップ

スマホアプリ用の気持ちいいインタラクションを豊富に備えた、オープンソースのUIコンポーネントを紹介します。タップやスワイプなど、ユーザーの操作に反応するアニメーションは、見ているだけでも楽しめます。 GitHub Open Source Collection ここで紹介するUIコンポーネントは、ロンドンの制作会社「Cuberto」による... 続きを読む

スマホやWebページでよく見かけるUIコンポーネントのデザインと実装コードの無料ライブラリ -Eva Design System | コリス

2019/07/16 207 users コリス SVGアイコン コード 実装コード スマホアプリ用

Webサイト・スマホアプリ用のさまざまなUIコンポーネントのデザイン素材とそれを実装するコード、480醜類のSVGアイコンなどがすべてセットになったWebコンポーネントライブラリを紹介します。 UIコンポーネントを使用し...記事の続きを読む 続きを読む

JavaScriptは無し、CSSで実装されたUIコンポーネントのまとめ -Pure CSS Components | コリス

2019/07/03 280 users コリス CSS JavaScript

<!-- Carousel --> <div class="carousel"> <div class="carousel-inner"> <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden checked> <div class="carousel-item"> ... </div> <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-... 続きを読む

WebサイトやスマホアプリのUIデザインに必要な要素・あると便利な要素がまとめられたリスト -Checklist Design | コリス

2019/04/02 52 users クライアント UI要素 コリス デザイナー 成果物

Webサイトやスマホアプリのデザイナー・制作者、そしてクライアントにも役立つUI要素のデザインのチェック項目を紹介します。 ページに必要な要素、UIコンポーネントに必要な要素、あると便利な要素がまとめられています。デザインを始める時、そして最終的な成果物をチェックする時に、デザインに必要な要素が欠けてい... 続きを読む