ウェブデザインにおいて、サイト訪問者に効果的に訴求するためには、視覚的な要素の調整が欠かせません。ウェブサイトの全体的な美しさや読みやすさに大きく影響する要素のひとつが、テキストのスタイルです。
テキストのスタイリングは、単にフォントの種類やフォントの色を選ぶだけでは終わりません。たとえば、境界線を利用して印象的な文字にするなど、さまざまなCSSプロパティを組み合わせて好みの効果を実現することができます。
この記事では、CSSを使用して文字を縁取りする方法をご紹介します。
ウェブテキストを理解する
ウェブテキストとは、ウェブページに表示されるテキストのことです。フォントは、ウェブ上でテキストを表示する上で重要な役割を果たします。フォントは基本的にベクターベースのグラフィックであるため、ピクセルデータによる制限がなく、鮮明さを維持したままさまざまなサイズでレンダリングすることができます。
フォントがベクターベースのグラフィックであることの魅力のひとつとして、個々の文字の周囲にストロークをつけ、縁取りすることができます。Adobe Illustratorのようなベクタープログラムで図形の周りにストロークを描くことができるように、CSSで同じ効果を実現可能です。
CSSで文字を縁取りする2つの方法
CSSを使ってテキストを縁取りするには、主に2つの方法があります。それぞれの特徴と使い方を探ってみましょう。
1. text-strokeプロパティを使う
text-strokeを使って、テキストを縁取りすることができます。このプロパティでは、境界線のwidthとcolorを指定可能です。WebKitベースのブラウザでのみサポートされており、使用するにはプレフィックスとして-webkit-を付ける必要があります。
例えば、h1の見出しテキスト「Welcome to Kinsta（Kinstaへようこそ）」にストロークを追加してみましょう。
<h1>Welcome to Kinsta</h1>このように、text-strokeプロパティは、-webkit-プレフィックスと一緒に使用します。
h1 {
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: black;
}-webkit-text-stroke-widthと-webkit-text-stroke-colorはそれぞれ、ストロークのwidthとcolorを指定します。ここではwidthを3pxに、colorをblackに設定しています。
上記の2つのプロパティを、 colorとwidthを同時に指定する略記プロパティである-webkit-text-strokeとして組み合わせることもできます。
h1 {
-webkit-text-stroke: 3px black;
}これによって同じ結果が得られます。
text-strokeプロパティのサポート
caniuseによると、Internet Explorerブラウザでは、text-strokeプロパティはサポートされていません。
text-strokeプロパティを使用してテキストの境界線を設定し、ユーザーが未サポートのブラウザを使用すると、その色が背景色と一致する場合にはテキストが見えなくなります。
これを解決するには、-webkit-text-fill-colorプロパティを使ってテキストにcolorを設定し、colorプロパティでフォールバックの色を設定します。
h1 {
color: black;
-webkit-text-fill-color: white; /* （順序に関係なく）色を上書きする */
-webkit-text-stroke: 3px black;
}ブラウザがtext-strokeプロパティをサポートしていない場合、colorプロパティで設定された色が使用されます。
スタイルを追加する前に、ブラウザが-webkit-text-strokeプロパティをサポートしていることを確認することもできます。
@supports (-webkit-text-stroke: 3px black) {
h1 {
-webkit-text-fill-color: white;
-webkit-text-stroke: 3px black;
}
}2. text-shadowプロパティを使う
サポートの違いの処理が面倒であれば、text-shadowプロパティを使用できます。このプロパティは、一般的なブラウザの最新バージョンすべてに対応しています。
text-shadowプロパティでは、右上、左上、左下、右下に4つの影を適用します。
h1 {
color: #fff;
text-shadow:
3px 3px 0 #000,
-3px 3px 0 #000,
-3px -3px 0 #000,
3px -3px 0 #000;
}この例では、4つの影を使ってテキストの縁取り効果を実現しています。各影にはテキストから3ピクセルのオフセットがあり、色は黒（#000）に設定されています。結果として得られる効果は、最初の方法で生成したものと似ています。
テキストの四隅に影をつけることで、輪郭がはっきりします。ピクセルオフセット、影の色、テキストの色などは、デザインの好みに合わせて自由に調整してください。
この方法では、テキストに合わせて水平方向と垂直方向の影を調整できるという利点があります。また、少しぼかしを加えることもできます。
h1 {
color: #fff;
text-shadow:
3px 3px 2px #000,
-3px 3px 2px #000,
-3px -3px 0 #000,
3px -3px 0 #000;
}
テキストシャドウを使用する際の制限事項として、影の長さが1ピクセルを超えると断続的なストロークが発生する場合があります（text-strokeと比較するとわかります）。
text-strokeとtext-shadowプロパティの組み合わせ
両プロパティを組み合わせることで、テキストの縁取りと、text-shadowプロパティの微妙なぼかしや効果を組み合わせ、美しい装飾を施すことができます。この組み合わせにより、テキストの外観を向上させる多用途かつ柔軟な調整が可能になります。
h1 {
-webkit-text-stroke: 1px black;
color: white;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
また、各角に個別に影をつける代わりに、以下のように全体に適用することもできます。
#heading-1{
color: white;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 1px 4px #23430C;
}
#heading-2{
color: white;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 2px 4px red;
}
#heading-3{
color: #333;
-webkit-text-stroke: 1px #282828;
text-shadow: 0px 4px 4px #282828;
}
まとめ
text-strokeとtext-shadowの両プロパティは、文字を縁取りするのに有用です。どちらを選択するかは、ブラウザの互換性、必要な効果、デザインに求められる制御レベルによって決まります。
さまざまなテクニックを試し、魅力的かつ視覚に訴えるテキストの縁取り方法を採用しましょう。そして、プロジェクトの公開時にはKinstaのホスティングをご検討ください。堅牢なオンラインプレゼンスの確立をサポートします。
この記事にない他の方法をご存じですか？コメント欄でお聞かせください。
コメントを残す