text-shadowプロパティ

CSS3のtext-shadowは文字に１つあるいは複数の影を付けるプロパティです。これを利用すれば、テキストに様々なエフェクトをかけることが可能です。 text-shadowを使用して、文字に影だけでなく、3D,立体的表現やレタープレス、エンボス効果、 袋文字、縁取り（アウトライン）文字を生成する サンプルとコードです。 ボックス要素に影を付けるには、box-shadowプロパティを使います。

text-shadowを使用して文字を装飾。

text-shadow 構文： 水平方向の距離　垂直方向の距離　ぼかしの大きさ　影の色；

ドロップシャドウ　右下方向 / 左上方向

text-shadow

.Tshadow {
   color:blue;
   font:bold 40px Arial;
   text-shadow:3px 3px 1px #999;
	  }

text-shadow

.Tshadow {
   color:blue;
   font:bold 40px Arial;
   text-shadow:-3px -3px 3px #999;
	  }
	/* ぼかしを大きく */

影の値を２つ設定

shadow

.Tshadow {
   color: #990f0a;
   font:bold 40px Arial;
   text-shadow: 2px 2px 0px #ddd,
                3px 3px 0px #888;
	  }

shadow

.Tshadow {
   color: #990f0a;
   font:bold 40px Arial;
   text-shadow: 1px 1px 0px #fff,
                3px 3px 2px #777; 
	  }

文字を縁取り

TEXT 縁取り

.Tshadow {
    color: #fff100;
    font:bold 40px Arial;
    text-shadow:
      1px  1px 1px #000,
     -1px  1px 1px #000,
      1px -1px 1px #000,
     -1px -1px 1px #000;
	   }
	 /* 縁取り 一重 *

TEXT 縁取り

.Tshadow {
    color: #fff100;
    font:bold 40px Arial;
    text-shadow:
      1px  1px 1px #000,
     -1px  1px 1px #000,
      1px -1px 1px #000,
     -1px -1px 1px #000,
      5px  5px 5px #111;
	  }
	/* 一重 ぼかしを大きく*/

CSS TEXT

.Tshadow {
   color: tomato;
   font: bold 40px Arial;
   text-shadow:
      1px  1px #fff,
      1px -1px #fff,
     -1px  1px #fff,
     -1px -1px #fff,  
      2px  2px 1px blue,
      2px -2px 1px blue,
     -2px  2px 1px blue,
     -2px -2px 1px blue;   
          }
      /* 縁取り 二重 */

CSS TEXT

.Tshadow { 
   color: #e60012;
   background: #add8e6;
   font: bold 40px Arial;
   text-shadow:
    1px  5px #fff, 1px -5px #fff,
   -1px  5px #fff,-1px -5px #fff,
    2px  4px #fff, 2px -4px #fff,
   -2px  4px #fff,-2px -4px #fff,
    3px  3px #fff, 3px -3px #fff,
   -3px  3px #fff,-3px -3px #fff,
    4px  2px #fff, 4px -2px #fff,
   -4px  2px #fff,-4px -2px #fff,
    5px  1px #fff, 5px -1px #fff,
   -5px  1px #fff,-5px -1px #fff;
	    }
	/* 縁取り白 */

白抜き文字

白抜き文字

.Tshadow {
   color: #fff;
   background: #69a2e0;
   font : bold 40px Arial;
  text-shadow:
    0px 2px red, 0px -2px red,
    2px 0px red,-2px  0px red,
    2px 2px red, 2px -2px red,
   -2px 2px red,-2px -2px red,
    0px 3px #fff, 0px -3px #fff,
    3px 0px #fff,-3px  0px #fff,
    3px 3px #fff, 3px -3px #fff,
   -3px 3px #fff,-3px -3px #fff;
       }
          /* outline 赤 */

白抜き文字

.Tshadow {
   color: #fff;
   background: #fff;
   font:bold 40px Arial;
   letter-spacing : 5px;
  text-shadow:
    1px 3px #000, 1px -3px #000,
   -1px 3px #000,-1px -3px #000,
    2px 2px #000, 2px -2px #000,
   -2px 2px #000,-2px -2px #000,
    3px 1px #000, 3px -1px #000,
   -3px 1px #000,-3px -1px #000;
          }
	/* outline 黒 */

へこんでる / 浮き出てる

レタープレス

.Tshadow {
   color: darkseagreen;
   background:lawngreen;
   font: bold 40px Arial;
  text-shadow:
     -1px -1px 1px #000,
      1px  1px 1px #fff;
        }

エンボス

.Tshadow{
   color: green;
   background: greenyellow;
   font: bold 40px Arial;
  text-shadow:
   -1px -1px 1px #fff,
    1px  2px 1px #000;
	  }

3D表現　立体的な文字

３Ｄテキスト

.Tshadow {
  color:#fff; background:#ddd;
  letter-spacing: 5px;
  font: bold 40px Arial;
  text-shadow:
    0 1px #aaa, 0 2px #999,
    0 3px #888, 0 4px #777,
    0 5px #666, 0 6px #555,
    0 7px #444, 0 8px #333,
    0 9px 6px #111;
	  }

３Ｄテキスト

.Tshadow {
  color: #ccc; background: #fff;
  letter-spacing: 5px;
  font: bold 40px Arial;
  text-shadow: 
   -1px 1px #333, -2px 2px #444,
   -3px 3px #555, -4px 4px #666,
   -5px 5px #777, -6px 6px #888,
   -7px 7px #999, -8px 8px #aaa,
   -9px 9px 0px #ccc;
        }

ネオン、グローテキスト

CSS NEON

.Tshadow {
  color:#ffc; background:#2f4f4f;
  letter-spacing: 4px;
  padding: 20px;
  font:bold 40px 'Comic Sans MS';
  text-shadow:
     0 0 0px  #000,
     0 0 5px  #fff,
     0 0 10px #fff,
     0 0 10px #0f0,
     0 0 15px #0f0,
     0 0 20px #0f0,
     0 0 30px #0f0,
     0 0 40px #0f0;
       }

Glow
テキスト

.Tshadow {
    color:#fff; background:#333;
    letter-spacing: 4px;
    padding: 20px;
    font: bold 40px Bevan,serif;
    text-shadow:
      0 0 100px #cff,
      0 0  50px #cff,
      0 0  10px #cff;
            }

傍点を打つ、文字列を飾る

●文字に傍点を打つ

          <!-- HTML -->
<div class="Tshadow">
<span>●</span>文字に傍点を打つ</div>

          /* CSS */
.Tshadow {
   color: #fff; background: #f33;
   padding: 20px 10px;
   font:bold 26px 'MS PGothic'; 
      }
.Tshadow span {
    color:#f33;
    font-size: 10px;
    text-shadow:
	100px -25px 0px #ff0,
	125px -25px 0px #ff0,
	150px -25px 0px #ff0,
	175px -25px 0px #ff0,
	200px -25px 0px #ff0;
		}
      /* 日本語で強調を表す */

☆文字周りを飾る

          <!-- HTML -->
<div class="Tshadow">
 <span>☆</span>文字周りを飾る</div>

          /* CSS */
.Tshadow{
    font: bold 30px Arial;
    padding: 20px 10px;
      }
.Tshadow span{
    font-size: 15px;
    color:#fff;
   text-shadow:
       5px -26px red,
      40px  16px orange,
      75px -26px violet,
     110px  16px maroon,
     145px -26px green,
     180px  16px blue,
     215px -26px indigo;
		}

マルチドメイン、マルチデータベース、共有 SSL など多彩な機能と 256ＧＢの大容量なサーバー環境が 月額1,000円（税抜）〜！ ホームページつくるならレンタルサーバー 『ヘテムル』

シャドウでよく使う灰色系統のカラーコード

0123456789ABCDEF

黒 #000 から次第に淡くなって白 #fff で終わっています。カラーコードは たとえば、７ の色なら#777, C の色なら#ccc。同じ値を３ツ入れるだけ、判りやすく灰色系統の濃淡ならこれでバッチリです。

text-shadowプロパティ：　まとめ

ＣＳＳ 構文

• 水平方向の距離　垂直方向の距離　ぼかし加減　色；複数設定する場合はコンマ区切りで定義。

プロパティの値

• 水平方向の影のオフセット値： 正の値 で文字の右、負の値 で左、にシャドウを配置。（必須）
• 垂直方向の影のオフセット値： 正の値 で文字の下、負の値 で上、にシャドウを配置。（必須）
• ぼかしの値：大きいほど、ぼかしは大きくなり、影は薄く広くなる。省略で 0, 0で ぼかしは無し。
• 色の指定： カラーネーム、カラーコード、RGBa を使用。色を省略した場合は文字色と同色。

• ★月々100円（税抜）からオンラインショップを運営！
  独自SSL・高機能カート・クレジット決済が簡単導入
• コロリポプラン　詳細はこちら
• WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
• SPAN要素
• border-radiusプロパティ
• box-shadowプロパティ
• paddingプロパティ ボックスの内側の余白
• カラーコード　色見本
• colorプロパティ,background-colorプロパティ
• 文字の色,背景色の色の組み合わせのチェック
• text-overflowプロパティ 省略記号に転換（…）
• 流れる文字 電光掲示板 ティッカー
• 下からスライドインする ニュースティッカー
• javascript 文字 点滅
• 文字がフェードイン,フェードアウトします
• リボンのような見出しをCSSで表示
• 三角形を CSS で作る
• CSSで作る吹き出しボックス,サンプル
• borderプロパティで円形、楕円形、半円、etc
• 三角形を CSS で作る
• CSS 五輪マーク
• CSS疑似要素 :before / :after
• linear-gradient()関数 css3

sliceメソッド JavaScript

 文字列の指定範囲を返します。
'対象文字列'.slice(start引数,end引数)

対象の文字列から２つの引数で指定した範囲の
部分文字列を取り出し、新しい文字列を返します。

インデックス値

対象文字列	A	B	C	D	E		メ	ソ	ッ	ド
最初から	0	1	2	3	4	5	6	7	8	9
最後から	-10	-9	-8	-7	-6	-5	-4	-3	-2	-1

 slice()メソッドは、start引数(開始位置)とend引数(終了位置)を指定し、
その範囲内の文字列を抽出します。
対象文字列の最初がインデックス値「0」になります。

 var str="ABCDE メソッド"
str.slice(0,3) --> "ABC"    （ ※ end引数の 1つ前の文字まで )
str.slice(0,5) --> "ABCDE"
str.slice(3,8) --> "DE メソ"

end引数は省略が可能で、省略すると最後まで取り出します。

str.slice(0) --> "ABCDE メソッド"
str.slice(4) --> "E メソッド"
str.slice(6) -->"メソッド"

 インデックス値には負の整数値を設定することも可能です。
この場合は対象文字列の最後から数えた位置になります。

str.slice(-10,-6) --> "ABCD"
str.slice(-8)     --> "CDE メソッド"
str.slice(3,-2)   --> "DE メソ"

 start 引数で指定した開始位置が
end引数 で指定した終了位置より後に来る場合、何も返しません。

str.slice(8,6)   --> "   "
str.slice(7,-7)  --> "   "
str.slice(-3,-5) --> "   "

slice() メソッド  お試し box 

対象文字列：

↓　半角数値を入力　↓
start 引数：  ,  end 引数：    

実行結果：  

コロリポプラン　詳細はこちら
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
イオンのオンラインショッピングサイト 〜 おうちでイオン　イオンショップ 〜

サンプルソース

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
<title>cssTextプロパティ</title>
<!--動作に不要なコードは省略していることがあります-->

<script type="text/javascript">
function sliceSmp() {
   var strVal = document.getElementById("sliceStr").value;
   var startVal = document.getElementById("sliceStart").value;
   var endVal = document.getElementById("sliceEnd").value;
   var outputID = document.getElementById("outPut");
 if (endVal == "" ) {  // end引数を省略した場合
      outputID.innerHTML = strVal.slice(startVal);
  　　　　 } 
else {
      　outputID.innerHTML = strVal.slice(startVal, endVal);
          }
      }
  </script>

 </head>
<body>
  <form>
<fieldset><legend>slice() メソッド&nbsp; お試し box</legend>
<p>対象文字列： <input type="text" value="ABCDE メソッド"
   size="20" id="sliceStr" /></p>
<p>start 引数： <input type="text" value="1" size="3" id="sliceStart" /> 
   end 引数： <input type="text" value="-3" size="3" id="sliceEnd" />
   <input type="button" value="実行" onclick="sliceSmp()" /></p>
<p>実行結果：&nbsp;&nbsp; <span id="outPut"></span> </p>
</fieldset>
 </form>
</body>
</html>

---

• コロリポプラン　詳細はこちら
• WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
• スタイルシートだけでポップアップメニュー、補足説明文を表示します。
• innerHTML
• 配列 javascript slice
• split メソッド 文字列を分割 javascript
• 下からスライドインする ニュースティッカー
• 流れる文字 電光掲示板 ティッカー
• 文字列から１文字取り出します。charAt()メソッド
• 文字 点滅
• 文字がフェードイン,フェードアウトします
• 指定した範囲内の文字を抜き出します。substring()メソッド
• 左から指定した文字数を取り出します.
• 文字列の長さ(文字数)を取り出す。length プロパティ
• 一致する文字列の有無を調べます。indexOf()メソッド
• 正規表現による文字列置換 String.replace();
• javascript文字 点滅