CSS3

CSS3とは

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

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

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

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

CSS3の新要素

  • レベル3セレクタ
  • グラデーション
  • 角丸
  • アニメーション

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;
}
  • test1
  • test2
  • test3
  • test4
link1 link2

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;
}

radius
circle

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;
}
test

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);}
}

  • aaaaaaaaaaaa
  • bbbbbbbbbbbb
  • cccccccccccc
  • dddddddddddd

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に歪んだ表示になる。しかし、サーバーサイドの宣言も用意されているので、ユーザー環境に影響することはほぼなくなる

http://lesscss.org/ http://sass-lang.com/

Variables - 変数


// LESS
@color: #4D926F;

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

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

Mixin - 継承


// 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;
}

Nested Rules - 入れ子構造


// 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;
}

Functions & Operations - 関数定義


@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;
}