7.1 text-shadowプロパティ
CSSのtext-shadowプロパティは、テキストに影を追加して立体感を出したり、ビジュアルを良くしたりするんだよ。 このプロパティは影のオフセット、ぼかし、色を調整する柔軟性を提供するよ。
text-shadowプロパティは、要素内のテキストに影をつけるんだ。このプロパティを使って位置、ぼかし、色をコントロールし、テキストエレメントにビジュアル的なアクセントをつけることができるよ。
シンタックス:
element {
text-shadow: offset-x offset-y blur-radius spread-radius color;
}
パラメータ:
offset-x: 横方向の影のオフセットoffset-y: 縦方向の影のオフセットblur-radius: 影のぼかし半径（オプション）color: 影の色（オプション）
値:
offset-xとoffset-y: テキストに対する影のオフセットを設定することができる。正の値でも負の値でもOKだよ。blur-radius: 影のぼかし具合を決めるんだ。値が大きいほど、影がぼやける感じ。デフォルトは0（つまりぼかさないってこと）color: 影の色を設定するよ。色が指定されていない場合は、テキストの色が使われるんだ。
使い方の例:
.shadow-basic {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
.shadow-blur {
font-size: 24px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.shadow-color {
font-size: 24px;
text-shadow: 2px 2px 2px red;
}
.shadow-multiple {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 2px rgba(0, 0, 0, 0.3);
}
<body>
<p class="shadow-basic">基本的な影</p>
<p class="shadow-blur">ぼかしのある影</p>
<p class="shadow-color">色のある影</p>
<p class="shadow-multiple">複数の影</p>
</body>
コードの説明:
.shadow-basic: 横と縦に2pxのオフセットを持つシンプルな影、ぼかし半径2px、半透明の黒の色を適用するよ。.shadow-blur: より大きなぼかし(5px)を追加して、もっとぼやけた影を作るんだ。.shadow-color: 色付きの影（赤）を適用するよ。.shadow-multiple: 異なるオフセットとぼかしを持つ2つの影を適用し、複雑な多層効果を作るんだ。
7.2 例
1. ソフトな影
大きなぼかし半径を持つソフトな影:
.soft-shadow {
font-size: 24px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
<body>
<p class="soft-shadow">ソフトな影のテキスト</p>
</body>
コードの説明:
.soft-shadow: オフセットなしで大きなぼかし半径(10px)を持つソフトな影を適用し、テキストの周りに軽い輝きを作り出すんだ。
2. 鮮やかな影
鮮やかな色と小さなぼかしを持つ影:
.colorful-shadow {
font-size: 24px;
text-shadow: 3px 3px 5px blue;
}
<body>
<p class="colorful-shadow">鮮やかな色の影</p>
</body>
コードの説明:
.colorful-shadow: 鮮やかな色（青）と3pxのオフセット、5pxのぼかし半径を持つ影を適用するよ。
3. 複数の影
異なるパラメータを持つ複数の影:
.multi-shadow {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(255, 0, 0, 0.5);
}
<body>
<p class="multi-shadow">複数の影のテキスト</p>
</body>
コードの説明:
.multi-shadow: 異なるパラメータを持つ2つの影を適用するよ。1つは小さなオフセットとぼかしを持ち、もう1つは大きなオフセットとぼかしを持つ赤色の影だよ。
7.3 重要なポイント
text-shadowを使うときの重要な点
ブラウザの互換性
text-shadowプロパティは、Google Chrome、Firefox、Safari、Edge、およびOperaなどの現代のブラウザならどれもサポートしているよ。 でも、古いバージョンのブラウザでの表示も確認して、クロスブラウザの互換性を確保しておくといいよ。
パフォーマンス
複雑な影を使うとき、多くのオフセットやぼかしを設定すると、特にモバイルデバイスでパフォーマンスに影響が出ることがあるんだ。 影を最適化してパフォーマンスを向上させ、さまざまなデバイスでテストしてみてね。
アクセシビリティ
影がテキストの読みやすさを悪化させないように注意しよう。テキストと背景のコントラストは、視覚障がいのある人を含め、すべてのユーザーに十分であるべきだよ。
text-shadowプロパティは、CSSでテキストに影を作るための強力なツールを提供してくれるよ。シンプルな影から、さまざまな色やぼかしを持つ複雑な多層影まで、いろんな効果を追加できるんだ。
text-shadowを使うことで、テキストのビジュアルを改善し、Webページのデザインに深みと立体感を加えることができるよ。複雑な影を適用するときは、ブラウザ互換性やパフォーマンスにも留意して、すべてのユーザーにアクセスしやすいように気を配ろうね。
GO TO FULL VERSION