【初心者でもわかる】text-shadowよりも大きな影文字を作る方法

#どうも7noteです。text-shadowは大きさを変えれないので他の方法で文字に大きな影をつける。

text-shadowでは作れないような大きなサイズのテキストの影を作る方法を解説していきます。
この記事ではtext-shadowは使いませんのでご注意ください。

作り方

index.html

<h2>NEWS<span>NEWS</span></h2>

style.css

h2 {
  position: relative;  /* 基準位置とする */
  text-align: center;  /* 文字を中央揃えにする */
}

h2 span {
  font-size: 2.4em;   /* フォントサイズを2.4倍に指定 */
  color: #444;        /* 文字色をグレーに指定 */
  opacity: .7;        /* 透明度を0.7に指定 */
  position: absolute; /* 相対位置にする */
  top: -50px;         /* 上方向に適度にずらす */
  left: 50%;          /* 左から50%の位置に指定 */
  transform: translateX(-50%);  /* 要素の半分だけ左に移動 */
  z-index: -1;        /* 背面に移動 */
}

解説

タイトルにもありますが、text-shadowで設定できるのは「縦位置・横位置・広がり・色」の4つだけです。
テキストに縁取りをする程度で1px太くするくらいならtext-shadowでできますが、今回のように**大きな文字を作るとなると、text-shadowでは難しい(不可能)**です。

なので今回は影用の文字を用意して、半透明にすることで影っぽさを表現しています。

まとめ

box-shadowなら大きさを指定できるのですが、text-shadowはなぜできないんでしょうね？謎ですね。いつか実装されればよいですが、それまではこの方法が良さそうです。

SEOの事を考えれば同じ文字が2回繰り返しているのはどう影響するかわからないので、一つ一つにクラス名をつけて擬似要素で影を作ってあげる方が無難かも。

index.html

<h2 class="news">NEWS</h2>

style.css

.news {
  position: relative;  /* 基準位置とする */
  text-align: center;  /* 文字を中央揃えにする */
}

.news::before {
  content: "NEWS";    /* 影にするテキストを指定 */
  font-size: 2.4em;   /* フォントサイズを2.4倍に指定 */
  color: #444;        /* 文字色をグレーに指定 */
  opacity: .7;        /* 透明度を0.7に指定 */
  position: absolute; /* 相対位置にする */
  top: -50px;         /* 上方向に適度にずらす */
  left: 50%;          /* 左から50%の位置に指定 */
  transform: translateX(-50%);  /* 要素の半分だけ左に移動 */
  z-index: -1;        /* 背面に移動 */
}

おそまつ！

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