CODING

[CSS] CSSで文字に影をつける方法

投稿日:


どうも、べ〜やんです。

今回は、CSSで文字に影やアウトラインをつける方法を紹介します。





text-shadow

text-shadowは文字に影をつけるプロパティです。

値は4つ使用します。

{text-shadow: 横の距離 縦の距離 ぼかし 色;}

横方向は正数で右方向に影を、マイナスの数で左方向に影をつける。

縦方向は正数で下方向に影を、マイナスの数で上方向に影をつける。

さらに( , )で区切る事で複数の影をつけることが出来ます。

{text-shadow: 横の距離 縦の距離 ぼかし 色,
横の距離 縦の距離 ぼかし 色,
横の距離 縦の距離 ぼかし 色,
横の距離 縦の距離 ぼかし 色;}


では、実際の使い方を見てみましょう。


使い方

今回使用したHTMLと基本のCSSはこちら↓

<p>テキスト</p>
p {
  font-size: 5em;
  font-weight: bold;
}

影をつける

例えば、text-shadow: 2px 2px 3px red;で右に2px、下に2pxの位置に3pxのぼかしの影をred色でつける指定になります。

p {
  font-size: 5em;
  font-weight: bold;
  text-shadow:2px 2px 3px red;
}

See the Pen ExxRBzq by beeyan (@orientado) on CodePen.



マイナスの値

横と縦にマイナスの数を指定してみる。

影の方向が変わります。

See the Pen QWWxXXx by beeyan (@orientado) on CodePen.



2つの影

影を複数指定してみます。

カンマ( , )で区切って複数指定します。

See the Pen KKKejOG by beeyan (@orientado) on CodePen.



アウトライン

四方向に影をつけることで、アウトライン(縁取り)ができます。

See the Pen abbKebb by beeyan (@orientado) on CodePen.



便利なツール

自分のイメージしたデザインになるには、どれくらいの数値にすればいいかわからないですよね。

そんな時便利なのがtext-shadowのジェネレーターです。

簡単にtext-shadowの数値とデザインとコードを確認できます。

おすすめはbad-companyさんのtext-shadowジェネレーターです。

おすすめはこちら↓

http://www.bad-company.jp/text-shadow/

bad-companyさんのtext-shadowジェネレーターは、画面左側でバーを動かすなど簡単な操作をすると画面右側のプレビューがリアルタイムで変わります。

影の複数指定もできますし、コードも自動生成されるのでコードをそのままコピペできて便利ですよ。


おわりに


今回は、CSSで文字に影やアウトラインをつける方法を紹介しました。

text-shadowは文字のデザインをガラッと変えられるので、ぜひ使いこなしていきましょう。



-CODING
-,

執筆者:


comment

関連記事

[CSS] CSSで縦書きにする方法

どうも、べ〜やんです。 今回は、CSSで簡単にテキストを縦書きにする方法を紹介します。 和風のデザインやサイドにメニューバーを配置する時などに便利です。 縦書きデザイン 和風テイストのデザインやサイド …

[CSS] 自動ナンバリングする方法

どうも、べ〜やんです。 今回は、counterを使って自動でナンバリングする方法を紹介します。 自動ナンバリング 見出しなどに番号をつけて表示する場合に、手動で入力すると面倒ですし途中で順番が変わった …

爆速!!Emmetを使う

どうも、べ〜やんです。 今回は、コーディングのスピードが抜群に速くできる方法のEmmetの使い方を紹介します。 Emmetとは HTMLやCSSを記述するときに全て手打ちしていると時間がかかってしまい …

CSSエフェクト紹介サイト!CSSFX

どうも、べ〜やんです。 今回は、CSSのおしゃれなエフェクトを紹介してくれるサイト『CSSFX』を紹介します。 CSSFXとは 引用元:CSSFX CSSFXはCSSのクリック、ホバー、ローディング時 …

[CSS] 3点リーダーの作り方

どうも、べ〜やんです。 今回は、3点リーダーの作り方を紹介します。 3点リーダーとは 3点リーダーって知ってますか? 文章が長くて表示仕切れない場合に、はみ出た部分を「…」とピリオド3つで …