コンテンツにスキップ

インラインリンク/Inline link

文中にリンクを設定する場合のスタイルです。文字サイズに関わらず適用されます。
レイアウト上、周囲の要素と独立して配置する場合はユーティリティリンクを使用します。

本資料は、<a href="/" class="c-link">著書『XXXXX XXXX XXXXX』</a>からの引用です。

原則

  • インラインリンクの文字色と下線のスタイルは変更することはできません。
  • インラインリンクには末尾にアイコンが設定できます。外部リンクに対しては「new-window」アイコンを、リンク先がPDFやワードファイルなどのドキュメントのダウンロードの場合は「pdf(file)」を設定します。同一サイト内へのリンクの場合はアイコンを設定しません。

パターン

別窓リンク

別窓リンクはアイコンを付与します。

本資料は、
<a target="_blank" href="/" class="c-link">
著書『XXXXX XXXX XXXXX』
<svg class="c-link__icon c-link__icon--external icon" role="img" aria-label="新しいウインドウで開く">
<use xlink:href="/assets/img/sprite.svg#new_window"></use>
</svg>
</a>
からの引用です。