BFuture

こんばんわ、もんじです。

本日は、CSS を使って簡単に文字を縁取りする方法をご紹介致します。



縁取りが必要な時って、どんな場合だと思いますか？

私が遭遇したのは、画像の上に文字を配置する場合です。
よく見かけるのは、プロフィールページですね。
自分の写真の上に、文字でプロフィール紹介がされているサイトをよく見かけると思います。

でもこれってめちゃくちゃ読みにくいですよね？

こんな時に文字を見やすくする方法として、文字の縁取りをします。

論より証拠、こちらをご覧下さい。

縁取りなし	縁取りあり
見えますか？	見えますか？

いかがでしょうか？

とても見やすくなったと思いませんか？

画像の上に文字を載せる際には、縁取りは必須といえますね！

さて、それでは実際のやり方です。

スポンサードリンク


縁取りの方法は色々ありますが、一番お手軽に出来る、CSS の【text-shadow】を使用した方法をご紹介します。

まず、上でご紹介したサンプルのコードは以下となります。


上のサンプルコードの【text-shadow】部分を適用すれば、あっという間に縁取り完成です！


【text-shadow】には、スペース区切りで４つのパラメータがありますが、それぞれ･･･
【水平方向の影までの距離】、【垂直方向の影までの距離】、【境界のぼかしの長さ】、【影の色】 となっています。

【水平方向の影までの距離】
正の値を指定すると右側に影ができます。
負の値を指定すると左側に影ができます。
値の大きさで、影が開始する距離が決まります。

【垂直方向の影までの距離】
正の値を指定すると下側に影ができます。
負の値を指定すると上側に影ができます。
値の大きさで、影が開始する距離が決まります。

【境界のぼかしの長さ】
影の境界面はグラデーションが使用されますが、そのグラデーションの長さを指定します。

【影の色】
これは単純です。
影の色ですね。


サンプルコードを見ると一目瞭然だと思いますが、【text-shadow】を使った文字の縁取りは、上下左右に文字の影をつけることで、擬似的に縁取りしているように見せているんですね。

具体的にはこんな感じです。

影の位置	右下	左下	右上	左上
text-shadow の値	1px 1px 1px #000	-1px 1px 1px #000	1px -1px 1px #000	-1px -1px 1px #000
サンプル	B	B	B	B

これら全部の影を合わせると･･･
B
こうなるわけです。

アイデア商品ですね(笑)

仕組みはわかったと思いますので、あとは【text-shadow】の値をご自分で調整して、お好きな縁取りにして下さい！

めんどくさい方は、私のサンプルをそのままパクってください(笑)

でわでわ (´∀｀*)ﾉｼ