「テキストに影を付けるtext-shadow」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
テキストに影を付ける方法についてまとめていきたいと思います。2015年5月25日現在記事
#image(001.png)
こんな感じ
~
~
目次
#contents
----
*text-shadowプロパティとは
テキストに影を付けるCSSプロパティです。border-radiusと同様に最近標準化されてきたプロパティです。
~
~
*基本構文
クラスまたはIDセレクター名{
text-shadow: 横方向のずれ 下方向のずれ ぼかし具合 影の色;
}
*コードを書いてみる。
&u(){HTML部}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<link rel="stylesheet" type="text/css" href="text-shadow.css">
</head>
<body>
<div class="box"><p class="textshadow1">text-shadow: 1px 2px 3px #000;</p>
</div>
<div class="box"><p class="textshadow2">-o-text-shadow: 1px 2px 3px #000;</p>
</div>
<div class="box"><p class="textshadow3">-ms-text-shadow: 1px 2px 3px #000;</p>
</div>
<div class="box"><p class="textshadow4">-moz-text-shadow: 1px 2px 3px #000;</p>
</div>
<div class="box"><p class="textshadow5">-webkit-text-shadow: 1px 2px 3px #000;</p>
</div>
</body>
</html>
&u(){CSS部}
p{
font-size: 18px;
}
.box{
margin: 20px auto;
padding: 10px;
width: 400px;
height: 100px;
border: 1px solid #000000;
}
.textshadow1{
text-shadow: 1px 2px 3px #000;
}
.textshadow2{
-o-text-shadow: 1px 2px 3px #000;
}
.textshadow3{
-ms-text-shadow: 1px 2px 3px #000;
}
.textshadow4{
-moz-text-shadow: 1px 2px 3px #000;
}
.textshadow5{
-webkit-text-shadow: 1px 2px 3px #000;
}
*表示テスト
IE(11.0)、GoogleChrome(43.0)、Firefox(38.0) 、Opera(29.0) すべてで同じようになりました。
#image(すべてのブラウザ共通.png)
~
~
*ブラウザ対応状況
http://caniuse.com/#search=text-shadow
で調べてみると
#image(width=700,text-shadowの状況.png)
のようになっており、近年はすべて対応しているようです。
テキストに影を付ける方法についてまとめていきたいと思います。2015年5月25日現在記事
#image(001.png)
こんな感じ
~
~
目次
#contents
----
*text-shadowプロパティとは
テキストに影を付けるCSSプロパティです。border-radiusと同様に最近標準化されてきたプロパティです。
~
~
*基本構文
クラスまたはIDセレクター名{
text-shadow: 横方向のずれ 下方向のずれ ぼかし具合 影の色;
}
*覚え方
横下広影（よこしたひろえい）さんと覚えておきましょう。
*コードを書いてみる。
&u(){HTML部}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<link rel="stylesheet" type="text/css" href="text-shadow.css">
</head>
<body>
<div class="box"><p class="textshadow1">text-shadow: 1px 2px 3px #000;</p>
</div>
<div class="box"><p class="textshadow2">-o-text-shadow: 1px 2px 3px #000;</p>
</div>
<div class="box"><p class="textshadow3">-ms-text-shadow: 1px 2px 3px #000;</p>
</div>
<div class="box"><p class="textshadow4">-moz-text-shadow: 1px 2px 3px #000;</p>
</div>
<div class="box"><p class="textshadow5">-webkit-text-shadow: 1px 2px 3px #000;</p>
</div>
</body>
</html>
&u(){CSS部}
p{
font-size: 18px;
}
.box{
margin: 20px auto;
padding: 10px;
width: 400px;
height: 100px;
border: 1px solid #000000;
}
.textshadow1{
text-shadow: 1px 2px 3px #000;
}
.textshadow2{
-o-text-shadow: 1px 2px 3px #000;
}
.textshadow3{
-ms-text-shadow: 1px 2px 3px #000;
}
.textshadow4{
-moz-text-shadow: 1px 2px 3px #000;
}
.textshadow5{
-webkit-text-shadow: 1px 2px 3px #000;
}
*表示テスト
IE(11.0)、GoogleChrome(43.0)、Firefox(38.0) 、Opera(29.0) すべてで同じようになりました。
#image(すべてのブラウザ共通.png)
~
~
*ブラウザ対応状況
http://caniuse.com/#search=text-shadow
で調べてみると
#image(width=700,text-shadowの状況.png)
のようになっており、近年はすべて対応しているようです。
