Vite+React+TypeScriptで、CSSスタイルについて調べて、Emotionに流れ着いた
React調べること多すぎ・・・🤯 今回はReactのCSSスタイルついて調べてみました。 まとめ いきなりまとめです。 ReactのCSSスタイルについての結論 これといった正解はない。 将来どうなるかはわからない。 今のメンバのスキルセットで、使いたいものを使えばいいんじゃないだろうか？ ということで、React（Vite + TypeScript）のCSSスタイルについて調べて、Emotionに流れ着いた経緯と、Emotionの導入方法についての記事です。 主要なもの 2022年2月24日時点で、ザクっと調べた主要なものです。 マイナーなものを含めるともっとありますが、今回は主要な以下の8つから選択します。 Inline Styles Css Modules Styled JSX Styled Components Emotion Linaria Tailwind CSS Wind
『Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論』、素直さという選択 #everylayout_ja
友人の腹筋ローラーの力を信じろさんと共に監訳を担当した書籍『Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論』が出版されます。現在、Amazonで予約受付中です。当初の予定よりもかなり遅れてしまいましたが、内容はいまだ鮮やかなままに思えます。 目次: 日本語版に寄せて 監訳者まえがき Chapter 1: 基礎 1–01: ボックス 1–02: コンポジション 1–03: 単位 1–04: グローバルスタイルとローカルスタイル 1–05: モジュラースケール 1–06: 公理 Chapter 2: レイアウト 2–01: Stack 2–02: Box 2–03: Center 2–04: Cluster 2–05: Sidebar 2–06: Switcher 2–07: Cover 2–08: Grid 2–09: Frame 2–10: Reel 2
Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
Less code. More speedSpend less time writing UI code and more time building a great experience for your customers. import * as React from "react"; import { Box, Center, Image, Flex, Badge, Text } from "@chakra-ui/react"; import { MdStar } from "react-icons/md"; export default function Example() { return ( <Center h="100vh"> <Box p="5" maxW="320px" borderWidth="1px"> <Image borderRadius="md" src="h
z-indexで躓いてしまうこと - よちよち開発の日々
今回はz-indexで思い悩んでしまうことについて取り上げてみます。 この記事を書く前までz-indexを指定した値の大きな要素ほど前面に配置されると思っていました。 しかしこれは間違いでした。。。 z-indexのことを知らなすぎました。 それでは何を知らなかったのか、どのような局面で自分は躓いたのかを説明していきます。 html <div class="white"> <div class="red"></div> </div> css .white { position:relative; z-index:1; width:60px; height:60px; background:#fff; border:solid 1px #000; } .red { position:absolute; top:10px; left:20px; z-index:-1; width:60px;
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
The unseen performance costs of modern CSS-in-JS libraries in React apps
Aggelos Arvanitakis (@AggArvanitakis) is a front-end dev that likes huskies and is afraid of bees. Interested in all things perf... CSS-in-JS is becoming a popular choice for any new front-end app out there, due to the fact that it offers a better API for developers to work with. Don’t get me wrong, I love CSS, but creating a proper CSS architecture is not an easy task. Unfortunately though, besid
CSSのユーティリティクラスと「関心の分離」——いかにしてユーティリティファーストにたどり着いたか（翻訳） - yuhei blog
Tailwind CSS作者のAdam Wathan氏による「CSS Utility Classes and "Separation of Concerns"」の日本語訳です。翻訳に当たって原著者の許諾を得ています。 2021年10月29日に全文再翻訳しました。 この数年の間で、私のCSSの書き方は、非常に「セマンティック」なアプローチから「ファクショナルCSS」と呼ばれるものに変わりました。 この書き方でCSSを書くと、多くの開発者からかなりの反感を買うことがあります。そのため、私がいかにしてここまでたどり着いたかを説明することで、その過程で得た教訓や洞察について共有したいと思います。 第1段階 「セマンティック」なCSS よいCSSのためのベストプラクティスとして、耳にするであろうことのひとつは「関心の分離」です。 考え方としては、HTMLにはコンテンツについての知識のみを含めるべきで
Benefits of using styled-components in React - LogRocket Blog
LogRocket’s Galileo AI watches every session, surfacing impactful user struggle and key behavior patterns. Editor’s Note: This article was updated with relevant information in July 2021, including styled-components’s current GitHub rating and additional benefits and concerns around using styled-components. In this article, we will be looking at some of the various benefits of styled-components and
CSSとコンポーネント設計に対する考察 - uhyo/blog
近年のフロントエンド開発にはコンポーネントという概念が付いて回ります。React・Vue・AngularといったViewライブラリでは、コンポーネントを定義してそれを組み合わせてアプリを作ります。また、いわゆるWeb Componentsとして知られる仕様群により、ライブラリに依存せずに“コンポーネント”を作ることもできるようになってきています。 コンポーネントは、何らかの機能（あるいは責務）を持った部品です。また、コンポーネントによっては再利用される（アプリ内の複数の箇所から利用される）ことを意図しているものや、そもそもライブラリとして配布されているようなものもあります。アプリの機能の一部分を抜き出したものという見方をすれば、コンポーネントというのは関数にとても類似した概念であることが分かります。 コンポーネント設計によって、言い換えればアプリがどのような機能を持ったコンポーネントたちに
grid-template-areas - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
こうすれば理解できるBootstrap 4のレスポンシブWebデザインとそのCSS - Qiita
人気のUI作成フレームワークBootstrap 4では手軽にレスポンシブWebデザインを実現することができます。また、定義されているスタイルを学ぶことでレスポンシブなレイアウトを作る上でのCSSの勉強にもなります。本エントリーでは入門記事の一環として、Bootstrap 4でのレスポンシブWebデザインの基本について解説しつつ、定義されているCSSコードの意味にまで踏み込みます。 Bootstrap 4のブレークポイントと区間 レスポンシブなWebコンテンツではデバイス幅によってレイアウトが変わっていくのですが、「どの画面幅でレイアウトが変わるのか」という基準になるのが「ブレークポイント」です。Bootstrap 4では4つのブレークポイント(0pxを含めると5つ)が存在し、それぞれのブレークポイントの間には名前がついています。4つのブレークポイントと5つの区間（grid tier）の名前
clamp() - CSS: Cascading Style Sheets | MDN
CSS Tutorials CSS basics CSS first steps CSS first steps overview What is CSS? Getting started with CSS How CSS is structured How CSS works Assessment: Styling a biography page CSS building blocks CSS building blocks overview CSS selectors Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators Cascade, specificity, and inheritance Cascade layers The box mo
icdiff: side-by-side highlighted command line diffs
Your terminal can display color, but most diff tools don't make good use of it. By highlighting changes, icdiff can show you the differences between similar files without getting in the way. This is especially helpful for identifying and understanding small changes within existing lines. Instead of trying to be a diff replacement for all circumstances, the goal of icdiff is to be a tool you can re
Flexbox からコンテンツはみ出る問題を完全に解決する - Qiita
* { overflow-wrap: break-word; word-wrap: break-word; } .d-flex:not(.flex-column)>* { min-width: 0; } .d-flex.flex-column>* { max-width: 100%; } <!DOCTYPE html> <meta charset="UTF-8"> <title>Flexbox overflow-wrap Test</title> <style> /* 体裁用 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: monospace; } html, body, main { height: 100%; } main { width: 640px; background: ivory; marg
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - web3ui/web3uikit: Lightweight reusable Web3 UI components for dapps.
Blueprint – Documentation
linaria: Zero-Runtime CSS in JS
ウェブデザインの余白に規則性を持たせるためのパターン
GitHub - FullHuman/purgecss: Remove unused CSS
GitHub - kufu/smarthr-ui: React components for creating SmartHR applications.
