色付きリンク

ホバー状態付きの色付きリンク

このページについて

リンクの色

リンクの色付けには、.link-* クラスを使用できます。.text-* クラスとは異なり、これらのクラスには:hoverと:focusの状態があります。一部のリンクスタイルは比較的明るい前景の色を使用しており、十分なコントラストを得るために暗い背景でのみ使用してください。

重要事項！ .link-body-emphasis は現在、カラーモードに適応する唯一の色付きリンクです。v6 がリリースされ、カラーモードのテーマカラーをより徹底的に再構築できるようになるまで、特別なケースとして扱われます。それまでは、カスタムの:hoverと:focusスタイルを持つ、ユニークで高コントラストのリンクカラーです。ただし、新しいリンクユーティリティには引き続き対応します。

html

<p><a href="#" class="link-primary">Primary link</a></p>
<p><a href="#" class="link-secondary">Secondary link</a></p>
<p><a href="#" class="link-success">Success link</a></p>
<p><a href="#" class="link-danger">Danger link</a></p>
<p><a href="#" class="link-warning">Warning link</a></p>
<p><a href="#" class="link-info">Info link</a></p>
<p><a href="#" class="link-light">Light link</a></p>
<p><a href="#" class="link-dark">Dark link</a></p>
<p><a href="#" class="link-body-emphasis">Emphasis link</a></p>

アクセシビリティのヒント： 色を使用して意味を追加することは、視覚的な指示しか提供しません。これは、スクリーンリーダーなどの支援技術のユーザーには伝わらない可能性があります。十分な色のコントラストを持つ可視テキストなど、コンテンツ自体から意味が明らかであるか、.visually-hiddenクラスで非表示にした追加テキストなど、代替手段で含まれていることを確認してください。

リンクユーティリティ

v5.3.0 で追加

色付きリンクは、リンクユーティリティでも変更できます。