CSS3

CSS3とは

Cascading Style Sheets(カスケーディング・スタイル・シート)の略。
単にスタイルシートとも呼びます。

HTML,XMLの要素を修飾するための仕様です。

CSS3になってグラーデションや角丸などの立体感のリッチなUIがJavaScriptなしで表現できるようになります

現在、新しいブラウザは順次CSS3仕様に対応中です

CSS3の新要素

Selecter - レベル3セレクタ

細かい指定が可能

• E:root
• E:nth-child(n)
• E:last-child
• E:first-of-type
• E:last-of-type
• E:only-child
• E:only-of-type
• E:empty

• E:active
• E:hover
• E:focus

• E:target

• E:enabled
• E:disabled
• E:checked

.demo.select_test li:last-child{
  color:#ff0000;
}
.demo.select_test a[href^='http://']{
  color:#ffff00;
}
.demo.select_test input[type^='text']{
  color:#ff0000;
}

Gradient - グラデーション

だんだん色が変わっていく

立体感の表現

.demo .gradient{
    background: -moz-linear-gradient(top, #990, #066); /* Firefox用 */  
    background: -webkit-gradient(linear, left top, left bottom, from(#990), to(#066));
    width:200px;
    height:100px;
}

段階グラーデーション

変化の幅を設ける

color-stop(0%, rgba(r,g,b,a))

.demo .gradient_stop{
  background: -moz-linear-gradient(
    top,
    #A44,
    rgb(32,32,32) 20%,
    rgb(32,32,32) 20%,
    #000
  );
  background: -webkit-gradient(
    linear, left top, left bottom,
    from(#A44),
    color-stop(20%, rgb(32,32,32))),
    color-stop(20%, rgb(32,32,32)),
    to(#000)
  );
  -pie-background: linear-gradient(
    top,
    #A44,
    rgb(32,32,32) 20%,
    rgb(32,32,32) 20%,
    #000
  );

  width:200px;
  height:100px;
}

ストライプ

交互に色を指定する

-moz-background-size:5px 5px;

-webkit-background-size:5px 5px;

.demo .stripe{
  /* Firefox */
  -moz-background-size:5px 5px;
  background-image:-moz-linear-gradient(
     -45deg,
     rgba(100, 100, 100, 1),
     rgba(100, 100, 100, 1) 25%,
     rgba(250, 250, 250, 1) 25%,
     rgba(250, 250, 250, 1) 50%,
     rgba(100, 100, 100, 1) 50%,
     rgba(100, 100, 100, 1) 75%,
     rgba(250, 250, 250, 1) 75%,
     rgba(250, 250, 250, 1) 100%
  );

  /* Safari,Chrome */
  -webkit-background-size:5px 5px;
  background-image: -webkit-gradient(
   linear,
   left top, right bottom,
   color-stop(0, rgba(100, 100, 100, 1)),
   color-stop(0.25, rgba(100, 100, 100, 1)),
   color-stop(0.25, rgba(250, 250, 250, 1)),
   color-stop(0.50, rgba(250, 250, 250, 1)),
   color-stop(0.50, rgba(100, 100, 100, 1)),
   color-stop(0.75, rgba(100, 100, 100, 1)),
   color-stop(0.75, rgba(250, 250, 250, 1)),
   color-stop(1, rgba(250, 250, 250, 1))
  );

    width:200px;
    height:100px;
}

Radius - 角丸

ブロックの角を丸くする

グラデーションと組み合わせてボタンのようにみせることもできる

.demo .radius{
  border-radius: 10px;        /* CSS3草案 */
  -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
  -moz-border-radius: 10px;   /* Firefox用 */
  background-color:#999999;
  width:200px;
  height:100px;
}

.demo .circle{
  border-radius: 50%x;        /* CSS3草案 */
  -webkit-border-radius: 50%;    /* Safari,Google Chrome用 */
  -moz-border-radius: 50%;   /* Firefox用 */
  border:2px solid #999999;
  width:40px;
  height:40px;
}



.demo ul.list li{
  border:2px solid #999999;
  width:120px;
  height:20px;
  list-style-type:none;
}
.demo ul.list li:first-child{
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
}
.demo ul.list li:last-child{
  -webkit-border-bottom-right-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
}

Shadow - 影

ブロックやテキストに影をつける

/*飛び出て見える*/
.demo .outer{
   box-shadow: 5px 5px 2px #555555;
  -webkit-box-shadow: 5px 5px 2px #555555;
  -moz-box-shadow: 5px 5px 2px #555555;
  width:120px;
  height:40px;
  margin:8px;
}

/*凹んで見える*/
.demo .inner{
  box-shadow: inset 5px 5px 4px #555555;
  -webkit-box-shadow: inset 5px 5px 4px #555555;
  -moz-box-shadow: inset 5px 5px 4px #555555;
  width:120px;
  height:40px;
  margin:8px;
}

.demo .text-shadow{
  text-shadow: #6374AB 20px -12px 2px;
}

Btn - グラデーションと角丸と影を併用

グラデーションと角丸と影を組み合わせ組み合わせてボタンのようにみせることもできる

.demo .btn_sample{
  /* グラデーション */
  background: -moz-linear-gradient(top, #999, #666); /* Firefox用 */  
  background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#666));

  /* 角丸 */
  border-radius: 10px;        /* CSS3草案 */
  -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
  -moz-border-radius: 10px;   /* Firefox用 */

  /* 影 */
  box-shadow: 1px 1px 2px #2B3C45;
  -webkit-box-shadow: 1px 1px 2px #2B3C45;
  -moz-box-shadow: 1px 1px 2px #2B3C45;

  /* 影 */
  text-shadow: #333 -1px -1px 2px;
  color:#ffffff;

  /* その他サイズ指定 */
  display:block;
  width:120px;
  height:40px;
  line-height:40px;
  text-align:center;

}

.demo .btn_sample:hover{
  /* グラデーション */
  background: -moz-linear-gradient(top, #666, #999); /* Firefox用 */  
  background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#999));

  /* 影 */
  text-shadow: #333 1px 1px 2px;
  color:#ffffff;

}





.demo .btn_sample2{
  background-color:#fff;

  /* 角丸 */
  border-radius: 10px;        /* CSS3草案 */
  -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
  -moz-border-radius: 10px;   /* Firefox用 */

  /* 影 */
  box-shadow: 0px 0px 12px #888;
  -webkit-box-shadow: 0px 0px 12px #888;
  -moz-box-shadow: 0px 0px 12px #888;

  /* 影 */
  text-shadow: #333 -4px -4px 4px;
  color:#ffffff;

  /* その他サイズ指定 */
  display:block;
  width:120px;
  height:40px;
  line-height:40px;
  text-align:center;
}

CSS3 Animation

javascriptで無理矢理実装するよりも軽くなめらかにアニメーションできる

.demo ul.anim{
  height:20px;
  overflow:hidden;
}
.demo ul.anim li{
  height:20px;
  line-height:20px;
}

.demo ul.anim li{
  -webkit-animation: ticker 2s infinite;
}
@-webkit-keyframes ticker{
  0% { opcity:0; transform:translateY(0); -webkit-transform:translateY(0);}
  10% { opcity:1; transform:translateY(0); -webkit-transform:translateY(-20px);}
  20% { opcity:0; transform:translateY(0); -webkit-transform:translateY(-20px);}
  40% { opcity:0; transform:translateY(0); -webkit-transform:translateY(-40px);}
  60% { opcity:0; transform:translateY(0); -webkit-transform:translateY(-60px);}
  80% { opcity:0; transform:translateY(0); -webkit-transform:translateY(-80px);}
}

CSS3をIE6,7,8対応する

以下のサイトからPIE-1.0beta3をダウンロード

http://css3pie.com/

CSS3を使っている各要素のプロパティに1行追記する

「behavior: url(/css/PIE-1.0beta3/PIE.htc);」

.demo .grad2{
  /* グラデーション */
  background: -moz-linear-gradient(top, #999, #ddd); /* Firefox用 */  
  background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#ddd));

  -pie-background: linear-gradient(top, #888, #ddd); /* IE6,7,8対応 */
  behavior: url(/css/PIE-1.0beta3/PIE.htc); /* IE6,7,8対応 */

  width:200px;
  height:100px;
}

Sass LESSとは

標準のCSSでは変数定義やネスト(入れ子構造)が使えないが、プログラムを仲介してそういった記法を使った形式のファイルを標準のCSS形式に変換できる

特にLESSはJavaScriptで動的に変換しているので、編集毎に自分で変換する手間が要らない

クライアントサイドの宣言だと、ブラウザでの表示毎での変換コストがあったり、JavaScriptを無効にしていたらCSSに歪んだ表示になる。しかし、サーバーサイドの宣言も用意されているので、ユーザー環境に影響することはほぼなくなる

// LESS
@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

/* Compiled CSS */
#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

// LESS
.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

/* Compiled CSS */
#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

// LESS

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

/* Compiled CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

/* Compiled CSS */

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
}