カラーリンク Colored links

hover状態を持つ色付きリンク

On this page

リンクの色

.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クラスで非表示にした追加テキストなどの代替手段を通じて含めてください。

リンクユーティリティ

Added in v5.3.0

色付きリンクは、linkユーティリティによっても変更できます。