テキストを強調させるCSSコード

更新日 : 2021.04.04

Share
5
0
7
テキストを強調させる方法として太文字や下線text-decoration: underlineはよく使われますが、実は他にも強調させるコードがたくさんあります。今回は11パターン紹介しますのでデザインに合わせてご利用ください。

テキストを強調させるCSSコード

強調したいテキストにマークをつける事ができます。

.emphasis01 {
  text-emphasis: sesame #e5bb09;
  -webkit-text-emphasis: sesame #e5bb09;
}

強調したいテキストにマークをつける事ができます。

.emphasis02 {
  text-emphasis: dot #e5bb09;
  -webkit-text-emphasis: dot #e5bb09;
}

強調したいテキストにマークをつける事ができます。

.emphasis03 {
  text-emphasis: circle #e5bb09;
  -webkit-text-emphasis: circle #e5bb09;
}

強調したいテキストにマークをつける事ができます。

.emphasis04 {
  text-emphasis: open circle #e5bb09;
  -webkit-text-emphasis: open circle #e5bb09;
}

強調したいテキストにマークをつける事ができます。

.emphasis05 {
  text-emphasis: double-circle #e5bb09;
  -webkit-text-emphasis: double-circle #e5bb09;
}

強調したいテキストにマークをつける事ができます。

.emphasis06 {
  text-emphasis: triangle #e5bb09;
  -webkit-text-emphasis: triangle #e5bb09;
}

CSSだけで波線を引くことができるんです。

.decoration01 {
  text-decoration: #e5bb09 wavy underline;
  -webkit-text-decoration: #e5bb09 wavy underline;
}

CSSだけで点線を引くことができるんです。

.decoration02 {
  text-decoration: #e5bb09 dotted underline;
  -webkit-text-decoration: #e5bb09 dotted underline;
}

CSSだけで破線を引くことができるんです。

.decoration03 {
  text-decoration: #e5bb09 dashed underline overline;
  -webkit-text-decoration: #e5bb09 dashed underline overline;
}

蛍光ペンのような下線を引くことができます。

.pen {
  background: linear-gradient(transparent 70%, #e5bb09 70%);
}

Design is fun.
Design is difficult.

.bg {
  box-decoration-break: clone;	
  -webkit-box-decoration-break: clone;
  display: inline;
  padding: .3em;
  line-height: 2.5;
  background-color: #e5bb09;
}

ブラウザ対応

text-emphasis-stylingCan I use…

text-decoration-stylingCan I use…

box-decoration-breakCan I use…

人気記事

  1. 【保存版】CSSのみのボタンデザイン!私が現場で使ってきたボタンアイデア30選の画像

    【保存版】CSSのみのボタンデザイン – 私が現場で使ってきたボタンアイデア30選

  2. 現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介しますの画像

    現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介します

  3. Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

    Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

  4. CSS見出しデザイン21スタイル - シンプルな見出しデザインをご紹介の画像

    CSS見出しデザイン21選。現場ですぐ使える見出しデザインをご紹介

  5. ボタンやテキストリンク、hoverスタイルをCSSのみで19パターン実装するの画像

    CSSのみで実装するボタン、テキストリンク、hoverスタイル19選