Web Design Leaves

角丸 border-radius

border-radius は、半径を指定してボックスの角を丸くするプロパティです。以下が書式です。

border-radius: 角丸の半径 ;

値を１つだけ指定すると、４つのコーナーを一括して指定できます。それぞれのコーナーに別々の値を指定することもできます。

以下は正方形の div, p, a 要素に border-radius を設定した例です。正方形の１辺の半分の長さを値に指定すると円にすることができます。

四隅を指定する場合は、左上・右上・右下・左下の順に指定します。

<div class="sample br1 clearfix">
  <div class="br_sample_01">01</div>
  <p class="br_sample_02">02</p>
  <a href="#" class="br_sample_03">03</a>
</div> 

.br_sample_01 {
  background-color: #D6F4F9;
  border: 1px solid #709ECF;
  border-radius: 4px;
}

.br_sample_02 {
  background-color: #F8E0EB;
  border: 1px solid #DF94BE;
  border-radius: 10px 20px 5px 30px;
}

.br_sample_03 {
  background-color: #F5F4CE;
  border: 1px solid #F1D37B;
  border-radius: 40px;
}
.br1 a {
  display: block;
}
.br1 div, .br1 p, .br1 a {
  width: 80px;
  height: 80px;
  float: left;
  margin: 0 20px;
  text-align: center;
  line-height: 80px;
}

border-radius の値の記述形式

border-radius: 全ての角の値;　/* 値が１つ */
border-radius: 左上・右上・右下・左下;　/* 値が４つ */
border-radius: 左上・右上と左下・右下;　/* 値が３つ */
border-radius: 左上と右下・右上と左下;　/* 値が２つ */

以下のプロパティを使うと、それぞれのコーナーの角丸を個別に指定することができます。

• border-top-left-radius（左上）
• border-top-right-radius（右上）
• border-bottom-left-radius（左下）
• border-bottom-right-radius（右下）

楕円

半径を水平方向と垂直方向に分けて指定すると、角を楕円にすることも可能です。

水平方向と垂直方向の半径のセットは、スラッシュ（ / ）で区切ります。

border-radius: 水平方向 / 垂直方向;  

<div class="sample br2">
  <div class="br_sample_04">04</div>
  <div class="br_sample_05">05</div>
</div> 

.br_sample_04 {
  background-color: #BDF1CA;
  border: 1px solid #38A463;
  border-radius: 80px / 40px;
  width: 160px;
  height: 80px;
}
.br_sample_05 {
  background-color: #E79622;
  color: #FFF;
  border-radius: 60px / 40px;
  width: 200px;
  height: 80px;
}
.br2 div {
  float: left;
  margin: 0 20px;
  text-align: center;
  line-height: 80px;
}

テーブルの角丸

border-radius はテーブルに適用することもできます。セル（td や th 要素）を角丸の罫線で囲むことができます。

但し、table 要素の「border-collapse」の指定は「separate」にする必要があります。「collapse」を指定すると角は丸くなりません。

table.brt {
  width: 256px;
  border-collapse: separate;
  border-spacing: 4px;
  border: 2px solid #6A9CF4;
  background-color: #C7DFF8;
  border-radius: 8px;
}

.brt td {
  width: 56px;
  height: 56px;
  border:2px solid #D89495;
  background-color: #FBEAEA;
  border-radius: 28px;
  text-align: center;
}

<table class="brt">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>
  <tr>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
  </tr>
  <tr>
    <td>I</td>
    <td>J</td>
    <td>K</td>
    <td>L</td>
  </tr>
</table>

ブラウザの実装状況

border-radius のベンダープレフィックスは、ほぼ不要です。

Can I Use: border-radius

RGBA 値 rgba()

rgba()は、RGBA 値で色を指定する場合に使用します。rgb(), rgba() はプロパティではなく、プロパティの値（の指定方法）になります。

色の指定方法 RGB 値

color プロパティや background-color プロパティ等で色の値を指定する場合、色の単位は「カラーキーワード」または「RGB 値」で指定することができます。

以下は全て p 要素を青で表示する指定例です。

p {
  color: blue;              /* カラーキーワード */
  color: #0000FF;           /* RGB 値（16進数、6桁）*/
  color: #00F;              /* RGB 値（16進数、3桁）*/
  color: rgb(0,0,255);      /* RGB 値（10進数）*/
  color: rgb(0%,0%,100%);   /* RGB 値（パーセンテージ）*/
}

カラーキーワード

あらかじめ決められたキーワードを指定する事で該当の色を表示することができます。

以下は、HTML 4（CSS 1）で定義済みの16色と CSS2.1 で新たに追加された orange を含む17色です。

CSS3 では拡張されたカラーキーワードを指定することができます。

CSS Color Module Level 3：Extended color keywords

RGB 値

色は Red-Green-Blue (RGB) モデルを使って定義できます。

16進記法 #RRGGBB と #RGB

• "#" に続く6個の16進文字 (0-9, A-F)
• "#" に続く3個の16進文字 (0-9, A-F)

3文字 RGB 記法 (#RGB) と6文字記法 (#RRGGBB) は等価です。例えば、#f03 と #ff0033 は同じ色を表します。

関数記法 rgb(R,G,B)

• 10進数：RGB 値の各値の10進数（0～255）を半角カンマ区切りで指定します。
• パーセンテージ：RGB 値の各値のパーセンテージ値（0%～100%）を半角カンマ区切りで指定します。

以下は全て同じ値（赤）です。

color: rgb(255,0,0);
color: rgb(100%,0%,0%);
color: #ff0000;
color: #f00;
color: red;

6桁の16進記法/ #に続く6個の16進文字 (0-9, A-F)を入力して「Change」をクリックすると、下の正方形の色がその値の色に変わります。

10進数：RGB 値の各値の10進数（0～255）を入力して「Change」をクリックすると、下の正方形の色がその値の色に変わります。

RGBA 値

RGB カラーモデルの Red・Green・Blueに、Alphaが加わったものです。 Alphaは色の透明度を表します。

RGBA カラーモデルで色を指定する際には、半角カンマ区切りにした３つの数値で RGB の色を指定した後に、数値で透明度を指定します。 透明度は、0（完全に透明）～1（完全に不透明）の数値で指定します。

<div class="clearfix">
  <div class="rgba rgba1">1</div>
  <div class="rgba rgba2">0.75</div>
  <div class="rgba rgba3">0.5</div>
  <div class="rgba rgba4">0.25</div>
  <div class="rgba rgba5">0</div>
</div>

.rgba {
  width: 50px;
  height: 50px;
  margin-right: 5px;
  float: left;
  border: 1px solid green;
}
.rgba1 {
  background-color: rgba(0,128,0,1);
}
.rgba2 {
  background-color: rgba(0,128,0,0.75);
}
.rgba3 {
  background-color: rgba(0,128,0,0.5);
}
.rgba4 {
  background-color: rgba(0,128,0,0.25);
}
.rgba5 {
  background-color: rgba(0,128,0,0);
}  

ブラウザの実装状況

rgba() はほとんどの最近のブラウザで実装されています。

Can I Use: CSS3 Colors

HSL / HSLA

HSL 色空間とは、色相（Hue）、彩度（Saturation）、輝度（Lightness）の３つの成分からなる色空間のことです。

色相を0〜360度の範囲で、彩度を純色から灰色の範囲で、輝度を白から黒の範囲で表すものです。

hsl(), hsla() はプロパティではなく、プロパティの値（関数）になります。

hsl() の指定方法

background-color: hsl(Hue,Saturation,Lightness);

Hue（色相）

0〜359の数値で指定します（単位はつけません）。色相はカラーサークルの角度として表されます。定義により red=0=360 であり、他の色は円の周りに広がります： green=120, blue=240 など（角度であるため、-120=240 や 480=120 のように暗黙のうちに変換されます。）。色相環の正反対に位置（+ 180）する色は「補色」と言って、お互いの色を引き立て合う性質があります。

Saturation（彩度）

0%～100%で指定します。0%は灰色で、100%に向かって純色になっていきます。

Lightness（輝度）

0%～100%で指定します。0%は黒、100%は白となり、純色を表現したい場合は50%を指定します。

background-color: hsl(0, 100%, 50%)  /* 純色の赤 */
background-color: hsl(120, 100%, 50%)  /* 純色の緑 */
background-color: hsl(240, 100%, 50%)  /* 純色の青 */ 

RGB に対する HSL の利点は、より直感的であることです。ある程度、色を推測可能であり、微調整ができます。同一色相配色を作るのも簡単で、色相（hue）を同じにして彩度（saturation）と輝度（lightness）を変化させます。

補色は、指定した色の角度（Hue の値）に 180 を足すことで簡単に求められます。

以下は Hue、Saturation、Lightness の値（数値）を入れて「Change」をクリックすると、下の正方形の背景色を変更します。

Hue の値の例：0（赤）、120（緑）、240（青）

hsla() の指定方法

HSLA は、HSL 色モデルに "Alpha"（透明度）を追加して色の透明度を指定できるように拡張されています。

• 0 = 透明（transparent）
• 1 = 不透明（opaque）

background-color: hsla(Hue,Saturation,Lightness,Alpha);
background-color: hsla(120, 100%, 50%, 0.5) /* 半透明の緑 */

以下は Hue、Saturation、Lightness、Alpha の値（数値）を入れて「Change」をクリックすると、下の正方形の背景色を変更します。

ブラウザの実装状況

hsla() はほとんどの最近のブラウザで実装されています。

Can I Use: CSS3 Colors

関連項目：hsl() と CSS 変数（CSS カスタムプロパティ）で色を定義

透明度 opacity

opacity は、透明度を設定するプロパティです。

透明度は、0.0（完全に透明）～1.0（完全に不透明）の数値で指定します。

opacity プロパティで1未満の数値を指定した際には、透明効果が対象の要素全体に均一に適用されます。 コンテナ要素に指定した場合には、その内容にも透明効果が適用されて背景と混合したような表示となります。

透明効果を要素全体ではなく、背景色やボーダー色に個別に適用したい場合には、rgba() や hsla() で指定することができます。

.foo {
    opacity:0.7;
}

以下は、div 要素全体に opacity を設定した場合と、div 要素の background-color に rgba() を設定した場合のサンプルです。

div 要素全体に opacity を設定した場合、ボーダーやその子要素の p 要素にも opacity が適用されているのがわかります。

<div class="opacity">
  <p>Opacity</p>
</div>

<div class="rgba_sample">
  <p>RGBA</p>
</div>

.opacity {
  width: 100px;
  height: 50px;
  margin: 20px;
  background-color: green;
  border: 1px solid green;
  line-height: 50px;
  text-align: center;
  opacity: 0.5;
}
.rgba_sample {
  width: 100px;
  height: 50px;
  margin: 20px;
  background-color: rgba(0,128,0, 0.5);
  border: 1px solid green;
  line-height: 50px;
  text-align: center;
}

ブラウザの実装状況

opacity のベンダープレフィックスは、不要です。

Can I Use: opacity

currentColor キーワード

border プロパティで border-color を指定しない場合、border-color は自動的に color で設定している色が適用されます。

<p style="color: green; border: 1px solid; max-width: 200px;">Test</p>
<p style="color: green; border: 1px solid red; max-width: 200px;">Test</p>

Test

Test

これは border-color プロパティの初期値が color プロパティの値と定義されているためです。

CSS3 では要素に設定されている color プロパティの値を明示的に利用できるように currentColor（currentcolor） キーワードが導入されました。

currentColor キーワードは要素の color プロパティの値を表し、色の値を指定できる他のプロパティ（border-color, box-shadow, outline, background-color など）で使用できます。

currentColor キーワードを使うと、デフォルトでは継承を行わない子要素のプロパティに色を継承させることができます。

<div class="parent">
  <p>text (parent)</p>
  <div class="child1">
    <p>text (child1)</p>
  </div>
  <div class="child2">
    <p>text (child2)</p>
  </div>
</div>

.parent {
  border: 2px solid silver;
  color:  green;
}
.child1 {
  border: 2px solid currentColor;
}
.child2 {
  background-color: currentColor;
}
.child2 p {
  color: #fff;
}

以下は要素の color プロパティの値と同じ色をボーダーに設定する例です。

p span {
  border: 1px solid currentColor;
}

<p>
  <span style="color: red">Red Color</span>
  <span style="color: blue">Blue Color</span>
  <span style="color: green">Green Color</span>
</p>

Red Color Blue Color Green Color

MDN currentcolor キーワード

w3.org ‘currentColor’ color keyword

ボックスシャドウ box-shadow

box-shadow はボックスに影を付けるプロパティです。以下が書式です。

box-shadow: 横オフセット 縦オフセット ブラー スプレッド 色 insetキーワード ;

標準では、ボックスの外側に影をつけますが、値の末尾に「inset」というキーワードを指定するとボックスの内側に影をつけることができます。

また、影の設定をカンマで区切って指定すると複数の影を重ねて表示することができます。

box-shadow: 影の設定, 影の設定, 影の設定, ....

影の表示

影を表示するためには、「横オフセット」、「縦オフセット」、「色」の指定が必要です。

• 横オフセット：横方向の影までの距離
  正の値を指定すると右へ、負の値を指定すると左へ影が移動します。
• 縦オフセット：縦方向の影までの距離
  正の値を指定すると下へ、負の値を指定すると上へ影が移動します。

<div class="bs box-shadow1">Box Shadow</div>

.bs {
  width: 200px;
  height: 40px;
  margin: 30px 0;
  background-color: #3179CF;
  border-radius: 6px;
  line-height: 40px;
  color: #FFF;
  text-align: center;
}
.box-shadow1 {
  box-shadow: 20px 10px #8D9EB8;
}

ブラー（ぼかし）

影の輪郭をぼかすには、ブラーの値を指定します。負の値を指定することはできません。 値が大きいほど影の端のぼかしが強くなります。

<div class="bs box-shadow2">Box Shadow</div>

.box-shadow2 {
  box-shadow: 20px 10px 10px #8D9EB8;
}

スプレッド（広がり）

スプレッドを指定すると、影を広げることができます。負の値を指定すると、影を小さく（狭く）することができます。

<div class="bs box-shadow3">Box Shadow</div>
<div class="bs box-shadow4">Box Shadow</div>

.box-shadow3 {
  box-shadow: 20px 10px 10px 10px #8D9EB8;
}
.box-shadow4 {
  box-shadow: 20px 10px 10px -5px #8D9EB8;
}

inset キーワード

設定の最後に「」キーワードを指定すると、ボックスの内側に影をつけることができます。

<div class="bs box-shadow5">Box Shadow</div>

.box-shadow5 {
  box-shadow: 5px 5px 10px #60608C inset;
}

グロー効果

影を利用してボックスにグロー（光彩）効果をつけることもできます。

グロー効果をつけるには、横と縦のオフセットを「0px」に指定し、ブラーやスプレッドの値を指定します。

<div class="bs box-shadow6">Box Shadow</div>

.box-shadow6 {
  box-shadow: 0px 0px 15px #3741F7;
}

複数の影

複数の影をつけるには、影の設定をカンマで区切って指定します。1つ目に指定した影の設定が一番上に重ねて表示されます。

<div class="bs box-shadow7">Box Shadow</div>
<div class="bs box-shadow8">Box Shadow</div>

.box-shadow7 {
  box-shadow: 10px 5px 5px #8D9EB8, 20px 10px 10px #B0F5C9;
}
.box-shadow8 {
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3) inset,
            -3px -3px 8px rgba(0, 0, 0, 0.3) inset;
}

ブラウザの実装状況

box-shadow のベンダープレフィックスは、ほぼ不要です。

Can I Use: box-shadow

テキストシャドウ text-shadow

text-shadow はテキストに影を付けるプロパティです。以下が書式です。

text-shadow: 横オフセット 縦オフセット ブラー  色 ;
/*または、*/
text-shadow: 色 横オフセット 縦オフセット ブラー ; 

また、影の設定をカンマで区切って指定すると複数の影を重ねて表示することができます。複数の影は手前から奥に適用され、最初に指定された影が上にきます。

横オフセット 縦オフセット

影の長さを単位付きの数値で指定します。横オフセット（水平方向）、縦オフセット（垂直方向）の値を半角スペースで区切って記述します。（必須）

• 横オフセット：正の値を指定すると右へ、負の値を指定すると左へ影を配置します。
• 縦オフセット：正の値を指定すると下へ、負の値を指定すると上へ影を配置します。

両方の値が 0 ならば、影はテキストの背後に配置されます（もしブラーが設定されていれば、ぼかし効果が生成されます）

ブラー（ぼかし半径）

影のぼかし半径を単位付きの数値で指定します。指定されなければ、デフォルトは 0 になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。（オプション）

色

オフセット値の前か後に指定できます。色が指定されなければ、UA（ブラウザ）が選んだ色が使われます。但し、ブラウザ間での一貫性を確保したい場合は、明示的に色を指定するようにします。（オプション）

以下はテキストシャドウのサンプルです。最初のサンプルは影が付いていません。

<p class="tst">text-shadow: none;</p>
<p class="tst ts01">text-shadow: 0.5px 0.5px #6E738B;</p>
<p class="tst ts02">text-shadow: 1px 2px 1px #6E738B;</p>
<p class="tst ts03">text-shadow: 0 0 2px #6E738B;</p>

tst {
  font-size:20px;
  font-weight: bold;
  color: #6085BF;
}
.ts01 {
  text-shadow: 0.5px 0.5px #6E738B;
}
.ts02 {
  text-shadow: 1px 2px 1px #6E738B;
}
.ts03 {
  text-shadow: 0 0 2px #6E738B;
}

text-shadow: none;

text-shadow: 0.5px 0.5px #6E738B;

text-shadow: 1px 2px 1px #6E738B;

text-shadow: 0 0 2px #6E738B;

以下は、ぼかしのない複数の影を指定して ３D のように見せる例です。影を hsla を使って半透明にしています。

<p class="ts04">Looks Like 3D</p>

.ts04 {
  font-size: 40px;
  font-weight: bold;
  color: hsla(133,73%,56%,1.00);
  text-shadow: 1px 1px hsla(142,65%,41%,0.7),
  2px 2px hsla(142,65%,41%,0.7),
  3px 3px hsla(142,65%,41%,0.7),
  4px 4px hsla(142,65%,41%,0.7),
  5px 5px hsla(142,65%,41%,0.7);
}

Looks Like 3D

以下は、縦横のオフセットを0にして、白文字の周りに白と赤のぼかしを繰り返して加えることによりネオンサインのように見せる例です。

<p class="ts05">Neon Sign</p> 

.ts05 {
  padding: 30px 30px;
  width: 300px;
  background-color: #000;
  color: #FFF;
  font-size: 40px;
  font-weight: bold;
  text-shadow: 0 0 5px #FFF,
  0 0 10px #EC0F13,
  0 0 20px #FFF,
  0 0 30px #EC0F13,
  0 0 40px #FFF,
  0 0 50px #EC0F13;
}

Neon Sign

以下は、上方向にハイライト、下方向にシャドウをつけて、少し文字が浮いたようなベベル効果を出す例です。文字色と背景色を同じにする方法もありますが、その場合、テキストシャドウをサポートしていないブラウザで見ると文字が見えなくなります。

<p class="ts06">Bevel Text</p>

.ts06 {
  padding: 30px 30px;
  width: 300px;
  background-color: #D0BFC0;
  color: #A39394;
  font-size: 40px;
  font-weight: bold;
  text-shadow: -1px -1px 1px #FFF, 1px 1px #333;
}

Bevel Text

前述のベベル効果とは逆に、上方向にシャドウ、下方向にハイライトをつけると、少し文字が彫り込まれたようなエンボス効果になります。

<p class="ts07">Emboss Text</p>

.ts07 {
  padding: 30px 30px;
  width: 360px;
  background-color: #D0BFC0;
  color: #A39394;
  font-size: 40px;
  font-weight: bold;
  text-shadow: -1px -1px 1px #333, 1px 1px #FFF;
}

Emboss Text

ブラウザの実装状況

text-shadow のベンダープレフィックスは、ほぼ不要です。

Can I Use: text-shadow

線形グラデーション linear-gradient

linear-gradient() 関数は、背景関連プロパティ（background-image や background）の値に指定して線形グラデーションを表示します。以下が書式です。

linear-gradient( 方向または角度, 開始色 位置, 途中色 位置, 終了色 位置); 

引数は、半角スペースとカンマ（,）で区切って指定します。

• 方向または角度：to top など「to」を使った方向や 45deg など「deg」を使った角度を指定します。省略した場合は、デフォルト値 to bottom が適用されます。
• 開始色 位置：開始色（必須）と位置（%）を指定します。開始位置を省略した場合は 0% が適用されます。
• 途中色 位置：途中の色とその位置を指定します。オプションなので省略可能です。また複数指定することもできます。
• 終了色 位置：終了色（必須）と位置（%）を指定します。開始位置を省略した場合は 100% が適用されます。

以下は、開始色に青を、終了色に緑を指定した例です。ボックスの上から下（to bottom）へ、青から緑の線形グラデーションが表示されます。

.lg01 {
  background-image: linear-gradient(blue, green);
}

引数の指定方法

方向または角度

グラデーションの方向をキーワード（to xxxx）、または角度（数値deg）で指定します。

角度で指定する場合、0deg で下から上へ向かうグラデーションとなり、正の値を指定すると時計回りに方向が決まります。

以下のプルダウンから適当なキーワードを選択して「Apply」ボタンをクリックすると下の正方形にピンクと水色の線形グラデーションを適用します。

プルダウンから「deg」を選択した場合は、テキストボックスに -360～360 の数値を入力可能です。

background-image :  linear-gradient(pink, lightblue);

色

グラデーションの開始色、（途中色）、終了色の色を指定します。RGBA 値や HSLA 値での指定も可能です。

以下は HSL 値を使って同系色の Lightness（輝度）を使ってグラデーションを表示する例です。

.lg03 {
  background-image :linear-gradient(hsl(240, 100%, 10%), hsl(240, 100%, 30%));
}

以下は RGBA 値を使って同じ色（黒）の透明度を使ってグラデーションを表示する例です。

.lg04 {
  background-image :linear-gradient(rgba(0, 0,0,1), rgba(0, 0,0,.3));
}

位置

グラデーションの始点（や中間点）、終点の位置を指定します。各点の色に続けて、半角スペースで区切って記述します。省略した場合は始点が0%、終点が100%となります。

位置はグラデーションの線の長さに対するパーセンテージか、もしくは長さの絶対値で指定することができます。

.lg05 {
  background-image :linear-gradient(pink 65%, lightblue);
}
.lg06 {
  background-image :linear-gradient(pink, lightblue 50%);
}
.lg07 {
  background-image :linear-gradient(pink 25%, lightblue 70%);
}

カラーストップ（中間点）

カラーストップは、その位置において指定された色を持つグラデーションの線上の点です。カラーストップの位置はグラデーションの線の長さに対するパーセンテージか、もしくは長さの絶対値で指定することができます。カラーストップはいくつでも指定することができます。

以下の例では、最初と最後のカラーストップの位置が指定されてませんが、この場合最初と最後には、0% と100% の値が自動的に割り当てられます。

.lg08 {
  background-image :linear-gradient(90deg, green, lightgreen 60%, yellow);
}

また、位置が指定されていない場合、カラーストップは自動的に等間隔に配置されます。

.lg09 {
  background-image :linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

#lg_photo {
  background: linear-gradient(30deg, hsla(240,20%,20%,0.1), hsla(240,90%,5%,0.9)), url(../images/sample.jpg);
  width: 300px;
  height: 205px;
  margin: 30px;
}

グラデーションパターン

background-image プロパティには、グラデーションの値をカンマで区切って複数のグラデーションを指定することができ、サイズや位置を調整することで色々なパターンを作成することができます。

以下はグラデーションパターンを画像の背景に適用する例で、画像には opacity を指定して半透明にしています。

<div class="photo_gradient_pattern">
  <img src="sample.jpg" width="300" height="205" alt="cat">
</div>   

.photo_gradient_pattern img {
  opacity: 0.8;
  width: 100%;
}

.photo_gradient_pattern {
  width: 300px;
  margin: 30px;
  background-image:
    linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
    linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
    linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
    linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
  background-size:20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
} 

以下のページには参考になるグラデーションパターンやその作り方が掲載されています。

• Complex patterns using CSS gradients
• Background Patterns, Simplified by Conic Gradients
• CSS Background Patterns
• Patterns with CSS Gradients
• CSS3 Patterns Gallery

linear-gradient ブラウザの実装状況

最新のブラウザでは、linear-gradient のベンダープレフィックスはほぼ不要ですが、古いブラウザを対象とする場合はベンダープレフィックスは必要です。

また、IE9 以下はグラデーションに未対応なので、必ず背景色を指定するようにします。

Can I Use: linear-gradient

円形グラデーション radial-gradient

radial-gradient() 関数は、背景関連プロパティ（background-image や background）の値に指定して円形（放射状）グラデーションを表示します。以下が書式です。

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

引数は、半角スペースとカンマ（,）で区切って指定します。

• 形状：グラデーションの形状を circle（正円）、ellipse（楕円：デフォルト）の2つのキーワードから指定します。
• サイズ：グラデーションのサイズをキーワードやピクセル、% 等で指定します。デフォルトは「farthest-corner」です。
• 中心の位置：グラデーションの中心位置をキーワードやピクセル、% 等で指定します。デフォルトは「at center」です。
• 開始色 位置：開始色（必須）と位置（%やピクセル）を指定します。開始位置を省略した場合は 0% （円の中心）が適用されます。
• 途中色 位置：途中の色とその位置を指定します。オプションなので省略可能です。また複数指定することもできます。
• 終了色 位置：終了色（必須）と位置（%やピクセル）を指定します。開始位置を省略した場合は 100% が適用されます。

以下は異なるサイズ（形状）の領域に、開始色に赤を、終了色に黄色を指定した例です。円の中心から外側（farthest-corner）へ、赤から黄色の円形グラデーションが表示されます。

.lg10 {
  background-image :radial-gradient(red, yellow);
}

デフォルトの値を省略しないで書くと以下のようになります。

radial-gradient(ellipse farthest-corner at center, red 0%, yellow 100%);

引数の指定方法

形状

グラデーションの形状を以下のいずれかのキーワードで指定します。

• circle 正円のグラデーションを表します。
• ellipse 楕円のグラデーションを表します（デフォルト）。

サイズ

グラデーションのサイズを以下のキーワードや px、% 等で指定します。

px や % 等の単位の付いた値を指定する場合は、「X方向の値 半角スペース Y方向の値」の形式で指定します。

中心の位置

グラデーションの中心位置をキーワードや px、% 等で指定します。

px や % 等の単位の付いた値を指定する場合は、「at 半角スペース X方向の値 半角スペース Y方向の値」の形式で指定します。

色

グラデーションの開始色、（途中色）、終了色の色を指定します。RGBA 値や HSLA 値での指定も可能です。

位置

グラデーションの始点（や中間点）、終点の位置を指定します。各点の色に続けて、半角スペースで区切って記述します。省略した場合は始点が0%（円の中心点）、終点が100%となります。

以下のプルダウンメニューから、「形状」「サイズ」「中心の位置」を選択するとその下のグラデーションが変化します。

以下のプルダウンメニューから、「形状」「サイズ（%, px, em）」「中心の位置（%, px, em）」を指定して「Apply」をクリックするとその下のグラデーションが変化します。

サイズ、位置をそれぞれ「X方向」「Y方向」で指定してください。

但し、形状を「Circle」に指定した場合、サイズを単位を使った数値で指定するとグラデーションが表示されません。その場合は、サイズに「closest-side」「closest-corner」「farthest-side」「farthest-corner」のいずれかのキーワードを指定してください。

カラーストップ

各カラー ストップには、色と位置を指定します。位置は省略可能です。グラデーションレイ上のカラーストップの相対位置を示す割合または小数の値を指定します (linear-gradient のグラデーションラインに似ていますが、グラデーションレイでは中心からの距離になります)。"0%" はグラデーションレイの始点で、"100%" はグラデーションレイが最終的な形状と交差する点です。カラーストップはいくつでも指定することができます。

background-image :radial-gradient(ellipse 40px 40px at 60px 50px, yellow 30%, white 90%, darkblue 180%, hsl(210,100%,13%) 230%);

以下は参考サイトです。

• CSS グラデーションの利用（MDN）
• linear-gradient（MDN）
• radial-gradient（MDN）
• グラデーション（MSDN)

ブラウザの実装状況

最新のブラウザでは、radial-gradient のベンダープレフィックスはほぼ不要ですが、古いブラウザを対象とする場合はベンダープレフィックスは必要です。

また、未対応のブラウザ用に必ず背景色を指定するようにします。

Can I Use: radial-gradient

変形処理 transform 2D

transform プロパティを使うと、要素に対して移動、回転、伸縮、傾斜の変形処理ができます。transform プロパティには、2D（XY方向）と3D（XYZ方向）がありますが、ここでは2D（２次元）について解説します。以下が書式です。

transform: トランスフォーム関数();

トランスフォーム関数を半角スペースで区切って記述して、複数の変形処理を適用することも可能です。

transform: rotate(60deg) translate(100px, 300px) scaleY(2);

transform を利用する際に、意識する必要があるのは座標系で、Web ページはブラウザ左上を原点とした座標系を構成しています。

• X 軸は右方向に、Y 軸は下方向に行くほど値が大きくなります
• Web ページに配置された要素はそれぞれが左上を原点としてローカル座標系を構成しています

transform プロパティでは、このように構成された座標系を回転、拡大縮小、移動、スキュー（シアー）することができます。

例えば、div 要素に transform を rotate(10deg) と指定して回転させると div 要素のローカル座標系が時計回りに10度回転されます。このとき、ローカル座標系の原点は div 要素が構成するボックスの中央にセットされて処理されます。これは、transform を指定すると、同時に適用される transform-origin の初期値（デフォルト）が「50% 50%」と設定されているためです。

また、拡大縮小を行うとローカル座標系の１目盛りの大きさが変化します。そのため変形処理の適用順によっては処理結果も変わってくるので注意が必要です。

以下は２次元の変形処理を行うトランスフォーム関数と指定できる値です。

• マイナスの値を指定することも可能です
• translate(), scale(), skew() では Y 軸方向の値を省略することが可能です
• その場合、Y 軸方向の値は translate() と skew() では「0」、scale() では X 軸方向と同じ値で処理されます

transform-origin: 2px;
transform-origin: bottom;

/* x-offset y-offset */
transform-origin: 3em 2px;

/* y-offset x-offset-keyword */
transform-origin: 2px left;

/* x-offset-keyword y-offset */
transform-origin: left 2px;

/* x-offset-keyword y-offset-keyword */
transform-origin: right top;

/* y-offset-keyword x-offset-keyword */
transform-origin: top right;

transform:  rotate(angle);

<div class="clearfix">
  <div class="rotate01 rotate_box">none</div>
  <div class="rotate02 rotate_box">30deg</div>
  <div class="rotate03 rotate_box">60deg</div>
  <div class="rotate04 rotate_box">-20deg</div>
</div>   

.rotate_box {
  width: 70px;
  height: 70px;
  margin: 30px;
  float: left;
  text-align: center;
  line-height: 70px;
  color: #3F548E;
  border: 1px solid #447FB5;
  background-color: #B8D8F7;
}
.rotate01 {
  transform: none;
}
.rotate02 {
  transform: rotate(30deg);
}
.rotate03 {
  transform: rotate(60deg);
}
.rotate04 {
  transform: rotate(-20deg);
}

transform:  skew(Sx, Sy) 

transform: skewX(Sx)

transform: skewY(Sy)

<div class="clearfix">
  <div class="skew01 skew_box">none</div>
  <div class="skew02 skew_box">20 30</div>
  <div class="skew03 skew_box">X 40deg</div>
  <div class="skew04 skew_box">Y -20deg</div>
</div>

skew_box {
  width: 70px;
  height: 70px;
  margin: 30px;
  float: left;
  text-align: center;
  line-height: 70px;
  color: #9F3E40;
  border: 1px solid #A64C4D;
  background-color: #F8C4C5;
}
.skew01 {
  transform: none;
}
.skew02 {
  transform: skew(20deg, 30deg);
}
.skew03 {
  transform: skewX(40deg);
}
.skew04 {
  transform: skewY(-20deg);
}

transform:  translate(Tx[, Ty])

transform: translateX(Tx)

transform: translateY(Ty)

transform: scale(Sx[, Sy])

transform: scaleX(Tx)

transform: scaleY(Sy)

フィルタ filter

filter プロパティは、定義されている効果（エフェクト関数）を指定することで、任意の要素に対してさまざまな効果（エフェクト）をかけることができます。

filter プロパティで指定できるエフェクト関数には以下のようなものがあります。

Filter Effects Module Level 1 (W3C)

Filter (MDN)

filter プロパティの指定方法

filter プロパティにエフェクト関数とその値を指定します。

filter: エフェクト関数(値);

明るさ（brightness）を80%に指定する場合は以下のように指定します。

.foo {
  -webkit-filter: brightness(80%);  /*Google Chrome、Safari*/
  -moz-filter: brightness(80%);  /*Firefox*/
  filter: brightness(80%);
}

複数のエフェクト関数を指定することも可能で、指定したいエフェクト関数をスペースで区切りで記述します。

.foo {
  -webkit-filter: contrast(70%) brightness(60%) opacity(80%) blur(2px);
  -moz-filter: contrast(70%) brightness(60%) opacity(80%) blur(2px);
  filter: contrast(70%) brightness(60%) opacity(80%) blur(2px);
}

以下はそれぞれのエフェクト関数を使ったサンプルです。 HTML のマークアップはクラス名が異なるだけで、その他は全て同じです。

<p><img class="xxxx" src="../images/sample.jpg" alt=""></p></div>

grayscale() モノクロ

• 値：0～100%
• デフォルト（初期値）：0
• 値が大きいほど、画像の色が白黒に近づきます。

img:hover {
  -webkit-filter: grayscale(70%);
  filter: grayscale(70%);
}

Reset

sepia() セピア

• 値：0～100%
• デフォルト（初期値）：0
• 値が大きいほど、画像の色がセピア色に近づきます。

img:hover {
  -webkit-filter: sepia(90%);
  filter: sepia(90%);
}

Reset

saturate() 彩度

• 値：0～上限なし（%）
• デフォルト（初期値）：100%
• 彩度。値が大きいほど、色が鮮やかになります。

img:hover {
  -webkit-filter: saturate(200%);
  filter: saturate(200%);
}

Reset

hue-rotate() 色相の回転

• 値：0〜360（deg）
• デフォルト（初期値）：0
• 色相（Hue）。色相を0〜360度の範囲で表します。（0=360）

img:hover {
  -webkit-filter: hue-rotate(120deg);
  filter: hue-rotate(120deg);
}

Reset

invert() 階調の反転

• 値：0〜100（%）
• デフォルト（初期値）：0
• 階調の反転。値が大きいほど、写真のネガのようになります。

img:hover {
  -webkit-filter: invert(80%);
  filter: invert(80%);
}

Reset

opacity() 透明度

• 値：0〜100（%）
• デフォルト（初期値）：100%
• 透明度。値が0に近いほど透明になります。

img:hover {
  -webkit-filter: opacity(50%);
  filter: opacity(50%);
}

Reset

brightness() 明るさ

• 値：0～上限なし（%）
• デフォルト（初期値）：100%
• 明るさ。値が大きいほど、明るくなります。0 を指定すると真っ黒になります。

img:hover {
  -webkit-filter: brightness(120%);
  filter: brightness(120%);
}

Reset

contrast() コントラスト

• 値：0～上限なし（%）
• デフォルト（初期値）：100%
• コントラスト。値が大きいほど、色がくっきり、はっきりと見えます。

img:hover {
  -webkit-filter: contrast(130%);
  filter: contrast(130%);
}

Reset

blur() ぼかし

• 値：0〜（長さで指定。例：2px）
• デフォルト（初期値）：0
• ぼかし。値が大きいほど、ぼかしの度合いが大きくなります。

img:hover {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

Reset

drop-shadow() 影

• 値：例: 1px 1px 2px gray
• デフォルト（初期値）：0
• 影までの距離（オフセット）、ぼかし、色を指定します。

1. 横オフセット：横方向の影までの距離。必須。
   （正の値を指定すると右へ、負の値を指定すると左へ影が移動します。）
2. 縦オフセット：縦方向の影までの距離。必須。
   （正の値を指定すると下へ、負の値を指定すると上へ影が移動します。）
3. ぼかし：値が大きいほど影の端のぼかしが強くなります。
4. 色

box-shadow とは異なり、透過 png 画像などでの透過部分には影がつきません。

img:hover {
  -webkit-filter: drop-shadow(15px 15px 2px gray);
  filter: drop-shadow(15px 15px 2px gray);
}

以下のサンプルは同じ透過 png 画像を使用しています。（マウスオーバーで確認）

ブラウザの実装状況

現時点（2016年5月1日）では、IE や Windows の Safari は未対応です。また、Chrome、Safari にはベンダープリフィックスを指定する必要があります。

Can I Use: filter

calc() 関数

calc() 関数は、プロパティに設定する値を数式で計算することができるものです。calc() 関数を使うことにより、対象のサイズや形状を決定する値の計算が可能となります。

CSS 内で <length>、<frequency>、<angle>、<time>、<number>、<integer> のいずれかの値を用いる場所ならどこでも使用することができます。

また、異なる単位を使って計算することができます。相対単位（% や vw, vh など）と絶対単位（px など）を組み合わせることができます。但し、長さの単位と時間の単位といったような違う意味を示す単位は、一緒に使うことはできません。

以下が書式です。

/*　書式　*/
property: calc(計算式);

/*　例　*/
div {
  width: calc( 100% - 50px ) ;
}

計算式として使用できる演算子は、+ (加算)、- (減算)、* (乗算)、/ (除算) の4種類です。乗算と除算の場合は、以下の条件があります。

• 乗算：引数の少なくとも 1 つは数値でなければなりません。
• 除算：右側の値は数値でなければなりません。

演算子（演算記号）の左右には半角スペースを入れます。（乗算と除算の前後には空白スペースを入れる必要はありませんが、統一した方が読みやすいため）

演算子の優先度は、数学と同じく、乗算と除算が、加算と減算よりも優先されます。

計算の順序を明示するためにカッコ () を使うこともできます。また、calc() 内部で別の calc() を用いることも可能ですが、内部の関数は単なるカッコ () であるとみなされます。

calc() 関数の（計算された）値は計算式自体であり、結果の値ではないので、ブラウザにおける値がより動的になり、ビューポートの変更に合わせて適応可能になります。

.sample {
    width: 95%; /* 未対応のブラウザ用 */
    width: calc(100% - 20px);
}

<div class="calc_sample">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

.calc_sample {
  max-width: 680px;
}
.col {
  width: 33.333%;   /* 未対応のブラウザ用 */
  width: calc(100% / 3);
  float: left;
  border: 1px solid #CCC;
  background-color: #CDF1F3;
  height: 50px;
}

width: calc(100% / 3 - 0.01px);

@media all and (-ms-high-contrast:none){  /* IE10, IE11 */
  .col {
    width: calc(100% / 3 - 0.01px);
  }
}

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .col {
    width: calc(100% / 3 - 0.01px);
  }
}

<div class="calc_sample">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

.calc_sample {
  max-width: 680px;
}
.col {
  width: 32%;   /* 未対応のブラウザ用 */
  width: calc((100% - 20px) / 3);
  float: left;
  border: 1px solid #CCC;
  background-color: #CDF1F3;
  height: 50px;
}
.col:not(:first-child) {
  margin-left: 10px;
}

<div>
  <div class="foo">200px</div>
  <div class="bar">100% - 200px</div>
</div>

.foo {
    width: 200px;
    float: left;
    height: 50px;
}
.bar {
    width: calc(100% - 200px);
    float: left;
    height: 50px;
}

擬似要素はコロン２つ

CSS3 から擬似要素のコロンは２つになりました。多くのブラウザは両方の値（ダブルコロン、シングルコロン）をサポートしています。

但し、IE8 以下ではダブルコロン（２つのコロン）に対応していません。

• 疑似要素は「::after」のようにコロン2つで記述
• 疑似クラスは「:hover」のようにコロン1つで記述

疑似要素 (Pseudo-elements)

関連ページ：「:before 擬似要素と :after 擬似要素」

背景関連（background）

CSS3 では、ボックスの背景は，複数の層（レイヤー）を持つことができ、複数の背景画像を指定することが可能です。複数の背景は、最初に指定した背景が最前面、最後に指定した背景が最も奥のレイヤーになるように、重ねて描画されます。

複数の背景は、各レイヤーをカンマで区切る事だけの簡単な構文で記述することができます。

.sample {
  background: 背景1, 背景2, ..., 背景N;
}

背景画像だけではなく、グラデーションも指定することができます。（背景画像にグラデーション）

次の例では、上位レイヤーから、「猫の画像」、「飛行機からの写真」の順で、２つの背景が重ねられています。記述量が多くなる場合は、以下の例のようにカンマ毎に改行するとコードが読みやすくなります。

#bg_sample01 {
  background-image: url(../images/sample01.png), /* 最前面の背景レイヤーの背景画像 */
    url(../images/sample02.jpg); /* 2番目の背景レイヤーの背景画像 */
  background-repeat:
    no-repeat, /* 最前面の背景レイヤーに対応 */
    no-repeat; /* 2番目の背景レイヤーに対応 */
  background-position:
    right bottom, /* 最前面の背景レイヤーに対応 */
    left top; /* 2番目の背景レイヤーに対応 */
  width: 300px;
  height: 200px;
  border: 1px solid #999;
}

また、CSS2 までの背景関連のプロパティに加えて、以下のようなのプロパティが追加されています。

#bg_sample02 {
  width: 90%;
  height:300px;
  background-image: url(../images/css/css3_bg03.jpg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
  border: 1px solid #ccc;
}

<body>
<div id="wrapper">
  <h1>Full Background Image</h1>
  <div id="content">
    <p>Lorem ipsum dolor sit amet...</p>
    ...
  </div>
</div>
</body> 

body {
  background-image: url(../images/sample_s.jpg); /* 960×641 */
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #6B410C;
}
#wrapper {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}
#content {
  max-width: 920px;
  margin: 50px auto;
}

/* レスポンシブ対応 */
@media (min-width: 640px) {
  body {
    background-image: url(../images/sample_m.jpg); /* 1280x854 */
  }
}
@media (min-width: 1280px) {
  body {
    background-image: url(../images/sample.jpg); /* 2000x1334 */
  }
}

#bg_sample03 {
  width: 90%;
  height:300px;
  box-sizing: border-box;
  background-image: url(../images/css/css3_bg03.jpg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
  padding: 20px;
  border: 20px solid hsla(220,82%,77%,0.3);
}

#bg_sample04 {
  width: 300px;
  height:200px;
  box-sizing: border-box;
  background-image: url(../images/css/css3_bg05.jpg);
  background-repeat: no-repeat;
  background-position:center;
  background-origin: padding-box;
  background-clip: border-box;
  padding: 20px;
  border: 20px solid hsla(220,82%,77%,0.5);
}

/* background-color を指定 */
background: yellow;

/* background-image と background-repeat を指定 */
background: url("sample.jpg") repeat-x;

/* background-origin、background-clip と background-colorを指定 */
background: border-box red;

/* 画像の繰り返しなし、中央寄せかつ縮小 */
background: no-repeat center/80% url("../images/foo.png");

/* background-image、background-position/background-size、background-repeat、background-color を指定 */
background: url( "/bar.png" ) top right / 75px 76px repeat-x #EFEFEF ;

.foo {
  background-repeat: no-repeat ;
  background: url( "../images/bgimage.jpg" ) ;
}

ビューポート・パーセンテージ

ビューポートの単位（ビューポート・パーセンテージ）はビューポートのサイズを基準にした相対単位で、ビューポートのサイズ（幅や高さ）により変化します。以下の4種類があります。

ブラウザ対応状況：caniuse:viewport-units

ビューポートとは簡単に言うと表示領域（仮想ウィンドウサイズ）のことです。つまりこの単位を使うとデバイスの表示領域に対する割合を指定することができます。また、ブラウザのサイズが変更されるたびに値が変化する動的な値になります。

パーセント（%）指定の場合は親要素に対する割合（子要素の幅や高さは親要素の幅や高さに対する割合）になりますが、ビューポートの単位の場合は常にデバイスの表示領域に対する割合になります。

表示領域（ビューポート）の横幅全体が「100vw」になるので、10vw と指定すると、表示領域の幅に対して 1/10 (10%) のサイズを指定することになります。

例えば、ビューポートの幅が 1200px 高さが 700px の場合、10vw は120px、10vh は 70px となります。この場合、幅のほうが高さより大きいため 10vmax は 120px、10vmin は 70px となります。

vw（Viewport Width）

vw（Viewport Width）はビューポートの幅を基準にそのサイズを決定します。また、ビューポートの幅は、ブラウザのスクロールバーを含んだサイズで算出されます。

要素に 100vw と指定すると、その要素は html と body より大きいサイズになります（body 要素のマージンを0にすれば body 要素は html 要素と同じになります）。

以下は div 要素に width:100%; と width:100vw; を指定した例です。実際のサンプルを見ると、width:100vw; を指定した div 要素はブラウザの領域をはみ出していて、横のスクロールバーが表示されています。スクロールすると右端が見えます。

要素に 100vw と指定すると、その親要素によらず表示領域の横幅全体の幅になりますが、表示開始位置は親要素によって異なります。

サンプル

#wrapper3 の2つ目の 100vw を指定した div 要素にはネガティブマージンを指定して、表示領域の左端を開始点にしています。右側にスクロールしてみると、ほぼスクロールバーの幅の分は乱しています。

margin-left:calc(((100vw - 100%)/2 * -1) + 8px); は (100vw - 100%)/2 で左右のスペースの合計を半分にしてマイナス1をかけることでネガティブの値にしています。+8px はボーダーの幅の分の調整です。

#wrapper4 にはパディングを指定してあるので width:100% を指定した div 要素の幅はその分短くなっています。

<body>
<p>body 直下 </p>
<div style="width:100%;height:50px;">width:100%</div>
<div style="width:100vw;height:50px;">width:100vw</div>
<div id="wrapper1">
  <p>#wrapper1（幅指定なし） </p>
  <div style="width:100%;height:50px;">width:100%</div>
  <div style="width:100vw;height:50px;">width:100vw</div>
</div>
<div id="wrapper2">
  <p>#wrapper2 (max-width:640px; margin:50px 0;)</p>
  <div style="width:100%;height:50px;">width:100%</div>
  <div style="width:100vw;height:50px;">width:100vw</div>
</div>
<div id="wrapper3">
  <p>#wrapper3 (max-width:640px; margin:50px auto;)</p>
  <div style="width:100%;height:50px;">width:100%</div>
  <div style="width:100vw;height:50px;">width:100vw</div>
  <div style="width:100vw;height:50px;margin-left:calc(((100vw - 100%)/2 * -1) + 8px);">width:100vw / calc(((100vw - 100%)/2  * -1) + 8px)</div>
</div>
<div id="wrapper4">
  <p style="position:absolute;top:0;left:0">#wrapper4(max-width:640px;padding:50px;)</p>
  <div style="width:100%;height:50px; ">width:100%</div>
  <div style="width:100vw;height:50px;">width:100vw</div>
</div>
</body>  

#wrapper4 の position:relative の指定は、p 要素の基準とするためのものです。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  border: 10px solid #351680;
}
#wrapper1 {
  background: #FBD9D9;
  border: 4px solid #C87A7B;
  height: 200px;
  margin: 50px auto;
}
#wrapper2 {
  max-width: 640px;
  background: #FBD9D9;
  border: 4px solid #C87A7B;
  height: 200px;
  margin: 50px 0;
}
#wrapper3 {
  max-width: 640px;
  background: #FBD9D9;
  border: 4px solid #C87A7B;
  height: 280px;
  margin: 50px auto;
}
#wrapper4 {
  max-width: 640px;
  background: #FBD9D9;
  border: 4px solid #C87A7B;
  height: 200px;
  padding: 50px;
  position: relative;
}

要素をウィンドウ幅いっぱいに指定する場合（% で指定）

前述の例でもわかるように、ビューポートの幅はブラウザのスクロールバーを含んだサイズになるため、要素をウィンドウ幅いっぱいにする場合は、ビューポートで幅を指定するより、パーセントを使用する方が良いようです（問題とならない場合もありますが）。

vh (Viewport Height)

vh (Viewport Height)はビューポートの高さを基準にそのサイズを決定します。

vh を使うと要素をページの高さいっぱいにすることができ、以下のように簡単にフルスクリーンの背景画像を設定することもできます。

要素の幅を100%に、高さを100vhに指定し、body 要素のマージンとパディングを 0 に指定しています。

この例では h1 要素を使用しているので、この h1 要素のマージンとパディングも 0 に指定しています。（ユニバーサルセレクタ * で指定すると簡単かも知れません）

また、h1 要素の font-size には vw を使用して画面幅に応じて文字の大きさを変化させています。実際にはメディアクエリである程度以下の幅の場合は、文字のサイズを固定にしています（ビューポート単位を使った文字サイズの指定）。

<div class="fullscreen">
  <h1>Full Screen </h1>
</div> 

body, h1 {
  margin: 0;
  padding: 0;
}
.fullscreen {
  background: url(../images/sample_01.jpg) center/cover;
  width: 100%;
  height: 100vh;
}

h1 {
  color: #FFF;
  line-height: 100vh;
  text-align: center;
  font-size: 6vw;
}

サンプル

関連：背景画像をブラウザの画面全体に広げる例

背景画像だけでなく、div 要素や section 要素を画面の高さと幅いっぱいに表示することも簡単にできます。前述の例と同様に div 要素や section 要素の幅を100%に、高さを100vhに指定します。

div {
  width: 100%;
  height: 100vh;
}

以下は各 div 要素をフルスクリーンで表示する例です。jQuery のスムーズスクロールを使ってアニメーションでスクロールします。

<body>
<header class="fullscreen img1" id="one">
 <h1>One</h1>
 <p class="text">Voluptas cumque perferendis ..<br>
    <a class="next" href="#two">Next</a></p>
</header>
<div class="fullscreen green" id="two">
  <h2>Two</h2>
  <p class="text">Lorem ipsum dolor sit amet...<br>
    <a class="next" href="#three">Next</a> <a class="prev" href="#one">Prev</a></p>
</div>
<div class="fullscreen blue" id="three">
  <h3>Three</h3>
  <p class="text">Sequi, nam, aut rem error ...<br>
    <a class="next" href="#four">Next</a> <a class="prev" href="#two">Prev</a></p>
</div>
<div class="fullscreen img2" id="four">
  <h4>Four</h4>
  <p class="text">Eos, dicta, ex architecto ...<br>
    <a class="prev" href="#three">Prev</a></p>
</div>
</body>

* {
  margin: 0;
  padding: 0;
}
.fullscreen {
  width: 100%;
  height: 100vh;
}
.green {
  background: #43B967;
}
.blue {
  background: #487BAB;
}
.img1 {
  background: url(../images/sample_01.jpg) center/cover;
}
.img2 {
  background: url(../images/sample_02.jpg) center/cover;
}
.text {
  margin: auto;
  max-width: 500px;
  padding: 2vh 0 15vh;
}
.prev, .next {
  display: inline-block;
  padding: 5px 15px;
  margin-top: 15px;
}
h1, h2, h3, h4 {
  text-align: center;
  padding-top: 10vh;
}

サンプル

jQuery の scrollTop() と animate() を使ってリンクをクリックすると、アニメーションで次の div 要素へスクロールする方法はこちら（要素のスクロール位置を取得し設定）を参照ください。

垂直方向の中央揃え

前述の例では、vh を使って見出しや本文にパディングを指定して垂直方向の位置を調整していますが、全体を垂直方向に中央寄せする場合は、display:table を利用すると簡単にできます。

フルスクリーン表示する要素に display:table を指定して、その内側に div 要素を追加して display: table-cell と vertical-align: middle を指定するだけです。

以下が HTML と CSS です（前述の例では、フルスクリーン表示する要素には div 要素を使っていましたが、この例では section 要素に変更しています）。

<body>
<header class="fullscreen img1" id="one">
  <div class="vacenter"> /* 追加 */
    <h1>One</h1>
    <p class="text">Voluptas cumque perferendis consequuntur....<br>
      <a class="next" href="#two">Next</a></p>
  </div>
</header>
<section class="fullscreen green" id="two">
  <div class="vacenter"> /* 追加 */
    <h2>Two</h2>
    <p class="text">Lorem ipsum dolor sit amet, consectetur...<br>
      <a class="next" href="#three">Next</a> <a class="prev" href="#one">Prev</a></p>
  </div>
</section>
<section class="fullscreen blue" id="three">
  <div class="vacenter"> /* 追加 */
    <h3>Three</h3>
    <p class="text">Sequi, nam, aut rem error tenetur....<br>
      <a class="next" href="#four">Next</a> <a class="prev" href="#two">Prev</a></p>
  </div>
</section>
<section class="fullscreen img2" id="four">
  <div class="vacenter"> /* 追加 */
    <h4>Four</h4>
    <p class="text">Eos, dicta, ex architecto aperiam...<br>
      <a class="prev" href="#three">Prev</a></p>
  </div>
</section>
</body>

* {
  margin: 0;
  padding: 0;
}
.fullscreen {
  width: 100%;
  height: 100vh;
  display: table;; /* 追加 */
}
.vacenter {
  display: table-cell;; /* 追加 */
  vertical-align: middle;; /* 追加 */
}
.green {
  background: #43B967;
}
.blue {
  background: #487BAB;
}
.img1 {
  background: url(../images/sample_01.jpg) center/cover;
}
.img2 {
  background: url(../images/sample_02.jpg) center/cover;
}
.text {
  margin: auto;
  max-width: 500px;
}
.prev, .next {
  display: inline-block;
  padding: 5px 15px;
  margin-top: 15px;
}
h1, h2, h3, h4 {
  text-align: center;
  font-size: 36px;
}

サンプル

vh を使った画像サイズの指定

画像をスクリーンサイズに関わらず、vh を使って常に画像全体が表示されるようにするには以下のように指定することができます。

<div>
  <img src="../images/sample_03.jpg" alt="sample pictures">
</div>

* {
  margin: 0;
  padding: 0;
}
img {
  display: block;
  max-width: 100%; /* 親要素の幅を超えないように */
  max-height: 95vh; /* 最大の高さをビューポート高さの 95% に指定 */
  margin: 2vh auto 3vh;
}

この例では、max-height と上下の margin の合計が 100vh になるように指定しています。

サンプル

マルチカラムレイアウト

CSS3 のマルチカラムレイアウト（CSS Multi-column Layout Module）を使うと、親要素にカラム数や幅を指定するだけで雑誌や新聞記事のような段組みを簡単に実装することができます。

各段の高さは、最も高い段に合わせて自動的に揃えられます。

マルチカラムレイアウトは主なブラウザの最新バージョンでは一部のプロパティを除き対応しています。

ブラウザ対応状況：caniuse:Multiple column layout

• -webkit-：Chrome、Safari、iOS、Opera、Android のベンダープレフィックス
• -moz-：Firefox のベンダープレフィックス

以下は column-count プロパティを使って3段組みを作成する例です。

<div class="multi_3col">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... expedita!</p>
  <p>Veritatis corporis hic, blanditiis quam velit sequi explicabo... natus fugit.</p>
  <p>Nam vel, itaque molestiae dicta, facere excepturi iure ...expedita aspernatur!</p>
</div>  

.multi_3col {
  column-count: 3; /* 3段組み */
}
.multi_3col p {
  break-inside: avoid-column; /* 要素内部で段を区切らない */
}

マルチカラムレイアウトを使って段組を作成するには、大きく分けると３つの方法があります。

1. カラム数（column-count）を指定しての段組み
2. カラム幅（column-width）を指定しての段組み
3. 上記の両方（column-count、column-width）を組み合わせての段組み（columns）

column-count プロパティと column-width プロパティは両方指定することもできます。両方の値を指定する場合は、一括指定できる columns ショートハンドプロパティを使う方が記述が短くて済みます。

また、区切り位置（break-before、break-after、break-inside）や段と段の間の余白（column-gap）を指定したり、段と段の間に罫線（column-rule）を引くことも簡単にできます。

.multi_col_sample1 {
  column-count: 3;
}

<div class="multi_col_sample1">
  <p>Viewport はスマートフォン等での Web ページの表示方法を制御します。...</p>
  <p>レスポンシブデザインでは、メディアクエリを使って表示領域によって ...</p>
</div>

.multi_col_sample2 {
  column-width: 10em;
}

<div class="multi_col_sample2">
  <p>Viewport はスマートフォン等での Web ページの表示方法を制御します。...</p>
  <p>レスポンシブデザインでは、メディアクエリを使って表示領域によって ...</p>
</div>

columns : width count;
/* または（順不同） */
columns : count width ;

/* 段の幅 */
columns: 10em;

/* 段数 */
columns: auto;
columns: 3;

/* 段数と段の幅の両方 */
columns: 4 auto;
columns: auto 16em;
columns: auto auto;

.multi_col_sample3 {
  columns: 5 120px;
}

.multi_col_sample4 {
  column-count: 3;
  column-gap: 40px;
}

<div class="multi_col_sample4">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  <p>Veritatis corporis hic, blanditiis quam velit sequi explicabo...</p>
  <p>Nam vel, itaque molestiae dicta, facere excepturi iure...</p>
</div>

.multi_col_sample5 {
  column-count: 3;
}
.multi_col_sample5 h4 {
  -moz-column-span: all; /* Firefox ではベンダープレフィックスを付けても機能しない */
  column-span: all;
}

<div class="multi_col_sample5">
  <h4>Heading Sample (column-span: all)</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ..</p>
  <p>Veritatis corporis hic, blanditiis quam velit sequi explicabo...</p>
  <p>Nam vel, itaque molestiae dicta, facere excepturi iure nihil..</p>
</div>

.multi_col_sample6 {
  column-count: 3;
  column-rule: #ABB0F4 2px dashed;
}

.multi_col_sample6 {
  column-count: 3;
  column-rule-color: #ABB0F4;
  column-rule-width: 2px;
  column-rule-style: dashed;
}

.multi_col_sample7 {
  column-count: 3;
  column-rule: #ABB0F4 2px dashed;
  text-align: justify;
  column-gap: 3em;
} 

.multi_col_sample8 {
  column-count: 3;
  column-rule: #ABB0F4 2px dashed;
}
.multi_col_sample8 p {
  padding: 0 20px;
}

.multi_col_sample9 {
  column-count: 3;
  column-fill: auto;
  height: 240px;
}

<div class="multi_col_sample10">
  <h3>Lorem ipsum</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  <p>Veritatis corporis hic, blanditiis quam velit sequi explicabo...</p>
  <p>Nam vel, itaque molestiae dicta, facere excepturi iure nihil..</p>
</div> 

.multi_col_sample10 {
  column-count: 3;
}
.multi_col_sample10 p:first-of-type {
  break-after: column;
}
.multi_col_sample10 p:last-of-type {
  break-before: column;
}

<div class="multi_col_sample11">
  <h3>Lorem ipsum</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  <p>Veritatis corporis hic, blanditiis quam velit sequi explicabo...</p>
  <p>Nam vel, itaque molestiae dicta, facere excepturi iure nihil..</p>
</div> 

.multi_col_sample11 {
  column-count: 3;
}
.multi_col_sample11 p {
  break-inside: avoid-column;
}