【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; /* 見える状態 */
  }
}

関連記事

 

Contact

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

 
   
Chrome 拡張機能 PageSpeed Insights SEO WordPress Youtube お問い合わせフォーム アナリティクス アンケートフォーム サーチコンソール セミナー タグマネージャー データベース ヒアリング プラグイン ページ閲覧解析 マーケティング メール配信 リッチリザルト レスポンシブ対応 ログ解析 勉強会 商品企画 営業 営業力 営業支援システム 実装 検索順位 検索順位チェックツール 追跡 開発者ツール
contact
Pagetop