CSS: CSS3対応

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

css Zen Garden(日本語版)サンプルファイルで実践してみましょう。

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

ボーダーの角丸

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

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

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

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

課題

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

円形グラデーション

背景色に円形のグラデーションが指定できます。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のプロパティを使ったスタイルをつけよ。