v5.3で追加 GitHubで表示

リンク

リンクユーティリティは、アンカーのスタイルを変更し、色、不透明度、下線オフセット、下線の色などを調整するために使用されます。

このページの内容

リンクの不透明度

ユーティリティを使用して、リンクの`rgba()`カラー値のアルファ不透明度を変更します。色の不透明度の変更は、不十分なコントラストを持つリンクにつながる可能性があることに注意してください。

html

<p><a class="link-opacity-10" href="#">Link opacity 10</a></p>
<p><a class="link-opacity-25" href="#">Link opacity 25</a></p>
<p><a class="link-opacity-50" href="#">Link opacity 50</a></p>
<p><a class="link-opacity-75" href="#">Link opacity 75</a></p>
<p><a class="link-opacity-100" href="#">Link opacity 100</a></p>

ホバー時の不透明度レベルも変更できます。

html

<p><a class="link-opacity-10-hover" href="#">Link hover opacity 10</a></p>
<p><a class="link-opacity-25-hover" href="#">Link hover opacity 25</a></p>
<p><a class="link-opacity-50-hover" href="#">Link hover opacity 50</a></p>
<p><a class="link-opacity-75-hover" href="#">Link hover opacity 75</a></p>
<p><a class="link-opacity-100-hover" href="#">Link hover opacity 100</a></p>

リンクの下線

下線の色

リンクテキストの色とは別に、下線の色を変更します。

html

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

下線のオフセット

テキストからの下線の距離を変更します。オフセットは`em`単位で設定され、要素の現在の`font-size`に合わせて自動的にスケールされます。

html

<p><a href="#">Default link</a></p>
<p><a class="link-offset-1" href="#">Offset 1 link</a></p>
<p><a class="link-offset-2" href="#">Offset 2 link</a></p>
<p><a class="link-offset-3" href="#">Offset 3 link</a></p>

下線の不透明度

下線の不透明度を変更します。アルファ不透明度を変更するために使用する`rgba()`カラーを設定するために、最初に`.link-underline`を追加する必要があります。

html

<p><a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Underline opacity 0</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Underline opacity 75</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Underline opacity 100</a></p>

ホバーバリアント

` .link-opacity-*-hover`ユーティリティと同様に、` .link-offset`および` .link-underline-opacity`ユーティリティには、デフォルトで` :hover`バリアントが含まれています。組み合わせて、独自のリンクスタイルを作成します。

下線の不透明度0

html

<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#">
  Underline opacity 0
</a>

カラーリンク

カラーリンクヘルパーは、リンクユーティリティと連携するように更新されました。新しいユーティリティを使用して、リンクの不透明度、下線の不透明度、および下線のオフセットを変更します。

html

<p><a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a></p>
<p><a href="#" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a></p>
<p><a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a></p>
<p><a href="#" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a></p>
<p><a href="#" class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a></p>
<p><a href="#" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a></p>
<p><a href="#" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a></p>
<p><a href="#" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a></p>
<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>

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

CSS

次のSass機能に加えて、色などに関するCSSカスタムプロパティ（別名CSS変数）についても読んでください。

SassユーティリティAPI

リンクユーティリティは、`scss/_utilities.scss`内のユーティリティAPIで宣言されています。ユーティリティAPIの使用方法を確認してください。

scss/_utilities.scss

"link-opacity": (
  css-var: true,
  class: link-opacity,
  state: hover,
  values: (
    10: .1,
    25: .25,
    50: .5,
    75: .75,
    100: 1
  )
),
"link-offset": (
  property: text-underline-offset,
  class: link-offset,
  state: hover,
  values: (
    1: .125em,
    2: .25em,
    3: .375em,
  )
),
"link-underline": (
  property: text-decoration-color,
  class: link-underline,
  local-vars: (
    "link-underline-opacity": 1
  ),
  values: map-merge(
    $utilities-links-underline,
    (
      null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
    )
  )
),
"link-underline-opacity": (
  css-var: true,
  class: link-underline-opacity,
  state: hover,
  values: (
    0: 0,
    10: .1,
    25: .25,
    50: .5,
    75: .75,
    100: 1
  ),
),