文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 文字のデザイン > 文字の強調

htmlで文字を強調するCSSの生成

htmlの文書で文字を強調させり方法は多くあります。「太字」「大きさ」「下線」「斜体」「影付け」などの文字形状を変えて目立つようにする他に、「文字色」「背景色」「ラインマーカー」など色を変えることで目立つようにすることもできます。
ページのデザインや強調度合いで色々選択することが出来ます。

また、アニメーションを利用することで「点滅」「回転」や「ラインマーカーを引く」などのアニメーションを利用することで、さらに目立つ文字とすることが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー&ペーストで利用することが出来ます。

文字強調を試してみよう

文字強調の方法
文字の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
背景・罫線の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
文字を強調するCSSサンプル
使用したhtml
<div class="box">
  文字を<span class="str">強調する</span>CSSサンプル
</div>
生成したCSS
.str {
  display       : inline-block;        /* ブロック化              */
  font-weight   : bold;                /* 太字                    */
  font-size     : 150%;                /* 文字を大きくする        */
  border-bottom : 2px solid #0059b3;   /* 下線                    */
  color         : #ff0000;             /* 文字色                  */
}
ページTOP
広告
広告

色々な文字強調方法

罫線で文字を強調する

上下の罫線を付けることで文字を強調表示することが出来ます。

文字を下点線で強調
HTML
CSS
表示
文字を上ドット線で強調
HTML
CSS
表示
文字を上下二重線で強調
HTML
CSS
表示
文字を下線ブリンクで強調
HTML
CSS
表示
ページTOP

文字色や背景・マーカー色で文字を強調する

animetionを利用すると、ラインマーカーを引いたり、文字反転を動的に動かくこともできます。

文字をオレンジマーカーで強調
HTML
CSS
表示
文字をマーカー引くで強調
HTML
CSS
表示
文字を反転文字で強調
HTML
CSS
表示
文字を反転文字で強調
HTML
CSS
表示
ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン