1. >
  2. >

CSSで文字を装飾する8個の方法!太字にするだけでは物足りない

 

CSS スタイル

ホームページやブログの記事を作成するときに、文字を強調したい場合があります。一般的には太字にすることが多いと思いますが、太字だけでは寂しかったり物足りなかったりすることもあります。ですので、いろいろな装飾を試してみてはいかがでしょうか。

共通のHTML

HTML
このサイトのタイトルは<span class="mark">WEBをつくる</span>という名前です。

マーカー風にする (その1)

このサイトのタイトルはWEBをつくるという名前です。

CSS
.mark{
  background-color: #fff9a7;
}

マーカー風にする (その2)

このサイトのタイトルはWEBをつくるという名前です。

CSS
.mark{
  background: -webkit-linear-gradient(transparent 60%, #ffff66 60%);
  background: linear-gradient(transparent 60%, #ffff66 60%);
}

マーカー風にする (その3)

このサイトのタイトルはWEBをつくるという名前です。

CSS
.mark{
  background: -weblit-linear-gradient(-100deg, rgba(255, 255, 255, 0), yellow 85%, rgba(255, 255, 255, 0));
  background: linear-gradient(-100deg, rgba(255, 255, 255, 0), yellow 85%, rgba(255, 255, 255, 0));
}

下線を引く

このサイトのタイトルはWEBをつくるという名前です。

CSS
.mark{
   font-weight: bold;
   text-shadow: 2px 8px 6px rgba(0,0,0,0.2),	0px -5px 35px rgba(255,255,255,0.3);
   padding-bottom: 2px;
}

文字を虹色にする

このサイトのタイトルはWEBをつくるという名前です。

CSS
.mark{
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(transparent 60%, #ffff66 60%);
  background: -webkit-linear-gradient(left, #DE487A, #FFDB4B, #2BD02B, #0095F9, #8E55FF);
}

テキストに合わせて背景を切り抜くという手法です。ChromeなどのWebkit系ブラウザしか有効になりません。Webkit系ブラウザ以外はマーカー風になります。

とりあえず斜めにする

このサイトのタイトルはWEBをつくるという名前です。

CSS
.mark{
   display: inline-block;
   -webkit-transform: rotate(-7deg);
   transform: rotate(-7deg);
   margin: 0 2px;
}

フォントの色と大きさを変える

このサイトのタイトルはWEBをつくるという名前です。

CSS
.mark{
   color: #f00;
   font-size: 120%;
}

CSSアニメーションで色を変える

このサイトのタイトルはWEBをつくるという名前です。

CSS
@-webkit-keyframes blink {
   0% {color:#03BC14;} 50% {color:#1577EE;} 100% {color:#03BC14;}
}
@keyframes blink {
   0% {color:#03BC14;} 50% {color:#1577EE;} 100% {color:#03BC14;}
}
.mark{
   -webkit-animation: blink 3s infinite;
   animation: blink 3s infinite;
}

いろいろと探してみましたが、あまりいい方法はないですね…。

クラウドソーシング「ランサーズ」
  • B!