カラーリンク

Colored links

カラーリンクのホバー状態

項目

リンクカラー

リンクを着色するには.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

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