React CSSファイルをあてる - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
VS CodeでHTML、React、CSSのコードのアクセシビリティチェックをしてくれる拡張・「A11y Lint」 - かちびと.net
A11y Lint A11y LintはVS CodeでHTML、React、CSSのコードのアクセシビリティチェックをしてくれるVS Code拡張です。いわゆるアクセシビリティのlinterになります。 インストールすると、アクセシビリティに問題のあるコードに波下線を引き、マウスホバーで何が問題なのかを表示してくれる、というもの。 コードを書けばすぐにチェックされるようになっているのでその場ですぐ直せます。Axeと比べてメリット沢山だよ！との事でした。アクセシビリティチェックのタスクで苦労している開発者の方は試されてみては如何でしょうか。 A11y Lint The post VS CodeでHTML、React、CSSのコードのアクセシビリティチェックをしてくれる拡張・「A11y Lint」 first appeared on かちびと.net.
Next.js個人備忘録③：Next.jsでの開発に向けて、Tailwind CSSの基本を簡単にまとめてみた - Qiita
従来のようにCSSファイルでスタイルを定義するのではなく、HTMLに直接スタイルを付けられるため、デザイン作業のスピードアップが期待できます。 書こうと思ったきっかけ ITスクールの制作課題で「短期間で見栄えのするUIを作りたい」と思ったことがきっかけです。 CSSの記述量を減らしながらデザインの自由度を保てるTailwind CSSを知り、その仕組みを自分用にまとめておくことにしました。 Tailwind CSSとは？ Tailwind CSSは、ユーティリティファーストなCSSフレームワークで、HTMLに直接クラス名を記述することでスタイルを適用していくのが特徴です。 一般的なCSSのようにクラスを定義してから使うのではなく、既に用意された小さなスタイル単位（ユーティリティクラス）を組み合わせてUIを構築します。 参考文献 特徴 ユーティリティファースト：細かいスタイルごとにクラスが存
ReactとCSSで一定時間表示される通知をやるときの色々な方法 - Qiita
フロントエンド、というよりUI一般では、ユーザーの操作に対してまったく無反応なのは良くありません。ユーザーが意味のある操作をしたならば、何らかのフィードバックを返すべきです。 例えば、何かをユーザーのクリップボードにコピーするボタンというのはありがちですが、クリップボードに何かを書き込んでもそれだけだと目に見える変化がないので、追加で「コピーしました」のような通知を出すというのはよくあるパターンです。 ここでは、そのような通知が、ちょっとフェードインしながら表示され、一定時間後にフェードアウトしながら消えていくという要件を想定することにしましょう。 transitionを使う基本的な実装 まずはReactの部分をざっくりお見せします。 import { useState } from "react"; import "./styles.css"; export default functi
ありがとう、さようならstyled-components
3月22日、styled-componentsチームは同プロジェクトの開発を事実上停止すると発表した。styled-componentsはReact環境におけるCSS-in-JSの代表格として広く普及し、Tagged Template Literalを用いた自然なAPIデザインにより、コンポーネント志向のスタイリング手法を大きく進化させた功績がある。特に、コンポーネント単位でCSSを管理できる利点とSSR（Server-Side Rendering）対応の柔軟性が注目され、多くのユーザーコミュニティを形成してきた。 しかし、ReactコアチームがContext API（移行パスがなくRSCでは利用できない）などを事実上非推奨としたことや、エコシステム全体の潮流がTailwindなどのユーティリティファーストなアプローチへ移行している現状が大きな転換点となった。加えて、styled-comp
HTML Emailも React + Tailwind CSS で書ける時代キテた - Qiita
gm! エルソウルラボ、Validators DAO の kishi.sol です。 フロントエンド開発の世界は、ReactやTailwind CSSをはじめとするオープンソース技術の進化によって劇的に改善され、スピーディかつ高品質なUIを構築する環境が整いました。 コンポーネントベースの開発スタイルが定着したことで、保守性が高まり、コードを資産として残せるようになったことは間違いありません。かつてレスポンシブレイアウトに苦戦したのも今や昔話で、Tailwindのエコシステムを活用すれば誰もが簡単に美しくモダンなWeb UIを作成できるようになっています。 しかし一方で、私たちを悩ませ続けてきた最後の砦があります。それが「HTMLメール」です。 HTMLメールの開発は、昔ながらの「黒魔術」こと、HTMLとインラインCSSを駆使する必要がありました。ReactやTailwindが主流となり、
2025-02-24のJS: Create React Appが非推奨に、Deno 2.2、Bun 1.2.3、ESLintのCSSサポート
JSer.info #726 - Create React Appが非推奨となりました。 Sunsetting Create React App – React create-react-appは非推奨となり、Reactを使ったフレームワークやVite/Parcel/Rsbuildなどのビルドツールへの移行が推奨されています。 Deno 2.2がリリースされました。 Deno 2.2: OpenTelemetry, Lint Plugins, node:sqlite lintのビルトインルールの追加、JavaScriptで書けるLint Plugin APIの追加、deno taskがwildcard(*)指定に対応しています。 また、deno outdatedにinteractive modeを追加、deno compileの改善なども含まれています。 unstableな機能としてOpe
今Reactを使うならピュアなCSSをサポートするUIフレームワークやライブラリを選定するのがマルそうと思った話
最近個人開発でNext.jsの環境を立ち上げた際に、スタイリングをどうやってやろうかなと迷ったので初心に帰って最近のスタイリングについて調べ直してみました。結構面白かったので、記事にまとめることにしたので、よかったら読んでみてください。 本記事では以下に触れます。 React界隈におけるスタイリング方法の歴史的変遷 なぜタイトル通りピュアなCSSをサポートする機構が良いと感じたか おすすめのスタイリング機構 ざっと振り返るReactのスタイリング方法の歴史的変遷 私が最終的にピュアCSSを推したいと思った理由をお話する前に、爆速で変わり続けるReactとともに、スタイリングはどう変遷していったのかをざっとまとめたいと思います。 （こういうのって、歴史と組み合わせて理解すると、結構深まりますよねと思っているのは私だけでしょうか…、いえそんなことはないはず😊） 大昔: CSS Modules
EmotionからCSS Modulesへの移行！React Server ComponentsのCSS対応 - Findy Tech Blog
こんにちは。エンジニアの佐藤(@t0m0h1r0x)です。 今回は、弊社で現在進めているEmotionからCSS Modulesへの移行について紹介します。 移行の背景、検討した代替ライブラリ、そして最終的な決定について話していきます。 移行の検討理由 代替ライブラリの検討 Panda CSS Pigment CSS CSS Modulesへの移行 今後の展望 まとめ 移行の検討理由 弊社では現在、CSS-in-JSライブラリとしてEmotionを使用しています。ピュアなCSS記法を好むメンバーが多いので、EmotionのTagged Template Literal記法がチーム文化との相性も良く、これまで活用してきました。 一方で、フロントエンド開発フレームワークにNext.jsを採用しており、そちらではApp Routerへの移行を進めています。 App Routerのメリットはやはり
コピペで使えるTailwind.cssとReactによるアニメーション、エフェクト、インタラクションのコレクション・「Animata」 - かちびと.net
Animataはコピペで使えるTailwind.cssとReactによるアニメーション、エフェクト、インタラクションのコレクションです。タイトル通りで、既存のReactアプリ等にコピペでアニメーションコンテンツを追加可能なコンポーネントを手作業でコレクション化したそうです。 いわゆるUIライブラリの類ではなく、既存のプロジェクトにアニメーション要素を加えるスパイス的な役割となっています。尚、基本的にはTailwindベースですが、細かなスタイルは利用者の采配に任せているそうで特に完成度が高かったりスタイルに一貫性があるようなものではありません。 用意されているのは背景や弁当グリッド、ボタン、カード、ナビゲーション、チャートなどで今のところ40程度のコンポーネントが集められています。Reactアプリにエフェクト等を追加する際はご利用になってみては如何でしょうか。ライセンスはMITです。 An
VSCode で React + Vite 環境に Tailwind CSS を導入して自動整形させてみた | DevelopersIO
Tailwind CSS を使っていると、class の書き順がバラバラになったり、冗長な class が増えたりなどの問題が起きてしまいました。 そこで VSCode で Tailwind CSS の自動整形をやってみました！ 環境 "react": "^18.2.0", "vite": "^5.0.0" "tailwindcss": "^3.3.6", "prettier": "^3.1.0", "eslint": "^8.55.0", "eslint-plugin-tailwindcss": "^3.13.0", React + Vite の環境構築 まずは、React + Vite の環境を構築します。 npm create vite@latest my-app -- --template react-ts cd my-app npm install Tailwind CSS を導
Next.js で next-themes と Tailwind CSS を使って Light/Dark モードを切り替える - Goodpatch Tech Blog
フロントエンドエンジニアの上垣です。 この記事では、Next.js で、next-themes と Tailwind CSS を使って Light/Dark モード切り替え対応する例を紹介しています。 github.com 前提 Tailwind CSS のダークモード Light/Dark モードの判定 Dark モードのスタイル next-themes インストール セットアップ 実行結果 Light/Dark モードの切り替え サンプルアプリケーション 感想 前提 この記事では下記のバージョンのライブラリを利用しています。 Next.js 13.4.12 next-themes 0.2.1 Tailwind CSS 3.3.2 Next.js の AppRouter を利用しています。 この記事で紹介するのは、「Light/Dark モードの切り替え」であり、Dark モード実装の詳
React 18で使える新たなCSSユーティリティ「CSS Components」が公開 ー React 18以降主流になりつつあるサーバーコンポーネントに対応、CSS-in-JSのDX課題を解決
8月1日、React向けの組み合わせ可能なCSSコンポーネントの作成について発表がありました。 React 18のリリースにより、サーバーコンポーネントが一般的になり、Reactアプリを作成するためのデフォルトの方法になりました。 [LogRocketのブログ](https://blog.logrocket.com/writing-composable-css-components-react/)で、ReactとCSSを組み合わせるための新たな選択肢 「CSS Components」に関する解説記事が公開されています。 本稿では、日本のエンジニア向けに記事を要約して紹介します。詳しくは原文を参照してください。 CSS Componentsは、ReactコンポーネントにCSSクラスの組み合わせを行うための小型（2.3Kb）なモダンユーティリティです。このユーティリティは、開発者エクスペリエン
任意のプロンプトからReact + Tailwind.cssコンポーネントを生成してくれるAIコンポーネントジェネレーター・「Microapp.ai」 - かちびと.net
Microapp.aiは任意のプロンプトからReact + Tailwind.cssコンポーネントを生成してくれるAIコンポーネントジェネレーターです。 計算機やパスワードジェネレーター等といった単純なアプリを生成する事が可能です。アプリ生成後は実装サンプルとコードが提示されるので動作に問題なければそのままコードを使えばいいだけです。ただ、日本語プロンプトは理解できるモデルではないようなので英語で指示する必要があります。 上SSは試しにハッシュ生成アプリを作成して貰ったもので、プロンプトは「a SHA2/SHA1/MD5 Hash Generator」と指示したところ数秒で作られました。ハッシュ化も問題なく出来ています。単純なアプリなら細かい指示がなくとも生成できるのは楽で良いですね。 また、codesandboxにコードを投げる事も出来るので以下のようにembedも可能です。 Micro
[React] CSSでiOSのUISwitchライクなSwitchを作る | DevelopersIO
はじめに こんにちは。CX事業本部 Delivery部 フロントエンドチームの加藤です。 今回はCSSでiOSのUISwitchライクなReactコンポーネントを作ってみたいと思います。 開発環境 macOS Monterey 12.6 CodeSandbox（React Typescriptテンプレートを使用） 作ったコンポーネント iOSのUISwitchのようにクリックするたびにON/OFFが切り替わります。 コード Switch.tsx SwitchのReactコンポーネントです。 現在のON/OFF状態とON/OFFを切り替えた時の処理をpropsで受け取ります。 以下がポイントです。 ON/OFF状態を持たせるため、type="checkbox"のinput要素を使う input要素自体はON/OFFの状態を持つだけで、外観のカスタマイズはlabel要素を使う label要素ク
![[React] CSSでiOSのUISwitchライクなSwitchを作る | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/406d924d7d4c6327201a8281e75820982243f551/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Freact.jpg)
Google ChromeのDevToolsがAngular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応
Google ChromeのDevToolsがAngular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応 GoogleはすでにリリースしているWebブラウザのChrome 110と現在開発中のChrome 111に搭載されているDevToolsで、Angular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応したことが明らかになりました。 2月16日付けで公開されたブログ「What's New in DevTools (Chrome 111)」では、Chrome 111で、Angularのシンタックスハイライトに対応したことが「Better syntax highlight for Angular」の項目で紹介されています。 下記のサンプルでは、例えば2行目のダブルクオーテーション内の値などがAngul
React + TypeScript: Next入門02 イメージとメタデータおよびCSSを扱う - Qiita
Next.jsチュートリアルの公式作例を、TypeScriptも加えて、一からつくってみようというシリーズの第2回です。前回は、トップページを書き替えて、新たに追加した別ページとリンクしてみたというくらいでした。今回から、公式作例に少しずつ近づけてゆきましょう。 Imageコンポーネントでイメージを差し込む Next.jsはイメージなどの静的素材も扱えます。素材ファイルを置くトップレベルは、publicディレクトリです。Reactコンポーネントを収めるpagesと同じく、アプリケーションのルートから参照できます。 ページに表示するプロフィール画像を用意しましょう。ディレクトリpublicにimagesをつくってください。 画像をpublic/images/profile.pngとして収めます。 next-learn/basics/basics-final/public/images/pro
ReactとStripe Elementで作成した決済フォームの、CSS・見た目をカスタマイズする方法 - Qiita
ReactとStripe Elementで作成した決済フォームの、CSS・見た目をカスタマイズする方法JavaScriptstripecss-in-jscss変数StripeElement Stripe Elementsで描画される決済フォームは、セキュリティなどの目的でiframeの中に配置されます。 そのため、CSSでの内容・見た目のカスタマイズはElement Appearance APIを利用して行う必要があります。 この記事では、Payment Elementsの見た目を調整する方法を紹介します。 プリセットスタイル（テーマ）で設定する StripeのPayment Elementsでは、いくつかのスタイルプリセットが用意されています。 ドキュメントサイトでデモを見る これらは、<Elements/>のoptions.appearanceで設定します。 <Elements str
Astro と CSS Modules を使用した React のコンポーネントの、開発と本番時における style の優先順の差異 | DevelopersIO
すこし前の話になるのですが、SSG している自分のブログをNext.jsからAstroに置き換えました。置き換えた経緯などはそちらで記事にしています。そのためここでは、Astro コンポーネントのスタイルについての詳細には言及していません。 今回発生した現象修正した PR としては以下になります。 AstroからReactのコンポーネントに対してスタイリングをしているCSSを修正 #946 経緯 自分のブログを時間があるときに少しずつ機能実装しているのですが、あるとき本番環境でスタイルが崩れていることに気づきました。 結構目立つスタイルの崩れだったので、なぜ開発中に気づかなかったのか疑問に思いながら開発環境を立ち上げると、現象の再現はしませんでした。 本番環境 開発環境 本番環境では次のようになっています。 index.6061e360.css ファイルが生成されていて、どちらも同じファイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactにおけるCSSの設計手法 - Qiita
