cman.jp > パーツ作成メニュー > 文字のデザイン > 縁取り文字・白抜き文字

縁取り文字・白抜き文字のCSS生成

CSSの「text-stroke」を利用すると文字の縁取り（アウトライン）が簡単にできますが、IEなど一部主要なブラウザで対応していません。
当ページでは、対応ブラウザが多い文字に影を付けCSSの「text-shadow」を利用して縁取り・白抜きを実現しています。

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

SVG（htmlによる画像化）を使用するとのように表示可能です。SVGによる文字の縁取り・白抜きについては以下を参照ください。
SVGで縁取り文字・白抜き文字の生成

文字を縁取りして見よう

文字に対して上下左右・斜めから影を当てることで縁取りしています。縁取りのぼかしも指定できますので是非お試しください。

縁取り

太さ
ぼかし

文字間の調整

縁取り太さに合わせて自動調整する

文字の色

他▶

透明度

縁取りの色

他▶

透明度

文字の縁取り

使用したhtml

<span class="outline">文字の縁取り</span>

生成したCSS

.outline {
  display        : inline-block;
  color          : #ffffff;            /* 文字の色 */
  font-size      : 36pt;               /* 文字のサイズ */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #003366,
      -2px  2px 1px #003366,
       2px -2px 1px #003366,
      -2px -2px 1px #003366,
       2px  0px 1px #003366,
       0px  2px 1px #003366,
      -2px  0px 1px #003366,
       0px -2px 1px #003366;        /* 文字の影 */
}

「text-shadow」の使い方は以下を参照ください。
text-shadow 「文字の影付け」の構文

ページTOP

色々な文字の影

浮き上がった文字

影の指定はカンマ区切りで複数指定することが出来ます。4方向に影を付けると浮き上がった文字を表現できます。

浮いた文字

<div class="sample1oya">
  <span class="sample1">浮いた文字</span>
</div>

<style type="text/css">
.sample1oya{
  background  : #ffffff;
  padding     : 20px;
}
.sample1{
  display     : inline-block;
  font-size   : 160%;
  font-weight : bold;
  color       : #ffffff;
  text-shadow:  2px  2px 10px #777 ,
               -2px  2px 10px #777 ,
                2px -2px 10px #777 ,
               -2px -2px 10px #777;
}
</style>

ページTOP

影をアニメーションで変化する

CSS3で追加された「animation」を使用すると、影の変化を付けることが出来ます。
以下のサンプルは、4方向に付けた影の濃さを変化させることで、文字が浮き上がって消える見た目となります。

アニメーションについては以下をご確認ください。
animation 「アニメーション」

影が変化する

<div class="sample2oya">
  <span class="sample2">影が変化する</span>
</div>

<style type="text/css">
.sample2oya{
  background : #fff;
  padding    : 20px;
}
.sample2{
  display    : inline-block;
  font-size  : 160%;
  font-weight: bold;
  color      : #fff;
  animation  : sample2Anime 4s linear infinite alternate;
}
@keyframes sample2Anime{
   0% { text-shadow:  2px  2px 10px #fff ,
                     -2px  2px 10px #fff ,
                      2px -2px 10px #fff ,
                     -2px -2px 10px #fff;}
 100% { text-shadow:  2px  2px 10px #777 ,
                     -2px  2px 10px #777 ,
                      2px -2px 10px #777 ,
                     -2px -2px 10px #777;}
}
</style>

ページTOP

SVGによる文字の縁取り

SVGを利用することで文字の縁取り・白抜きを行うことも出来ます。
SVGはHTML構文で画像を作成する機能となる為、文字が画像化され表示ます。

縁取り文字をSVGで作成する方法は以下をご確認ください。
SVGで縁取り文字・白抜き文字の生成

ページTOP

注意事項

フォントは使用するページ(html)により変わります。

ページTOP

生成できるホームページ・パーツ一覧
	文字のデザイン
	画像のデザイン
	ボタンのデザイン
	入力項目のデザイン
	テーブルのデザイン
	BOXのデザイン
	吹き出しのデザイン
	ページのデザイン
	図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
	何で無料なの？
	生成コードに利用制限はある？
	生成コードに保証はある？
	jQueryで生成できない？