function getZoomIn(zoom: number = 1) { return keyframes` 0% { transform: scale(0); } 100% { transform: scale(${ zoom }); } `; } という感じで、変数を受け取ってプロパティに設定したkeyframesを返す関数を作れば、結果として、keyframeアニメーショ…

styled-componentsで作成したアニメーションは、nameかgetName()で名前が取得できます。 import { keyframes } from 'styled-components'; const fadeIn = keyframes` 0% { opacity: 0; } 100% { opacity: 1; } `; console.log(fadeIn.name); // → iHsNqv co…

メディアクエリでパソコンとスマホのデザインを出し分ける際、ブレイクポイントを一括で編集できるようにスクリプトを使って書き出すようにしています。 mediaQuery.ts const mobileMaxWidth = 768; export function isPc(width: number) { return mobileMax…

Next.js 13.4からApp RouterがStableになりました。 普段、Next.jsを静的サイトジェネレータとして使っている自分としては、App Routerの恩恵は少ないような気がしていたのですが、App Routeをつかっても静的書き出しができることを知ったので、これからは時…

ことの発端 以前、vwを使って画面幅に合わせたサイズ調整を行うモックをつくりましたが、今回はそれを簡単に設定できるユーティリティ関数を作ろうと思いました。 ひとつひとつを手書きで書いていくのは非常に骨が折れるからです。blog.kimizuka.org 方針と…

Next.js + styled-componentsでウェブサイトを作り始めてから、ずーっと気になっていました。 ページ表示時に一瞬スタイルが当たってない状態が表示のが。が。ついに、その解決方法を見つけました。この、サーバサイドレンダリングを使えば解決します。style…

※ next（10.1.2）とstyled-components（5.2.3）にて確認Next.jsとstyled-componentsを併用すると、yarn や npm install の際に、 warning " > styled-components@5.2.3" has unmet peer dependency "react-is@>= 16.8.0". というワーニングが出るので、若干…

公式のAPIリファレンスにTypeScriptとカスタムpropsを組み合わせて使う方法が記載されてました。styled-components.comシンプルなものであれば、 const Text = styled.p<{ color: string; }>` color: ${ ({ color }) => color }; `; という感じで定義できま…

最近は、もっぱらNext.js + styled-componentsでウェブサイトを作っております。 そんな折、動作原理を考えたら当然の挙動なのですが、一瞬ハマったのでメモを残します。 ことの発端 const BtnWrapper = styled.div` position: relative; width: 44px; heigh…

Nuxt.js + styled-componentsで開発をしているのですが、SCSSのような感じで、 SCSS ol { @for $i from 0 through 10 { li:nth-child(#{$i + 1}) { &:before { content: '#{$i}'; } } } } こちらをstyled-componentsに書き換えてみると、 styled-components …

Next.jsのプロジェクト作成方法 TypeScript導入方法 SCSS導入方法 styled-components導入方法 .babelrc Next.jsのプロジェクト作成方法 yarn create next-app app（以下のコマンドはappディレクトリ以下で行う） TypeScript導入方法 yarn add -D typescript …