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のプロパティを使ったスタイルをつけよ。
Programming Laboratory (Shio seminar)