___
■ padding

  DESC
    border と内容要素の間の長さを指定する。
    マイナスの値は指定できない。

  POINT
    border の効果を確認するには border を表示するとわかりやすい。

    h1 {
       border: 2px solid #8Faa1F;
       border: 2px solid black;
       padding: 10px;
    }



  paddingプロパティは、上下左右のパディングをまとめて指定する際に使用します。 
  上下左右を異なるパディング幅にしたい場合には、スペースで区切って複数の値を指定します。 
  
  POINT
    ４つを指定しなくても 一括で同一幅の指定ができる。
    ボタンなどの文字の中央寄せができる

  値を1つ指定した場合：  指定した値が[上下左右]のパディングになります。
  値を2つ指定した場合：  記述した順に[上下][左右]のパディングになります。

    input 
    {
      padding : 2px 3px;
    }



___
■ margin


___
■ margin と auto と width の関係

  marginに対して、autoを設定した場合は数値は0になります。

  しかし、横幅(width)を指定した状態で

  marginの左右のどちらかにautoを指定すると、指定した方に数値を算出します。
  ブラウザの幅が600pxの場合

  POINT
    margin-left : auto;
    auto の場合は 自動調整となる。

  POINT
    border をひくと, border の外に margin 領域があることがわかる    



___
■ margin-left: left (C1/e3/N4)

上下左右のマージンをそれぞれ個別に指定する
margin-right: 2em;
margin-left: 2em;

    margin-left : 10px;

    margin : 10px;




___
■ list

___
■ list-style-type: type

___
■ 表示



  POINT
    display プロパティを ON/OFF することでレイアウト自体を変更できる。

    display : ""    
    display : "none"    



___
■ div

    範囲をはみ出した場合の処理方法
     // 隠す
     overflow : hidden;

     // スクロールバーをつくる
     overflow : scroll;



___
■ 背景



___
■ background

    背景プロパティの shorthand (簡潔な表現)

    background  < color>, < image>, < repeat>, < attachment>, < position>, < origin> は順不同でひとつ以上指定可能です。

    background: #BECAD7 url("http://source.pixiv.net/www/images/sprites-s42f3140950.png") no-repeat -146px -315px;


  POINT
    色に透明をしておくと, 下の要素 ( body など)が表示される。
    h1 {
      background : transparent;
      border : 1px  solid  MidnightBlue;
    }




___
■ background-image

  POINT
    タイトルバーの背景画像に利用できる

  BODY { background-image: url(http://www.yyy.zzz/image/back.gif); }
  h3 { background-image: url(http://www.yyy.zzz/image/back.gif); }

___
■ background-position

  背景画像の位置を指定する。
  指定できる種類は9つ
    left top
    left center
    left bottom
    center top
    center center
    center bottom
    right top
    right center
    right bottom    


    画像を右上に配置する        
    div.test {
       background-position: right top;
    }    



___
■ background-repeat

  DESC
    背景画像の並べ方を決める。

repeat-x（横方向のみ並べる）
repeat-y（縦方向のみ並べる）
no-repeat（ひとつだけ表示する）
inherit（継承）

  BODY {
       background-image: url(image/back.gif);
       background-repeat: repeat-y;
       }



___
■ background-color

    H1 { background-color: #ccccff; }


___
■ background-attachment

  背景を固定する



    body {
      background-attachment: fixed;
      background-image: url(../image/back.gif);
    }    


    通常のスクロール扱いにする
    background-attachment: scroll;






___
■ Font

___
■ font

  font STYLE VARIANT WEIGHT SIZE LINE_HEIGHT FAMILY

    font: normal normal 400 14px/normal Verdana;


    行の高さは SIZE/ の後に記述する
    14px/normal


___
■ line-height

  POINT
    font の高さ？

___
■ font-size

  DESC
    フォントのサイズを指定する。

    font-size : 10pt;



___
■ font-style

  DESC
    フォントを斜体にする。

    font-style : italic;
    font-style : normal;




___
■ font-weight

  SYNTAX
    font-weight: weight

  DESC
    フォントの太さを指定する

  bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 normal(D)

  IE4.0, Netscape 4.0 では通常と太字の 2種類しかサポートしていないので
  normal（通常）と bold（太字）以外を使用することは少ないかも
  DT { font-weight: bold; }  

___
■ font-family

  SYNTAX
    font-family: family [, family ... ]

  DESC
    フォントを指定する。
    カンマ（,）で複数記述すると
    指定したフォントが無ければ次のフォントになる。

    スペースを含むフォントは "Times New Roman" のように "..." か '...' で囲む。

  PARAM
    serif, sans-serif, cursive, fantasy, monospace ( CSS1 )  
    inherit（継承）がサポートされている。

    
  // space を含むときは " で囲む。
  // 
  font-family: "Times New Roman";
  font-family: "ＭＳ ゴシック";
  font-family: "メイリオ";




    Windows で利用されるフォント
  // Ｐ がつくのはプロポーショナルフォント
  //
  "ＭＳ ゴシック"
  "ＭＳ 明朝"
  "ＭＳ Ｐゴシック"
  "ＭＳ Ｐ明朝" 


  POINT
    ゴシック系のフォントを表示したい時は希望する優先順に指定していく。
    font-family: "メイリオ", "MS UI Gothic", sans-serif;




___
■ font-stretch

  DESC
    フォントの幅を指定する。

 normal
 wider
 narrower
 ultra-condensed
 extra-condensed
 condensed
 semi-condensed
 semi-expanded
 expanded
 extra-expanded
 ultra-expanded
 inherit 

    body th, td { font-stretch: condensed; }



___
■ 位置.レイアウト

___
■ position

  DESC
    ブロック要素の位置を指定する。

    fixed      // ウィンドウ上で常に同じ位置に固定する。 ( スクロールしても固定される )
    absolute   // 絶対値で指定する。
    relative   // 本来の表示位置から相対的に指定する。


    位置の指定は top, left, right, bottom で、大きさは width, height でする。

    div {
      position : absolute;
      top      : 100px;
      left     : 100px;
      width    : 300px;
      height   : 300px;
    }

    // 左上 100, 100 の位置に固定して表示される。
    < div>
      test
    < /div>


  WARNING 
    単位の指定は必須。100px などと表記すること。

___
■ float

  DESC
    指定した要素を左右によせて配置する。

  POINT
    これを使うと左寄せ, 右寄せ などの段組みができる。

    left を指定すると, 左寄せになって, その後に指定する要素は右がわに回りこむ。
    div.boxA
    {
      float  : left;
      width  : 200px;
      height : 100px;
    }


    right を指定すると, 右寄せになって, その後に指定する要素は左側に回りこむ。
    div.boxA
    {
      float  : right;
      width  : 200px;
      height : 100px;
    }


    通常のレイアウトに戻すには clear プロパティを指定する。
    clear : both;


    

___
■ z-index

  DESC
    ブロック要素の前後関係を指定する。
    値は整数を指定して、大きいほど手前に表示される。


    // b が手前に表示される
    div.a {
      z-index : 1;
    }
    div.b {
      z-index : 2;
    }


  

  



___
■ 色

___
■ color

  SYNTAX
    color color


    H1 { color: red; }                /* 色の名前 */
    H2 { color: #ff0000; }            /* #RRGGBB */
    H3 { color: #f00; }               /* #RGB */
    H4 { color: rgb(255, 0, 0); }     /* rgb(R, G, B) 各数値は 0〜255 */
    H5 { color: rgb(100%, 0%, 0%); }  /* rgb(R, G, B) 各数値は 0〜100% */

  

___
■ Text

___
■ letter-spacing

  DESC
    文字間を指定する。
    letter-spacing : 10px;


___
■ word-wrap

  表示範囲内に収まりきらない単語がある場合に
  単語の途中で改行するかどうかを指定するに使用します。


    p
    {
      word-wrap : break-word;
    }

    


  日本語の単語の途中で改行させたくない場合には
  word-breakプロパティを使用してください。


___
■ vertical-align

  その行の中で一番高い(低い)要素や、親要素に対する上下方向の配置を指定します

  要素
    インラインレベル || テーブルセル要素
    



___
■ border.境界線

___
■ border

    border : 2px solid #8Faa1F;


  POINT
    個別に指定もできるので, 見出しにアンダーラインなども引ける。

    border-bottom  :  1px  solid  DimGray;


    見出しの上下に線をひく
    border-top     :  2px  solid  LightGray;
    border-bottom  :  2px  solid  LightGray;





___
■ border-color

  太さ, 線の種類, 色 を指定する
  
    < em style="{border-color : blue; border-width : 2px; border-style : double; }"> test < /em>

    h1{
       border: 2px double #8Faa1F;
    }


    div{
       border: 2px double #8Faa1F;
    }



___
■ border-style

    border-style : none;        // なし
    border-style : dotted;      // 点線
    border-style : solid;       // 実線
    border-style : double;      // ２重線



    < em style="{border-color : blue; border-width : 2px; border-style : double; }"> test < /em>

    h1{
       border: 2px double #8Faa1F;
    }


___
■ 角丸.round

    demo {  
        border-radius: 10px;        /* IE, Opera */  
        -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
        -moz-border-radius: 10px;   /* Firefox用 */  
    }  


  POINT
    円をつくることもできる
    div.test {
      width  : 200px;
      height : 200px;
      border-radius:100px;

      border:1px solid red;
    }


___
■ Gradation.gradient

    Opera
    background: -o-linear-gradient(rgb(100,100,100), rgb(200,200,200));

    background: -o-linear-gradient( pink, red );


    IE ( ver10 以上 )
    background: linear-gradient(rgb(100,100,100), rgb(200,200,200));







___
■ list-style-image