___
■ margin.と.padding.の違い

  padding は border の内側のオフセット。
  margin は 親要素と自分の間のオフセット。

  border を表示すると違いがわかる。






___
■ 飾窓をつくる

  
  
wrap .right-corner, .post .wrap .left-corner, .post .wrap .right-corner, .search .page .wrap .left-corner, .search .page .wrap .right-corner
{ 
  height: 47px;
  position: absolute;
  top: -8px;
  width: 47px;
}

___
■ borderカラーでボタンのエンボスをつくる

input[type="button"], input[type="submit"] { 
background: url("http://blogcool.swiderskillc.netdna-cdn.com/wp-content/themes/decor/images/gradient.png") 50% 100% repeat-x #F8F8F8;
border-bottom: 1px solid #9D9D9D;
border-left: 1px solid #FFFFFF;
border-radius: 5px;
border-right: 1px solid #9D9D9D;
border-top: 1px solid #FFFFFF;
box-shadow: 0px 0px 3px;
cursor: pointer;
line-height: 19px;
padding: 10px 15px;
text-decoration: none;
text-shadow: 1px 1px;
}  

___
■ セクションをつくる

  < p>ご購入はこちら< /p>

    p {
      background-color : crimson;
    }


    グラデーションをつけるには, 小さい画像を横にリピートする。
    #gnav .inner { 
        background: url("http://eow.alc.co.jp/content/img/gnav_bg.jpg") repeat-x #FFFFFF;
        border: 1px solid #FFFFFF;
    }

    
___
■ Button  

___
■ div.で四角いアイコン.ICON.をつくる

    div.image
    {
      width  : 100px;
      height : 100px;

      border-radius : 4px;
      box-shadow: 0px 10px 20px 3px silver;
    }



___
■ マウスをあてたときに色をかえる。

    hover イベントで色を変更する。
    .button:hover 
    {
      background-color : red;
    }



___
■ ICON.ボタンをつくる


___
■ 角○の.ICON.ボタンをつくる

    角○の画像を input ボタンなどにはりつける。
    input {
      background: #BECAD7 url("http://source.pixiv.net/www/images/sprites-s42f3140950.png") no-repeat -146px -315px;
    }


    cd d:/icon;  wget http://source.pixiv.net/www/images/sprites-s42f3140950.png;


___
■ button.ノードでボタンをつくる

    < button>< span>クリック< /span>< /button>


    button にスタイルを適用して角○にする
    border-radius : 2px;





    
___
■ divをつかってエリアにラインをかく

  div.line
  {
    border : 1px solid Aqua;
  }


___
■ div.を使って見出しの左側に■のアイコンをつける

    div.line
    {
      border-left : 8px  solid  orange;
    }


___
■ フッター.(footer)をつくる

    position を下から指定する。
    div 
    {
      position : absolute;

      bottom : 0px;
      left   : 0px;
      right  : 0px;
    }


___
■ Layout

  POINT
    最初に < div> などで大きな塊をつくること。
    
  POINT
    float を利用すると 後続の要素が影響をうけるので, レイアウトの記述の順番も注意すること。

___
■ 左側に縦長のメニューをつくる

    float で 左側にレイアウトする。
    div.layout 
    {
      float  : left;
      width  : 200px;
    }


    layout の中に要素を突っ込んでいく。
    < div class="layout">
      < div>
    < /div>
    

    float は画面左に移動するため, 最上位のレイアウトでページ幅を決めておく。
    div.wrapper
    {
      margin 0 auto;
      width    900px;
    }

    
    < div >




      


___
■ max-width

  < IMG>・ < INPUT>・ < TEXTAREA>・ < SELECT> などの領域の幅の最大値を指定する際に使用します。 
  最大値を指定することで、これらの要素の幅を一定範囲内に収めることができます。 

 指定方法には、実数値にpxなどの単位をつけて指定する方法と
 親ボックスに対する割合を％で指定する方法があります。 

 また、幅を制限させないようにするにはnoneを指定します。