Nuxt.js v3の環境でWeb Fontsの導入を行なったため、導入方法について紹介します。 また、Storybookについても同様に追加したため、その方法についても紹介します。 前提 今回は以下のFontを追加していこうと思います。 Google Fonts fonts.google.com Adobe…

Bunのv1がアップデートされたので、各種FWでどのように使うことができるのかいろいろと調べてみた内容になります。 今回使用したバージョン bun: 1.0.11 Next.js: 14.0.2 Nuxt.js: 3.8.1 Astro: 3.5.3 Bunとは bun.sh Bun is an all-in-one toolkit for Java…

以下の記事やサービスでfont-sizeを入力するとそれに応じて出力はされますが、scssで使用する場合にはmixinで使用したいため、font-size調整用のmixinを作成した内容です。 coliss.com www.fluid-type-scale.com min-max-calculator.9elements.com 結果 @use…

X（旧Twitter）で以下のものが流れてきて実装方法など気になったので、それを実装してみた内容になります。 A realistic 3D Card hover effect using only CSS Demo: https://t.co/YFuQiTGH6r via @CodePen ✅ Minimal HTML✅ Responsive✅ Featuring the best …

Astro v2.9からページ遷移のアニメーションをAstroでつけることができるようになったため、少し検証してみた内容になります。 docs.astro.build ページ全体に遷移アニメーションを追加したい場合 コード astro.config.mjs export default defineConfig({ // …

実務で使っているツールや普段の情報収集で使っているものになります。 基本個人のメモ用でフロントエンドエンジニア向けです。 実務で使っているツール SassMeister www.sassmeister.com オンライン上でsassからcssの変換ができるツール。 基本css-modules…

タブのUIについて実装する機会はちょこちょこあるものの、ちゃんと理解しようと思い調べた内容になります。 参考にしたもの qiita.com kt-media.blog ics.media 今回実装したものについて See the Pen tab ui by miwa_shuntaro (@miwashutaro0611) on CodePe…

「swiper/react」をさわった時に少し触りやすいようにしたので、その時のコードです。 swiperjs.com 結果 使っているバージョン "react": "^18.2.0", "swiper": "^9.2.0", コンポーネント側 import type { FC, ReactNode } from 'react'; import { Children …

以下の記事を参考にTypeScriptでの配列の値を記載する際にEnums化を行ったため、その時のメモになります。 blog.mitsuruog.info 行いたかったこと react-hook-formで以下のようなことをする際にテキストだと型がうまく反応しなかったため、反応するようにし…

個人で開発しているものをNuxt2からNuxt3にアップデートしたため、その時に対応したこと等を記載していきます。 Nuxt2からNuxt3にアップデートしようと思った理由について Vue2が2023年末にサポートが切れてしまうためVue3にアップデートさせる必要があった …