４　色、背景

文字や線の色と背景に関するスタイルシートについて説明します。

４．１　　色

色について説明します。

４．１．１色　(color)

要素の色を指定します。

ボーダーを表示した table 要素の td 要素に指定した場合は、ブラウザによっては文字だけでなく枠の色も変わります。

color:属性値

要素の色を指定する。

ボーダーを表示した table 要素の td 要素に指定した場合は、文字だけでなく枠の色も変わる。

属性値	説明
色	色を名称や１６進数で指定する（属性値の色を参照）
transparent	透明　（背景と同じになる）
inherit	親要素の色を受け継ぐ　（正しくない名称を指定しても color 属性は無効なので結果的に親の色を受け継ぐことになる）

記述例

<span style="color:blue;">青い文字列</span><br>
<span style="color:blue;">青い文字列<span style="color:red;">ここは赤</span>青い文字列</span><br>
<span style="color:blue;">青い文字列<span style="color:transparent;">ここは透明</span>青い文字列</span><br><br>

<table border="1">
  <tr><td style="color:yellow;">ここは黄</td><td style="color:red;">ここは赤</td></tr>
  <tr><td><span style="color:yellow;">ここも黄</span></td><td><span style="color:red;">ここも赤</span></td></tr>
</table>

表示例

注意

では、文字だけでなく枠の色も変わる。

４．２　　背景

背景について説明します。

属性	説明
background-color	背景色の指定
background-image	背景画像の指定
background-size	背景画像のサイズの指定
background-repeat	背景画像の繰り返し方法の指定
background-clip	背景画像の描画領域の指定
background-origin	背景画像の表示基準の指定
background-position	背景画像の表示位置の指定
background-attachment	背景画像のスクロールの指定
background	背景色や背景画像をまとめて指定

４．２．１色　(background-color)

背景の色を指定します。

background-color:属性値

要素の色を指定する。

属性値	説明
色	色を名称や１６進数で指定する（属性値の色を参照）
transparent	透明　（結果的に親の色を受け継ぐことになる）（規定値）
inherit	親要素の色を受け継ぐ　（正しくない名称を指定しても color 属性は無効なので結果的に親の色を受け継ぐことになる）

記述例

<div style="background-color:yellow;">黄色の背景　　
<span style="background-color:blue;color:white;">青い背景</span>
</div>
<div style="background-color:yellow;">黄色の背景　　
<span style="background-color:transparent;">透明な背景</span>
</div>

表示例

４．２．２イメージ　(background-image)

背景の画像を指定します。

background-image:属性値

要素の背景画像を指定する。

属性値	説明
URL	URL（アドレス）で画像ファイルを指定する。カンマで区切って複数の画像を指定できるが、その場合は、最初に指定した画像が 1番上に配置され、次の画像はそれの後ろに順に配置される。
none	背景に画像ファイルを使用しない（規定値）

記述例

<div style="background-image:url('bear.png');">くま<br><br><br></div>

表示例

４．２．３サイズ　(background-size)

背景の画像の幅と高さを指定します。

background-size:幅高さ

要素の背景画像の幅と高さを指定する。高さを省略すると auto になります。

幅、高さ	説明
auto	自動で設定する。（規定値）
cover	縦横比は保持して、表示領域をすべて埋め尽くす大きさで表示する
contain	縦横比は保持して、表示領域に画像がすべて表示される大きさで表示する
パーセント（%）	その要素の表示領域に対する割合を % で指定
数値（単位）	数値に em や ex や px などの単位をつけて指定

記述例

スタイルシート
  div {
    width:200px;
    height:60px;
    border:solid 1px lightgrey;
    background-image:url('bear.png');
    background-repeat:no-repeat;
  }

ボディ
<div style="background-size:auto;">くま</div>
<div style="background-size:cover;">くま</div>
<div style="background-size:contain;">くま</div>
<div style="background-size:100% 50%;">くま</div>

理解の助けになるように表示領域をグレイの枠で囲っています。

表示例

４．２．４繰り返しパターン　(background-repeat)

背景の繰り返しパターンを指定します。

background-repeat:属性値

要素の背景の繰り返しパターンを指定する。

属性値	説明
repeat	縦横に背景画像を繰り返して表示する（規定値）
repeat-x	横方向にのみ背景画像を繰り返して表示する
repeat-y	縦方向にのみ背景画像を繰り返して表示する
no-repeat	背景画像を一回だけ表示する

記述例

スタイルシート
  div {
    width:200px;
    height:100px;
    border:solid 1px lightgrey;
    background-image:url('bear.png');
  }

ボディ
<div style="background-repeat:repeat;">くま<br><br><br></div>
<div style="background-repeat:repeat-x;">くま<br><br><br></div>
<div style="background-repeat:repeat-y;">くま<br><br><br></div>
<div style="background-repeat:no-repeat;">くま<br><br><br></div>

理解の助けになるように表示領域をグレイの枠で囲っています。

表示例

４．２．５表示領域　(background-clip)

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

background-clip:属性値

背景画像を表示する領域を指定する。

属性値	説明
border-box	ボーダーの外側まで表示する（規定値）
padding-box	パディングの外側(ボーダーの内側)まで表示する
content-box	コンテンツの外側(パディングの内側)まで表示する
text	背景が前景のテキストで切り取られる

背景画像の表示範囲を指定します。

ただし、背景画像の基準位置（画像の表示される開始位置）は、規定値としてはボーダーのすぐ内側からになります。開始位置を変更するには次の background-origin で指定します。

記述例

スタイルシート
  div {
    width:150px;
    height:60px;
    border:solid 10px rgba(128, 128, 128, 0.4);
    background-image:url('bear.png');
    padding:10px;
    background-repeat:repeat;
  }

ボディ
<div style="background-clip:border-box;">くま</div>
<div style="background-clip:padding-box;">くま</div>
<div style="background-clip:content-box;">くま</div>
<div style="font-size:48pt;font-weight:bold;color:transparent;background-clip:text;">くま</div>

表示例

４．２．６基準位置　(background-origin)

背景画像を表示する際の基準位置を指定します。この基準位置から画像が表示されます。

background-origin:属性値

背景画像を表示する際の基準位置を指定する。

属性値	説明
border-box	ボーダーの左上を基準位置とする
padding-box	パディングの外側(ボーダーの内側)の左上を基準位置とする（規定値）
content-box	コンテンツの外側(パディングの内側)の左上を基準位置とする

記述例

スタイルシート
  div {
    width:200px;
    height:60px;
    border:solid 10px rgba(128, 128, 128, 0.4);
    background-image:url('bear.png');
    padding:10px;
    background-repeat:no-repeat;
  }

ボディ
<div style="background-origin:border-box;">くま</div>
<div style="background-origin:padding-box;">くま</div>
<div style="background-origin:content-box;">くま</div>

表示例

４．２．７表示位置　(background-position)

背景画像を表示する位置を指定します。

background-position:横方向位置縦方向位置

背景画像を表示する際の基準位置を指定する。

横方向位置、縦方向位置の順で指定する。省略すると center を指定したことになる。

横方向位置は、left か right とパーセント（%）か数値（単位）を組み合わせて指定する。left も right も記述しないと left になり、パーセント（%）も数値（単位）も指定しないと 0px の意味になる。

縦方向位置は、top と bottom で同様に指定する。

横方向位置、縦方向位置	説明
center	中央に表示する
left	左側に表示する（規定値）
right	右側に表示する
top	上部に表示する（規定値）
bottom	下部に表示する
パーセント（%）	その要素の表示領域に対する割合を % で指定
数値（単位）	数値に em や ex や px などの単位をつけて指定

記述例

スタイルシート
  div {
    width:200px;
    height:100px;
    border:solid 1px rgba(128, 128, 128, 0.4);
    background-image:url('bear.png');
    background-repeat:no-repeat;
  }

ボディ
<div style="background-position:left top;">くま</div>
<div style="background-position:30px 10px;">くま</div>
<div style="background-position:right 20px bottom 10px;">くま</div>

理解の助けになるように表示領域をグレイの枠で囲っています。

表示例

４．２．８スクロール　(background-attachment)

背景画像もスクロールさせるかどうかを指定します。

background-attachment:属性値

背景画像もスクロールさせるかどうかを指定する。

属性値	説明
scroll	背景は要素に固定され、要素と一緒にスクロールする（規定値）
fixed	背景は固定され、内容がスクロールしても背景はスクロールしない
local	背景は内容に固定され、内容と共にスクロールする

記述例

スタイルシート
  div {
    width:200px;
    height:60px;
    border:solid 1px lightgrey;
    background-image:url('bear.png');
    background-repeat:repeat;
    overflow:scroll;
  }

ボディ
<body>
  <div style="background-attachment:scroll;">クマ科に属する哺乳類の総称。体はよく肥え、がんじょう ...</div>
  <div style="background-attachment:fixed;">クマ科に属する哺乳類の総称。体はよく肥え、がんじょう ...</div>
  <div style="background-attachment:local;">クマ科に属する哺乳類の総称。体はよく肥え、がんじょう ...</div>
</body>

background-attachment:scroll では、背景画像は div 要素の固定されているので、div のスクロールでは動きませんが、body のスクロールでは div 要素とともに動きます。

background-attachment:fixed では、背景画像はスクロールでは動きません。

background-attachment:local では、背景画像は div 要素の内容（"クマ科に属する哺乳類の..."）に固定されているので、div のスクロールでも body のスクロールでも内容とともに動きます。

表示例

４．２．９背景　(background)

背景に関する属性の値をまとめて指定します。

background:属性値属性値 ...

フォントスタイル、変換、太さ、サイズ、表示高さ、ファミリをまとめて変更する。

属性値	説明	個別の属性	必須
色	背景色	background-color	×
URL	URL（アドレス）	background-image	×
repeat	繰り返して表示（規定値）	background-repeat	×
repeat-x	横方向にのみ繰り返して表示
repeat-y	縦方向にのみ繰り返して表示
no-repeat	縦方向にのみ繰り返して表示
center	中央に表示	background-position	×
left	左側に表示（規定値）
right	右側に表示
top	上側に表示（規定値）
bottom	下側に表示
パーセント（%）	その要素の表示領域に対する割合
数値（単位）	左側に表示
auto	自動で設定する（規定値）	background-size	×
cover	縦横比は保持して、表示領域をすべて埋め尽くす大きさで表示する
contain	縦横比は保持して、表示領域に画像がすべて表示される大きさで表示する
パーセント（%）	その要素の表示領域に対する割合
数値（単位）	数値に em や ex や px などの単位をつけて指定
border-box	ボーダーの左上が基準、ボーダーの外側まで表示（clip 規定値）	background-origin background-clip	×
padding-box	ボーダーの内側の左上を基準、ボーダーの内側まで表示（origin 規定値）
content-box	パディングの内側の左上を基準、パディングの内側まで表示
scroll	背景は要素に固定される（規定値）	background-attachment	×
fixed	背景は固定
local	背景は内容に固定される

○ background-size の値は、background-position の直後で / に続けて記述

○ border-box、padding-box、content-box は、1個だけなら background-origin と background-clip の両方に共通の値となり、2個なら、最初が background-origin、次が background-clip の値となる。

（１）画像

背景として画像を表示したいとき、画像ファイルの URL を指定します。

記述例

スタイルシート
  div.corner {
    width:300px;
    height:150px;
    background:
            url('bear.png') no-repeat top right,
            url('bear.png') no-repeat top left,
            url('bear.png') no-repeat bottom left,
            url('bear.png') no-repeat bottom right,
            lightyellow;
  }

ボディ
<div style="width:200px;height:100px;background:lightyellow url('bear.png') no-repeat 50% 50%;">くま</div>
<div class="corner">くま</div>

上側では、背景画像を中央に表示しています。下側では、四隅に背景画像を表示しています。

ともに理解の助けになるように、うすい黄色の背景色を別途付けています。

表示例

（２）線形グラデーション

線形グラデーションを指定します。

CSS 関数のグラデーションも参照してください。

background:linear-gradient(角度, 開始, 途中, ... ,終了)

background:repeating-linear-gradient(角度, 開始, 途中, ... ,終了)

線形グラデーションを指定する。

repeating-linear-gradient は、終了位置が 100% になっていないなどすべて塗りつぶしていないかぎり、グラデーションを繰り返す。

属性値	説明	必須
角度	グラデーションの方向（上下が 0deg）（規定値：0deg）あるいは to に続いて top、bottom、left、right	○
開始	空白で区切った、グラデーションの開始色とその開始位置（規定値：0%）	○
途中	空白で区切った、グラデーションの途中色とその開始終了位置（規定値：前後の位置の中間）	×
終了	空白で区切った、グラデーションの終了色とその終了位置（規定値：100%）	○

　　　　○位置は、25% や 30px のように数値と単位で開始位置からの距離を指定する。省略することもできる。

　　　　○位置が一つも書かれていない場合は指定された色の数で均等割り

記述例

<div style="width:100px;height:100px;background:linear-gradient(45deg, red, blue);"></div>
<div style="width:100px;height:100px;background:linear-gradient(to right bottom, red, blue 30%);"></div>
<div style="width:200px;height:40px;background:linear-gradient(90deg, red, yellow 120px, blue);"></div>
<div style="width:200px;height:40px;background:linear-gradient(to right, red, yellow, green, blue);"></div>

表示例

repeating-linear-gradient では、終了位置が 100% になっていないなどすべて塗りつぶしていないかぎり、グラデーションを繰り返します。

記述例

<div style="width:100px;height:100px;background:repeating-linear-gradient(45deg, red, blue 20%);"></div>
<div style="width:100px;height:100px;background:repeating-linear-gradient(to right bottom, red, blue 30%);"></div>
<div style="width:200px;height:40px;background:repeating-linear-gradient(90deg, red, yellow 20px, blue 100px);"></div>
<div style="width:200px;height:40px;background:repeating-linear-gradient(to right, red, yellow, green, blue 33.3%);"></div>

表示例

（３）円形グラデーション

中心から放射状に延びる、円形グラデーションを指定します。

CSS 関数のグラデーションも参照してください。

background:radial-gradient(形状|大きさ at 位置, 開始, 途中, ... ,終了)

background:repeating-radial-gradient(形状|大きさ at 位置, 開始, 途中, ... ,終了)

円形グラデーションを指定する。

repeating-radial-gradient は、終了位置が 100% になっていないなどすべて塗りつぶしていないかぎり、グラデーションを繰り返す。

属性値

説明

必須

形状

グラデーションの形状（circle か ellipse）（規定値：ellipse）

○（大きさとどちらか）

大きさ

キーワードまたはグラデーションの半径（１つなら円、２つなら楕円）

キーワード	意味
closest-side	グラデーションの中心から、グラデーションで塗りつぶす図形の最も近い辺までの大きさ
closest-corner	グラデーションの中心から、グラデーションで塗りつぶす図形の最も近い角（頂点）までの大きさ
farthest-side	グラデーションの中心から、グラデーションで塗りつぶす図形の最も遠い辺までの大きさ
farthest-corner	グラデーションの中心から、グラデーションで塗りつぶす図形の最も遠い角（頂点）までの大きさ

○（形状とどちらか）

位置

グラデーションの中心位置またはキーワード（規定値：center）

キーワード	意味
top	上
bottom	下
left	左
right	右
center	中央

開始

空白で区切った、グラデーションの開始色とその開始位置（規定値：0%）

○

途中

空白で区切った、グラデーションの途中色とその開始終了位置（規定値：前後の位置の中間）

終了

空白で区切った、グラデーションの終了色とその終了位置（規定値：100%）

○

　　　　○位置は、25% や 30px のように数値と単位で中心からの距離を指定する。

　　　　○位置が一つも書かれていない場合は指定された色の数で均等割り

記述例

<div style="width:100px;height:50px;background:radial-gradient(red, blue);"></div>
<div style="width:100px;height:50px;background:radial-gradient(ellipse closest-corner at 20px 20px, red, blue);"></div>
<div style="width:100px;height:50px;background:radial-gradient(ellipse farthest-corner at 20px 20px, red, blue);"></div>
<div style="width:100px;height:50px;background:radial-gradient(50px at 20px 20px, red, blue);"></div>
<div style="width:100px;height:50px;background:radial-gradient(20px 50px at 20px 20px, red, blue);"></div>
<div style="width:200px;height:50px;background:radial-gradient(circle farthest-side at 25% 20%, red, yellow 100px, blue);"></div>
<div style="width:200px;height:50px;background:radial-gradient(ellipse farthest-corner at top left, red, yellow, green, blue);"></div>

表示例

repeating-radial-gradient では、終了位置が 100% になっていないなどすべて塗りつぶしていないかぎり、グラデーションを繰り返します。

記述例

<div style="width:100px;height:50px;background:repeating-radial-gradient(red,blue 50%);"></div>
<div style="width:100px;height:50px;background:repeating-radial-gradient(ellipse closest-corner at 20px 20px,red,blue);"></div>
<div style="width:100px;height:50px;background:repeating-radial-gradient(ellipse farthest-corner at 20px 20px,red,blue);"></div>
<div style="width:100px;height:50px;background:repeating-radial-gradient(50px at 20px 20px,red,blue);"></div>
<div style="width:100px;height:50px;background:repeating-radial-gradient(20px 50px at 20px 20px,red,blue);"></div>
<div style="width:200px;height:50px;background:repeating-radial-gradient(circle farthest-side at 25% 20%,red,yellow 50px,blue 70px);"></div>
<div style="width:200px;height:50px;background:repeating-radial-gradient(ellipse farthest-corner at top left,red,yellow,green,blue 60%);"></div>

表示例

（４）円錐グラデーション

中心点の周りを回りながら色が変化する、円錐グラデーションを指定します。

CSS 関数のグラデーションも参照してください。

background:conic-gradient(開始, 途中, ... ,終了)

background:repeating-conic-gradient(開始, 途中, ... ,終了)

円錐グラデーションを指定する。

repeating-conic-gradient は、終了位置が 100% になっていないなどすべて塗りつぶしていないかぎり、グラデーションを繰り返す。

属性値	説明	必須
開始	空白で区切った、グラデーションの開始色とその開始位置（規定値：0%）	○
途中	空白で区切った、グラデーションの途中色とその開始終了位置（規定値：前後の位置の中間）	×
終了	空白で区切った、グラデーションの終了色とその終了位置（規定値：100%）	○

　　　　○位置は、25% や 30deg、0.3turn のように数値と単位で角度を指定する。

　　　　○位置が一つも書かれていない場合は指定された色の数で均等割り

記述例

<div style="width:100px;height:100px;background:conic-gradient(red, blue);"></div>
<div style="width:100px;height:100px;background:conic-gradient(red, yellow 40%, blue);"></div>
<div style="width:100px;height:100px;background:conic-gradient(red, yellow 0.25turn, green 0.75turn, blue);"></div>

表示例

repeating-conic-gradient では、終了位置が 100% になっていないなどすべて塗りつぶしていないかぎり、グラデーションを繰り返します。

記述例

<div style="width:100px;height:100px;background:repeating-conic-gradient(red, blue 20%);"></div>
<div style="width:100px;height:100px;background:repeating-conic-gradient(red, yellow, greenn, blue 0.4turn);"></div>

表示例

４．３　　ブレンド

色のブレンドについて説明します。

属性	説明
mix-blend-mode	色のブレンド方式の指定
background-blend-mode	背景の色のブレンド方式の指定
isolation	独立するかどうかの指定

４．３．１背景と要素のブレンド　(mix-blend-mode)

背景と要素が重なる部分の、色のブレンド方式を指定します。

mix-blend-mode:属性値

背景と要素が重なる部分の、色のブレンド方式を指定する。

属性値	説明
normal	ブレンドしない（規定値）
multiply	背景色と要素の色を掛け合わせた色にする
screen	背景色の補色と、要素の色の補色を掛け合わせた色の補色を取る
overlay	背景色に応じて、multiply または screen にする
darken	背景色と要素色の暗い方の色にする
lighten	背景色と要素色の明るい方の色にする
color-dodge	要素色を反映して背景色を明るくする
color-burn	要素色を反映して背景色を暗くする
hard-lignt	要素色に応じて、multiply または screen にする
soft-light	要素色に応じて、darken または lighten にする
difference	背景色と要素色の差の絶対値にする
exclutsion	difference と同様だが、コントラストが弱くなる
hue	要素色の色相と、背景色の彩度と光度を合わせた色にする
saturation	要素色の彩度と、背景色の色相と光度を合わせた色にする
color	要素色の色相と彩度と、背景色の光度を合わせた色にする
luminosity	要素色の光度と、背景色の色相と彩度を合わせた色にする

記述例

スタイルシート
  div {
    width:150px;
    height:60px;
    line-height:100%;
    background-repeat:repeat-x;
    background-image:url("bear.png");		
  }
  span {
    font-family:'ＭＳ Ｐゴシック';
    font-size:12pt;
    color:blue;
  }

ボディ
<div><span style="mix-blend-mode:normal;">■■■■■■■■■<br>■■■■■■■■■<br>■■■■<br>■■</span></div>
<div><span style="mix-blend-mode:multiply;">■■■■■■■■■<br>■■■■■■■■■<br>■■■■<br>■■</span></div>
<div><span style="mix-blend-mode:screen;">■■■■■■■■■<br>■■■■■■■■■<br>■■■■<br>■■</span></div>
<div><span style="mix-blend-mode:overlay;">■■■■■■■■■<br>■■■■■■■■■<br>■■■■<br>■■</span></div>
<div><span style="mix-blend-mode:darken;">■■■■■■■■■<br>■■■■■■■■■<br>■■■■<br>■■</span></div>
<div><span style="mix-blend-mode:lighten;">■■■■■■■■■<br>■■■■■■■■■<br>■■■■<br>■■</span></div>
<div><span style="mix-blend-mode:color-dodge;">■■■■■■■■■<br>■■■■■■■■■<br>■■■■<br>■■</span></div>
<div><span style="mix-blend-mode:color-burn;">■■■■■■■■■<br>■■■■■■■■■<br>■■■■<br>■■</span></div>
<div><span style="mix-blend-mode:hard-lignt;">■■■■■■■■■<br>■■■■■■■■■<br>■■■■<br>■■</span></div>
<div><span style="mix-blend-mode:soft-light;">■■■■■■■■■<br>■■■■■■■■■<br>■■■■<br>■■</span></div>
<div><span style="mix-blend-mode:difference;">■■■■■■■■■<br>■■■■■■■■■<br>■■■■<br>■■</span></div>
<div><span style="mix-blend-mode:exclutsion;">■■■■■■■■■<br>■■■■■■■■■<br>■■■■<br>■■</span></div>
<div><span style="mix-blend-mode:hue;">■■■■■■■■■<br>■■■■■■■■■<br>■■■■<br>■■</span></div>
<div><span style="mix-blend-mode:saturation;">■■■■■■■■■<br>■■■■■■■■■<br>■■■■<br>■■</span></div>
<div><span style="mix-blend-mode:color;">■■■■■■■■■<br>■■■■■■■■■<br>■■■■<br>■■</span></div>
<div><span style="mix-blend-mode:luminosity;">■■■■■■■■■<br>■■■■■■■■■<br>■■■■<br>■■</span></div>

表示例

４．３．２背景と背景のブレンド　(background-blend-mode)

背景とその下の背景が重なる部分の、色のブレンド方式を指定します。

background-blend-mode:属性値

背景とその下の背景が重なる部分の、色のブレンド方式を指定する。

属性値	説明
normal	ブレンドしない（規定値）
multiply	背景色と要素の色を掛け合わせた色にする
screen	背景色の補色と、要素の色の補色を掛け合わせた色の補色を取る
overlay	背景色に応じて、multiply または screen にする
darken	背景色と要素色の暗い方の色にする
lighten	背景色と要素色の明るい方の色にする
color-dodge	要素色を反映して背景色を明るくする
color-burn	要素色を反映して背景色を暗くする
hard-lignt	要素色に応じて、multiply または screen にする
soft-light	要素色に応じて、darken または lighten にする
difference	背景色と要素色の差の絶対値にする
exclutsion	difference と同様だが、コントラストが弱くなる
hue	要素色の色相と、背景色の彩度と光度を合わせた色にする
saturation	要素色の彩度と、背景色の色相と光度を合わせた色にする
color	要素色の色相と彩度と、背景色の光度を合わせた色にする
luminosity	要素色の光度と、背景色の色相と彩度を合わせた色にする

記述例

スタイルシート
  div {
    width:150px;
    height:60px;
    line-height:100%;
    background-image:url("bear.png");
  }
  div.in {
    width:130px;
    height:50px;
    background-color:blue;
  }

ボディ
<div><div class="in" style="background-blend-mode:normal;"></div></div>
<div><div class="in" style="background-blend-mode:multiply;"></div></div>
<div><div class="in" style="background-blend-mode:screen;"></div></div>
<div><div class="in" style="background-blend-mode:overlay;"></div></div>
<div><div class="in" style="background-blend-mode:darken;"></div></div>
<div><div class="in" style="background-blend-mode:lighten;"></div></div>
<div><div class="in" style="background-blend-mode:color-dodge;"></div></div>
<div><div class="in" style="background-blend-mode:color-burn;"></div></div>
<div><div class="in" style="background-blend-mode:hard-lignt;"></div></div>
<div><div class="in" style="background-blend-mode:soft-light;"></div></div>
<div><div class="in" style="background-blend-mode:difference;"></div></div>
<div><div class="in" style="background-blend-mode:exclutsion;"></div></div>
<div><div class="in" style="background-blend-mode:hue;"></div></div>
<div><div class="in" style="background-blend-mode:saturation;"></div></div>
<div><div class="in" style="background-blend-mode:color;"></div></div>
<div><div class="in" style="background-blend-mode:luminosity;"></div></div>

表示例

４．３．３独立　(isolation)

新しいスタックコンテキストとして独立するかどうかを指定します。

isolation:属性値

新しいスタックコンテキストとして独立するかどうかを指定する。

属性値	説明
auto	新しいスタックコンテキストを作成しない（規定値）
isolate	新しいスタックコンテキストを作成する

記述例

スタイルシート
  div.b {
    width:150px;
    height:65px;
    line-height:100%;
    background-repeat:repeat-x;
    background-image:url("bear.png");
  }
  div.in {
    width:130px;
    height:50px;
    background-color:blue;
  }
  span {
    font-family:'ＭＳ Ｐゴシック';
    font-size:12pt;
    color:blue;
  }

ボディ
<div class="b"><div style="isolation:auto;">
  <span style="mix-blend-mode:difference;">■■■■■■■■■<br>■■■■■■■■■<br>■■■■<br>■■</span>
</div></div>
<div class="b"><div style="isolation:auto;"><div class="in" style="background-blend-mode:difference;"></div></div></div>


<div class="b"><div style="isolation:isolate;">
  <span style="mix-blend-mode:difference;">■■■■■■■■■<br>■■■■■■■■■<br>■■■■<br>■■</span>
</div></div>
<div class="b"><div style="isolation:isolate;"><div class="in" style="background-blend-mode:difference;"></div></div></div>

表示例

４．４　　不透明度

不透明度について説明します。

４．４．１不透明度　(opacity)

不透明度を指定します。

opacity:属性値

親要素に対する不透明度を指定する。

属性値	説明
0.0～1.0	親要素に対する不透明度。0.0（完全な透明）～1.0（完全な不透明）（規定値：1.0）
inherit	親要素と同じ数値（したがって、親要素の不透明度² になる）

記述例

スタイルシート
  div {
    width:128px;
    height:60px;
    line-height:100%;
    background-repeat: repeat-x;
    background-image:url("bear.png");
  }
  span {
    font-family:'ＭＳ Ｐゴシック';
    font-size:12pt;
  }

ボディ
<div><span style="opacity:0.5">■■■■■■■<br><span style="opacity:0.5">■■■■■■■<br>
        <span style="opacity:0.5">■■■■■■■</span></span></span></div>
<img src="bear.png" style="opacity:0.4"><br>
<div style="opacity:0.2"><span>くま</span></div>

表示例

４ 色、背景

４．１ 色

４．１．１ 色 (color)

color:属性値

記述例

４．２ 背景

４．２．１ 色 (background-color)

background-color:属性値

記述例

４．２．２ イメージ (background-image)

background-image:属性値

記述例

４．２．３ サイズ (background-size)

background-size:幅 高さ

記述例

４．２．４ 繰り返しパターン (background-repeat)

background-repeat:属性値

記述例

４．２．５ 表示領域 (background-clip)

background-clip:属性値

記述例

４．２．６ 基準位置 (background-origin)

background-origin:属性値

記述例

４．２．７ 表示位置 (background-position)

background-position:横方向位置 縦方向位置

記述例

４．２．８ スクロール (background-attachment)

background-attachment:属性値

記述例

４．２．９ 背景 (background)

background:属性値 属性値 ...

（１）画像

記述例

（２）線形グラデーション

background:linear-gradient(角度, 開始, 途中, ... ,終了)

background:repeating-linear-gradient(角度, 開始, 途中, ... ,終了)

記述例

記述例

（３）円形グラデーション

background:radial-gradient(形状|大きさ at 位置, 開始, 途中, ... ,終了)

background:repeating-radial-gradient(形状|大きさ at 位置, 開始, 途中, ... ,終了)

記述例

記述例

（４）円錐グラデーション

background:conic-gradient(開始, 途中, ... ,終了)

background:repeating-conic-gradient(開始, 途中, ... ,終了)

記述例

記述例

４．３ ブレンド

４．３．１ 背景と要素のブレンド (mix-blend-mode)

mix-blend-mode:属性値

記述例

４．３．２ 背景と背景のブレンド (background-blend-mode)

background-blend-mode:属性値

記述例

４．３．３ 独立 (isolation)

isolation:属性値

記述例

４．４ 不透明度

４．４．１ 不透明度 (opacity)

opacity:属性値

記述例

４　色、背景

４．１　　色

４．１．１色　(color)

４．２　　背景

４．２．１色　(background-color)

４．２．２イメージ　(background-image)

４．２．３サイズ　(background-size)

background-size:幅高さ

４．２．４繰り返しパターン　(background-repeat)

４．２．５表示領域　(background-clip)

４．２．６基準位置　(background-origin)

４．２．７表示位置　(background-position)

background-position:横方向位置縦方向位置

４．２．８スクロール　(background-attachment)

４．２．９背景　(background)

background:属性値属性値 ...

４．３　　ブレンド

４．３．１背景と要素のブレンド　(mix-blend-mode)

４．３．２背景と背景のブレンド　(background-blend-mode)

４．３．３独立　(isolation)

４．４　　不透明度

４．４．１不透明度　(opacity)