Next.js fontの設定方法とstrongタグについて

初めに

みなさん明けましておめでとうございます！
私はインフルにかかっていたので、くたばっていました…
みなさん健康には気を付けましょう。
せっかくの連休が台無しになってしまいます…

さて今回のコードはNext.jsのチュートリアルのコードを使用しています。
Next.jsのチュートリアルは随時更新をしているので、もしかしたらこの記事以降にはコードが異なっている可能性があるので、ご了承ください。

Next.jsでfontを指定する方法

subsetsとはこれだけ欲しいと宣言するもの
Inter({ subsets: ['latin'] })ではInterの中からlatinだけ取り出して使用するということ

app/ui/fonts

 import { Inter, Lusitana } from 'next/font/google';
 
export const inter = Inter({ subsets: ['latin'] });
 
export const lusitana = Lusitana({
  weight: ['400', '700'],
  subsets: ['latin'],
});

import先の記述

import { lusitana } from '@/app/ui/fonts';

<div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
  <p className={`${lusitana.className} text-xl text-gray-800 md:text-3xl md:leading-normal`}>
    <strong>Welcome to Acme.</strong> This is the example for the{' '}
    <Link href="https://nextjs.org/learn/" className="text-blue-500">
      Next.js Learn Course
    </Link>
    , brought to you by Vercel.
  </p>
  <Link
    href="/login"
    className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
  >
    <span>Log in</span> <ArrowRightIcon className="w-5 md:w-6" />
  </Link>
</div>

実はclassName={${lusitana.className}`と記載するだけで設定可能
後は配下のdivタグやpタグに適応されます。
先ほどweight: ['400', '700']と記載しました。

export const lusitana = Lusitana({
  weight: ['400', '700'],
  subsets: ['latin'],
});

フォントサイズの切り替えは通常通り
${lusitana.className} font-normal or ${lusitana.className} font-bold
と記載します。

strongタグの使い方について

<p className={`${lusitana.className} text-xl text-gray-800 md:text-3xl md:leading-normal`}>
    <strong>Welcome to Acme.</strong> This is the example for the{' '}
    <Link href="https://nextjs.org/learn/" className="text-blue-500">
      Next.js Learn Course
    </Link>
    , brought to you by Vercel.
</p>

ここで<strong>が使用されていますが、この使い方はいささか微妙かもしれないです。

<strong> タグは、特定の内容を「強調」する必要がある場合に使用します。この「強調」は、見た目の太字（デフォルトのスタイル）だけでなく、文脈的な重要性を示す意味合いも持ちます。

<strong> を使用すべき状況

文脈的に重要な情報を示す場合

<p>Your account will be <strong>permanently deleted</strong> if you proceed.</p>

警告や注意喚起
エラーやリスクを強調したい場合に適しています。

<p><strong>Warning:</strong> This action cannot be undone.</p>

重要な用語や定義
テクニカルドキュメントやマニュアルで、特定の用語が特に重要であることを示します。

<p>A <strong>CPU</strong> (Central Processing Unit) is the brain of a computer.</p>

感情や強い意味を含む場合
強い感情や主張を示すためにも使用します。

<p>I <strong>really</strong> need your help with this project!</p>

<strong> を使用しない方が良い場合

単に太字にしたいだけの場合
見た目を変えたいだけなら、CSS の font-weight または Tailwind の font-bold を使用すべきです。
例（<strong> 不適切）

<p>Welcome to <strong>Acme</strong>.</p>

これは文脈的に「Acme」に特別な重要性がない場合、不適切です。

適切な代替

<p>Welcome to <span class="font-bold">Acme</span>.</p>

デザインだけの目的
<strong> は意味論的なタグであり、デザインのためだけに使用するのは避けるべきです。

すべてのテキストを装飾的に強調する場合
全文が重要であれば、コンテンツ全体の構成を見直すべきです。すべてを <strong> で囲むと、本当に重要な情報が埋もれます。

<strong> の主な特徴
見た目の太字はデフォルトのブラウザスタイル。
スクリーンリーダーで「重要性」を伝えるアクセシビリティ機能がある。
意味的に重要であることを示す目的で使用する。

なので今回の場合は<strong>は不適切な可能性があります。

最後に

この記事が誰かの助けになれば幸いです。