文字に縁取りするノ Q&A

HTML のタグで文字に縁取りするには？

最もおすすめの方法は、縁取り文字の画像を生成して、<img> タグでリンクすることです。このとき、画像を表示できないウェブブラウザーや目が見えない方向けに、代替テキストを alt で指定するのが好ましいです。

例: <img src="画像のURL" alt="テキスト">

縁取り文字画像は、文字に縁取りするノで簡単に作成できます。

この方法は、IE 10 より前のバージョンでは縁取りが表示されないので、あまり、おすすめできませんが、IE10、Firefox、Chrome、Safari で表示できれば OK という方には満足いく結果が得られます。

<h4 style="color:green;
text-shadow:
-1px -1px 0 red,
1px -1px 0 red,
-1px 1px 0 red,
1px 1px 0 red;">文字に縁取りするノ</h4>

※ ここでは、簡単のために、タグ内に style を指定しています。

↓この方法だと、IE 10 より前のバージョンなどでは、縁取り文字になりません。

この方法は、IE や、Firefox で縁取りが表示できないので、全くおすすめできませんが、Chrome と Safari で表示できれば OK という特殊な方向けです。

<h4 style="color:green;
-webkit-text-fill-color:green;
-webkit-text-stroke-width:1px;
-webkit-text-stroke-color:red;">文字に縁取りするノ</h4>

※ ここでは、簡単のために、タグ内に style を指定しています。

↓この方法だと、Chrome, Safari 系でしか縁取り文字になりません。

文字をずらして表示すれば、実現できそうですが、全くおすすめできない方法なので、あえて載せません。そのような方法を使うと、Google などの検索エンジンからスパム※と見なされて、検索の表示順位が下がってしまう危険性があるためです。

※ ここでいうスパムとは、検索順位を不当に上げるための仕組みのこと。意味もなく同じ言葉を羅列する行為は、スパムと見なされる場合がある。

↓.

ご意見・ご要望などはフォームメールから送信してください。
更新情報は、ブログでも配信してます。