___
■ 透明.opaque

  REF  
    http://www.inclover-inc.com/pocket/px/coding/css/eid205.html


    < a href="#" class="imghover">< img src="image.jpg" />< /a>





  WARNING
    ブラウザによって仕様が異なるので プロパティ名を変更する。

    div.test {
      background-color: #fff;
      filter: alpha(opacity=60);< font color=red> // IE用 < /font>
      -moz-opacity: 0.6;< font color=red> // 古いFirefox用 < /font>
      opacity: 0.6;< font color=red> // Chrome, Firefox, Safari, Opera, 等の比較的新しいブラウザ用 < /font>
    }



    a.imghover:hover img {
     filter:alpha(opacity=70);
     opacity:0.7;
    }    


___
■ 行間

___
■ line-height

    文章の行間を調節する。
    長い文章が多い場合、行間が詰まっていると読みにくくなる。
    そんな場合は、このプロパティで行間の調節をする。    
    line-height : 1px;




___
■ Text

___
■ text-decoration

  text にアンダーラインなどをつける
    p.test 
    {
      text-decoration : underline;
      text-decoration : overline;
      text-decoration : line-through;
    }


___
■ text-align

    body 
    {
      text-align : center;
    }



___
■ box-shadow

  ボックスに1つまたは複数の影をつける。

  SYNTAX
    box-shadow : OFFSET_X  OFFSET_Y  ぼかし幅  広がり 色;

  POINT
    ２つのパラメータは BOX 自体の移動値
    広がりは SCALE のこと。

    次のようにすると計算式がわかる。
    width  : 100px;
    height : 100px;

    box-shadow: 0px 200px 0px 30px silver;



１番目の長さ
      水平方向の影のオフセット距離です。正の値を指定すると右へ、負の値を指定すると左へ影が移動
２番目の長さ
      垂直方向の影のオフセット距離です。正の値を指定すると下へ、負の値を指定すると上へ影が移動します。
３番目の長さ
    ぼかし距離です。負の値を指定することはできません。 
    値が大きいほど影の端のぼかしが強くなり、値が0の場合には端がくっきりとした影となります。

４番目の長さ
  広がり距離です。正の値を指定すると影の形状を全方向に拡大、負の値を指定すると縮小します。

色の値を指定すると、影がその色になります。
  insetキーワードを指定すると、ボックスの外側の影から内側の影に変更されます。
  

    右下に黒い影をつける
    box-shadow: 10px 10px black;


    すこしぼかす
    box-shadow: 10px 10px 5px  silver;


    , 区切りで複数を指定できる
    box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
    box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);
    box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;


  POINT
    < div> に利用すると ボタンを作成できる

  POINT
    文字には text-shadow を使う
  
___
■ text-shadow  

  http://coliss.com/articles/build-websites/operation/css/css-text-shadow-comilation-by-boltaway.html

  SYNTAX
    text-shadow : 左右 上下 ぼかし 色;

.basic { 
  background: #eee; 
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3); 
} 


  POINT
    エンボス加工などもできる
 background: skyblue;
  color: rgba(230,230,230,0.55); 
  text-shadow: 
    2px 8px 6px rgba(0,0,0,0.2)
    ,-2px -5px 2px rgba(255,255,255, 0.7)
    ; 


___
■ display

  ブロックレベル・インライン等の、要素の表示形式を指定する際に使用します。

  以下のものを選択できる
    block;
    inline-block;



  POINT
    インライン要素の< IMG>に display:block を指定すると、
    ブロックレベル表示となって前後が改行されて表示されるようになります。
    
    inline-block;

    インラインレベルのブロックコンテナを生成する。
    要素全体としてはインライン要素のような表示形式だが、
    内部はブロックボックスで高さ・横幅などを指定できる。

___
■ text-indent

  段落の1行目にインデントを付けるtext-indentプロパティ 

　段落の1行目にインデントを指定できます。

  ちなみに、インデントとはいわゆる字下げのことです。
  このインデントの値には、プラスの値はもちろん、マイナスの値も指定可能ですが、インデントの効果があるのは1行目だけで、2行目以降は特に効果はなく、通常通り表示されます。

  WARNING 
　  インライン要素には適用できません。
    そういったときの代替手段としてはmarginプロパティやpaddingプロパティを指定する方法が考えられます。

　また、リンクを画像にする際、テキストを消すために「text-indent:-9999px;」などと指定する方法が使われる場合があります。






  * Debug Mode にすると BOX, padding などが 色ではっきりと確認できる。 積極的に利用すること
  * width, height を指定すると 左上を軸にして, 右下に伸びていく。
  * 少しの位置調整は相対位置を指定すると早い。

    position : relative;
    top      : -10px;