ネオン風の文字を作る方法（無料フォントサイトも紹介）

どうも7noteです。ネオン風の文字作成をする方法。

フォントの選び方から、雰囲気作りができるCSSまでまるっと紹介。

見本

最高にオシャレなサイトが作れそう♪

ネオン文字の作り方

style.css

body {
  background: #000; /* 夜っぽく背景を黒にする。 */
}

.neon {
  color: #FFF;     /* 文字色を白に指定 */
  font-size: 50px; /* 適度な文字サイズを指定 */
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; /* 薄い紫色の光を再現 */
  font-family: Beon; /* 読み込んだり、ダウンロードしたフォントを使う */
}

フォント選び

以下のサイトから好きなネオンフォントを選ぶことができます。
私が今回使用したのは「Beon」というフォントです。大文字英語のみ対応。

https://fontmeme.com/jfont/neon-fonts/

解説

まぁネオンとうくらいなので、まずは背景を真っ黒にしてしまいましょう。
bodyタグに直接background: #000;を書いていますが、全体を覆うような要素を用意しておいて、それに背景黒を入れてもいいと思います。

次に文字は白色、box-shadowでネオンのぼんやりした光を再現します。
最後にダウンロード、もしくは読み込んだフォントをfont-familyで指定。
文字サイズは好みや用途に合わせて適当な大きさを指定してください。

まとめ

無料のフリーフォントを使うので、思っている通りになるのは難しいかもしれません。
でもそれっぽい雰囲気は作れると思います。
そして、使用する際はしっかりとダウンロード元の利用規約などを読んでから使用しましょう！

【フォントの些事】第1回 インストールする前に確認したいフリーフォントの基礎知識
https://www.granfairs.com/blog/staff/webfont-by-selfhosting

おまけ

アニメーションを使えばチカチカさせることも可能。
結構やっている方多かったので「CSS 点滅」などで検索すれば好みのアニメーションを真似してつけることができると思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ