CSS2までになかった多彩な装飾表現を可能にするCascading Style Sheet Ver.3になります。W3Cが現在策定中ですが、各ブラウザが順次実装を始めているので、現在では一般的に使用されるようになっています。ただし、各ブラウザにより実装にバラツキがあるので使用する場合、いくつかの点に注意しながら使用していくことにしましょう。
ベンダープレフィックスって何?
例)
border-radius: 5px;
-webkit-border-radius: 5px;
このように記述の前に「-webkit-」のように記述することを言いますが、各ブラウザが先行的にCSS3を実装する際に、記述する必要があります。それぞれ各ブラウザごとに記述方法が違いますので、どのブラウザの、どのバージョンに記述が必要であるのかは、「Can I use.com」等をチェックしながら作業していきます。
▼各ブラウザごとの記述
-webkit- | chrome / safari |
-moz- | firefox |
-o- | opera |
-ms- | ie |
角丸 「border-radius」
● 4辺指定の場合 (sample1)
1 |
border-radius: 10px; |
● 2辺×2辺指定の場合 (sample2)
1 |
border-radius: 10px 20px; /* 左上と右下 左下と右上 */ |
● 1辺×2辺×1辺指定の場合 (sample3)
1 |
border-radius: 10px 20px 30px; /* 左上 左下と右上 右下 */ |
● 1辺ずつ個別に指定する場合 (sample4)
1 |
border-radius: 10px 20px 30px 40px; /* 左上 右上 右下 左下 */ |
● 場所を直接指定する場合 (sample5)
1 |
border-top-right-radius: 30px; /* 右上 */ |
● %指定する場合(4辺指定) (sample6)
1 |
border-radius: 50%; /* %で4辺指定 */ |
● 背景にイメージを配置する場合 (sample7)
1 2 |
border-radius: 50%; /* 4辺%指定 */ background-image: url("../images/bgimg.jpg"); /* 背景に指定したい画像のパス */ |
背景透過 「background-color: rgba(0,0,0,0.8);」
● 背景色を透過させる場合 (sample8)
1 |
background-color: rgba(0,0,0,0.5); /* 背景色Blackを50%で表示 */ |
要素自体を透過 「opacity: 0.8;」
● 要素全体を透過させる場合 (sample9)
1 |
opacity: 0.3; /* 30%に透過 */ |
要素に影を付ける 「box-shadow」
● x方向とy方向 (sample10)
1 |
box-shadow:5px 10px #000; /* x方向に5px y方向に10px Black */ |
● x方向とy方向とボカシ (sample11)
1 |
box-shadow:5px 10px 5px #000; /* x方向に5px y方向に10px ボカシ5px */ |
● x方向とy方向とボカシと透過 (sample12)
1 |
box-shadow:5px 10px 5px rgba(102,51,0,0.5); /* x方向に5px y方向に10px ボカシ5px Brown 50%透過 */ |
● x方向とy方向とボカシと広がりと透過 (sample13)
1 |
box-shadow:10px 20px 5px 10px rgba(102,51,0,0.5); /* x方向に10px y方向に20px ボカシ10px 広がり10px Brown 50%透過 */ |
● x方向とy方向とボカシと透過 内側 (sample14)
1 |
box-shadow:5px 10px 5px rgba(102,51,0,0.5) inset; /* x方向に5px y方向に10px ボカシ5px Brown 50%透過 内側 */ |
● x方向とy方向とボカシと透過 内側 / x方向とy方向 (sample15)
1 |
box-shadow:5px 10px 5px rgba(102,51,0,0.5) inset,5px 10px #000; /* x方向に5px y方向に10px ボカシ5px Brown 50%透過 かつ x方向に5px y方向に10px Black */ |
テキストに影を付ける 「text-shadow」
● x方向とy方向とボカシ (sample16)
1 |
text-shadow: 5px 5px 3px #f00; /* x方向に5px y方向に5px ボカシ3px Red */ |
● x方向とy方向とボカシ / x方向とy方向とボカシ (sample17)
1 |
text-shadow: 3px 3px 3px #000, 6px 6px 3px #ccc; /* x方向に3px y方向に3px ボカシ3px Black かつ x方向に6px y方向に6px ボカシ3px Gray */ |
● x方向とy方向とボカシ / -x方向と-y方向とボカシ (sample18)
1 |
text-shadow: 1px 1px 0px #fff, -2px -2px 0px #666; /* x方向に1px y方向に1px ボカシ0 White かつ x方向に-2px y方向に-2px ボカシ0 Gray */ |
背景色グラデーション(線形) 「linear-gradient」
● 上から下にグラデーション(2color) (sample19)
1 |
background: -webkit-linear-gradient(yellow,green); /* 上yellowから下green */ |
● 上から下にグラデーション(3color) (sample20)
1 |
background: -webkit-linear-gradient(yellow,red,green); /* 上yellow 真ん中red 下green */ |
● 上から下にグラデーション(%指定) (sample21)
1 |
background: -webkit-linear-gradient(yellow 10%,red 90%,green); /* 上yellow10% 真ん中red90% 下green */ |
● 上から下にグラデーション(px指定) (sample22)
1 |
background: -webkit-linear-gradient(yellow 3px,red 10px,green); /* 上yellow3px 真ん中red10px 下green */ |
● 下から上にグラデーション (sample23)
1 |
background: -webkit-linear-gradient(bottom,yellow,green); /* 下yellow 上green */ |
● 横方向にグラデーション (sample24)
1 |
background: -webkit-linear-gradient(right,yellow,green); /* 右yellow 左green */ |
● 斜め方向にグラデーション (sample25)
1 |
background: -webkit-linear-gradient(right top,yellow,green); /* 右上yellow 左下green */ |
● 斜め方向にグラデーション(角度指定) (sample26)
1 |
background: -webkit-linear-gradient(45deg,yellow,green); /* 左下yellow基準の45度方向にgreen */ |
背景色グラデーション(円形) 「redial-gradient」
● 中心から外方向にグラデーション(2color) (sample27)
1 |
background: -webkit-radial-gradient(red,yellow); /* 中心red 外側yellow */ |
● 中心から外方向にグラデーション(3color) (sample28)
1 |
background: -webkit-radial-gradient(red,blue,yellow); /* 中心red 中間blue 外側yellow */ |
● 中心から外方向にグラデーション(3color) %指定 (sample29)
1 |
background: -webkit-radial-gradient(red 50%,blue,yellow); /* 中心red50% 中間blue 外側yellow */ |
● 斜め方向にグラデーション (sample30)
1 |
background: -webkit-radial-gradient(top right,red ,yellow); /* 右上red 左下yellow */ |
● 中心位置px指定でグラデーション (sample31)
1 |
background: -webkit-radial-gradient(10px 10px,red ,yellow); /* 左上からx方向に10px y方向に10pxを中心にredからyellow */ |
● 中心位置px指定で正円のグラデーション (sample32)
1 |
background: -webkit-radial-gradient(10px 10px,circle, red ,yellow); /* 左上からx方向に10px y方向に10px 正円でredからyellow */ |
● 中心位置px指定で正円かつ全体を含めるグラデーション (sample33)
1 |
background: -webkit-radial-gradient(10px 10px,circle contain, red ,yellow); /* 左上からx方向に10px y方向に10px 正円 全体を含める redからyellow */ |
● 中心位置px指定で正円かつ全体を覆うグラデーション (sample34)
1 |
background: -webkit-radial-gradient(10px 10px,circle cover, red ,yellow); /* 左上からx方向に10px y方向に10px 正円 全体を覆う redからyellow */ |
● 中心位置px指定で楕円かつ全体を覆うグラデーション (sample35)
1 |
background: -webkit-radial-gradient(10px 10px, ellipse cover, red ,yellow); /* 左上からx方向に10px y方向に10px 楕円 全体を覆う redからyellow */ |
要素の変形(拡大・縮小) 「transform:scale();」
拡大・縮小をする基準点がデフォルトでは、要素の中心になっています。
それを左上基準にしたい場合は「-webkit-transform-origin: top left;」を指定しておきます。
● x方向とy方向に拡大(要素の中心基準) (sample37)
1 |
-webkit-transform:scale(1.2, 1.5); /* 要素の中心を基準にx方向に1.2倍 y方向に1.5倍 */ |
● x方向とy方向に拡大(左上基準) (sample38)
1 2 |
-webkit-transform-origin:top left; /* 基準を左上に指定 */ -webkit-transform:scale(1.2, 1.5); /* x方向に1.2倍 y方向に1.5倍 */ |
● x方向のみ指定する場合(左上基準) (sample39)
1 2 |
-webkit-transform-origin:top left; /* 基準を左上に指定 */ -webkit-transform:scaleX(1.2); /* x方向に1.2倍 */ |
● y方向のみ指定する場合(左上基準) (sample40)
1 2 |
-webkit-transform-origin:top left; /* 基準を左上に指定 */ -webkit-transform:scaleY(1.2); /* y方向に1.2倍 */ |
要素の移動 「transform:translate();」
● x方向のみ移動指定する場合(左上基準) (sample41)
1 2 |
-webkit-transform-origin:top left; /* 基準を左上に指定 */ -webkit-transform:translateX(20px); /* x方向に20px移動 */ |
● x方向とy方向に移動指定する場合(左上基準) (sample42)
1 2 |
-webkit-transform-origin:top left; /* 基準を左上に指定 */ -webkit-transform:translate(20px, 20px); /* x方向に20px y方向に20px移動 */ |
要素の回転 「transform:rotate();」
● 45度回転する場合(左上基準) (sample43)
1 2 |
-webkit-transform-origin:top left; /* 基準を左上に指定 */ -webkit-transform:rotate(45deg); /* 45度回転 */ |
要素のゆがみ変形 「transform:skew();」
●x方向に 45度ゆがみ指定する場合(左上基準) (sample44)
1 2 |
-webkit-transform-origin:top left; /* 基準を左上に指定 */ -webkit-transform:skewX(45deg); /* x方向に45度ゆがみ */ |
●x方向に 45度、y方向に 20度ゆがみ指定する場合(左上基準) (sample45)
1 2 |
-webkit-transform-origin:top left; /* 基準を左上に指定 */ -webkit-transform:skew(45deg, 20deg); /* x方向に45度 かつ y方向に20度ゆがみ */ |
簡単なアニメーション 「transition」
いくつかのプロパティがありますので見てみましょう。
propaty | all, height, width(対象となる要素) |
duration | 1s(アニメーションにかかる時間) |
timing-function | ease(開始と終了を滑らかに) linear(一定の速度で) ease-in(開始がゆっくり) ease-out(終了がゆっくり) ense-in-out(開始と終了がゆっくり) |
delay | 2s(アニメーションするまでの遅延時間) |
▼マウスオーバーで要素が変化するアニメーション (sample46)
● マウスオーバーで高さが80pxから150pxに拡大かつ背景色がGrayからGreenへ変化する
対象要素: all
アニメーションにかかる時間: 1s
アニメーション動作: ease
アニメーションするまでの遅延時間: 0.5s
アニメーションをする元になる要素に下記のCSSを記述します。
1 2 3 4 |
-webkit-transition-propaty: all; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease; -webkit-transition-delay: 0.5s; |
:hoverに変形するCSSを記述します。
1 2 |
height: 150px; background-color: #00ff00; |
キーフレームでアニメーション 「animation」
name | animation(任意の名前) |
duration | 5s(アニメーションにかかるじかん) |
timing-function | ease(開始と終了を滑らかに) linear(一定の速度で) ease-in(開始がゆっくり) ease-out(終了がゆっくり) ense-in-out(開始と終了がゆっくり) |
delay | 2s(アニメーションするまでの遅延時間) |
iteration | infinite(アニメーションを繰り返す回数)1(数値で指定することも可能) |
direction | normal,alternate(アニメーションを交互に反転再生させるかどうかを指定、alternateを指定すると、奇数回では普通方向、偶数回では逆方向の再生となりアニメーションサイクルを繰り返すことができます。) |
▼キーフレーム指定で自動アニメーション
● 5秒かけてorange 50pxから green 100px そして yellow 150px に変形するアニメーション (sample47)
1 2 3 4 5 6 7 8 9 10 11 12 |
-webkit-animation-name: animationTest; /* 任意の名前を指定 */ -webkit-animation-duration: 5s; /* アニメーションにかかる時間 */ -webkit-animation-timing-function: ease; /* アニメーションの仕方 */ -webkit-animation-delay: 1s; /* アニメーションするまでの遅延時間 */ -webkit-animation-iteration-count: infinite; /* アニメーションする回数の指定 */ -webkit-animation-direction: normal; /* アニメーションの繰り返し方法の指定 */ } @-webkit-keyframes animationTest { 0% { width: 50px; background: orange;} 50% { width: 100px; background: green;} 100% { width: 150px; background: yellow;} } |
● 5秒かけてorange 50pxから green 100px そして yellow 150px に変形するアニメーション ※逆再生 (sample48)
1 2 3 4 5 6 7 8 9 10 11 12 |
-webkit-animation-name: animationTest2; /* 任意の名前を指定 */ -webkit-animation-duration: 5s; /* アニメーションにかかる時間 */ -webkit-animation-timing-function: ease; /* アニメーションの仕方 */ -webkit-animation-delay: 1s; /* アニメーションするまでの遅延時間 */ -webkit-animation-iteration-count: infinite; /* アニメーションする回数の指定 */ -webkit-animation-direction: alternate; /* アニメーションの繰り返し方法の指定 */ } @-webkit-keyframes animationTest2 { 0% { width: 50px; background: orange;} 50% { width: 100px; background: green;} 100% { width: 150px; background: yellow;} } |
属性セレクタを使う
下記のようなHTMLがあるとします。
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 |
<h3>リスト</h3> <ul class="listbox"> <li><a href="http://www.yahoo.co.jp">Yahoo!</a></li> <li><a href="http://www.google.com">Google</a></li> <li><a href="http://www.jp.msn.com/">msn</a></li> <li><a href="mailto:sample@gmail.com">E-Mail</a></li> </ul> <ul class="listbox2"> <li><a href="http://www.yahoo.co.jp">Yahoo!</a></li> <li><a href="http://www.google.com">Google</a></li> <li><a href="http://www.jp.msn.com/">msn</a></li> <li><a href="mailto:sample@gmail.com">E-Mail</a></li> </ul> <ul class="listbox3"> <li><a href="http://www.yahoo.co.jp">Yahoo!</a></li> <li><a href="http://www.google.com">Google</a></li> <li><a href="http://www.jp.msn.com/">msn</a></li> <li><a href="mailto:sample@gmail.com">E-Mail</a></li> </ul> <ul class="listbox4"> <li><a href="http://www.yahoo.co.jp">Yahoo!</a></li> <li><a href="http://www.google.com">Google</a></li> <li><a href="http://www.jp.msn.com/">msn</a></li> <li><a href="mailto:sample@gmail.com">E-Mail</a></li> </ul> |
● a要素の中に「http://www.yahoo.co.jp」というものに対してリンク色を緑にする指定をします。
a[href=”対象となる文字列”] {
内容を記述
}
1 2 3 |
a[href="http://www.yahoo.co.jp"]{ color: green; } |
● a要素の中のはじめが「http」というものに対してリンク色を赤にする指定をします。
a[href^=”対象となる文字列”] {
内容を記述
}
1 2 3 |
a[href^="http"]{ color: red; } |
● a要素の中の最後が「com」というものに対してリンク色をオレンジにする指定をします。
a[href$=”対象となる文字列”] {
内容を記述
}
1 2 3 |
a[href$="com"]{ color: orange; } |
● a要素の中に「jp」というものが含まれているものに対してリンク色を黄色にする指定をします。
a[href*=”対象となる文字列”] {
内容を記述
}
1 2 3 |
a[href*="jp"]{ color: yellow; } |
n番目の要素に対して指定する
要素:nth-child()
● 2番目の要素を赤文字色にする。
1 2 3 |
li:nth-child(2) { color: red; } |
● 奇数番目の要素を青文字色にする。
1 2 3 |
li:nth-child(odd) { color: blue; } |
● 偶数番目の要素を
1 2 3 |
li:nth-child(even) { color: green; } |
● 3の倍数番目の要素をオレンジ色にする
1 2 3 |
li:nth-child(3n) { color: orange; } |
● 3n+1(1,4,7…)番目の要素をteal文字色にする。
1 2 3 |
li:nth-child(3n+1) { color: teal; } |
はじめの要素に対して指定する
要素:first-child
● はじめの要素をpurple文字色にする。
1 2 3 |
li:first-child { color: purple; } |
● 最後の要素をmaroon文字色にする。
1 2 3 |
li:last-child { color: maroon; } |
● 要素がひとつだけの場合olive文字色にする。
1 2 3 |
li:only-child { color: olive; } |
ある要素のうち、n番目の要素に対して指定する
nth-of-type()
● li要素のうち、2番目のli要素を赤文字色にする。
1 2 3 |
li:nth-of-type(2) { color: red; } |
● li要素のうち、はじめのli要素を青文字色にする。
first-of-type()
1 2 3 |
li:first-of-type { color: blue; } |
● li要素のうち、最後のli要素を緑文字色にする。
last-of-type()
1 2 3 |
li:last-of-type { color: green; } |
● li要素のうち、li要素がひとつのみの場合オレンジ文字色にする。
only-of-type()
1 2 3 |
li:only-of-type { color: orange; } |
要素の状態で指定するセレクタ
例として下記のようなHTMLがあるとします。
1 2 3 4 5 6 |
<h3>ユーザー情報</h3> <p>あなたのID名: <input type="text" name="user-name" value="your-ID" disabled></p> <p>Email: <input type="text" name="email"></p> <p><input type="radio" name="opt1" value="1"> <label>docomo</label></p> <p><input type="radio" name="opt1" value="2"> <label>SoftBank</label></p> <p><input type="radio" name="opt1" value="3"> <label>au</label></p> |
● input要素 type=”text” のdisabledが指定されている要素に対して太文字の指定をします。
1 2 3 |
input[type="text"]:disabled { font-weight: bold; } |
● input要素 type=”text” のenabled(何も指定されていない)の要素に対して赤い枠線の指定をします。
1 2 3 |
input[type="text"]:enabled { border: 1px solid red; } |
● input要素 type=”radio” のchecked(チェックされた状態)の要素に対して、ラベル文字を太文字にします。
1 2 3 |
input[type="radio"]:checked + label{ font-weight: bold; } |