iPentec.com / Doc / CSS

1 概要
2 方法:text-shadow プロパティを利用する方法
- 2.1 コード:8方向
- 2.2 実行結果
- 2.3 コード:4方向
- 2.4 実行結果
3 方法:-webkit-text-stroke-width プロパティを利用する方法
- 3.1 コード
- 3.2 解説
- 3.3 実行結果
4 方法:SVGで文字列を描画する方法
- 4.1 コード
- 4.2 解説
- 4.3 実行結果

縁取り文字を表示する - CSS

HTMLページに縁取り文字を表示するコードを紹介します。

概要

HTMLのページ内に縁取りされた文字を表示したいことがあります。この記事では、縁取りされた文字を表示するコードを紹介します。

方法:text-shadow プロパティを利用する方法

text-shadowプロパティを利用する方法です。ぼかしのない影を元の文字列から各方向にずらして描画することで、縁取りがされている表現を実現します。

メモ

古いWebブラウザでも表示できる方式です。

コード:8方向

8方向にスライドさせて描画する例です。

BorderLetterTextShadow.css

.BorderShadowLetterStyle {
  margin: 0;
  font-size: 4rem;
  font-weight: 700;
  color: #ffbfdc;
  text-shadow: 0 2px 0 #c30058, 2px 0 0 #c30058, 0 -2px 0 #c30058, -2px 0 0 #c30058,2px 2px 0 #c30058, -2px 2px 0 #c30058, -2px -2px 0 #c30058, 2px -2px 0 #c30058;
}

BorderLetterTextShadow.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="BorderLetterTextShadow.css"/>
</head>
<body>
  <h1>縁取り文字のデモ</h1>
  <p class="BorderShadowLetterStyle">縁取り文字です</p>
</body>
</html>

実行結果

上記のHTMLページをWebブラウザで表示した結果が下図です。

拡大すると、角の部分がややギザギザになっています。これは、元の文字と同じ大きさの文字を8方向にスライドさせているため、角の部分は完全に縁取りされないことが原因です。

コード:4方向

4方向にスライドさせて描画する例です。

BorderLetterTextShadow.css

.BorderShadowLetterStyle {
  margin: 0;
  font-size: 4rem;
  font-weight: 700;
  color: #ffbfdc;
  text-shadow: 2px 2px 0 #c30058, -2px 2px 0 #c30058, -2px -2px 0 #c30058, 2px -2px 0 #c30058;
}

BorderLetterTextShadow.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="BorderLetterTextShadow.css"/>
</head>
<body>
  <h1>縁取り文字のデモ</h1>
  <p class="BorderShadowLetterStyle">縁取り文字です</p>
</body>
</html>

実行結果

上記のHTMLページをWebブラウザで表示した結果が下図です。

拡大すると、角の部分は途切れています。これは、元の文字と同じ大きさの文字を斜め方向の4方向にスライドさせているため、角の部分は縁取りにならないことが原因です。

方法:-webkit-text-stroke-width プロパティを利用する方法

先の方法では、縁取りの文字は描画できましたが、角の部分で途切れたり、ギザギザになってしまう問題があります。

webkit-text-stroke-width プロパティを利用すると上記の問題を解消した縁取り文字列が描画できます。

メモ

2024年のWebブラウザで実装する場合においては、最も一般的な方法です。古いWebブラウザでは表示できないものもあります。

コード

BorderLetterTextStroke.css

.BorderLetterStyleTextStroke {
  margin: 0;
  font-size: 4rem;
  font-weight: 700;
  color: #afffee;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #0094ff;

BorderLetterTextStroke.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="BorderLetter.css"/>
</head>
<body>
  <h1>縁取り文字のデモ</h1>
  <p class="BorderLetterStyleTextStroke">縁取り文字です</p>
</body>
</html>

解説

以下のCSSのプロパティにより文字に2pxの縁取りを描画しています。縁取りの色を、-webkit-text-stroke-color で指定しています。

  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #0094ff;

実行結果

上記のHTMLページをWebブラウザで表示した結果が下図です。

拡大した表示です。角の部分も含めてきれいな縁取りの文字が描画できています。

方法:SVGで文字列を描画する方法

SVGを利用して内側の文字列と外側の文字列を2つ描画して縁取りの文字列を描画する方法です。

コード

BorderLetterSvg.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <h1>SVGによる縁取り文字のデモ</h1>
    
  <svg xmlns="http://www.w3.org/2000/svg" width="600" height="80" viewBox="0 0 600 80" preserveAspectRatio="xMinYMid">
    <text x="12" y="50%" dy="0.4em" dominant-baseline="alphabetic" letter-spacing="11" font-weight="bold" font-size="60" font-family="Meiryo" fill="#0b7e51" stroke-width="8" stroke="#0b7e51" stroke-linejoin="round">縁取り文字です</text>
    <text x="12" y="50%" dy="0.4em" dominant-baseline="alphabetic" letter-spacing="11" font-weight="bold" font-size="60" font-family="Meiryo" fill="#96df9c" stroke-width="0">縁取り文字です</text>
  </svg>

</body>
</html>

解説

以下のコードでsvgのボックスを定義します。

  <svg xmlns="http://www.w3.org/2000/svg" width="600" height="80" viewBox="0 0 600 80" preserveAspectRatio="xMinYMid">
  </svg>

textタグを2つ記述し文字列を2つ描画します。一方は stroke-width="8" を設定し外側の縁取り文字列を描画します。もう一方は、stroke-width="0" を設定し内側の文字列を描画します。

  <text x="12" y="50%" dy="0.4em" dominant-baseline="alphabetic" letter-spacing="11" font-weight="bold" font-size="60" font-family="Meiryo" fill="#0b7e51" stroke-width="8" stroke="#0b7e51" stroke-linejoin="round">縁取り文字です</text>
  <text x="12" y="50%" dy="0.4em" dominant-baseline="alphabetic" letter-spacing="11" font-weight="bold" font-size="60" font-family="Meiryo" fill="#96df9c" stroke-width="0">縁取り文字です</text>

実行結果

上記のHTMLページをWebブラウザで表示した結果が下図です。

拡大した表示です。角の部分も含めてきれいな縁取りの文字が描画できています。縁取りの角の部分が丸みを帯びている描画結果になります。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次

縁取り文字を表示する - CSS

概要

方法:text-shadow プロパティを利用する方法

コード:8方向

実行結果

コード:4方向

実行結果

方法:-webkit-text-stroke-width プロパティを利用する方法

コード

解説

実行結果

方法:SVGで文字列を描画する方法

コード

解説

実行結果

関連するページ