export default defineNuxtConfig({
  app: {
    head: {
      link: [
        {
          rel: 'preconnect',
          href: 'https://fonts.googleapis.com',
        },
        {
          rel: 'preconnect',
          href: 'https://fonts.gstatic.com',
          crossorigin: '',
        },
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap',
        },
      ],
    },
  },
})

追記

上記の方法でも問題なくできますが、@nuxtjs/google-fontsのモジュールを使用する方がフォントをプリロードできたり・フォント周りをローカルのプロジェクトにダウンロードしてくれたりと便利なので、@nuxtjs/google-fontsのモジュールを使用する方をお勧めします。

github.com

google-fonts.nuxtjs.org

基本、以下の通りに行えば問題ありません。

google-fonts.nuxtjs.org

パッケージのインストール

$ yarn add -D @nuxtjs/google-fonts

以下のコードを記載

・nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/google-fonts'],
  googleFonts: {
    families: {
      Manrope: [400, 700],
    },
  },
})

・該当のscssファイルなど

$fontFamily: 'Manrope', sans-serif;
body {
  font-family: $fontFamily;
}

3. Storybookに追加

storybookでGoogle Fontsの読み込みを行いたい場合、以下の設定を行うことで読み込まれるようになります。

storybook.js.org

・.storybook/preview-head.html

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap" rel="stylesheet">

・Storybook用のSCSSファイル

/* Nuxt.jsと共有のcssを使用している場合は記載を行わなくてもよいです。 */
$fontFamily: 'Manrope', sans-serif;
body {
  font-family: $fontFamily;
}

Adobe Fontsの追加

Adobe Fontsの詳細はこちらをご覧ください。

www.adobe.com

1. Adobe Fontsの情報を取得

webプロジェクトに追加をクリック
追加するプロジェクトを選択した後に、「決定」をクリック
出力されるscriptやstyleをそれぞれコピーしておきます。

fonts.adobe.com

2. Nuxt.jsに追加

参考記事

zenn.dev

nuxt.config.tsに以下を記載。

・nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://use.typekit.net/{プロジェクト ID}.js',
        },
      ],
    },
  },
}

全体で読み込みを行なっているファイルに対して、以下を記載。

onMounted(() => {
  Typekit.load({ async: true })
})

・該当のscssファイルなど

$fontFamily: "kinto-sans", sans-serif;
body {
  font-family: $fontFamily;
}

3. Storybookに追加

storybookについてもGoogle Fontesの時とほぼ同様に以下のファイルにscriptを追記すればフォントが適応されます。

・.storybook/preview-head.html

<script src="https://use.typekit.net/{プロジェクト ID}.js"></script>
<script async>
    Typekit.load({ async: true })
</script>

・該当のscssファイルなど

/* Nuxt.jsと共有のcssを使用している場合は記載を行わなくてもよいです。 */
$fontFamily: "kinto-sans", sans-serif;
body {
  font-family: $fontFamily;
}

2023-11-13

Bunを使用していろいろなFWを作成してみる（Next.js, Nuxt.js, Astro）

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 JavaScript and TypeScript apps. It ships as a single executable called bun. At its core is the Bun runtime, a fast JavaScript runtime designed as a drop-in replacement for Node.js. It's written in Zig and powered by JavaScriptCore under the hood, dramatically reducing startup times and memory usage.

DeepLでの翻訳ですが、日本語訳はこちらになります。

BunはJavaScriptとTypeScriptアプリのためのオールインワンのツールキットです。bunという単一の実行ファイルとして出荷される。核となるのはBunランタイムで、Node.jsのドロップイン置き換えとして設計された高速なJavaScriptランタイムだ。Zigで記述され、JavaScriptCoreで動作するため、起動時間とメモリ使用量が劇的に削減される。

各種FWで検証する前に

Bunのインストール

以下のコマンドを実行して動いていれば完了です。

$ bun --version
1.0.11

bun.sh

Homebrewの場合

$ brew tap oven-sh/bun # for macOS and Linux
$ brew install bun

npmの場合

$ npm install -g bun # the last `npm` command you'll ever need

各種FWで検証をしてみる

今回検証をする内容以外にもいろいろなものがあるため、ぜひみてみてください。

bun.sh

1. Next.jsを作成してみる

bun.sh

以下のように設定しました

❯ bun create next-app
✔ What is your project named? … next-bun
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
✔ What import alias would you like configured? … ~/src/*
Creating a new Next.js app in /code/bun-sample/next-bun.

Using bun.

Initializing project with template: app


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- eslint
- eslint-config-next

bun install v1.0.11 (f7f6233e)
 + @types/node@20.9.0
 + @types/react@18.2.37
 + @types/react-dom@18.2.15
 + eslint@8.53.0
 + eslint-config-next@14.0.2
 + typescript@5.2.2
 + next@14.0.2
 + react@18.2.0
 + react-dom@18.2.0

 276 packages installed [256.00ms]
Initialized a git repository.

Success! Created next-bun at /code/bun-sample/next-bun

bun devでページを開くことができます。

❯ bun dev       
$ next dev
   ▲ Next.js 14.0.2
   - Local:        http://localhost:3000

(node:80104) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
 ✓ Ready in 2.9s
 ○ Compiling / ...
 ✓ Compiled / in 2s (517 modules)
 ○ Compiling /favicon.ico ...
 ✓ Compiled /favicon.ico in 1070ms (513 modules)

http://localhost:3000でページを開くことができます。

2. Nuxt.jsを作成してみる

bun.sh

以下のように設定しました。

❯ bunx nuxi init nuxt-bun # nuxt-bunはアプリ名

# 最初にどのパッケージを使用するかが出てくるため、bunを選択
❯ Which package manager would you like to use?
○ npm
○ pnpm
○ yarn
● bun

✔ Which package manager would you like to use?
bun
◐ Installing dependencies...
bun install v1.0.11 (f7f6233e)
 + @nuxt/devtools@1.0.2
 + nuxt@3.8.1
 + vue@3.3.8
 + vue-router@4.2.5
✔ Types generated in .nuxt

 671 packages installed [1.88s]
✔ Installation completed.

✔ Initialize git repository?
Yes
ℹ Initializing git repository...

hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint:
hint:   git config --global init.defaultBranch <name>
hint:
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint:
hint:   git branch -m <name>
Initialized empty Git repository in /code/bun-sample/nuxt-bun/.git/
✨ Nuxt project has been created with the v3 template. Next steps:
 › cd nuxt-bun 
 › Start development server with bun run dev

bun devでページを開くことができます。

❯ bun dev
$ nuxt dev
Nuxt 3.8.1 with Nitro 2.7.2

  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

 ➜ DevTools: press Shift + Option + D in the browser (v1.0.2)

ℹ Vite server warmed up in 800ms
ℹ Vite client warmed up in 996ms
[nitro] ✔ Nitro built in 313 ms
(node:81016) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

http://localhost:3000でページを開くことができます。

3. Astroを作成してみる

bun.sh

以下のように設定しました。

❯ bun create astro
(node:81217) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
 astro   Launch sequence initiated.

   dir   Where should we create your new project?
         ./astro-bun

  tmpl   How would you like to start your new project?
         Include sample files
 ██████  Template copying...

  deps   Install dependencies?
         Yes
 ██████  Installing dependencies with bun...

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strict
 ██████  TypeScript customizing...

   git   Initialize a new git repository?
         Yes
 ██████  Git initializing...

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./astro-bun
         Run bun run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯

bun devでページを開くことができます。

❯ bun dev
$ astro dev
  ◆ Astro collects completely anonymous usage data.
    This optional program helps shape our roadmap.
    Run `npm run astro telemetry disable` to opt-out.
    Details: https://astro.build/telemetry

  🚀  astro  v3.5.3 started in 66ms
  
  ┃ Local    http://localhost:4321/
  ┃ Network  use --host to expose

http://localhost:4321でページを開くことができます。

2023-10-16

scssでfont-sizeの横幅に応じて可変するmixinを作ってみる

css scss

以下の記事やサービスでfont-sizeを入力するとそれに応じて出力はされますが、scssで使用する場合にはmixinで使用したいため、font-size調整用のmixinを作成した内容です。

coliss.com

www.fluid-type-scale.com

min-max-calculator.9elements.com

結果

@use 'sass:math';
// 共通で使用しているscss変数
$fontSizeDefault: 16; // body要素で表示しているfont-size
$sizeDefaultPc: 1440; // 最大ウィンドウサイズの指定
$sizeSm: 390; // 最小ウィンドウサイズの指定

// 小数点を丸めるために使用するmixin
@function roundToDecimal($number, $decimalPlaces) {
  $multiplier: math.pow(10, $decimalPlaces);
  @return math.div(math.round($number * $multiplier), $multiplier);
}

// font-sizeの可変対応を行う用のmixin
// $minFontPxSize: 最小ウィンドウサイズの時のフォントサイズ
// $maxFontPxSize: 最大ウィンドウサイズの時のフォントサイズ
// @see https://github.com/9elements/min-max-calculator/blob/main/src/components/Calculator/Calculator.svelte#L58
@mixin font-size($minFontPxSize, $maxFontPxSize) {
  $minFontRemSize: math.div($minFontPxSize, $fontSizeDefault);
  $maxFontRemSize: math.div($maxFontPxSize, $fontSizeDefault);
  $variablePart: math.div($maxFontPxSize - $minFontPxSize, $sizeDefaultPc - $sizeSm);
  $variableSize: roundToDecimal(
      math.div($maxFontPxSize - $sizeDefaultPc * $variablePart, $fontSizeDefault), 3
  );
  font-size: clamp(
    #{$minFontRemSize}rem,
    #{$variableSize}rem + #{roundToDecimal($variablePart, 4) * 100}vw,
    #{$maxFontRemSize}rem
  );
}

// 使い方
.hoge {
  @include font-size(16, 24);
  // font-size: clamp(1rem, 0.814rem + 0.76vw, 1.5rem);
}

参考にしたコード

基本以下のコードを参考にscss用に変換したものになります。

github.com

scssでの計算の処理について今回使用したもの

sass-lang.com

割り算を行う

sass-lang.com

@use 'sass:math';

@debug math.div(1, 2); // 0.5
@debug math.div(100px, 5px); // 20
@debug math.div(100px, 5); // 20px

べき乗の計算を行う（10のべき乗を行い桁数を追加する）

sass-lang.com

@use 'sass:math';

@debug math.pow(10, 2); // 100
@debug math.pow(10, 3); // 1000

丸め込みを行う

sass-lang.com

@use 'sass:math';

@debug math.round(4); // 4
@debug math.round(4.2); // 4
@debug math.round(4.9); // 5

2023-09-30

cssを使って画像を立体的に見せる方法

css

X（旧Twitter）で以下のものが流れてきて実装方法など気になったので、それを実装してみた内容になります。

A realistic 3D Card hover effect using only CSS 🤩

Demo: https://t.co/YFuQiTGH6r via @CodePen

✅ Minimal HTML
✅ Responsive
✅ Featuring the best video game ever

Inspired by @gggayane 👇#CSS https://t.co/2sZEwS09Rm pic.twitter.com/x2ALDjH4XA
— T. Afif @ CSS Challenges (@ChallengesCss) 2023年5月9日

実装を行ったもの

See the Pen hero-card by miwa_shuntaro (@miwashutaro0611) on CodePen.

<!-- @see https://codepen.io/t_afif/pen/mdzxJaa -->
<figure class="hero">
  <!--  NOTE: change image path  -->
  <!--  https://assets.codepen.io/1480814/necro.png  -->
  <img class="hero-image" src="https://placehold.jp/437x1000.png" alt="character image">
  <figcaption class="hero-figcaption">character1</figcaption>
</figure>

<figure class="hero">
  <img class="hero-image" src="https://placehold.jp/437x1000.png" alt="character image">
  <figcaption class="hero-figcaption">character2</figcaption>
</figure>

今回CSSについては「CSS nesting」を使用しているため、FireFoxでは動かない可能性があります。（Mac & Chromeでは動作することを確認済みです。）

前提

Google Fontsの追加

1. Google Fontsの情報を取得

2. Nuxt.jsに追加

3. Storybookに追加

Adobe Fontsの追加

1. Adobe Fontsの情報を取得

2. Nuxt.jsに追加

3. Storybookに追加

今回使用したバージョン

Bunとは

各種FWで検証する前に

Bunのインストール

各種FWで検証をしてみる

1. Next.jsを作成してみる

2. Nuxt.jsを作成してみる

3. Astroを作成してみる

結果

参考にしたコード

scssでの計算の処理について今回使用したもの

割り算を行う

べき乗の計算を行う（10のべき乗を行い桁数を追加する）

丸め込みを行う

実装を行ったもの

制作手順

1. HTMLの作成

2. 背景画像部分の表示

画像の縦横比を1:1に変更

影を使用して立体感の演出

画像を少しだけ暗くする

今回のcssの内容について

3. imgタグで表示した画像の表示エリアの調整

gridのエリアに縦1・横1の割合で配置を行う

imgタグで配置した画像のサイズ・配置箇所の調整

コントラストの調整

今回のcssの内容について

4. captionタグのスタイルの調整

gridのエリアに縦1・横1の割合で配置を行う（イメージと同じ箇所に配置を行う）

コンテンツの位置調整

奥行きの設定

コンテンツの裏側を見せないようにする

今回のcssの内容について

5. 2から4で作成したものに対して、ホバーのインタラクションをつける

今回のcssの内容について

ページ全体に遷移アニメーションを追加したい場合

コード

結果

ページ遷移しても状態を保持したい場合

コード

結果

ページ遷移時にスライドさせる

コード

結果

実務で使っているツール

SassMeister

placehold.jp

caninclude

runjs

screensizes

各種整形ツール

情報収集しているもの

ギャラリーサイト

Youtube, Podcast

参考にしたもの

今回実装したものについて

コードについて

実装した手順について

1. マークアップの作成

1-1. タブの全体を作成

1-2. タブの選択部分を作成

対応した内容について

role-tablistについて

role-presentationについて

role-tabについて

aria-controlsについて

aria-selectedについて

1-3. タブの表示部分の作成

対応した内容について

tabpanelについて

aria-labelledbyについて

3. `img`タグで表示した画像の表示エリアの調整

`img`タグで配置した画像のサイズ・配置箇所の調整

4. `caption`タグのスタイルの調整