はてなブックマーク  


トップへ戻る
  






総合  




●人気
●新着
  

● IT

● 最新ガジェット  

● 自然科学  

● 経済・金融  

● おもしろ  

● マンガ  

● ゲーム  

● はてなブログ︵総合︶  






一般  




●人気
●新着
  

● 社会ニュース  

● 地域  

● 国際  

● 天気  

● グルメ  

● 映画・音楽  

● スポーツ  

● はてな匿名ダイアリー  






世の中  




●人気
●新着
  

● 新型コロナウイルス  

● 働き方  

● 生き方  

● 地域  

● 医療・ヘルス  

● 教育  

● はてな匿名ダイアリー  






政治と経済  




●人気
●新着
  

● 政治  

● 経済・金融  

● 企業  

● 仕事・就職  

● マーケット  

● 国際  

● はてなブログ︵政治と経済︶  






暮らし  




●人気
●新着
  

● カルチャー・ライフスタイル  

● ファッション  

● 運動・エクササイズ  

● 結婚・子育て  

● 住まい  

● グルメ  

● お金  

● はてなブログ︵暮らし︶  

● 掃除・整理整頓  

● 雑貨  

● 買ってよかったもの  

● 旅行  

● アウトドア  

● 趣味  






学び  




●人気
●新着
  

● 人文科学  

● 社会科学  

● 自然科学  

● 語学  

● ビジネス・経営学  

● デザイン  

● 法律  

● 本・書評  

● 将棋・囲碁  

● はてなブログ︵学び︶  






テクノロジー  




●人気
●新着
  

● IT

● セキュリティ技術  

● はてなブログ︵テクノロジー︶  

● AI・機械学習  

● プログラミング  

● エンジニア  






おもしろ  




●人気
●新着
  

● まとめ  

● ネタ  

● おもしろ  

● これはすごい  

● かわいい  

● 雑学  

● 癒やし  






エンタメ  




●人気
●新着
  

● スポーツ  

● 映画  

● 音楽  

● アイドル  

● 芸能  

● お笑い  

● サッカー  

● 話題の動画  






アニメとゲーム  




●人気
●新着
  

● マンガ  

● Webマンガ  

● ゲーム  

● 任天堂  

● PlayStation  

● アニメ  

● バーチャルYouTuber  

● オタクカルチャー  





● おすすめ  
デスク環境を整える
  


﹃Josh W Comeau﹄



● 人気  
● 新着  
● すべて  











CSS in React Server Components  

11users  
www.joshwcomeau.com  


CSS in React Server ComponentsUnderstanding the future of CSS-in-JS and React IntroductionAround this time last year, Vercel announced the stable release of Next 13.4, becoming the first React framework to be built on top of React Server Components. This is a big deal! RSC (React Server Components) gives us an official way to write server-exclusive code in React. It opens a lot of interesting new


● テクノロジー  
●2024/04/17 01:04
  

●
●
●
  
















How To Center a Div  

319 users  
www.joshwcomeau.com  


IntroductionFor a long time, centering an element within its parent was a surprisingly tricky thing to do. As CSS has evolved, we've been granted more and more tools we can use to solve this problem. These days, we're spoiled for choice! I decided to create this tutorial to help you understand the trade-offs between different approaches, and to give you an arsenal of strategies you can use, to han


● テクノロジー  
●2024/02/14 09:19
  

●
●
●
●
●
●
●
●











An Interactive Guide to CSS Grid  

18users  
www.joshwcomeau.com  


IntroductionCSS Grid is one of the most amazing parts of the CSS language. It gives us a ton of new tools we can use to create sophisticated and fluid layouts. It's also surprisingly complex. It took me quite a while to truly become comfortable with CSS Grid! In this tutorial, I'm going to share the biggest 💡 lightbulb moments I've had in my own journey with CSS Grid. You'll learn the fundamental


● テクノロジー  
●2023/11/22 14:38
  

●
●
●
  










Making Sense of React Server Components  

16users  
www.joshwcomeau.com  


IntroductionSo, here's something that makes me feel old: React celebrated its 10th birthday this year! In the decade since React was first introduced to a bewildered dev community, it’s gone through several evolutions. The React team has not been shy when it comes to radical changes: if they discover a better solution to a problem, they'll run with it. A couple of months ago, the React team unveil


● テクノロジー  
●2023/09/07 03:06
  

●
●
●
●
●
  










The End of Front-End Development  

145 users  
www.joshwcomeau.com  


Large language models like GPT-4 are becoming increasingly capable, at an alarming rate. Within a couple of years, we won't need developers any more! …Or at least, that's the narrative going viral on Twitter. I'm much more optimistic about what these AI advancements mean for the future of software development. Keep reading.


● テクノロジー  
●2023/03/21 04:01
  

●
●
●
●
●
●
  










Color Formats in CSS  

7users  
www.joshwcomeau.com  


CSS gives us so many options when it comes to expressing color—we can use hex codes, rgb, hsl, and more. Which option should we choose? This turns out to be a surprisingly important decision! In this article, we'll take a tour of color formats in CSS, and see which option will serve us best. Keep reading.


● テクノロジー  
●2022/11/30 09:19
  

●
●
  










An Interactive Guide to Flexbox

16users  
www.joshwcomeau.com  


IntroductionFlexbox is a remarkably powerful layout mode. When we truly understand how it works, we can build dynamic layouts that respond automatically, rearranging themselves as-needed. For example, check this out: This demo is heavily inspired by Adam Argyle’s incredible “4 layouts for the price of 1” codepen. It uses no media/container queries. Instead of setting arbitrary breakpoints, it uses


● テクノロジー  
●2022/11/23 23:29
  

●
●
●
  










A World-Class Code Playground with Sandpack  

3users  
www.joshwcomeau.com  


No developer blog or technical documentation site is complete without an interactive code playground. The CodeSandbox team recently released a wonderful tool called Sandpack, to help us create these live-updating code editors. In this tutorial, I'll show you how I use it on this blog. Keep reading.


● 暮らし  
●2022/10/18 08:33
  












Understanding useMemo and useCallback  

24users  
www.joshwcomeau.com  


What's the deal with these two hooks?! Lots of devs find them confusing, for a whole host of reasons. In this tutorial, we'll dig deep and understand what they do, why they're useful, and how to get the most out of them. Keep reading.


● テクノロジー  
●2022/08/31 17:20
  

●
●
●
  










Why React Re-Renders  

30users  
www.joshwcomeau.com  


IntroductionSo, I'll be honest. I had been working professionally with React for years without really understanding how React's re-rendering process worked. 😅 I think this is true for lots of React developers. We understand enough to get by, but if you ask a group of React developers a question like “What triggers a re-render in React?”, you'll likely get a handful of different hand-wavy answers.


● テクノロジー  
●2022/08/17 07:59
  

●
●
●
●
●
●
  










The Surprising Truth About Pixels and Accessibility  

13users  
www.joshwcomeau.com  


IntroductionShould I use pixels or ems/rems?!This is a question I hear a lot. Often with a dollop of anxiety or frustration behind the words. 😅 It's an emotionally-charged question because there are a lot of conflicting opinions out there, and it can be overwhelming. Maybe you've heard that rems are better for accessibility. Or maybe you've heard that the problem is fixed and pixels are fine? The


● テクノロジー  
●2022/05/19 15:47
  

●
●
●
●
  










The Front-End Developer's Guide to the Terminal  

6users  
www.joshwcomeau.com  


IntroductionModern front-end frameworks like React, Angular, and Vue rely heavily on the terminal. If you're not comfortable with command line interfaces, you'll struggle to run a local development server or build your application! There's something deeply ironic about this. Our whole job is to build graphical user interfaces, but the tools we use in our development are mostly command-line based!


● テクノロジー  
●2022/04/21 10:39
  

●
●
●
  










Understanding Layout Algorithms

15users  
www.joshwcomeau.com  


Understanding Layout AlgorithmsThe mental model shift that makes CSS more intuitive A few years ago, I had a Eureka! moment with CSS. Up until that moment, I had been learning CSS by focusing on the properties and values we write, things like z-index: 10 or justify-content: center. I figured that if I understood broadly what each property did, I'd have a deep understanding of the language as a who


● テクノロジー  
●2022/03/29 15:17
  

●
●
●
  










Delightful React File/Directory Structure  

8users  
www.joshwcomeau.com  


IntroductionReact is famously unopinionated when it comes to file/directory structure. How should you structure the files and directories in your applications? Well, there is no one “right” way, but I've tried lots of different approaches in the 7+ years I've been using React, and I've iterated my way to a solution I'm really happy with. In this blog post, I'll share the structure I use across all


● テクノロジー  
●2022/03/15 23:59
  

●
●
●
  










Make Beautiful Gradients  

5users  
www.joshwcomeau.com  


So here's a CSS linear gradient, going from pure yellow to pure blue: Notice that it gets kinda washed out and muddy in the middle there? This is what Erik Kennedy has coined the “gray dead zone”. Unless you're really careful when selecting colors for your gradients, you'll often wind up with a desaturated midsection in your CSS gradients. As it turns out, though, we can absolutely avoid the gray


● テクノロジー  
●2022/01/12 10:10
  

●
●
  










CSS Gradient Generator  

144 users  
www.joshwcomeau.com  


A front-end web development newsletter that sparks joyMy main focus right now is teaching front-end developers how to do cool stuff. My personal newsletter is sent once every few weeks, and includes bonus subscriber-only content. No spam, no nonsense. Unsubscribe at any time.



● テクノロジー  
●2022/01/12 07:40
  

●
●
●
●
●
●
●
●
●
●
  










A Modern CSS Reset  

19users  
www.joshwcomeau.com  


IntroductionWhenever I start a new project, the first order of business is to sand down some of the rough edges in the CSS language. I do this with a functional set of custom baseline styles. For a long time, I used Eric Meyer's famous CSS Reset. It's a solid chunk of CSS, but it's a bit long in the tooth at this point; it hasn't been updated in more than a decade, and a lot has changed since then


● テクノロジー  
●2021/11/24 10:00
  

●
●
●
  










CSS Shadow Palette Generator  

5users  
www.joshwcomeau.com  


:root { --shadow-color: 286deg 36% 56%; --shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34), 0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34), 1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34); --shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36), 0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36), 2.1px 4.1px 5.2px -1.7px hsl(var(--shadow


● 学び  
●2021/11/17 06:55
  

●
●
●
  










Designing Beautiful Shadows in CSS  

38users  
www.joshwcomeau.com  


IntroductionIn my humble opinion, the best websites and web applications have a tangible “real” quality to them. There are lots of factors involved to achieve this quality, but shadows are a critical ingredient. When I look around the web, though, it's clear that most shadows aren't as rich as they could be. The web is covered in fuzzy grey boxes that don't really look much like shadows. In this t


● テクノロジー  
●2021/09/14 02:31
  

●
●
●
●
●
●
  










The World of CSS Transforms  

8users  
www.joshwcomeau.com  


IntroductionLike so many things in CSS, the transform property is surprisingly remarkable. At first glance, it may seem like a pretty niche thing. How often do we need to rotate or skew something, after all? And yet, the more I learn about transform, the more I find myself taking advantage of it. In my blog's codebase, I've used the transform property more than 350 times! In this blog post, we're


● テクノロジー  
●2021/08/10 09:59
  

●
  










Demystifying styled-components  

30users  
www.joshwcomeau.com  


When I first started using styled-components, it seemed like magic ✨. Somehow, using an obscure half-string-half-function syntax, the tool was able to take some arbitrary CSS and assign it to a React component, bypassing the CSS selectors we've always used. Like so many devs, I learned how to use styled-components, but without really understanding what was going on under the hood. Knowing how it w


● テクノロジー  
●2021/06/23 00:02
  

●
●
●
●
●
●
●
  










How I Built My Blog  

4users  
www.joshwcomeau.com  


If you've been thinking about creating a dev blog for yourself, you've probably been a bit overwhelmed by the number of tools and technologies. We live in an era of abundance, and there are a lot of options. When I was building this blog, my biggest priority was to find a solution that would let me embed totally custom content in each post, like this exploding-logo animation thing. When using mark


● テクノロジー  
●2021/04/21 01:02
  

●
●
●
●
  










Building a Magical 3D Button  

6users  
www.joshwcomeau.com  


Building a Magical 3D ButtonBet you can't click just once! IntroductionI had a neat realization recently: Buttons are the “killer feature” of the web. Every significant thing we do online, from ordering food to scheduling an appointment to playing a video, involves pressing a button. Buttons (and the forms they submit) make the web dynamic and interactive and powerful. But so many of those buttons


● アニメとゲーム  
●2021/04/01 05:40
  

●
●
●
  










An Interactive Guide to CSS Transitions  

7users  
www.joshwcomeau.com  


IntroductionThe world of web animations has become a sprawling jungle of tools and technologies. Libraries like GSAP and Framer Motion and React Spring have sprung up to help us add motion to the DOM. The most fundamental and critical piece, though, is the humble CSS transition. It's the first animation tool that most front-end devs learn, and it's a workhorse. Even the most grizzled, weathered an


● アニメとゲーム  
●2021/02/12 12:50
  

●
●
●
  










The styled-components Happy Path  

9users  
www.joshwcomeau.com  


The styled-components Happy PathMy personal suite of “best practices” For a few years now, my #1 favourite tool for managing CSS in React apps has been 💅 styled-components. It's a wonderful tool. In many ways, it's changed how I think about CSS architecture, and has helped me keep my codebase clean and modular, just like React! It shares something else in common with React: developers often disli


● テクノロジー  
●2021/01/25 23:44
  

●
●
  










Let's Bring Spacer GIFs Back!  

4users  
www.joshwcomeau.com  


In the late 90s, if you were to pop open the source of a typical website, you'd likely encounter this curious fella: CSS didn't exist yet, and web layouts were built using HTML tables. Tables were finnicky, and an empty cell would collapse and break the layout, so developers would toss this image into a table cell to keep it open. GIFs were used because GIFs were the only image format that support


● テクノロジー  
●2021/01/19 00:16
  

●
  










The Rules of Margin Collapse  

3users  
www.joshwcomeau.com  


IntroductionIn CSS, adjacent margins can sometimes overlap. This is known as “margin collapse”, and it has a reputation for being quite dastardly. Here's a typical example, involving two sibling paragraphs: Instead of sitting 48px apart, their 24px margins merge together, occupying the same space! This idea might sound simple, but if you've been writing CSS for a while, you've almost certainly bee


● テクノロジー  
●2020/12/15 18:58
  

●
  










Operator Lookup - Search JavaScript operators  

42users  
www.joshwcomeau.com  


Friendly tutorials for developers. Focus on React, CSS, Animation, and more!


● テクノロジー  
●2020/11/10 07:12
  

●
●
●
●
●
  










Chasing the Pixel-Perfect Dream

3users  
www.joshwcomeau.com  


I recently got the following message in a DM: I’ve been building with HTML and CSS for years, and I still don’t know how to implement pixel-perfect designs If you're not familiar with the term, "pixel-perfection" is the idea that your HTML/CSS implementation should be as close to the original mockup as possible. Measurements and spacing should be exact, down to the pixel. I hear this concern a lot


● 暮らし  
●2020/11/06 22:48
  









次のページ  

























このページはまだ
ブックマークされていません


このページを最初にブックマークしてみませんか？
  

﹃Josh W Comeau﹄の新着エントリーを見る  

 

キーボードショートカット一覧


j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
  
 


はてなブックマーク




●総合
●一般
●世の中
●政治と経済
●暮らし
●学び
  

●テクノロジー
●エンタメ
●アニメとゲーム
●おもしろ
  

●アプリ・拡張機能
●開発ブログ
●ヘルプ
●お問い合わせ
●ガイドライン
●利用規約
●プライバシーポリシー
●利用者情報の外部送信について
  

●ガイドライン
●利用規約
●プライバシーポリシー
●利用者情報の外部送信について
  


公式Twitter




●公式アカウント
●ホットエントリー
  


はてなのサービス



●はてなブログ
●はてなブログPro
●人力検索はてな
●はてなブログ タグ
●はてなニュース
●ソレドコ
  





App Storeからダウンロード
Google Playで手に入れよう


Copyright © 2005-2024 Hatena. All Rights Reserved.
  




設定を変更しましたx