utsusie
プレイグラウンドに戻る

TextLinkコンポーネント

汎用テキストリンクのデモとテスト - インライン要素・アクセシビリティ対応

TextLink

汎用テキストリンクコンポーネント。インライン要素として文章の流れを重視し、アクセシビリティに配慮した設計。

TextLink Example

TSX
// 基本的な文章内でのリンク使用
<p className="text-base leading-relaxed">
  この機能の詳細については
  <TextLink href="#docs">ドキュメント</TextLink>
  をご覧ください。追加の情報は
  <TextLink href="#faq">FAQ</TextLink>
  でも確認できます。
</p>

// 外部リンク（自動判定）
<p className="text-base leading-relaxed">
  最新の技術情報は
  <TextLink href="https://nextjs.org">
    Next.js公式サイト
  </TextLink>
  で確認できます。
</p>

// アクティブ状態
<p className="text-base leading-relaxed">
  現在のページ：
  <TextLink href="/playground/text-link" active>
    TextLink プレイグラウンド
  </TextLink>
</p>

基本的なTextLink例

文章内でのリンク

この機能の詳細についてはドキュメントをご覧ください。追加の情報はFAQでも確認できます。

外部リンク

最新の技術情報はNext.js公式サイト（外部リンク）で確認できます。

アクティブ状態

現在のページ：TextLink プレイグラウンド

サイズバリエーション

4つのサイズが利用可能。デフォルトは md サイズ。

TextLink Sizes

TSX
// XSサイズ（12px）
<TextLink href="#" size="xs">Extra Small Link</TextLink>

// SMサイズ（14px）
<TextLink href="#" size="sm">Small Link</TextLink>

// MDサイズ（16px）- デフォルト
<TextLink href="#" size="md">Medium Link</TextLink>
<TextLink href="#">Medium Link (default)</TextLink>

// LGサイズ（18px）
<TextLink href="#" size="lg">Large Link</TextLink>

サイズバリエーション

xs

これはxsサイズのリンクです。

sm

これはsmサイズのリンクです。

md

これはmdサイズのリンクです。

lg

これはlgサイズのリンクです。

実際の文章での使用例

XSサイズはサンプルリンクなどの補足リンクに適しています。

SMサイズはサンプルリンクやサイドバーでよく使用されます。

MDサイズはメインコンテンツでの標準的なリンクです。

LGサイズは重要なリンクや見出し内で使用されます。

カスタムスタイリング

classNameプロパティを使用して、様々なコンテキストに応じたスタイルをカスタマイズできます。

Custom Styling Examples

TSX
// 色のカスタマイズ
<TextLink 
  href="#"
  className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
>
  青色のリンク
</TextLink>

// 下線なしスタイル
<TextLink 
  href="#" 
  className="text-gray-700 dark:text-gray-300 no-underline hover:text-gray-900 dark:hover:text-gray-100"
>
  下線なしリンク
</TextLink>

// 重要なリンク（色付き、太字）
<TextLink 
  href="#"
  className="text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 font-medium"
>
  重要なお知らせ
</TextLink>

// 強調リンク（太字、色付き）
<TextLink 
  href="#"
  className="text-green-600 dark:text-green-400 hover:text-green-700 dark:hover:text-green-300 font-semibold"
>
  アクションを実行
</TextLink>

// 下線付きリンク（常時表示）
<TextLink 
  href="#"
  className="underline decoration-1 underline-offset-2 hover:decoration-2"
>
  Always Underlined
</TextLink>

カスタムスタイリング例

装飾の変更

この機能には重要な注意事項があります。

今すぐ始めてみましょう。

詳細な情報はこちらのページで確認できます。

アクセシビリティ機能

WCAG 2.1 AA準拠のアクセシビリティ機能が組み込まれています。

Accessibility Features

TSX
// アクセシビリティラベル
<TextLink href="#" ariaLabel="PDFファイルをダウンロード">
  Download
</TextLink>

// 現在のページ（aria-current="page"が自動付与）
<TextLink href="#" active>
  Current Page
</TextLink>

// 外部リンク（rel="noopener noreferrer"が自動付与）
<TextLink href="https://example.com">
  External Site
</TextLink>

// フォーカス管理（キーボードナビゲーション対応）
<div>
  <TextLink href="#">First Link</TextLink>
  {" | "}
  <TextLink href="#">Second Link</TextLink>
  {" | "}
  <TextLink href="#">Third Link</TextLink>
</div>

アクセシビリティ機能

現在のページ表示（aria-current="page"）

キーボードナビゲーション

Tabキーでフォーカスを移動して、フォーカスリングを確認してください。

外部リンクの自動設定

Next.js 公式サイト（外部リンク）(target="_blank" rel="noopener noreferrer" が自動付与)

Tailwind CSS（外部リンク）(スクリーンリーダー用「外部リンク」テキストも自動付与)

実装例

実際のプロジェクトでの使用例とベストプラクティス。

基本的なインポートと使用

TSX
import TextLink from "@/components/TextLink";

// 基本的な使用
function BasicExample() {
  return (
    <p>
      詳細は<TextLink href="#">ドキュメント</TextLink>をご覧ください。
    </p>
  );
}

複数リンクの組み合わせ

TSX
import TextLink from "@/components/TextLink";

// 複数のリンクを並べる場合
function LinkGroup() {
  return (
    <div className="flex gap-4">
      <TextLink href="#">ドキュメント</TextLink>
      <TextLink href="#">使用例</TextLink>
      <TextLink href="https://github.com/example">GitHub</TextLink>
    </div>
  );
}

条件付きリンク表示

TSX
import TextLink from "@/components/TextLink";

// 条件に応じてリンクを表示
function ConditionalLinks({ isLoggedIn }: { isLoggedIn: boolean }) {
  return (
    <div className="space-x-4">
      <TextLink href="#">ホーム</TextLink>
      {isLoggedIn ? (
        <TextLink href="#">ダッシュボード</TextLink>
      ) : (
        <TextLink href="#">ログイン</TextLink>
      )}
    </div>
  );
}

文章内での使用

TSX
import TextLink from "@/components/TextLink";

function Article() {
  return (
    <article className="prose dark:prose-invert">
      <p>
        React の学習を始めるなら、まず
        <TextLink href="https://react.dev">
          公式ドキュメント
        </TextLink>
        を読むことをお勧めします。
      </p>
      
      <p>
        Next.js については
        <TextLink href="#">
          こちらの詳細ガイド
        </TextLink>
        でも解説しています。
      </p>
      
      <p>
        <TextLink 
          href="#"
          className="text-red-600 dark:text-red-400 font-medium"
        >
          重要なお知らせ
        </TextLink>
        もご確認ください。
      </p>
    </article>
  );
}

TypeScript型定義

TSX
export interface TextLinkProps {
  href: string;
  children: React.ReactNode;
  className?: string;
  ariaLabel?: string;
  active?: boolean;
  size?: "xs" | "sm" | "md" | "lg";
  showActiveState?: boolean;
}