【CSS】テキストやリンクを目立たせるいくつかの方法

最終更新日: 公開日: 2021年12月

新しい記事を投稿した時や新商品を発売した時にその説明ページに対するリンクを目立たせたいという場合がある.
そのような場合にアイコン画像を作って張るのもよいが,CSS だけで作ったほうがスッキリする.
お客様に質問いただき,ちょうどよい機会なので記事にした.

渦巻

新着情報 new を CSS のみで作成した例

下の二つについては最初だけ点滅するので,この状態でページの更新をしてもらえればどういう動作か分かるだろう.
目立たせる方法はいろいろ考えられるが,後ろに new という文字を表示することを基本に作ってみた.

新着情報
新着情報
新着情報
新着情報
新着情報

CSS で目立たせるサンプルコード

サンプルは A タグで作っているが,SPAN タグでも問題なく動く.

CSS の基本的な部分(共通で呼び出す)

.new::after {
  content: "new"; /* 文字 */
  font-size: 70%; /* 大きさ */
  font-weight: bold; /* 太字 */
  display: inline-block;
  position: relative; /* 位置 */
  top: -12px;
}

後ろに赤で上付き文字

新着情報

HTML

<a href="" class="new red">新着情報</a>

CSS

.red::after {
  color: red;
}

後ろに青の上付き文字で四角で囲う

新着情報

HTML

<a href="" class="new blue">新着情報</a>

CSS

.blue::after {
  margin: 2px;
  padding: 2px;
  color: blue;
  border: 1px solid blue;
  line-height: 1;
}

後ろにオレンジの枠で囲って上付きの白抜き文字

新着情報

HTML

<a href="" class="new orange">新着情報</a>

CSS

.orange::after {
  margin: 2px;
  padding: 2px;
  color: white; /* 白抜き文字 */
  background-color: orange; /* オレンジの背景 */
  border-radius: 30%; /* 角を少し丸く */
  border: 1px solid orange;
  line-height: 1;
}

後ろに赤で上付き文字で最初だけ点滅して残る

ページを更新しないと見えないと思うが,10 回点滅して,その後は残るパターン

新着情報

半分まで行ったところで見えなくして,また見える状態に戻ってくるという動作を 0.3s で 10 回行う.linear は一定の速度で行う,ということを意味している.

HTML

<a href="" class="new red blink">新着情報</a>

CSS

.blink::after {
  opacity: 1; /* 見える状態 */
  animation: flash 0.3s 10 linear;
}
@keyframes flash {
  50% { /* 動作の中心 */
    opacity: 0; /* 見えない状態 */
  }
}

後ろに赤で上付き文字で最初だけ点滅して消える

ページを更新しないと見えないと思うが,5 回点滅して,その後は消えるパターン

新着情報

最初見えない状態にしておいて,半分まで行ったところで見えるようにして,また見えない状態に戻ってくるという動作を 0.3s で 5 回行う.linear は一定の速度で行う,ということを意味している.

HTML

<a href="" class="new red blink2">新着情報</a>

CSS

.blink2::after {
  opacity: 0; /* 見えない状態 */
  animation: flash2 0.3s 5 linear;
}
@keyframes flash2 {
  50% { /* 動作の中心 */
    opacity: 1; /* 見える状態 */
  }
}

関連ページ

No tags for this post.
 

Contact

ご質問等ありましたら,お手数ですが弊社の個人情報保護方針をお読み頂いた上でフォームからお願い致します.

 
   
contact
Pagetop