メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

リンクユーティリティ(Link) v5.3.0新設

リンクユーティリティは、アンカーの色、不透明度、下線との距離、下線の色などを調整するためのスタイル付けに使用。

※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。

ユーティリティでリンクの rgba() カラー値のアルファの不透明度を変更。色の不透明度を変更するとコントラストが不十分なリンクになることがあるので注意。

不透明度の種類

リンクの不透明度10%:.link-opacity-10--bs-link-opacity: 0.1

透明なリンク

リンクの不透明度25%:.link-opacity-25--bs-link-opacity: 0.25

透明なリンク

リンクの不透明度50%:.link-opacity-50--bs-link-opacity: 0.5

透明なリンク

リンクの不透明度75%:.link-opacity-75--bs-link-opacity: 0.75

透明なリンク

リンクの不透明度100%(デフォルトと同じ):.link-opacity-100--bs-link-opacity: 1

透明なリンク

デフォルトのリンク(参考)

デフォルトのリンク

設定例
リンクの不透明度10%の場合<p><a class="link-opacity-10" href="#">透明なリンク</a></p>

ホバー状態での不透明度の変更もできる。

不透明度の種類

ホバー状態の不透明度10%:.link-opacity-10-hover

ホバー状態で透明

ホバー状態の不透明度25%:.link-opacity-25-hover

ホバー状態で透明

ホバー状態の不透明度50%:.link-opacity-50-hover

ホバー状態で透明

ホバー状態の不透明度75%:.link-opacity-75-hover

ホバー状態で透明

ホバー状態の不透明度100%(デフォルトと同じ):.link-opacity-100-hover

ホバー状態で透明

リンクの不透明度10%、ホバー状態の不透明度75%:.link-opacity-10.link-opacity-75-hover

ホバー状態で不透明度を変更

デフォルトのリンク(参考)

デフォルトのリンク

設定例
ホバー状態の不透明度10%の場合<p><a class="link-opacity-10-hover" href="#">ホバー状態で透明</a></p>
リンクの不透明度10%、ホバー状態の不透明度75%の場合<p><a class="link-opacity-10 link-opacity-75-hover" href="#">ホバー状態で不透明度を変更</a></p>
【設定】
  • <a>.link-opacity-{value}.link-opacity-{value}-hover を入れる(上記の「不透明度の種類」から選択、併用も可)
    • {value} は、10, 25, 50, 75, 100 のいずれかを選択

下線の色(Underline color)

下線の色はリンクの文字色とは別に変更できる。

カラーの種類※モードによって色が見やすいように背景色をつけています

Primary:.link-underline-primary

下線はPrimary

Secondary:.link-underline-secondary

下線はSecondary

Success:.link-underline-success

下線はSuccess

Danger:.link-underline-danger

下線はDanger

Warning:.link-underline-warning

下線はWarning

Info:.link-underline-info

下線はInfo

Light:.link-underline-light

下線はLight

Dark:.link-underline-dark

下線はDark

デフォルトのリンク(参考)

デフォルトのリンク

設定例
Primaryの場合<p><a href="#" class="link-underline-primary">下線はPrimary</a></p>
【設定】
  • <a>.link-underline-{themecolor} を入れる(上記の「カラーの種類」から選択)
    • {themecolor} は、primary, secondary, success, danger, warning, info, light, dark のいずれかを選択

下線との距離(Underline offset)

下線のテキストからの距離(オフセット)を変更。オフセットは em 単位で設定され、要素の現在の font-size に合わせて自動的に拡大縮小される。

オフセットの種類

オフセット1:.link-offset-1text-underline-offset: 0.125em

オフセット1のリンク

オフセット2:.link-offset-2text-underline-offset: 0.25em

オフセット2のリンク

オフセット3:.link-offset-3text-underline-offset: 0.375em

オフセット3のリンク

デフォルトのリンク(参考)

デフォルトのリンク

設定例
オフセット1の場合<p><a class="link-offset-1" href="#">オフセット1のリンク</a></p>
【設定】
  • <a>.link-offset-{value} を入れる(上記の「オフセットの種類」から選択)
    • {value} は、1, 2, 3 の数字のいずれかを選択

下線の不透明度(Underline opacity)

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

不透明度の種類

下線の不透明度0%:.link-underline.link-underline-opacity-0--bs-link-underline-opacity: 0

不透明度0%の下線

下線の不透明度10%:.link-underline.link-underline-opacity-10--bs-link-underline-opacity: 0.1

不透明度10%の下線

下線の不透明度25%:.link-underline.link-underline-opacity-25--bs-link-underline-opacity: 0.25

不透明度25%の下線

下線の不透明度50%:.link-underline.link-underline-opacity-50--bs-link-underline-opacity: 0.5

不透明度50%の下線

下線の不透明度75%:.link-underline.link-underline-opacity-75--bs-link-underline-opacity: 0.75

不透明度75%の下線

下線の不透明度100%(デフォルトと同じ):.link-underline.link-underline-opacity-100--bs-link-underline-opacity: 1

不透明度100%の下線

デフォルトのリンク(参考)

デフォルトのリンク

設定例
下線の不透明度10%の場合<p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">不透明度10%の下線</a></p>
【設定】
  • <a>.link-underline.link-underline-opacity-{value} を入れる(上記の「不透明度の種類」から選択)
    • {value} は、0, 10, 25, 50, 75, 100 のいずれかを選択
【注意】
  • .link-underline-opacity-{value} の単独使用は不可(必ず .link-underline も入れる)

ホバー状態のバリエーション(Hover variants)

.link-opacity-*-hover ユーティリティと同様に .link-offset.link-underline-opacity ユーティリティにもデフォルトで :hover のバリエーションを組み込んでいる。いろいろ組み合わせてユニークなリンクスタイルが作れる。

見本
設定例
<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#">
  ホバー状態でのみ下線が表示
</a>
【設定】
  • 下線との距離:<a>.link-offset-{value}-hover を入れる(.link-offset-{value} との併用も可)
  • 下線の不透明度:<a>.link-underline.link-underline-opacity-{value}-hover を入れる(.link-underline-opacity-{value} との併用も可)

色付きリンクヘルパーが更新され、リンクユーティリティと併用できるようになった。新しいユーティリティを使用して、リンクの不透明度、下線の不透明度、下線との距離を変更できる。

見本※モードによって色が見やすいように背景色をつけています
設定例
Primaryの場合<p><a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primaryのリンク</a></p>
【設定】

CSS

以下に加えて、カラーなどのCSSカスタムプロパティ(別名:CSS変数)やRebootのリンクの項目についてもご参照下さい。

CSS変数(CSS variables)

デフォルトの設定
scss/_root.scss 内の設定--#{$prefix}link-color: #{$link-color};
--#{$prefix}link-color-rgb: #{to-rgb($link-color)};
--#{$prefix}link-decoration: #{$link-decoration};

--#{$prefix}link-hover-color: #{$link-hover-color};
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};

@if $link-hover-decoration != null {
  --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
}

Sass変数(Sass variables)

デフォルトの設定
scss/_variables.scss 内 の設定$link-color:                              $primary;
$link-decoration:                         underline;
$link-shade-percentage:                   20%;
$link-hover-color:                        shift-color($link-color, $link-shade-percentage);
$link-hover-decoration:                   null;

SassユーティリティAPI(Sass utilities API)

リンクユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらに掲載。

デフォルトの設定
scss/_utilities.scss 内 utils-links の設定"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
  ),
),