※この記事は最終更新日から10年以上経過しています。内容が古い可能性があります。

CSS3

昨日、HTML５について書いたので、
今日は関連の深いCSS3についてかいてみようかと思います。

CSS3とは

CSSは、Cascading Style Sheets （カスケーディング・スタイル・シート）の略で、HTMLの文書情報にレイアウトや、文字色やエレメントなどの装飾といったヴィジュアル要素を指定する技術です。CSS3はその最新バージョンとなります。
CSS3ではCSS2より新しく追加されたプロパティやセレクタによって、従来より表現の幅が格段に広がりました。
CSS3は、まだ策定中の技術ではあるものの、ブラウザでの実装が先行して進められており、特に、近年市場が急速に拡大しているスマートフォンでのブラウジングにおいては、実質的にスタンダード使用されています。

従来のCSSと何が違う？

基本的な部分は何も変わりません。CSSにはバージョンを示す記述が存在しないため、従来のCSSと混在した記述が可能です。
CSS3で追加された新しい仕様のセレクタやプロパティを記述し、CSS3をサポートしているブラウザで閲覧することで記述通りの表示が可能です。

CSS3で追加されたセレクタの例

機能 記述例 意味
Begins with div[foo^=bar”]{ } foo属性の値がbarで始まっているdiv要素
End with div[foo $=bar”]{ } foo属性の値がbarで終っているdiv要素
last-child div:last-child{ } 親要素の中で最後に登場するdiv要素
nth-child div:nth-child(n){ } n番目のn要素
nth-last-child div:nth-last-child(n){ } 後ろからn番目のdiv要素
first-of-type div:first-of-type{ } 兄弟(並列)関係にあるもののうち最初のdiv要素
last-of-type div:last-of-type{ } 兄弟(並列)関係にあるもののうち最後のdiv要素
nth-of-type div:nth-of-type(n){ } 兄弟関係にあるもののうちn番目のdiv要素
nth-last-of-type div:nth-last-of-type(n){ } 兄弟関係にあるもののうち後ろからn番目のdiv要素
enabled input:enabled{ } 入力できる状態(有効)になっているinput要素
disabled input:disabled{ } 入力できる状態(無効)になっているinput要素
checked input:checked{ } チェックされた状態になっているラジオボタンやチェックボックス
target div:target{ } アンカーで飛んだ先のdiv要素

CSS3では多数の属性セレクタや疑似クラスなどが追加されました。これによって、「○○が●●の場合…」といった自由度の高い指定が可能になりました。

CSS3で追加されたプロパティの例

機能 記述例 意味
グラデーション div{background-image:
linear-gradient
(top,yellow.blue);}		 div要素の背景に上から下へと黄色から青色になるグラデーションを指定
変形(2D) div{transform: rotate(180deg); } div要素を180度回転
角丸 div {border-radius:
10px;}		 div要素の四隅を半径10pxの角丸に
透過 div:{opacity:0.5; } div要素を50%透過
ボックスレイアウト div{display:box; } div要素の直下の子要素を横並びにする
ボックスシャドウ div{box-shadow:
1px 1px 5px #000;}		 div要素の右1px、下1pxの位置に5pxのぼかしで黒の影を指定
テキストシャドウ div{text-shadow:
1px 1px 5px #000}		 div要素内の文字の右1px、下1pxの位置に5pxのぼかしで黒の影を指定
段組 div{column-count:n; } div要素の内容をn個の段組みにする
アニメーション a{background:#000;
color:#FFF;
transition:
background-color 1.0s ease; }
a:hover
{background:#00f;}		 a要素にマウスカーソルが乗ったときに、a要素の背景色を1秒間かけて白(#FFF)から青(#00F)に変化させる
複数背景 div{background-image:url(hoge.png),
url(fuga.png)}		 div要素の背景にhoge.pngとfuga.pngを指定

CSS3では角丸やボックスシャドウ、グラデーション、アニメーションなど、様々なプロパティが追加されました。
今まで画像を使っていた装飾が、CSSの記述のみで手軽に実現できるようになりました。

下記はincrement といったプロパティを使って数値部分を独自にデザインしています。
リスト部分の数字のデザインはなかなか難しかったと個人的に記憶していますが、こうした方法でやれば思い通りのリストデザインが作れるんですね。

css3-ordered-list-styles

Rounded-shaped numbers

サンプル

css3-ordered-list-rounded

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
<ol class="rounded-list">
<li><a href="">List item</a></li>
<li><a href="">List item</a></li>
<li><a href="">List item</a>
<ol>
<li><a href="">List sub item</a></li>
<li><a href="">List sub item</a></li>
<li><a href="">List sub item</a></li>
</ol>
</li>
<li><a href="">List item</a></li>
<li><a href="">List item</a></li>
</ol>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
ol {
    counter-reset: li; /* Initiate a counter */
    list-style: none; /* Remove default numbering */
    *list-style: decimal; /* Keep using default numbering for IE6/7 */
    font: 15px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
 
ol ol {
    margin: 0 0 0 2em; /* Add some left margin for inner lists */
}
.rounded-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;  
}
 
.rounded-list a:hover{
    background: #eee;
}
 
.rounded-list a:hover:before{
    transform: rotate(360deg); 
}
 
.rounded-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}

Rectangle-shaped numbers

サンプル

css3-ordered-list-rectangle

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
<ol class="rectangle-list">
<li><a href="">List item</a></li>
<li><a href="">List item</a></li>
<li><a href="">List item</a>
<ol>
<li><a href="">List sub item</a></li>
<li><a href="">List sub item</a></li>
<li><a href="">List sub item</a></li>
</ol>
</li>
<li><a href="">List item</a></li>
<li><a href="">List item</a></li>
</ol>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
ol {
    counter-reset: li; /* Initiate a counter */
    list-style: none; /* Remove default numbering */
    *list-style: decimal; /* Keep using default numbering for IE6/7 */
    font: 15px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
 
ol ol {
    margin: 0 0 0 2em; /* Add some left margin for inner lists */
}
.rectangle-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em .8em;
    *padding: .4em;
    margin: .5em 0 .5em 2.5em;
    background: #ddd;
    color: #444;
    text-decoration: none;
    transition: all .3s ease-out;  
}
 
.rectangle-list a:hover{
    background: #eee;
}  
 
.rectangle-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -2.5em;
    top: 50%;
    margin-top: -1em;
    background: #fa8072;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
}
 
.rectangle-list a:after{
    position: absolute;
    content: '';
    border: .5em solid transparent;
    left: -1em;
    top: 50%;
    margin-top: -.5em;
    transition: all .3s ease-out;              
}
 
.rectangle-list a:hover:after{
    left: -.5em;
    border-left-color: #fa8072;            
}  

CSSを使ったテクニックはどこまで進化するんでしょう？

Speech Bubbles Without Images

次のような吹き出しも下記のようなシンプルなマークアップで実現出来ます。
サンプル

HTML

1
<p class="speech">SitePoint Rocks!</p>

影もついてますね。

497-css3-speech-bubbles-1 (1)

更に次のような、何かを考えてる風の吹き出しにも出来ます。

HTLM

1
<p class="bubble thought">I think…</p>
497-css3-speech-bubbles-7

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
p.bubble
  {
    position: relative;
    width: 200px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    margin: 60px auto;
    background-color: #fff;
    border: 8px solid #666;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
  }
 
  p.thought
  {
    width: 130px;
    line-height: 100px;
    -webkit-border-radius: 108px;
    -moz-border-radius: 108px;
    border-radius: 108px;
  }
 
  p.bubble:before, p.bubble:after
  {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
  }
 
  p.speech:before
  {
    left: 30px;
    top: 100px;
    border: 25px solid;
    border-color: #666 transparent transparent #666;
  }
 
  p.speech:after
  {
    left: 38px;
    top: 100px;
    border: 15px solid;
    border-color: #fff transparent transparent #fff;
  }
 
  p.thought:before, p.thought:after
  {
    left: 10px;
    top: 70px;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border: 8px solid #666;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px;
  }
 
  p.thought:after
  {
    width: 20px;
    height: 20px;
    left: 5px;
    top: 100px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
  }

角丸だけなら border-radiusで簡単に実現できそうですが、角のとんがったやつはちょっとしたハックを使っています。
border プロパティで枠線を設定し、左と上の線のみに色をつけることで三角形にしてます。それを２枚重ねることでとんがった部分を実現しているという。

497-css3-speech-bubbles-3

497-css3-speech-bubbles-4

497-css3-speech-bubbles-5

マークアップが綺麗になるのが何より嬉しいですね。CSS3最高ですね。

また、フルスクリーン背景がスライドショーになるCSS3を見つけました。
ページ全体の背景がCSS3によってアニメーションされ切り替わるサンプルとチュートリアルが公開されています。
画像・文字が綺麗にクロスフェードしながら切り替わってなかなかカッコいいものがCSS3をベースに構築されていて勉強になりつつ、そのまま使えそうですね。

デモページ

ISDNの時代などはページ全体を背景にすることはタブーでしたが回線の高速化で珍しくなくなりましたね。
今後、よりPCのスペックがあがり回線環境がよくなることで未来はもっともっとリッチになっていきそうですね。

もっと詳しく知りたい方は下記をご覧ください。

http://red-team-design.com/css3-ordered-list-styles/

http://www.sitepoint.com/pure-css3-speech-bubbles/

Fullscreen Background Image Slideshow with CSS3 | Codrops

More from my site