１　CSS とは

（１） Web カラー

よく利用するであろう色には名前が付けられています（右図を参照）。

また、特別な色として、塗らないこと（透明）を指示する transparent があります。

（２） １６進数

# に続いて、赤緑青をそれぞれ１６進数２桁ずつで指定することもできます（上図を参照）。アルファベット部分は大文字でも小文字でも構いません。

また、赤緑青それぞれの２桁が同じ数字のとき、それぞれ１桁に省略することもできます。つまり、#FFFF00 は #FF0 と記述することも可能です。

（３） RGB

R（赤）G（緑）B（青）で色を指定します。rgb(R,G,B) と指定します。R、G、Bの部分には ０～２５５ までの10進数を指定することができます。つまり、rgb(173,255,47) は #ADFF2F と同じ色を示しています。

また、10進数ではなく、0%～100% の割合で指定することもできます。0% が 0、100% が 255 です。

さらに、RGB に加えてアルファ値（透過度）を 0.0（完全に透明）～1.0（完全に不透明）の間で指定できる rgba(R,G,B,A) もあります。

（４） HSL

H：hue（色相）、S：saturation（彩度）、L：lightness（明度）で色を指定できます。hsl(H,S,L) と指定します。色相には整数値を指定します。どれだけ大きな値も小さな値も指定できますが、0 = 360xNで、赤を示します。彩度、明度は0～100%で指定します。

さらに、HSL に加えてアルファ値（透過度）を 0.0（完全に透明）～1.0（完全に不透明）の間で指定できる hsla(H,S,L,A) もあります。

（５） CMYK

C：cyan（水色）、M：magenta（赤紫色）、Y：yellow（黄色）、K：black（黒色）で色を指定できます。cmyk(C,M,Y,K) と指定します。各色を 0.0～1.0 の間で指定します。

(1) 長さ

width、height 属性などで指定されます。これらには次のような単位を指定できます。

ビューポートとは表示域のことで、表示するデバイスなどで大きさは異なります。vw、vh などはそれに対する割合です。例えば、表示域の横幅が 200mm であるとき 8vw とした場合は 16mm となります。

（２） 数

rowspan、colspan 属性などで指定されます。単位はありません。

（３） 座標

x、y 属性などで指定されます。単位はありません。

（４） 時間

animation-duration、animation-delay 属性などで指定されます。

（５） 角度

radial-gradient、conic-gradient、transform:rotate などで指定されます。単位を省略することはできません。

（６） 割合

長さや数などで絶対数ではなく割合を指定することもできます。

（７） 周波数

話し声の高さのような、周波数を指定することもできます。

（８） 解像度

デバイスの解像度を指定することもできます。

（１） 基本図形

主にクリッピングの図形を定義するときに使用します。クリッピングも参照してください。

記述例

スタイルシート
img {
  border: solid 6px lightgrey;
  padding: 10px;
  background-color: lime;
}

ボディ
<img src="bear.png" style="clip-path:inset(20px 10px round 20px/10px);">   <-- 水平方向 20px /垂直方向 10px -->
<img src="bear.png" style="clip-path:circle(20px at 20px 40px);">
<img src="bear.png" style="clip-path:ellipse(40px 10px at 30px 40px);">
<img src="bear.png" style="clip-path:polygon(38px 0px, 14px 72px, 76px 28px, 0px 28px, 62px 72px);">

（２） 数式・属性

属性値の数値を計算したり、属性値を参照したりするときに使用します。

calc を使用して、異なる単位の数値が混在した計算をすることができます。

加(+)減(-)乗(*)除(/) の演算ができますが、+ と - の前後には 空白が必要です（* と / の前後には空白は要りませんが空白を入れて統一したほうがよいでしょう）。

記述例

スタイルシート
span {
  display: inline-block;
  font-size: 9px;
}

ボディ
<div style="width:400px;height:50px;border:solid 1px gray;">
  <span style="width:calc(50% + 40px); background-color:yellow;">calc(50% + 40px)</span>
  <span style="width:calc(50% - (30px * 2)); background-color:yellow;">calc(50% - (30px * 2))</span>
</div>                       ↑↑
                          空白が必要

attr の引数に指定した属性名の値を取得できます。属性名には、data- から始まる独自データ属性も指定できます。次の例では、data-importance が独自データ属性です。

attr については、E::before も参照してください。

記述例

スタイルシート
div.style::after {
  content: " style 属性は、" attr(style) " です。";
}
div[data-importance]::before {
  content: attr(data-importance) "→ ";
  color: red;
}

ボディ
<div class="style" style="width:300px;">この div 要素の</div>
<br>
<div data-importance="重要">attr() の説明</div>

minmax や repeat は主に フレックスボックス や グリッド で使用され、可変長の幅を指定したり、同じ属性の繰り返しを指定したりします。

下の例では、A の列に minmax(50px, 400px) が指定されていますので、グリッドの幅の変化に伴って 50px から 400px の間で変化します。また、repeat によって B から E の列は幅が 45px と 3em が 2回繰り返され、1 から 4 までの行は高さが 20px に設定されています。

別ウィンドウで表示して、ウィンドウの幅を変えてみてください。

記述例

スタイルシート
div.container {
  display:grid;
  margin:20px 30px;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}
div.h {
  background-color: lightyellow;
}
div.s {
  background-color: lightcyan;
}

ボディ
<div class="container" style="grid-template-columns:100px minmax(50px, 400px) repeat(2, 45px 3em);
                              grid-template-rows:30px repeat(4, 20px) 30px;">
  <div class="area h"> </div><div class="area h">A</div><div class="area h">B</div><div class="area h">C</div><div class="area h">D</div><div class="area h">E</div>
  <div class="area">1</div><div class="area">A1</div><div class="area">B1</div><div class="area">C1</div><div class="area">D1</div><div class="area">E1</div>
  <div class="area">2</div><div class="area">A2</div><div class="area">B2</div><div class="area">C2</div><div class="area">D2</div><div class="area">E2</div>
  <div class="area">3</div><div class="area">A3</div><div class="area">B3</div><div class="area">C3</div><div class="area">D3</div><div class="area">E3</div>
  <div class="area">4</div><div class="area">A4</div><div class="area">B4</div><div class="area">C4</div><div class="area">D4</div><div class="area">E4</div>
  <div class="area s">5</div><div class="area s">A5</div><div class="area s">B5</div><div class="area s">C5</div><div class="area s">D5</div><div class="area s">E5</div>
</div>

（３） 色

色を指定するときに使用します。

関数	引数	説明
rgb(赤,緑,青)	赤緑青：０～２５５または０％～１００％	RGB値で色の指定を行う
rgba(赤,緑,青,不透明度)	赤緑青：０～２５５または０％～１００％ 透明度：０（透明）～１（不透明）	RGB値と不透明度で色の指定を行う
hsl(色相,彩度,輝度)	色相：０°～３６０° 彩度：０％（純色）～１００％（灰色） 輝度：０％（黒）～５０％（純色）～１００％（白）	色相、彩度、輝度の3要素で色の指定を行う
hsla(色相,彩度,輝度,不透明度)	色相：０°～３６０° 彩度：０％（純色）～１００％（灰色） 輝度：０％（黒）～５０％（純色）～１００％（白） 透明度：０（透明）～１（不透明）	色相、彩度、輝度の3要素と不透明度で色の指定を行う

rgb の例です。

下側の例（熊の絵）では、背景画として熊の絵を設定して、その上に背景色の不透明度を変えた文字列を表示しています。

記述例（一部）

<span style="background-color:rgb(127,127,255);">rgb(127,127,255)</span>

<span style="background-color:rgba(255,0,0,0.8);">rgba(255,0,0,0.8)</span>

hsl の例です。

下側の例（熊の絵）では、背景画として熊の絵を設定して、その上に背景色の不透明度を変えた文字列を表示しています。

記述例（一部）

<span style="background-color:hsl(90,50%,75%);">hsl(90,50%,75%)</span>

<span style="background-color:hsla(180,100%,50%,0.75);">hsla(180,100%,50%,0.75)</span>

（４） グラデーション

色を指定するときに使用します。

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

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

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

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

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

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

repeating-～ は、グラデーションですべてが塗りつぶされないとき、同じグラデーションが繰り返されます。

記述例

<div style="background:linear-gradient(30deg, orange, yellow 80px, green);"></div>
<div style="background:repeating-linear-gradient(to right, orange, yellow, green 40%);"></div>
<div style="background:radial-gradient(circle farthest-side at 25% 20%, orange, yellow 100px, green);"></div>
<div style="background:repeating-radial-gradient(ellipse farthest-side at 25% 20%,orange,yellow 50px,green 70px);"></div>
<div style="background:conic-gradient(orange 25%, yellow 60%, green);"></div>
<div style="background:repeating-conic-gradient(orange 0%, yellow 20%, green 33.3%);"></div>

（５） 変形

移動、拡大、縮小、回転、傾斜などの変形を指定するときに transform: に続けて指定します。なお、Safariでは機能しませんが、-webkit- を付けると機能するものもあります。

また、3D での変形のときは、変形させる要素の親要素に 3D であることを意味する transform-style:preserve-3d; と 遠近法の視点との距離を表す perspective 属性が必要になります。

詳しくは、８　変形 を参照してください。

表示例は、８　変形 も参照してください。

なお、下の例では黄色い部分が本来の図形の位置で、そこからどのように変形されたかを示しています。

記述例

<div>
  <div style="transform:translate(50px,20px);"></div>
</div>
<div>
  <div style="transform:scale(1.5,1.2);"></div>
</div>
<div>
  <div style="transform:rotate(60deg);"></div>
</div>
<div style="transform-style:preserve-3d;perspective:100px;">
  <div style="transform:translateZ(20px);"></div>
</div>
<div style="transform-style:preserve-3d;perspective:100px;">
  <div style="transform:rotateX(60deg);"></div>
</div>

（６） フィルター

ぼかしや色変化などのグラフィック効果を要素に適用するために指定します。

８．４　フィルターも参照してください。

関数	引数	説明
blur(半径)	ぼかしの半径（大きい値になるほどよりぼかしが入る）	画像をぼかす。
brightness(割合)	明るさの割合：0～1（暗くなる）、1～（明るくなる）（注）	画像の明るさを変える。
contrast(割合)	明るさの割合：0～1（コントラストが下がる）、1～（コントラストが上がる）	画像のコントラストを変える。
drop-shadow(X位置 Y位置 [ ぼかし半径[ 影の色]])	X位置：水平方向の距離 Y位置：垂直方向の距離 ぼかし半径：０以上の値。大きいほど薄くなる 影の色（規定値：ブラウザによる）	影が広がる半径を変える。
grayscale(割合)	変換の度合い：0～1（１で完全なグレースケール）	グレースケールに変換する。
hue-rotate(色相)	色相：０°～３６０°の範囲の角度	色相を指定する。
invert(割合)	変換の割合：0～1（１で完全な反転）	階調を反転する。
opacity(割合)	不透明度の割合：0～1（１で完全な不透明）	不透明度を指定する。
saturate(彩度)	彩度：0～1（暗くなる）、1～（明るくなる）	彩度を指定する。
sepia(彩度)	変換の割合：0～1（１で完全なセピア色）	セピア色を指定する。

（注）割合：数値もしくは % （0.3 と 30% は同じ意味）

記述例

<img src="bear.png" style="filter:blur(5px);">
<img src="bear.png" style="filter:brightness(0.4);">
<img src="bear.png" style="filter:contrast(200%);">
<img src="bear.png" style="filter:drop-shadow(16px 16px 20px blue);">
<img src="bear.png" style="filter:grayscale(50%);">
<img src="bear.png" style="filter:hue-rotate(90deg);">
<img src="bear.png" style="filter:invert(75%);">
<img src="bear.png" style="filter:opacity(25%);">
<img src="bear.png" style="filter:saturate(30%);">
<img src="bear.png" style="filter:sepia(80%);">

（７） タイミング

アニメーションの変化のタイミング・進行割合を指定するために指定します。

９．３　　変化のタイミング も参照してください。

記述例

スタイルシート
@keyframes anime {
  from {width: 0px;}
  80% {width: 500px;}
  to {width: 500px;}
}
div {
  height:20px;
  background: aquamarine;
  animation: anime 5s infinite both;
}

ボディ
<div style="animation-timing-function:linear;">linear</div>
<div style="animation-timing-function:animation-timing-function:cubic-bezier(0.1, 2.3, 0.3, 0.3);">cubic-bezier(0.1, 2.3, 0.3, 0.3)</div>

（８） URL

画像などのファイルへのパスや グラデーションやマスクなどの ID を指定する場合に使用します。

ファイルを指定できる属性としては、背景画像、ボーダー画像、マスク画像、フォントなどがあります。

また、ID を指定できる属性としては、SVG の 線の色、面の色、マーカー、パターン などがあります。

指定するファイルへのパスは、ダブルクォーテーション（ " ）、 または、シングルクォーテーション（ ' ）の引用符で囲みますが、引用符を省略することもできます。

記述例

スタイルシート
img {
  mask-image:url(circle.png);
  mask-repeat:no-repeat;
}

ボディ
<div style="background-image:url(bear3.png);">background-image:url(bear3.png);</div>
<div style="border:solid 20px;border-image:url(flower.png) 20 / 20px space;">border-image:url('flower.png') 20 / 20px space;</div>
<img src="figures/bear.png" style="mask-position:center;">

<svg viewbox="00 0 200 200" width="200" height="200">
  <defs>
    <linearGradient id="g">
      <stop offset="0.2" stop-color="green"/>
      <stop offset="0.8" stop-color="yellow"/>
    </linearGradient>
    <marker id="m" refX="0" refY="35" markerWidth="30" markerHeight="40" markerUnits="userSpaceOnUse">
      <image x="0" y="0" width="30" height="40" xlink:href="flag.png"/>
    </marker>
    <pattern id="p" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"
                  patternContentUnits="userSpaceOnUse" patternTransform="rotate(-45)">
      <circle cx="10" cy="10" r="10" fill="orange"/>
    </pattern>
  </defs>
  <rect x="20" y="0" width="140" height="50" fill="url(#g)"/>
  <ellipse cx="90" cy="90" rx="70" ry="30" fill="url(#p)"/>
  <path d="M10,170Q60,130 70,160T170,120" stroke="brown" stroke-width="10" fill="none"
                              marker-start="url(#m)" marker-mid="url(#m)" marker-end="url(#m)"/>
</svg>

（９） カウンター

カウンターを使用する場合に使用します。

コンテンツ や E::before も参照してください。

記述例

スタイルシート
div.counter {counter-increment:number;}
div.counter::before {content:"(" counter(number) ") ";}

ol {counter-reset: s; list-style-type: none;}
li {counter-increment: s;}
li::before {content: counters(s, ".") " ";}

ボディ
<div class="counter">最初の行</div>
<div class="counter">次の行</div>

<ol>
  <li>item</li>
  <li>group
    <ol>
      <li>item</li>
      <li>group
        <ol>
          <li>item</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>