IT用語辞典バイナリ | さくいん | サイトマップ | ヘルプ | お気に入りに追加  
CSS3リファレンス
IT用語辞典バイナリ<パソコン用語・コンピュータ辞書>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
拡張子辞典<ファイル・変換・変更・表示>
HTML5タグリファレンス
CSS3リファレンス
HTML5 JavaScript API
エクセル関数リファレンス
ITパスポート試験
 
  
  IT用語辞典バイナリ > CSS3リファレンス > ドロップシャドウ > text-shadowの解説
  カテゴリ別さくいん
  タグ別さくいん

text-shadowの解説

文字のドロップシャドウを指定するには?

要素書式

text-shadow: 【ドロップシャドウ指定】 [,【ドロップシャドウ指定】...] ;

対応ブラウザ

  • IE 9:×
  • Firefox 10.0:○
  • Opera 11.61:○
  • Chrome 17.0:○
  • Safari 5.1:○

    ※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
    ブラウザWindows 7上で動作確認を行っています。
    ユーザーの設定より、異なる挙動をする場合があります。

値一覧

ドロップシャドウ指定は複数指定することが可能です。

内容
ドロップシャドウ指定none影を表示しません。
【影の色】 【影の水平位置】 【影の垂直位置】 【影のぼかし半径】指定した内容の影を文字列に表示します。
「影の色」は最初にあっても最後にあっても構いません。

それぞれのドロップシャドウ指定で使用する値の意味は以下の通りです。

内容
影の色文字列の影の色を指定します。省略可能です。
省略時にはChromeとSafariでは透明になりますが、OperaとFirefoxでは文字列と同じ色になります。
影の水平位置指定された長さだけ、文字列から右にずれた位置に影を表示します。
影の垂直位置指定された長さだけ、文字列から下にずれた位置に影を表示します。
影のぼかし半径影のぼかし半径を指定します。
この値が大きいほど、影は薄くぼかされ、大きくなります。省略可能です。

解説文

text-shadowプロパティを指定すると、文字列に効果として影(ドロップシャドウ)をつけることができます。

影を指定するには、「影の色」と、「影の水平位置」、「影の垂直位置」、「影のぼかし半径」を指定します。「影の色」と「影のぼかし半径」は省略可能です。

「影の色」には表示する影の色を指定します。「影の色」は省略可能ですが、ブラウザによって省略時の既定の色が異なるので、複数のブラウザで同一の表示をさせる場合には明示的に指定する必要があります。

「影の水平位置」と「影の垂直位置」には、影をその値の分だけずらす長さを指定します。たとえば「7px 8px」と指定すると、文字列から右に7px、下に8pxずらした位置に影が表示されます。「影のぼかし半径」は、影のぼかしの程度を指定します。この値が大きいほど影は広く薄くぼかされて表示されます。

以下のように指定すると、緑色の影が、文字列から、右に5px、下に7pxずらした場所に、1pxのぼかし半径で表示されます。

text-shadow: green 5px 7px 1px;

同じ文字列に複数の影を付けることもできます。その場合には、影の設定をカンマで区切って、続けて指定します。

複数指定した場合、最初に指定した影が一番上になり、次の影がその下に重なり、以下順次、下に重なっていく形になります。

以下の例では緑の影に追加して、赤い影を表示しています。

text-shadow: green 5px 7px 1px, red 10px 10px;

サンプルソース

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <style>
 #box1 {
     font-size:2em;
     text-shadow: 0.5em 0.5em blue;
 }
 #box2 {
     font-size:2em;
     text-shadow: 0.5em 0.5em blue, red -0.2em 0.7em 5px;
 }
 </style>
 </head>
 <body>
 <p id="box1">右下に青い影を表示します</p>
 <p id="box2">上に追加して左下に赤い影を表示します</p>
 </body>
 </html>

関連項目




macOS High SierramacOS High Sierra
Appleが発表したMac向けのOS。
HomePodHomePod
Appleが発表した据え置き型のワイヤレススピーカー。
iOS 11iOS 11
Appleが開発するモバイルOS。

 ・ITパスポート試験とは
 ・試験範囲と内容
 ・サンプル問題にチャレンジ

 ・Windowsの歴史
ジョン・マッカーシー LISPの開発者
ジョン・マッカーシー
人工知能の研究分野における第一人者。
スティーブ・ジョブズ Appleの共同創設者
スティーブ・ジョブズ
「Mac」や「iPhone」を生み出した経営者。
デニス・リッチー C言語、UNIXの開発者
デニス・リッチー
C言語の設計、UNIXの開発に携わった人物。
».m4b MPEG-4オーディオファイルの拡張子。 up!
».m4r iPhoneの着メロにするAACファイルにつく拡張子。 up!
».xlsx Excel 2007で作成したファイルのデフォルトの拡張子。
».docx Word 2007の標準的な保存形式。XML形式となっている。

2017年6月24日現在
ランキング1   ICT (用語辞典)
ランキング2   コンテキスト (用語辞典)
ランキング3   セグメント  (用語辞典)
ランキング4   アーキテクチャ  (用語辞典)
ランキング5   リーンスタートアップ  (用語辞典)
ランキング6   デプロイ  (用語辞典)
ランキング7   プラットフォーム  (用語辞典)
ランキング8   スワイプ  (用語辞典)
ランキング9   バリデーション  (用語辞典)
ランキング10   オムニチャネル  (用語辞典)
RSS 0.91 RSS 1.0 RSS 2.0
IT用語辞典バイナリについてウェブリオ株式会社についてお問い合わせ先テクニカルライター募集利用規約
プライバシーポリシー著作権・商標について協力社一覧Weblio 辞書スマート翻訳英和辞典 - Weblio辞書Weblio英会話
©2012 Weblio, Inc. All rights reserved.