CSS: CSS3対応

CSS3では、CSS2に比べて大幅に表現力が強化されました。ここでは、CSS3で増えたプロパティについて解説していきます。

前回課題でデザインをしたものを修正して構いませんが、以前デザインしたものと重複する箇所には、必要に応じて「/*」「*/」を入れてコメントアウトして試すのをお勧めします。

ボーダーの角丸

枠および背景について角丸（角を丸める）が使えます。

border-top-left-radius: 値1
border-top-right-radius: 値2
border-bottom-right-radius: 値3
border-bottom-left-radius: 値4

値1、値2、値3、値4には以下のものが指定できます。

数値	単位付きの数値で各丸の半径の長さを指定
%	パーセントで各丸の半径の長さを指定

border-radius: 値1 値2 値3 値4

値1 値2 値3 値4は左上、右上、右下、左下を順番にまとめて指定します。値1 値2だけ指定すると左上・右下、右上・左下をまとめて指定に、値1だけ指定すると4隅をまとめて指定することになります。

使用例

下記のコードを追記してください。

css Zen Garden（日本語版）サンプルファイル style.css

h1 {
    border-radius: 5px 20px;
    border: 5px double green;
}
h2 {
    border-radius: 20px;
    background-color: cyan;
    padding:5px;
}
#extraDiv1 {
    border-radius: 50%;
    background-color: red;
    width: 100px;
    height: 100px;
}

#extraDiv1はHTMLの最後にある装飾用に用意されている中身のないdiv要素です。スクロールしてページ下を確認してください。

確認が終わったらこのスタイルは削除しておきましょう。

CSS2では角丸のプロパティがなかったため、角丸にした背景画像を使う必要がありました。

背景の領域指定

背景を表示する領域を指定します。

background-clip: 値

値には以下のものが指定できます。

padding-box（初期値）	ボーダーを除いた領域
border-box	ボーダーを含めた領域
content-box	余白を含まないコンテンツ領域

使用例

下記のコードを追記してください。

css Zen Garden（日本語版）サンプルファイル style.css

#extraDiv1, #extraDiv2, #extraDiv3 {
    border: 20px dotted blue;
    background-color: yellow;
    width: 100px;
    height: 100px;
    margin: 10px;
    padding: 10px;
}
#extraDiv1 { background-clip: padding-box; }
#extraDiv2 { background-clip: border-box; }
#extraDiv3 { background-clip: content-box; }

スクロールしてページ下を確認してください。

確認が終わったらこのスタイルは削除しておきましょう。

CSS2ではborderまでが背景の領域となり、変更できません。

背景画像の拡大・縮小

背景画像を拡大・縮小します。

background-size: 値

値には以下のものが指定できます。

auto（初期値）	背景画像のサイズを変更しない
contain	画像の縦横比を変えずに指定要素に収まるように調整する
cover	画像の縦横比を変えずに指定要素を含むように調整する
数値、%値	画像の横幅、高さをスペースで区切って指定する

使用例

下記のコードを追記してください。

css Zen Garden（日本語版）サンプルファイル style.css

#extraDiv1, #extraDiv2, #extraDiv3 {
    border: solid 1px red;
    background-image: url(http://www.tokiwa.ac.jp/~shio/IMG_3087.jpg);
    background-repeat: no-repeat;
    background-position: center;
    width: 500px;
    height: 200px;
    margin: 10px;
    padding: 10px;
}
#extraDiv1 { background-size: contain; }
#extraDiv2 { background-size: cover; }
#extraDiv3 { background-size: 50% 50%; }

スクロールしてページ下を確認してください。

確認が終わったらこのスタイルは削除しておきましょう。

線形グラデーション

背景色に線形のグラデーションが指定できます。linear-gradient(), repeating-linear-gradient()をbackgroundの値として記載します。repeatingの方は繰り返しです。

background: linear-gradient(方向, 開始色 開始位置, 途中色 途中位置, 終了色 終了位置);

background: repeating-linear-gradient(方向, 開始色 開始位置, 途中色 途中位置, 終了色 終了位置);

値には以下のものが指定できます。途中色途中位置は複数個指定できます。

方向
角度	「数値deg」で上方向を0度とした時計回りの角度を指定
to top	上向き（0degと同じ）
to top right	右上向き
to right	右向き
to bottom right	右下向き
to bottom	下向き
to bottom left	左下向き
to left	左向き
to top left	左上向き

色と位置（位置は省略可）
色の指定	カラーネーム、#16進数6桁、#16進数3桁
数値と単位	それぞれの位置を長さで指定
%値	それぞれの位置をパーセントで指定

使用例

下記のコードを追記してください。

css Zen Garden（日本語版）サンプルファイル style.css

#extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5 {
    width: 200px;
    height: 150px;
    margin: 10px;
}
#extraDiv1 { background: linear-gradient(to bottom right, red, yellow, green); }
#extraDiv2 { background: linear-gradient(90deg, red, yellow, green); }
#extraDiv3 { background: linear-gradient(90deg, red 0%, yellow 40%, green 80%); }
#extraDiv4 { background: repeating-linear-gradient(90deg, red 0%, yellow 25%, green 50%); }
#extraDiv5 { background: repeating-linear-gradient(90deg, red 0%, red 5%, white 5%, white 10%); }

スクロールしてページ下を確認してください。

確認が終わったらこのスタイルは削除しておきましょう。

課題

７色の虹色の線形グラデーションを作成せよ。

円形グラデーション

背景色に円形のグラデーションが指定できます。radial-gradient(), repeating-radial-gradient()をbackgroundの値として記載します。repeatingの方は繰り返しです。

background: radial-gradient(形状, サイズ 中心の位置, 開始色 開始位置, 途中色 途中位置, 終了色 終了位置);

background: repeating-radial-gradient(形状 サイズ 中心の位置, 開始色 開始位置, 途中色 途中位置, 終了色 終了位置);

値には以下のものが指定できます。途中色途中位置は複数個指定できます。

形状
ellipse（初期値）	楕円
circle	正円

サイズ
closest-side	一番近い辺に合わせる
closest-corner	一番近い角に合わせる
farthest-side	一番遠い辺に合わせる
farthest-corner	一番遠い角に合わせる
数値と単位	水平、垂直それぞれの半径をスペースで区切り長さで指定
%値	水平、垂直それぞれの半径をスペースで区切りパーセントで指定

中心の位置
at top	要素の上の辺が中心
at top right	要素の右上の角が中心
at right	要素の右の辺が中心
at bottom right	要素の右下の角が中心
at bottom	要素の下の辺が中心
at bottom left	要素の左下の角が中心
at left	要素の左の辺が中心
at top left	要素の左上の角が中心
at center	要素の中央が中心
数値と単位	要素の左上の角からの水平、垂直の距離をスペースで区切り長さで指定
%値	幅と高さの割合をスペースで区切りパーセントで指定

色と位置（位置は省略可）
色の指定	カラーネーム、#16進数6桁、#16進数3桁
数値と単位	それぞれの位置を長さで指定
%値	それぞれの位置をパーセントで指定

使用例

下記のコードを追記してください。

css Zen Garden（日本語版）サンプルファイル style.css

#extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5 {
    width: 200px;
    height: 150px;
    margin: 10px;
}
#extraDiv1 { background: radial-gradient(red, yellow, green); }
#extraDiv2 { background: radial-gradient(circle closest-side at center, red, yellow, green); }
#extraDiv3 { background: radial-gradient(circle closest-corner at center, red, yellow, green); }
#extraDiv4 { background: repeating-radial-gradient(circle, red 0%, yellow 25%, green 50%); }
#extraDiv5 { background: repeating-radial-gradient(circle, red 0%, red 5%, white 5%, white 10%); }

スクロールしてページ下を確認してください。

確認が終わったらこのスタイルは削除しておきましょう。

ボックスの影

ボックスの影が指定できます。

box-shadow: 長さ ぼかす半径 広がり 色;

値には以下のものが指定できます。カンマで区切ることで複数指定できます。

長さ
数値と単位	水平、垂直それぞれをスペースで区切り長さを指定

ぼかす半径
数値と単位	影のぼかしの長さを指定

広がり
数値と単位	影の広がりの長さを指定

色
色の指定	カラーネーム、#16進数6桁、#16進数3桁

使用例

下記のコードを追記してください。

css Zen Garden（日本語版）サンプルファイル style.css

#extraDiv1, #extraDiv2, #extraDiv3 {
    width: 200px;
    height: 150px;
    margin: 15px;
}
#extraDiv1 { box-shadow: 2px 2px 3px 5px black; }
#extraDiv2 { box-shadow: 2px 2px 3px 5px gray; }
#extraDiv3 { box-shadow: 2px 2px 3px 5px black, 5px 5px 8px 10px gray; }

スクロールしてページ下を確認してください。

確認が終わったらこのスタイルは削除しておきましょう。

課題

cssZenGardenJpn.htmにCSS3のプロパティを使ったスタイルをつけよ。