CSSを詳しく解説text-shadow（テキストシャドウ）の記述方法
今回は、text-shadow（テキストシャドウ）の記述方法につきまして、サンプルコードを記載しながら詳しく解説してみようと思います。
ページ作成初心者の方ですと、「袋文字（文字自体が縁取りされている文字）って、CSSで指定できるの？」や、文字自体のデザイン表現が複雑な場合、「画像で作成するんでしょ！」と思われている方も多いことと思います。しかし、複雑にデザインされた見出しなどは、hタグで、マークアップされることが多いことから、SEOを踏まえて考えてみますと、できるだけテキストで記述をおこない、CSSでスタイルすることが望ましいように思います。
という事で、それでは今回はッ、
- ・text-shadow（テキストシャドウ）で袋文字や立体的に
- ・一般的なテキストに影をつける
- ・立体感のある文字の表現
- ・text-shadowで文字を発光！
- ・色や文字サイズによる表現方法
- ・1文字目や1行目の装飾
上記について記載していこうと思います…。
text-shadow（テキストシャドウ）で袋文字や立体的に
CSS3を利用すると、text-shadowなどのプロパティや色指定で透明度が指定可能になります。これは、文字自体を綺麗に見せることを可能にする機能になります。1文字目や1行目を指定できる疑似要素なども併用すると、変化にとんだテキストの装飾をおこなうことが可能です。
text-shadowで袋文字を実現
はじめに袋文字とは、テキスト文字自体をテキストの色とは異なる配色で縁取ることをいいます。
text-shadowで、ぼかす量を0にして、上下左右方向に配置すると、影だけでなく袋文字を実現することができます。
アルファ値や回転などの併用
文字色にもアルファ値を指定したり、回転をおこなうことができます。文字を装飾要素として利用することも可能です。
一般的なテキストに影をつける
テキストに影をつけるtext-shadowプロパティは、影の色、右方向および下方向へずらす距離、影をぼかす範囲を指定することができます。
右方向へずらす距離や下方向へずらす距離を指定する場所でマイナスの値を指定し、左方向、上方向へずらすことも可能です。
■文字に影やぼかしを加える
| h2.shadow01{ |
| margin-bottom:2em; |
| text-shadow: #2c2727 10px 20px 5px; |
| } |
※色を指定しない場合の影は、ブラウザに依存します。また、影を付けない状態にする場合には、noneを指定します。
text-shadowプロパティで、右方向および下方向へずらす距離の値に0を指定し、影の色と影をぼかす距離を指定すると、いわゆるグローの表現を実現することができます。
CSS3では、色に透明度も指定できますので、影の色に透明度を指定すると、背景画像になじませるように調整することも可能です。
■グロー（ぼんやり発光しているように見える）効果
| h2.shadow02{ |
| margin-bottom:2em; |
| text-shadow: #4c5482 0 0 20px; |
| } |
text-shadowプロパティで、ぼかしのない影を上下左右に1pxずらすように指定すると、袋文字を表現できます。このとき、上右、上左、と斜め方向にもずらすことで、より囲まれた感じが強調される袋文字となります。
逆に、上・右・下・左とずらした場合、角が落ちた感じの囲みとなります。また、ブラウザにより、多少線の濃淡に違いが出てしまいますので、実際に確認しながら利用することをおすすめします。
■斜め方向に影を指定した袋文字
| h2.shadow03{ |
| color:#000; |
| text-shadow:#F00 1px 1px 0,#F00 1px -1px 0,#F00 -1px 1px 0,#F00 -1px -1px 0; |
| } |
■上下左右に影を指定した袋文字
| h2.shadow03{ |
| color:#000; |
| text-shadow: #F00 1px 0 0,#F00 0 1px 0,#F00 -1px 0 0,#F00 0 -1px 0; |
| } |
立体感のある文字の表現
test-shadowを利用して、べベルやエンボスのような立体感のある文字を表現することも可能です。
べベルの表現を実現するためには、上左方向に袋文字と同じ要領で1pxの明るい色を指定、そして右下方向に影を付けます。右下方向の影は文字色と同じ色か、少し明るい色を指定します。
■べベル（立体的に角を切り取る）
| h2.shadow04{ |
| color:#000; |
| text-shadow: #FFF -1px -1px -1px,#333 1px 1px 2px; |
| } |
エンボスの表現は、基本的にべベルと逆の指定をおこないます。上左方向に影を付け、右下方向にぼかしのない1pxの明るい色を指定します。
べベルの場合は、ぼかす範囲を少し広めにした方が立体感も出て見やすくなります。一方、エンボスを実現する場合は、ぼかす範囲は1pxにした方がそれらしく見えるようになります。
■エンボス（浮き彫り）
| h2.shadow05{ |
| color:#000; |
| text-shadow: #333 -1px -1px 1px,#FFF 1px 1px 1px; |
| } |
text-shadowで文字を発光！
text-shadowを利用して、文字自体が発光するような表現を記載してみます。
背景は明るい色より暗い色のほうが効果を確認しやすくなります。また、文字の周辺は#FFF（白）にして、文字自体が光っている感じを表現してみます。残りの指定で発行している色を表現しますが、白の指定＋後ろ2つの指定で大雑把に確認し、そのあと中2つの指定をおこなうと作業しやすくなります。
中2つの色は白と後2つの間くらいの色を指定します。
■文字が発光
| h2.shadow06{ |
| color:#000; |
| text-shadow: #F0F0F0 0 0 5px, |
| #7DE6FF 0 0 25px,#7DE6FF 0 0 35px, |
| #00CCFF 0 0 50px,#00CCFF 0 0 60px; |
| } |
発光している感じを強調するためには、中2つの指定を中心に調整します。
色を若干明るめに、ぼかしの距離を詰めるようにすることで、発光体から光が強く出ている感じとなります。
最初の白のぼかしの距離を長くすると文字自体がぼけた感じになりますので、逆に距離を詰めるくらいの方が良いことと思います。
■より強く文字が発光
| h2.shadow07{ |
| color:#000; |
| text-shadow: #F0F0F0 0 0 3px, |
| #9DECFF 0 0 15px,#9DECFF 0 0 25px, |
| #00CCFF 0 0 50px,#00CCFF 0 0 60px; |
| } |
これまでの例では文字自体の色を白系で表現しましたが、ネオンらしくということを考えた場合は、文字色も発光している色に合わせます。
この際、文字の色は中2つの色と同じ程度にして、後2つの色は文字色より濃い色にします。また、上記で指定した袋文字と同様の指定をすることで、文字が見やすくなります。袋文字ではぼかしの距離を0にしましたが、今回は1pxぼかしてみます。
■よりネオンらしく
| h2.shadow08{ |
| color:#000; |
| text-shadow: |
| #0093B7 1px 1px 1px,#0093B7 1px -1px 1px, |
| #0093B7 -1px 1px 1px,#0093B7 -1px -1px 1px, |
| #F0F0F0 0 0 5px, |
| #7DE6FF 0 0 25px,#7DE6FF 0 0 35px, |
| #00CCFF 0 0 50px,#00CCFF 0 0 60px; |
| } |
色や文字サイズによる表現方法
CSS3は、アルファ値での指定が可能です。アルファ値はtext-shadowの色指定で使用できるほか、文字色でも利用できるため、重ね合わせなどの表現ができます。
今回の例は、アルファ値の確認のため、左からtext-shadowのアルファ値を1.0から順に減らしています。背景のチェック柄の見え方により、アルファ値が有効になっているのが理解できることと思います。
| h2.alpha01{ |
| background:url(sample.jpg); |
| color:#4c5482; |
| text-shadow:rgba(0,0,0,1.0) 40px 0 0, |
| rgba(0,0,0,0.75) 80px 0 0, |
| rgba(0,0,0,0.5) 120px 0 0, |
| rgba(0,0,0,0.25) 160px 0 0, |
| } |
また、下記サンプルのように、アルファ値を指定した文字やtext-shadowを重ねあわせることも可能です。text-shadowと重なった文字の色が変化していること、背景もようも見えることが確認できます。アルファ値を小さくして透過率をあげると色が薄くなり、逆にアルファ値を大きくすると重ねあわせの効果が分かりにくくなるため、文字に使う色に注意が必要になります。
| h2.alpha02{ |
| background:url(sample.jpg); |
| color:rgba(76,84,130,0.7); |
| text-shadow:rgba(0,0,0,0.4)5px 3px 0; |
| } |
1文字目や1行目の装飾
::first-letter疑似要素で、1文字目の指定をおこなうことも可能です。
あまり見かけることのない表現方法ですが、今回の例では1文字目だけ大きさを調整し、さらにfloat:leftを指定することで、文字の回り込みの調整も行っています。
| h2.text01{ |
| font:24px bold; |
| color:rgba(76,84,130,0.7); |
| } |
| h2.text01::first-letter{ |
| float:left; |
| font-size:72px; |
| } |
1行目に指定をおこなう::first-line疑似要素も使用することが可能です。下記の例では背景色を指定しています。しかしfloatの指定が行われている1文字目には::first-lineの指定が有効ではない点に注意が必要になります。
| h2.text01{ |
| font:24px bold; |
| color:rgba(76,84,130,0.7); |
| } |
| h2.text01::first-letter{ |
| float:left; |
| font-size:72px; | h2.text01::first-line{ |
| background:rgba(255,128,0,0.5); |
| } |
::before、::after疑似要素で追加した文字に対して、角度の指定をおこなうことも可能です。下記の例では::afterで追加した文字に文字色、position、transformの指定をおこなっています。上記で説明したtext-shadowプロパティによる影の指定も有効ですので、文字を利用した装飾もCSSで行いやすくなっています。
| h2.text01::after{ |
| content:’よ’; |
| color: red; |
| absolute;bottom: 0; |
| transform: rotate(-45deg); |
| font-size: 30px; |
| } |
ということで今回は、CSSを詳しく解説text-shadow（テキストシャドウ）の記述方法につきまして、サンプルコードを交え記載してみました。
text-shadowプロパティだけで、基本的な影のほかにも袋文字、べベルとエンボス、文字の発行など多彩な表現をすることができます。基本的な利用方法を確実に覚えると同時に、アルファ値と組み合わせた場合のかさなり方などを理解しておくことをおすすめします。
また、疑似要素の充実もCSS3のポイントで、これらの表現については、デザイナーが「どのような表現が可能か」といったことを把握してデザインすることがとても大切なことと思います。
とりあえず、今回はここまで…。
ご相談・問合せ・お仕事のご依頼は↓コチラより…、それではまた次回…。
CSS Values and Units Module Level 3
- 投稿タグ
- css, 使い方, text-shadow, テキストシャドウ
