リンク (Link)

ページ間のナビゲーションや外部サイトへのリンクに使用する、スタイリッシュで使いやすいリンクコンポーネントです。

基本

色・意図バリエーション

プライマリーリンクセカンダリーリンク成功リンク警告リンク危険リンク情報リンク

基本のCode:

<a href=”#” class=“link link-md link-primary”>プライマリーリンク</a>
<a href=”#” class=“link link-md link-secondary”>セカンダリーリンク</a>
<a href=”#” class=“link link-md link-success”>成功リンク</a>
<a href=”#” class=“link link-md link-warning”>警告リンク</a>
<a href=”#” class=“link link-md link-danger”>危険リンク</a>
<a href=”#” class=“link link-md link-info”>情報リンク</a>

サイズ

サイズバリエーション

小さいリンク標準リンク大きいリンク

サイズのCode:

<a href=”#” class=“link link-sm link-primary”>小さいリンク</a>
<a href=”#” class=“link link-md link-primary”>標準リンク</a>
<a href=”#” class=“link link-lg link-primary”>大きいリンク</a>

アンダーライン

アンダーライン制御

アンダーラインのCode:

<a href=”#” class=“link link-md link-primary link-underline”>常にアンダーライン</a>
<a href=”#” class=“link link-md link-primary link-no-underline”>ホバー時のみ</a>
<a href=”#” class=“link link-md link-primary”>デフォルト</a>

アイコン付き

アイコンバリエーション

アイコン付きのCode:

<a href=”#” class=“link link-md link-primary link-with-icon”>
  <svg class=“link-icon” fill=“none” stroke=“currentColor” viewBox=“0 0 24 24”>
    <path stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“2” d=“M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2 2z” />
  </svg>
  メール送信
</a>

ボタン風リンク

ボタンスタイル

プライマリーボタンセカンダリーボタン成功ボタン危険ボタン

ボタン風のCode:

<a href=”#” class=“link link-button link-primary”>プライマリーボタン</a>
<a href=”#” class=“link link-button link-secondary”>セカンダリーボタン</a>
<a href=”#” class=“link link-button link-success”>成功ボタン</a>
<a href=”#” class=“link link-button link-danger”>危険ボタン</a>

状態

リンク状態

通常状態（通常のリンク）
無効状態（クリック不可）
ホバー状態（マウスオーバーしてください）

状態のCode:

<a href=”#” class=“link link-md link-primary”>通常状態</a>
<span class=“link link-md link-disabled”>無効状態</span>
<!— ホバー状態は自動的に適用されます —>

実用的なパターン

ブレッドクラム

アクションリンク

ユーザーガイド

基本的な使い方を学ぶ

詳細を見る

APIドキュメント

開発者向けリファレンス

外部サイトで見る

コールトゥアクション

無料で始める詳細を見る

ナビゲーションのCode:

<nav class=“flex gap-6”>
  <a href=”#” class=“link link-md link-primary link-no-underline”>ホーム</a>
  <a href=”#” class=“link link-md link-secondary link-no-underline”>サービス</a>
  <a href=”#” class=“link link-md link-secondary link-no-underline”>会社情報</a>
</nav>

外部リンクのCode:

<a href=“https://example.com” class=“link link-md link-info link-external”>
  外部サイトで見る
  <svg class=“link-external-icon” fill=“none” stroke=“currentColor” viewBox=“0 0 24 24”>
    <path stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“2” d=“M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14” />
  </svg>
</a>

アクセシビリティ

  • • 適切なhref属性を指定し、実際の遷移先を設定
  • • 外部リンクにはtarget="_blank"とrel="noopener noreferrer"を追加
  • • リンクテキストは目的地を明確に示す
  • • aria-labelでリンクの詳細を補足（必要に応じて）
  • • キーボード操作（Tab、Enter）に対応
  • • フォーカス表示が明確に見える
  • • 色だけでなくアンダーラインでもリンクを識別可能
  • • 十分なクリック領域を確保（最小44x44px）
  • • 無効なリンクにはaria-disabled="true"を設定
ヘルプ（適切なaria-label付き）
無効なリンク（適切なaria-disabled付き）