人気記事

  1. JSでiOSにも配慮した背景固定なスクロール対応のモーダルウィンドウ

  2. CSSで游ゴシックやメイリオなどのfont-familyを指定するときのベストプラクティス

  3. CSSで簡単に縁取りされたアウトライン文字を作る

  4. IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ

  5. JSでtouchstartとclickイベントを2回発生させないようにしつつ同時に指定する

  6. CSSでスクロールバー非表示とJSでスクロールバーのデザインをカスタマイズする

  7. 22個のサンプルから学ぶCSSのnth-child()を使った番目を指定するテクニック

  8. SVGでtext要素を上下左右中央寄せする

  9. ドラッグ＆ドロップで要素を並び替えることができるSortable.js

  10. .matchMedia()でJSでもメディアクエリを使って条件分岐する

CSSで簡単に縁取りされたアウトライン文字を作る

CSSでおしゃれな縁取り文字を作る方法です。モダンブラウザのみからレガシーブラウザにも対応したものまで紹介します。

text-stroke


<div class="text">縁取り</div>


.text {
  color: #fff;
  text-stroke: 1px #000;
  -webkit-text-stroke: 1px #000;
}

非常に便利ですが、 IE では対応していません。また、線は文字の 内側 に引かれるので太くすると文字が潰れます。

text-shadow


<div class="text">縁取り</div>


.text {
  color: #fff;
  text-shadow: 1px 1px 0 #000,
               -1px 1px 0 #000,
               1px -1px 0 #000,
               -1px -1px 0 #000;
}

text-shadow を使って上下左右に 1px ずつ影を作る方法です。角に直角が多い英語フォントだと綺麗に表示されると思いますが、日本語だと角のつなぎ目が気になりますね。

SVG

CSS…ではありませんが、HTML内に記述できて、しかも IEにも対応 しているので紹介します。


<svg viewBox="0 0 200 100">
  <text x="0" y="50%">縁取り</text>
</svg>


svg {
  display: inline-block;
  width: 250px;
  height: auto;
  overflow: visible;
}
text {
  fill: #fff;
  stroke: #000;
  stroke-width: 1;
  stroke-linejoin: round;
}

SVGの fill と stroke を使えば線を引くことができます。線は文字の 内側 に引かれます。


<svg viewBox="0 0 200 100">
  <text class="background" x="0" y="50%">縁取り</text>
  <text class="foreground" x="0" y="50%">縁取り</text>
</svg>


svg {
  display: inline-block;
  width: 250px;
  height: auto;
  overflow: visible;
}
.foreground {
  fill: #fff;
}
.background {
  stroke: #000;
  stroke-width: 8;
  stroke-linejoin: round;
}

線を 外側 に引きたいときはこのように2つの text 要素を重ねれば表現できます。

CSS本執筆しました！！！