タグ「UIコンポーネント」

タグ UIコンポーネント

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 90件)

フロントエンドのテストを書きたい！ - iimon TECH BLOG

2024/12/05 21 users フロントエンド iimon tech blog テスト種類

はじめにテストの種類テストレベルテストタイプテスト戦略 Reactのテストで個人的に躓いたところ UIコンポーネントのテスト Reduxを使っている場合 @mui/x-date-pickerを使用している場合 MUIのコンポーネントでテーマを使用している場合カスタムフックのテストまとめ参考記事はじめにこんにちは、株式会社iimo... 続きを読む

AWS、ノーコードでAmazon S3を操作するWebアプリが作れる「AWS Transfer Family web apps」発表

2024/12/02 7 users AWS ブラウズノーコード Webアプリプログラマ向け

AWSは、Amazon S3に対してファイルのブラウズやアップロード、ダウンロードなどが行えるWebアプリケーションをノーコードで簡単に作れる新サービス「AWS Transfer Family web apps」を発表しました。「AWS Transfer Family web apps」は、同時に発表されたプログラマ向けのUIコンポーネント「Storage Browser for S3」... 続きを読む

AWS、WebアプリからAmazon S3にアクセスできるUIコンポーネント「Storage Browser for S3」正式リリース

2024/12/02 14 users AWS オブジェクトストレージ権限正式リリース正式版

Amazon Web Services（AWS）は、Webアプリケーションに追加することでAWSのオブジェクトストレージであるAmazon S3に簡単にアクセスできるUIコンポーネント「Storage Browser for S3」が正式版となったことを発表しました。 Webアプリケーションに追加することで、許可されたエンドユーザーが権限に基づいてAmazon S3の... 続きを読む

AWS、WebアプリケーションからAmazon S3にアクセスできるUIコンポーネント「Storage Browser for S3」、オープンソースとして公開

2024/09/08 25 users AWS オブジェクトストレージ Webアプリケーション公開

Amazon Web Services（AWS）は、Webアプリケーションに追加することでAWSのオブジェクトストレージであるAmazon S3に簡単にアクセスできるUIコンポーネント「Storage Browser for S3」をオープンソースとして公開したことを発表しました。 Storage Browser for S3を使用することで、ユーザーに対してアクセスすることを... 続きを読む

これはすごい便利！ WebサイトやスマホアプリのUIに今時のアニメーションやインタラクションを簡単に実装できる -Animata

2024/07/23 9 users animate インタラクションインスピレーションコピペ

WebサイトやスマホアプリのUIにアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードをまとめたAnimataを紹介します。 112種類のアニメーション化されたUIコンポーネントが揃っており、見ているだけでもインスピレーションが刺激されます。 Animata Animata -GitHub Animataの特徴 Animata化... 続きを読む

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

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

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

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

マイクロソフト、UIコンポーネントにAI搭載。UIが賢く振る舞う「.NET Smart Components」実験的公開

2024/03/24 12 users マイクロソフトペーストフィールド意図従来

マイクロソフトはUIコンポーネントにAIを搭載することで、ユーザーの意図をくみ取って賢く振る舞ってくれる「.NET Smart Components」を実験的に公開しました。入力内容をAIが自動的に適切なフィールドへペースト .NET Smart Componentsがどのように賢く振る舞ってくれるのか、デモ動画からの引用で紹介します。従来の... 続きを読む

商用利用無料！コピペで簡単に実装できる、Tailwind CSSで実装されたUIコンポーネントが150種類以上！ -Mamba UI

2024/01/15 22 users コピペ Tailwind CSS コンポー商用利用無料

Webサイトやスマホアプリでよく使用されるUIコンポーネントとテンプレートをTailwind CSSベースで実装したコレクションを紹介します。コードはHTMLとVueとJSXに対応しており、Tailwind CSSを用意しておけばコピペで簡単に利用できます。 Mamba UI Mamba UI -GitHub Mamba UIの特徴 Mamba UIの使い方 Mamba UIのコンポー... 続きを読む

ターミナルのシンプルなUIが好きな人に！モダンでミニマルなCSSの超軽量フレームワーク -Terminal CSS

2023/11/13 10 users ターミナル超軽量フレームワークこんダークテーマデザイン

ターミナルのUIを模した、モダンでミニマルなCSSの超軽量フレームワークを紹介します。ターミナルで見かけるようなデザインのUIコンポーネントが豊富に揃っており、ライトテーマ・ダークテーマもサポートされています。 Terminal CSS Terminal CSS -GitHub Terminal CSSの特徴 Terminal CSSの使い方 Terminal CSSのコン... 続きを読む

Reactの"要素の型"、それぞれの特性理解していますか？

2023/06/15 7 users React コンポーネント React.FC 昨今要素

はじめに普段React・Next.jsを用いた開発に際して、UIコンポーネントを作成する際にReact.FCやJSX.Element、ReactNodeなどの"要素やコンポーネントに関する型"を使用する場面が多々あるかなと思います。昨今のReactコンポーネント開発において、実際には要素やコンポーネントの型を「何を使うか」をあまり意識しないで... 続きを読む

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

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

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

Radix UIでコンポーネントを作成する時に意識したこと

2023/05/08 8 users コンポーネント Mui microCMS ヘッドレスUI 既成

microCMSでプロダクトエンジニアをしています。りゅーそうです。 microCMSでは、UIコンポーネントを作成するのにRadix UIを採用しています。 Radix UIはいわゆるヘッドレスUIと呼ばれるUIライブラリで、UIの機能のみを提供します。 ChakraUIやMUIのようなUIライブラリの場合、既成のコンポーネントセットをそのままイン... 続きを読む

ユーザーのインタラクションを伴うさまざまなUIコンポーネントをCSSで実装できる軽量フレームワーク -Ellegant CSS

2023/04/09 16 users インタラクショントグルモーダル CSS 軽量フレームワーク

ハンバーガーメニューを使用したスマホ用のナビゲーション、アニメーションで表示されるモーダル、要素を表示・非表示するトグル、要素を切り替えるスイッチなど、ユーザーのインタラクションを伴うUIコンポーネントをCSSで実装できるフレームワークを紹介します。 Ellegant CSS Ellegant CSS -GitHub Ellegant CSSの特... 続きを読む

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

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

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

CSSで実装する時、フロントエンドのデベロッパーは何を考え、どういうことに配慮して実装するのか

2022/11/24 25 users デベロッパー CSS フロントエンド CLAMP レスポンシブ

UIコンポーネントをCSSで実装する時に、何を考えながら実装するのか、どういうことに配慮して実装するのかを紹介します。 CSSの何を使用して配置するのかベストか、レスポンシブの対応方法をはじめ、グラデーションをより美しく実装する方法、clamp()によるフォントサイズの定義、論理プロパティの使用など、CSSの実践的... 続きを読む

Web制作者は要チェック！ Figmaで無料利用できるUI用のデザインシステムのまとめ -Design Systems for Figma

2022/10/31 11 users figma タイポグラフィアイコンスマホアプリ UI用

Figmaで無料で利用できるWebサイトやスマホアプリのUI用のデザインシステムを紹介します。UIコンポーネント、カラー、アイコン、タイポグラフィなどがまとめられており、すぐにFigmaで利用できます。 Design S...記事の続きを読む続きを読む

レスポンシブ対応のレイアウトや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... 続きを読む

styled-componentsの仕組みについての覚え書き | Wantedly Engineer Blog

2022/06/14 15 users styled-components 覚え書き現象前提知識

弊社では現在UIコンポーネントのスタイルを当てるために、CSS-in-JSライブラリのひとつであるstyled-componentsを使っています。 styled-componentsで高度な使い方をしたときにスタイルが意図した優先度で当たらない現象の調査のためにstyled-componentsの仕組みを調べたので、覚え書きとして残しておきます。前提知識 ... 続きを読む

これまでとは異なる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 下記は各ポイントを... 続きを読む

(1 - 25 / 90件)

次の25件 »