HTML de 縁取り文字

対応

 ↑上記のページタイトルの文字が縁どりで表示されない場合、お使いのブラウザでは、
  • CSSの影の機能が使えない
  • 機能はあっても影を複数作る機能に対応していない
  • または「ぼかさないくっきり影」に対応していない
…などの原因で表示できないようです。

縁取り文字の利用例


▲3DCG(4)のページ
縁取り文字の利用例です。
当サイトの3DCG(4)のページのタイトルに縁取りを使用しています。
このページでは中高生が見たときにテンションが上がるようにメタリックでかっこいい感じの文字に仕上げました。

縁取り文字の方法

13/10/25(金) 18:10:14

ホームページで文字を縁取りして表示するにはどうすればいいのだろうか。

***

※以下の内容は、Firefoxと、InternetExplorer、Apple Safariで動作確認済み
※一部のブラウザでは、残念ながら動作しません。
 (そのブラウザでは影のぼかし指定を0pxにすると影が消えてしまうため)


テキストを縁取りするには、CSSの「影」を使う。

通常、テキストに影を付ける場合、このようなCSSになる。

<div style="
color
	
	
:
	
orange;
text-shadow
	
:
	
1px 1px 0px #883;
">
影付き文字
</div>

これを縁取りにするには、このtext-shadowの設定をカンマで区切って、複数並べる。
下記のようにそれぞれ、上下左右、左上、右上、右下、左下の8方向にずらす設定になっている。
つまり、CSSのテキストの影には、カンマを使って複数の影を付ける機能があり、これを縁取りとして利用する。

<div style="
color
	
	
:
	
orange;
text-shadow
	
:
0px -1px 0px #883,
	
0px 1px 0px #883,
-1px 0px 0px #883,
	
1px 0px 0px #883,
-1px -1px 0px #883,
	
1px -1px 0px #883,
1px 1px 0px #883,
	
-1px 1px 0px #883;
">
縁取り文字
</div>



以上

縁取りの仕組み 図解

右下のみ
縁取り文字

右下と右
縁取り文字

右下と右と下
縁取り文字

右下と右と下と左下
縁取り文字

右下と右と下と左下と左
縁取り文字

右下と右と下と左下と左と左上
縁取り文字

右下と右と下と左下と左と左上と上
縁取り文字

右下と右と下と左下と左と左上と上と右上
縁取り文字

おまけ

縁取りと、影付き

総決算! 大売出し
※Windowsのみポップ体で表示

メタリック

作成過程1

ふちどりした同じ文字列を3つ用意します。
暗部(spanで作成、少し濃い色,影あり)
SOCERY

水平線部(divで作成、最も濃い色,影なし)
SOCERY

明部(divで作成、もっとも明るい色,影なし)
SOCERY

作成過程2

暗部 変更なし
SOCERY

水平線部 divにします。height:見た目で半分になる値にします(これをAとする), overflow:hidden
SOCERY


明部 divにします。 height:A-水平線の太さにします, overflow:hidden
SOCERY

作成過程3

水平線部と明部を暗部の子要素にします。つまりこんな構造となります。
<span>
SOCERY(暗部)
<div>SOCERY(水平線部)</div>
<div>SOCERY(明部)</div>
</span>

からくり:
のちに、暗部の上に水平線部が乗り、さらにその上に明部が乗ります。
水平線部は縦半分のサイズ、明部はそれよりもさらに数ドット小さいです。
そのため水平線部は線状に見えることになります。

子要素にした状態
SOCERY
SOCERY
SOCERY

作成過程4

暗部をposition:relative。
水平線部と明部をposition:absolute、top:0px; left:0px;にします。
これで完成です。
(ただし、灰色系以外で、たとえば黄金色でこれをやろうとするとチープになりがちです)
SOCERY
SOCERY
SOCERY


あそび例:

FINAL PHANTASY IV
FINAL PHANTASY IV
FINAL PHANTASY IV

~ まいど おおきに、千年紀の終わりやねん ~


わてはたこやないで、いかやで。

START
-> CONTINUE

COPY RIGHT (C) 2015 SKUEA ENIKs feat.KONAME
操作はできません。
ページ制作 homepage6047


ページの上端へ (もくじ開く)