2018年4月17日

デザイン

CSSのtext-shadowを徹底解説

目次

  1. はじめに
  2. text-shadowの使い方
  3. 複数のtext-shadowをかける
  4. text-shadowで文字にボーダーをつける
  5. text-shadowで文字にロングシャドウをつける
  6. おしゃれなtext-shadowの使い方選
  7. まとめ

はじめに

今日はCSSのtext-shadow の使い方とtext-shadow を使うことによってどういったことができるのかを徹底的に解説します。

最初のところでは以外と忘れがちな文法の解説をし、その後に具体的なユースケースをあげて、どういったことができるのかをご紹介していきます!

text-shadowの使い方

まずはtext-shadowの文法とその使い方をご紹介します。

p {
    text-shadow: 1px 2px 3px #000000;
}

解説

最初の2つの値は<水平方向の距離> <垂直方向の距離>の値を入れます。今回の例の場合は、<水平方向の距離>が1px<垂直方向の距離>が2pxに設定されているので、下記の図のような状態になります。

3つ目の値には <影のぼかし半径> を、4つ目の値には<影の色>を指定します。

複数のtext-shadowをかける

CSS3では、1つのテキストに複数のtext-shadowをかけることができます。

p {
    text-shadow: 1px 1px 1px black, 2px 2px 2px blue;
}

このようにカンマで繋ぐことによっていくつもシャドウを追加していくことができます。

text-shadowの文法は以上です!
そんなに難しくはないですが、値がたくさんあるため少し忘れがちですね。

text-shadowで文字にボーダーをつける

それでは、次にtext-shadowのいくつかのユースケースを見ていきましょう。
まず、現在のCSSに「文字にボーダーをつけるため」のプロパティはありません。

ですが、文字に枠線をつけることでアイキャッチの文字を目立たせたりできるので実際には欲しい機能でしょう。

実は完璧ではありませんが、text-shadowで文字にボーダーをつける、ということができます。

text-shadowで文字にボーダーをつける

See the Pen CSSのtext-shadowを徹底解説 by Ayaka Sasaki (@ayausaspirit) on CodePen.

こちらは4つのtext-shadowを組み合わせて、「TEST」という文字の周りにボーダーをつけています。

コードはこのようなものです。

See the Pen CSSのtext-shadowを徹底解説1 by Ayaka Sasaki (@ayausaspirit) on CodePen.

大事なのはこちらの部分なので、こちらを解説していきます。

text-shadow:
3px 3px 0px black,
3px -3px 0px black,
-3px 3px 0px black,
-3px -3px 0px black;

このボーダーは4つのシャドウでできています。全て、ボーダーのようにくっきりとさせるため、ぼかしは0に設定しています。

このままだとどのシャドウがどのような役割を果たしているのかわかりにくいので、1つ1つ色を変えて見てみましょう。

最初のシャドウを赤にし、他のシャドウを一回消してみます。
※文字が白だと見えにくいので、グレーに変更します。

See the Pen CSSのtext-shadowを徹底解説2 by Ayaka Sasaki (@ayausaspirit) on CodePen.

最初のシャドウ (3px 3px 0px red,) はテキストの右下に付いています。

See the Pen CSSのtext-shadowを徹底解説3 by Ayaka Sasaki (@ayausaspirit) on CodePen.

次のシャドウ (3px -3px 0px blue) はテキストの右上につけ、右全体が覆われるようにしています。

あとはだいたい同じような要領ですが、

See the Pen CSSのtext-shadowを徹底解説4 by Ayaka Sasaki (@ayausaspirit) on CodePen.

次のシャドウ (-3px 3px 0px green) をテキストの左下につけています。

See the Pen CSSのtext-shadowを徹底解説5 by Ayaka Sasaki (@ayausaspirit) on CodePen.

これで最後の左上の穴を埋めて完了です!

お気づきかもしれませんが、こちらの手法は角などで少し荒く映ります。


このように完璧ではないです。

なので、大きいサイズの文字で、かつボーダーを1px程度に抑えられ、角の荒さがあまり目立たない時に使ってください。

text-shadowで文字にボーダーをつける1

小さい文字にボーダーを使いたい時はどうしたらいいの?という時ですが、こちらはぼかしをうまく使い、text-shadowを重ね合わせることである程度再現することができます。

See the Pen CSSのtext-shadowを徹底解説6 by Ayaka Sasaki (@ayausaspirit) on CodePen.

こちらはぼかしをかけているので、やはり少しぼやっとした印象にはなりますが、先ほどのものよりもくっきりしていないため粗が目立ちにくく、複数の色のボーダーをつけたいときなどに使えます。

コードとしては、先ほどご説明したボーダーの作り方にぼかしを1pxや2px程度加えて作っていきます。

See the Pen CSSのtext-shadowを徹底解説6 by Ayaka Sasaki (@ayausaspirit) on CodePen.

くっきりとシャドウを出していくために、なんどもなんども繰り返しシャドウをかけると綺麗に仕上がることが多いです。

複数の色のボーダーの例

See the Pen CSSのtext-shadowを徹底解説6 by Ayaka Sasaki (@ayausaspirit) on CodePen.

このようにぼかしが少ないものには白、ぼかしが多いものにはピンクと分けるとボーダーが2つついてるかのようなエフェクトを生み出すことができます。

コード

複数の色のボーダーの例のコードはこちらです。

See the Pen CSSのtext-shadowを徹底解説6 by Ayaka Sasaki (@ayausaspirit) on CodePen.

以上、テキストシャドウでボーダーを作るというユースケースでした。

text-shadowで文字にロングシャドウをつける

テキストシャドウのもう1つのユースケースはロングシャドウです。
例えばこのようなものが作れます。

See the Pen CSSのtext-shadowを徹底解説7 by Ayaka Sasaki (@ayausaspirit) on CodePen.

コード

See the Pen CSSのtext-shadowを徹底解説7 by Ayaka Sasaki (@ayausaspirit) on CodePen.

こちらもコードが長く、とても難しそうに見えますが、法則性を理解してしまえばとても簡単です。

<影のぼかし>は必ず0に設定します。また、<影の色>はお好きな色を設定していただければ良いので、重要なのは<水平方向の距離> <垂直方向の距離>、こちらの2つだけです。

まずは、 1px 0 から始めます。そのあとに0 1pxというように<水平方向の距離> <垂直方向の距離>をひっくり返します。

See the Pen CSSのtext-shadowを徹底解説8 by Ayaka Sasaki (@ayausaspirit) on CodePen.

ちょっとわかりにくいですが、これで右下にシャドウができます。

あとは、このシャドウを右下に伸ばしていきます。
右に伸ばすために、<水平方向の距離> に +1, 下に伸ばすために <垂直方向の距離> に +1します。

先ほど 1px 0 からはじめたので、両方の値に1をプラスし、2px 1pxにします。そのあとに先ほどと同じように<水平方向の距離> <垂直方向の距離>をひっくり返し1px 2pxにします。

See the Pen CSSのtext-shadowを徹底解説8 by Ayaka Sasaki (@ayausaspirit) on CodePen.

これで少しづつシャドウが見えてきました。
あとは好きな長さになるまでこのルールを繰り返すだけです!

振り返り

ロングシャドウを作るためのステップをまとめました。

ステップ

  1. 1「水平方向の距離
    」、「垂直方向の距離」が「1px 0」 の状態からはじめる
  2. 2「水平方向の距離」 「垂直方向の距離」をひっくり返す
  3. 3ステップ1の「水平方向の距離」 「垂直方向の距離」に1を追加する
  4. 4ステップ2と3を好きな長さまで繰り返す

おしゃれなtext-shadowの使い方4選

この解説の例のみだと少しシンプルすぎて実際の業務に使うイメージがわかないかもしれません。

そんな方のために、codepenから今日ご紹介した技術を使ったおしゃれな例をいくつかピックアップしました。

個人的に、Mandy Michaelさんの作品がとても面白いので、彼女の作品を中心にご紹介します。

彼女の作品をすごいところは文字を全て編集できることです。

See the Pen CSS only 3D paper fold text effect by Mandy Michael (@mandymichael) on CodePen.

これとか、画像だと思うじゃないですか?
ぜひ、皆さんもぜひこのサンプルをクリックして編集してみてください!

こちらの2つのサンプルは編集できますが日本語だとフォントの情報がないので、少し見た目は変わってしまいます。英語だと良い感じに編集できますね!

See the Pen Lines and layered css text effects by Mandy Michael (@mandymichael) on CodePen.

See the Pen Spotty layered CSS text effects by Mandy Michael (@mandymichael) on CodePen.

こちらだけは編集できないようですが、このテキストシャドウを使い方は非常に勉強になりますね。

See the Pen “Draw In” Text Effect with Decovar by Mandy Michael (@mandymichael) on CodePen.

まとめ

以上、今回はCSSのtext-shadow の使い方とtext-shadow を使うことによってどういったことができるのかを徹底的に解説しました。

CSSじゃできないよ、と諦めていたことも実際はCSSでできたりするので、今回の記事で少しでも皆さんが今まで画像で作っていたものがCSSでできるようになれば幸いです。

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP