JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSのtext-shadowプロパティを使ってテキストに影を設定する方法

CSSのtext-shadowプロパティを使用すると、テキストの周囲に影（シャドウ）を設定できます。このプロパティを使いこなすことで、文字に奥行きを持たせたり、視認性を高めたりと、Webページのデザイン表現の幅が大きく広がります。

text-shadowの基本構文

text-shadowプロパティは、以下の値をスペース区切りで指定します。

  • 水平方向のオフセット： 影を右（正の値）または左（負の値）にずらす距離
  • 垂直方向のオフセット： 影を下（正の値）または上（負の値）にずらす距離
  • ぼかし半径： 影のぼかし具合。値が大きいほど柔らかい影になります
  • 色： 影の色を指定します

サンプルコード

以下のコードは、text-shadowプロパティを実装した実際の例です。赤い影がぼかしを伴って表示されます。

<html>
   <head>
   </head>
   <body>
      <p style = "text-shadow:2px 2px 5px red;">
         India is a country in the continent of Asia.
      </p>
   </body>
</html>

コードの解説

上記の例では、text-shadow: 2px 2px 5px red;と指定しています。これは「影を水平方向に2px、垂直方向に2pxずらし、5pxのぼかしを加えた赤い影」を意味します。

複数の影をカンマで区切って指定することも可能です。たとえばtext-shadow: 1px 1px 2px black, 3px 3px 5px gray;のように記述すると、より立体的で洗練されたエフェクトを作成できます。

  1. CSSのtext-shadowプロパティでテキストに影を付ける方法

    Webページのテキストに立体感や装飾性を持たせたいときに便利なのが、CSSのtext-shadowプロパティです。このプロパティを使うことで、文字に影を簡単に追加できます。text-shadowの基本構文text-shadowプロパティは、以下の値を組み合わせて指定します。水平方向のオフセット（offset-x）：影を右（正の値）または左（負の値）にずらす距離垂直方向のオフセット（offset-y）：影を下（正の値）または上（負の値）にずらす距離ぼかし半径（blur-radius）：省略可能。数値が大きいほど影が柔らかくぼやける色（color）：省略可能。影の色を指定するまた、カンマで区切るこ

  2. CSSのhyphensプロパティでテキストにハイフンを追加する方法

    CSSのhyphensプロパティを使用すると、テキスト内にハイフン（連字符）をどのように挿入するかを細かく制御できます。長い単語やURLなどがコンテナからはみ出すのを防ぎ、読みやすい行折り返しを実現したい場合に便利なプロパティです。 hyphensプロパティの主な値 none：ハイフンによる改行を一切行いません。&shy;などの手動指定も無効になります。 manual：&shy;（ソフトハイフン）など、HTML内で明示的に指定された位置でのみハイフンを挿入します（初期値）。 auto：ブラウザが各言語の規則に基づいて自動的にハイフンを挿入します。lang属性の指定が推奨されま