デザインシステム ケイツー・インタラクティブ

スタイル

基本 :

基本的なリンクのカラーはこちらの通りです。

<a href="#">こちらの通り</a>

例外 :

リンクの部分が多くその他のリンク文字が目立たなくなってしまう場合はリンク文字でも本文と同一の色を使用します。必要に応じて太字にします。

<a href="#" class="textBlack">リンク文字でも本文と同一の色を使用</a>

装飾 :

リンクはアクセシビリティの観点から基本的には下線を装飾します。このことにより、色の違いを認識できない人々がリンクを識別できない状況を回避することが出来ます。
※下線を装飾しない場合はボタン化するなどして、テキストとの違いを認識可能な状態にします。

無効 :

『無効のテキストリンク』に対してCLASSを付与すします。

<a href="#" class="disabled">無効のテキストリンク</a>

テキストボタン１

青色を基本とします。 テキストボタンサンプル
※フォントサイズは固定せず、そこで採用するテキストの大きさ（「見出し」等）に依存します。

.link:

<button type="button" data-url='リンクURL' class="textBlue link linkBtn">テキストボタン</button>

.blank:

<button type="button" data-url='リンクURL' class="textBlue blank linkBtn">テキストボタン</button>

.anc:

<button type="button" data-url='リンクURL' class="textBlue anc linkBtn">テキストボタン</button>

無効 :

『無効のテキストボタン』に対してCLASSを付与すします。

<button type="button" data-url='#' class="textBlue blank linkBtn disabled">テキストボタン</button>

テキストボタン２

黒色を基本とする。 テキストボタンサンプル
※フォントサイズは固定せず、そこで採用するテキストの大きさ（「見出し」等）に依存します。

.link:

<button type="button" data-url='リンクURL' class="textBlack link linkBtn">テキストボタン</button>

.blank:

<button type="button" data-url='リンクURL' class="textBlack blank linkBtn">テキストボタン</button>

.anc:

<button type="button" data-url='リンクURL' class="textBlack anc linkBtn">テキストボタン</button>

無効 :

『無効のテキストボタン』に対してCLASSを付与すします。

<button type="button" data-url='#' class="textBlack blank linkBtn disabled">テキストボタン</button>

• ①見出しと内容で色を分ける場合。
  ※例えば見出しが黒、内容（テキストリンク等）が青の場合など。
• ②ボタンとなるテキストが長い、または数が多い等の理由で画面が煩雑となる場合。
  ※フォントサイズは固定せず、そこで採用するテキストの大きさ（「見出し」等）に依存します。