CSS3基礎を簡単にまとめてみました。

css3-basic

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」

basic-img1

● 4辺指定の場合 (sample1)

 

● 2辺×2辺指定の場合 (sample2)

 

 ● 1辺×2辺×1辺指定の場合 (sample3)

 

●   1辺ずつ個別に指定する場合 (sample4)

 

 ● 場所を直接指定する場合 (sample5)

 

 ● %指定する場合(4辺指定) (sample6)

 

 ● 背景にイメージを配置する場合 (sample7)

 

 背景透過 「background-color: rgba(0,0,0,0.8);」

basic-img2

● 背景色を透過させる場合 (sample8)

 

 要素自体を透過 「opacity: 0.8;」

basic-img3

● 要素全体を透過させる場合 (sample9)

 

 要素に影を付ける 「box-shadow」

basic-img4

● x方向とy方向 (sample10)

 

● x方向とy方向とボカシ (sample11)

 

● x方向とy方向とボカシと透過 (sample12)

 

● x方向とy方向とボカシと広がりと透過 (sample13)

 

● x方向とy方向とボカシと透過 内側 (sample14)

 

● x方向とy方向とボカシと透過 内側 / x方向とy方向 (sample15)

 

テキストに影を付ける 「text-shadow」

basic-img5

● x方向とy方向とボカシ (sample16)

 

● x方向とy方向とボカシ / x方向とy方向とボカシ (sample17)

 

● x方向とy方向とボカシ / -x方向と-y方向とボカシ (sample18)

 

 背景色グラデーション(線形) 「linear-gradient」

basic-img6

● 上から下にグラデーション(2color) (sample19)

 

● 上から下にグラデーション(3color) (sample20)

 

● 上から下にグラデーション(%指定) (sample21)

 

● 上から下にグラデーション(px指定) (sample22)

 

● 下から上にグラデーション (sample23)

 

● 横方向にグラデーション (sample24)

 

● 斜め方向にグラデーション (sample25)

 

● 斜め方向にグラデーション(角度指定) (sample26)

 

 背景色グラデーション(円形) 「redial-gradient」

basic-img7

● 中心から外方向にグラデーション(2color) (sample27)

 

● 中心から外方向にグラデーション(3color) (sample28)

 

● 中心から外方向にグラデーション(3color) %指定 (sample29)

 

● 斜め方向にグラデーション (sample30)

 

● 中心位置px指定でグラデーション (sample31)

 

● 中心位置px指定で正円のグラデーション (sample32)

 

● 中心位置px指定で正円かつ全体を含めるグラデーション (sample33)

 

● 中心位置px指定で正円かつ全体を覆うグラデーション (sample34)

 

● 中心位置px指定で楕円かつ全体を覆うグラデーション (sample35)

 

要素の変形(拡大・縮小) 「transform:scale();」

basic-img8

 

拡大・縮小をする基準点がデフォルトでは、要素の中心になっています。
それを左上基準にしたい場合は「-webkit-transform-origin: top left;」を指定しておきます。

 

● x方向とy方向に拡大(要素の中心基準) (sample37)

 

● x方向とy方向に拡大(左上基準) (sample38)

 

● x方向のみ指定する場合(左上基準) (sample39)

 

● y方向のみ指定する場合(左上基準) (sample40)

 

要素の移動 「transform:translate();」

basic-img9

● x方向のみ移動指定する場合(左上基準) (sample41)

 

● x方向とy方向に移動指定する場合(左上基準) (sample42)

 

要素の回転 「transform:rotate();」

● 45度回転する場合(左上基準) (sample43)

 

要素のゆがみ変形 「transform:skew();」

●x方向に 45度ゆがみ指定する場合(左上基準) (sample44)

 

●x方向に 45度、y方向に 20度ゆがみ指定する場合(左上基準) (sample45)

 

簡単なアニメーション 「transition」

いくつかのプロパティがありますので見てみましょう。

propaty all, height, width(対象となる要素)
duration 1s(アニメーションにかかる時間)
timing-function ease(開始と終了を滑らかに)
linear(一定の速度で)
ease-in(開始がゆっくり)
ease-out(終了がゆっくり)
ense-in-out(開始と終了がゆっくり)
delay 2s(アニメーションするまでの遅延時間)

 basic-img10

▼マウスオーバーで要素が変化するアニメーション (sample46)

● マウスオーバーで高さが80pxから150pxに拡大かつ背景色がGrayからGreenへ変化する

対象要素: all
アニメーションにかかる時間: 1s
アニメーション動作: ease
アニメーションするまでの遅延時間: 0.5s

アニメーションをする元になる要素に下記のCSSを記述します。

 :hoverに変形するCSSを記述します。

 

キーフレームでアニメーション 「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を指定すると、奇数回では普通方向、偶数回では逆方向の再生となりアニメーションサイクルを繰り返すことができます。)

 basic-img11

▼キーフレーム指定で自動アニメーション

● 5秒かけてorange 50pxから green 100px そして yellow 150px に変形するアニメーション (sample47)

 

● 5秒かけてorange 50pxから green 100px そして yellow 150px に変形するアニメーション ※逆再生 (sample48)

 

属性セレクタを使う

basic-img12

下記のようなHTMLがあるとします。

● a要素の中に「http://www.yahoo.co.jp」というものに対してリンク色を緑にする指定をします。

a[href=”対象となる文字列”] {
 内容を記述
}

 

● a要素の中のはじめが「http」というものに対してリンク色を赤にする指定をします。

a[href^=”対象となる文字列”] {
 内容を記述
}

 

 ● a要素の中の最後が「com」というものに対してリンク色をオレンジにする指定をします。

a[href$=”対象となる文字列”] {
 内容を記述
}

 

 ● a要素の中に「jp」というものが含まれているものに対してリンク色を黄色にする指定をします。

a[href*=”対象となる文字列”] {
 内容を記述
}

 

n番目の要素に対して指定する

要素:nth-child()

● 2番目の要素を赤文字色にする。

 basic-img13

 

● 奇数番目の要素を青文字色にする。

 basic-img14

 

● 偶数番目の要素を

basic-img15

 

● 3の倍数番目の要素をオレンジ色にする

 basic-img16

 

● 3n+1(1,4,7…)番目の要素をteal文字色にする。

 basic-img17

 

はじめの要素に対して指定する

要素:first-child

● はじめの要素をpurple文字色にする。

 basic-img18

 

● 最後の要素をmaroon文字色にする。

 basic-img19

 

● 要素がひとつだけの場合olive文字色にする。

 basic-img20

 

ある要素のうち、n番目の要素に対して指定する

nth-of-type()

● li要素のうち、2番目のli要素を赤文字色にする。

 basic-img21

 

● li要素のうち、はじめのli要素を青文字色にする。

first-of-type()

 basic-img22

 

● li要素のうち、最後のli要素を緑文字色にする。

last-of-type()

 basic-img23

 

● li要素のうち、li要素がひとつのみの場合オレンジ文字色にする。

only-of-type()

basic-img24

 

要素の状態で指定するセレクタ

例として下記のようなHTMLがあるとします。

 ● input要素 type=”text” のdisabledが指定されている要素に対して太文字の指定をします。

 basic-img25

 

● input要素 type=”text” のenabled(何も指定されていない)の要素に対して赤い枠線の指定をします。

 

● input要素 type=”radio” のchecked(チェックされた状態)の要素に対して、ラベル文字を太文字にします。


 

タイトルとURLをコピーしました