text-shadowで文字装飾

サイト閲覧ユーザー数ががパソコンからスマホにあたり…。以前は目立たせるためにも画像で作っていた見出しやタイトルをコーディングで作ることが多くなってきました。理由としては、画像を表示させるスピードよりも、文字の方が早いためサイト評価が高くなることや、スマホ・PCサイトと共通した画像を使う場合、PCでは読めるサイズで作ってもスマホでは読めない部分が出てきてしまうためです。
画像ではなく文章でタイトルが打ってあれば、改行位置や文字の折り返し市が変わったとしても読んでもらうことが可能です。読んでもらうことを目的としていますが、装飾がないと重要なポイントを目立たせることができません。
そこで、今回はいろいろやってみた、文字の装飾です。

これを見本に、文字の見せ方をいろいろカスタマイズしてみます。フォントサイズは25pxです。

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

同じフォントサイズの明朝です。止め・ハネ・線の強弱が出るので繊細な印象になります。
強弱が出るということは…文字サイズが小さくなった場合、読みにくくなる時もあります。
10pxの明朝は、明朝感が…

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
フォントサイズを最小の10pxにしています。
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
フォントサイズを最小の10pxにしています。

太文字にする指示を追加しました。綺麗に見えているでしょうか?
太文字にしたら書体が整って見えなくなるということが…日本語フォントの場合はよくあります。アルファベットに比べ文字数が多く、また画数も多いため、縦横斜めをすべて同じように太くすると文字が認識できなくなってしまうものもあります。そのため、1角ずつ線の太さが異なったりして、バランスが悪くなってしまうことも…。

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

文字に影をつけます。影を付ける指示は「text-shadow」を使います。「text-shadow:左右 上下 ぼかし具合 色;」という形で指示が出せます。
左右は元の場所を起点として、右がプラス・左がマイナス。
上下は元の場所を起点として、下がプラス・上がマイナス。
ぼかしは0~のピクセルで指定。色はコードでもRGB値でも入力可能です。濃度の調整をすることも多いので、個人的にはRGBAで入力していることが多いです。

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

上記のtext-shadowをふまえて………。
弊社のデザイナーさんと打ち合わせの際、文字の装飾がどこまでコーディングで表現できるかという話しになりました。上にあるような作業は頻繁に使うので実装しているものもあるのですが、やれるかどうか試してみよう!ということで、text-shadowを駆使して使えそうなものから使えなさそうなものまで、チャレンジした記録です!

囲い文字にチャレンジ。 1pxずつ上下左右にぼかしのない赤の影(ぼけてないので線ですが…)を実装

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

線を太くできないかということで…1pxのズレを5pxに変更したら…とんでもないことに!

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

ぼかしながら使えば、不安を煽るような文字効果としては使えなくも…ないかも?

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

囲えるなら、文字の色を背景色にして抜き文字もできるだろ!とチャレンジ。黒背景の方はいい感じに見えますが、右側は危うい気がします…

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

影は何枚でもつけることが可能で、それぞれ色やずれ方を指定できます

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

影の位置、ぼかし方、背景の色、フォントの色などを組み合わせていけば、いろいろな文字装飾ができそうです。(綺麗に読ませることができるかは別として)画像に頼らずコーディングでタイトルを作っていくと単調になりやすいので、チャレンジをして使えそうなデザインを増やしていきたいです!