こんにちは！
今日も頑張ろう

Lesson-4
CSS でデザインを始める前に

L4.1 はじめに

L4.1.1 概要

CSS は、Web ページのスタイル（見栄え）を定義するものであり以下の分類で説明しています。
- レイアウト系プロパティ
- ボーダー系プロパティ
- パディング系プロパティ
- マージン系プロパティ
- カラム（段組み）系プロパティ
- レイアウト系その他のプロパティ
- テキスト系プロパティ
- フォント系プロパティ
- リスト系プロパティ
- カウンタ系プロパティ
- バックグランド系プロパティ
- テーブル系プロパティ
- 飾り系その他のプロパティ
CSS などの勉強するには、以下のオンラインドキュメントも参考にしてください。
- MDN Web Docs CSS: カスケーディングスタイルシート

L4.2 CSS の基本構造

L4.2.1 CSS の構造（）

CSS は、適用範囲や記述内容によって複数の場所に記述することができます。

(1) HTML ファイルとは別に記述する場合

HTML と CSS を別々のファイルに記述します。HTML ファイルは、作成する Web サイトのページ数分作成する必要がありますが、CSS ファイルは、1 個にすることでサイト全体のデザインを共通化します。サイト全体のデザインの変更時も CSS ファイルの修正を行うだけで実施することができます。まずは、この記述方法を基本にしてください。

CSS を HTML ファイルと別ファイルで記述した時は、HTML ファイルの head タグ内（<head>～</head>の間）に以下の記述を行い CSS ファイルの取り込みを行います。

<link href="CSS ファイルのパス名" rel="stylesheet" type="text/css">

(2) HTML ファイル内に記述する場合

HTML ファイル内に style 要素を使用して記述します。特定のページ（HTML ファイル）でしか使われないスタイルを指定する場合に有効です。

HTML ファイル内に CSS を記述する時は、HTML ファイルの head タグ内（</head>の直前が良い）に以下の記述を行います。

(3) HTML タグにインラインで記述する場合

HTML のタグに style 属性を使用して記述します。特定のタグだけに適用するスタイルを指定する場合に有効です。

HTML のタグにインラインで記述する時は、スタイル（style）属性を使用して以下の記述を行います。

注意事項

CSS では基本的に（意識して書く場合を除いて）空白や改行は無視されます。
以下の書き方は同一の解釈となりますが可読性が確保できるような書き方を行うように心がけてください。


p { font-size: 140%; font-weight: bold; color: red; }


p {
	font-size: 140%;
	font-weight: bold;
	color: red;
}

L4.3 セレクターの記載方法

L4.3.1 全称セレクター（*）（）

* { プロパティ: 値; }

アスタリスク（*）を指定すると、すべての要素に適用するスタイルを指定できます。

使用例


* { color: red; }
p * { color: red; }

L4.3.2 要素型セレクター（）

要素名 { プロパティ: 値; }

HTML の要素名（タグ名）を指定すると、その要素名に合致する要素に適用するスタイルを指定できます。

使用例


h1 { font-size: 140%; }
p { color: red; }

L4.3.3 id セレクター（#）（）

#id名 { プロパティ: 値; }

ハッシュ（#）を付けて id 名を指定すると、その id 名に合致する要素に適用するスタイルを指定できます。

使用例


#box1 { font-size: 140%; }
div#box2 { color: red; }

L4.3.4 class セレクター（.）（）

.class名 { プロパティ: 値; }

ピリオド（.）を付けて class 名を指定すると、その class 名に合致する要素に適用するスタイルを指定できます。

使用例


.text1 { font-size: 140%; }
p.text2 { color: red; }

L4.3.5 子孫結合子セレクター（）

セレクター セレクター { プロパティ: 値; }

複数のセレクターをスペースで区切って指定すると、ある要素の配下にある要素にスタイルを指定できます。

使用例（HTML）


<div class="selector1">親
	<div class="c1">　子1
		<p class="g1">　　孫1</p>
		<p class="g2">　　孫2</p>
		<p class="g3">　　孫3</p>
	</div>
	<div class="c2">　子2
		<p class="g1">　　孫1</p>
		<p class="g2">　　孫2</p>
		<p class="g3">　　孫3</p>
	</div>
</div>

使用例（CSS）


.selector1 .g1 {
	color: red;
}

親

　子1

　　孫1

　　孫2

　　孫3

　子2

　　孫1

　　孫2

　　孫3

使用例（CSS）


.selector1 .c2 .g1 {
	color: red;
}

親

　子1

　　孫1

　　孫2

　　孫3

　子2

　　孫1

　　孫2

　　孫3

L4.3.6 子結合子セレクター（>）（）

セレクター > セレクター { プロパティ: 値; }

セレクターを大なり（>）で区切って指定すると、ある要素の直下にある要素にスタイルを指定できます。

使用例（HTML）


<div class="selector2">親
	<div class="c1">　子1
		<div class="g1">　　孫1</div>
		<div class="g2">　　孫2</div>
		<div class="g3">　　孫3</div>
	</div>
</div>

使用例（CSS）


.selector2 div {
	color: black;
}
.selector2 div {
	color: red;
}

親

　子1

　　孫1

　　孫2

　　孫3

使用例（CSS）


.selector2 div {
	color: black;
}
.selector2 > div {
	color: red;
}

親

　子1

　　孫1

　　孫2

　　孫3

L4.3.7 次兄弟結合子セレクター（+）

セレクター + セレクター { プロパティ: 値; }

セレクターをプラス（+）で区切って指定すると、ある要素の次の兄弟要素にスタイルを指定できます。

使用例（HTML）


<div class="selector3">親
	<div class="c1">　子1</div>
	<div class="c2">　子2</div>
	<div class="c3">　子3</div>
	<div class="c4">　子4</div>
	<div class="c5">　子5</div>
</div>

使用例（CSS）


.selector3 .c2 + div {
	color: red;
}

親

　子1

　子2

　子3

　子4

　子5

L4.3.8 後続兄弟結合子セレクター（~）

セレクター ~ セレクター { プロパティ: 値; }

セレクターをチルダ（~）で区切って指定すると、ある要素に後続している兄弟要素にスタイルを指定できます。

使用例（HTML）


<div class="selector4">親
	<div class="c1">　子1</div>
	<div class="c2">　子2</div>
	<div class="c3">　子3</div>
	<div class="c4">　子4</div>
	<div class="c5">　子5</div>
</div>

使用例（CSS）


.selector4 .c2 ~ div {
	color: red;
}

親

　子1

　子2

　子3

　子4

　子5

L4.3.9 属性セレクター

セレクター[属性] { プロパティ: 値; }
セレクター[属性=値] { プロパティ: 値; }
セレクター[属性~=値] { プロパティ: 値; }
セレクター[属性|=値] { プロパティ: 値; }
セレクター[属性^=値] { プロパティ: 値; }
セレクター[属性$=値] { プロパティ: 値; }
セレクター[属性*=値] { プロパティ: 値; }

セレクターに続けてブラケット（[ ]）を使用して属性や値を指定すると条件に合致する要素にスタイルを指定できます。

属性および値の記述方法により対象となる要素を指定できます。また、値の後ろに「 i」を付与することで値の大文字と小文字を区別でずに比較することができます。

属性: 指定された属性を持つ要素が対象になります。
属性=値: 指定された属性および値を持つ要素が対象になります。
属性~=値: 指定された属性で値が空白区切りのリストでありリストの中に値と一致する要素が対象になります。
属性|=値: 指定された属性および値を持つ要素か値の直後にハイフン（-）が続く要素が対象になります。言語のサブコードの一致などで使用されます。
属性^=値: 指定された属性で値で始まる要素が対象になります。
属性$=値: 指定された属性で値で終わる要素が対象になります。
属性*=値: 指定された属性で値を含む要素が対象になります。

使用例（CSS）


a[title] {							/* a 要素で title 属性を持つもの */
	color: blue;
}
a[href="https://example.org"] {		/* a 要素で href 属性の値が "https://example.org" と一致するもの */
	color: green;
}
a[class~="logo"] {					/* a 要素で class 属性の値に "logo" という語が含まれているもの */
	padding: 2px;
}
a[href*="example"] {				/* a 要素で href 属性の値に "example" を含むもの */
	font-size: 2em;
}
a[href$=".org" i] {					/* a 要素で href 属性の値が ".org" で終わるもので大文字小文字を区別しない */
	font-style: italic;
}
a[href^="https://"][href$=".org"] {	/* a 要素で href 属性の値が "https://" で始まり ".org" で終わるもの */
	color: green;
}
a[href*="case" i] {					/* a 要素で href 属性の値に "case" を含むもので大文字小文字は区別しない */
	color: red;
}

L4.3.10 セレクターの列挙（）

セレクター, セレクター { プロパティ: 値; }

セレクターをカンマ（,）で区切って指定すると、列挙したセレクターが示す要素に同一のスタイルを指定できます。

以下の指定方法は同一の意味になります。

使用例（CSS）


div.section1 p.text1 {
	color: white;
	background: blue;
}
div.section2 p.text2 {
	color: white;
	background: blue;
}

/* 同一のスタイルの場合は、以下の記述でも同じ意味になります */
div.section1 p.text1, div.section2 p.text2 {
	color: white;
	background: blue;
}

L4.3.11 入れ子セレクター（&）


セレクター {
	/* 親ルールのスタイルプロパティ */
	プロパティ: 値;
	& セレクター {
		/* 子ルールのスタイルプロパティ */
		プロパティ: 値;
	}
}

親ルールと子ルールを使って入れ子形式でスタイルを定義することができます。この時にアンパサンド（&）を使用することで親ルールのセレクターを指定の位置に展開することができます。

アンパサンド（&）を省略して子ルールを記述すると子ルールのセレクターの前に親ルールのセレクターと空白が挿入されるので子孫結合子セレクターと同等の扱いになります。空白の挿入をしたくない場合は、明示的にアンパサンド（&）を使って親ルールのセレクターの展開位置を指定する必要があります。

この記述方法は、親子関係になった要素のスタイル定義を行うという意味ではありません。アンパサンド（&）の記述場所によって子ルールが示す要素の場所が決定されます。

使用例（HTML）


<div class="selector5">親
	<div class="c1">　子1</div>
	<div class="c2">　子2</div>
	<div class="c3">　子3</div>
</div>

使用例（CSS）


.selector5 {
	background: skyblue;
	div.c1 {
		color: red;
		&:hover {
			background: pink;
		}
	}
	div.c2 {
		color: yellow;
		&:hover {
			background: orange;
		}
	}
	div.c3 {
		color: green;
		&:hover {
			background: lime;
		}
	}
}

/* 上記の記述方法は、以下の記述方法と同一の意味になります */
.selector5 {
	background: skyblue;
}
.selector5 div.c1 {
	color: red;
}
.selector5 div.c1:hover {
	background: pink;
}
.selector5 div.c2 {
	color: yellow;
}
.selector5 div.c2:hover {
	background: orange;
}
.selector5 div.c3 {
	color: green;
}
.selector5 div.c3:hover {
	background: lime;
}

親

　子1

　子2

　子3

L4.4 幅・高さ・角度の単位

L4.4.1 px（ピクセル値）（）

ピクセル値で指定します。

使用例


<p style="width: 300px; font-size: 30px; background: pink; line-height: 1;">サンプル（30px）</p>

サンプル（30px）

L4.4.2 %（要素の割合（百分率））（）

親要素のサイズに対する割合を百分率（%）で指定します。

使用例


<div style="font-size: 16px; background: skyblue; line-height: 1;">親サンプル（16px）
	<p style="width: 30%; font-size: 200%; background: pink; line-height: 1;">子サンプル（32px）</p>
</div>

親サンプル（16px）

子サンプル（32px）

L4.4.3 em（要素の割合）（）

親要素のフォントサイズに対する割合（1em = 100%）を指定します。em は、フォントサイズの単位として使用されます。

使用例


<div style="font-size: 20px; background: skyblue; line-height: 1;">親サンプル（20px）
	<p style="font-size: 2em; background: pink; line-height: 1;">子サンプル（40px）</p>
</div>

親サンプル（20px）

子サンプル（40px）

L4.4.4 rem（ルート要素の割合）（）

ルート（html タグ）のフォントサイズに対する割合を指定します。rem は、フォントサイズの単位として使用されます。ルートのフォントサイズの初期値は、16px に設定されています。

使用例


<div style="font-size: 20px; background: skyblue; line-height: 1;">親サンプル（20px）
	<p style="font-size: 2rem; background: pink; line-height: 1;">子サンプル（32px）</p>
</div>

親サンプル（20px）

子サンプル（32px）

L4.4.5 vw/svw/lvw/dvw（画面の幅の割合）

画面の幅に対するサイズを指定する時は、vw（Viewport Width）を使用します。100vw は、画面幅（スクロールバーを含む）と同じ大きさの領域が定義できます。

スマホなどのブラウザによっては表示領域のサイズが変動するものがあります。この状態によって変動するサイズを取得する場合は、svw/lvw/dvw を使用します。svw（Small Viewport Width）は最小サイズになり、lvw（Large Viewport Width）は最大サイズになり、dvw（Dynamic Viewport Width）は状態によってサイズが変動します。vw は、デフォルトのサイズであり svw ～ lvw の範囲になると定義されていますが、現時点では、横幅が変動する要素がないため、どの単位を使用しても同じ値が取得されるようです。

使用例


<p style="font-size: 3vw; background: pink; line-height: 1;">サンプル</p>

サンプル

L4.4.6 vh/svh/lvh/dvh（画面の高さの割合）

画面の高さに対するサイズを指定する時は、vh（Viewport Height）を使用します。100vh は、画面の高さ（スクロールバーを含む）と同じ大きさの領域が定義できます。

スマホなどのブラウザによっては表示領域のサイズが変動するものがあります。例えば、スマホの場合は、操作状況によりアドレス部分が表示されている状態と非表示の状態があります。この状態によって変動するサイズを取得する場合は、svh/lvh/dvh を使用します。svh（Small Viewport Height）は最小サイズになり、lvh（Large Viewport Height）は最大サイズになり、dvh（Dynamic Viewport Height）は状態によってサイズが変動します。vh は、デフォルトのサイズであり svh ～ lvh の範囲になると定義されていますが一般的には、100vh = 100lvh になることが多いようです。

使用例


<p style="font-size: 3vh; background: pink; line-height: 1;">サンプル</p>

サンプル

L4.4.7 svmax/lvmax/dvmax/vmax（画面の幅と高さを比較して大きい方の単位）

画面の幅と高さを比較して大きい方を基準にして指定する時は、svmax/lvmax/dvmax/vmax を使用します。各単位の意味は、以下の通りです。

svmax: svh と svw のうち、大きい方が採用されます。
lvmax: lvh と lvw のうち、大きい方が採用されます。
dvmax: dvh と dvw のうち、大きい方が採用されます。
vmax: vh と vw のうち、大きい方が採用されます。

L4.4.8 svmin/lvmin/dvmin/vmin（画面の幅と高さを比較して小さい方の単位）

画面の幅と高さを比較して小さい方を基準にして指定する時は、svmin/lvmin/dvmin/vmin を使用します。各単位の意味は、以下の通りです。

svmin: svh と svw のうち、小さい方が採用されます。
lvmin: lvh と lvw のうち、小さい方が採用されます。
dvmin: dvh と dvw のうち、小さい方が採用されます。
vmin: vh と vw のうち、小さい方が採用されます。

L4.4.9 deg（度数法 (度)の角度）

角度を度数法（度）で指定します。円一周は 360deg です。上が 0deg で、正の値を指定すると時計回りの角度を示し、負の値を指定すると反時計回りの角度を示します。

使用例


<p style="width: 80px; text-align: center; background: pink; transform: rotate(30deg);">サンプル</p>

サンプル

L4.4.10 turn（回転数の角度）

角度を回転数で指定します。円一周は 1turn です。上が 0turn で、正の値を指定すると時計回りの角度を示し、負の値を指定すると反時計回りの角度を示します。

使用例


<p style="width: 80px; text-align: center; background: pink; transform: rotate(-0.07turn);">サンプル</p>

サンプル

L4.4.11 calc 関数（値の計算）（）

値を四則演算で計算します。

使用例


<div style=" background: skyblue; line-height: 1;">親領域
	<p style="width: calc(100% - 40px); margin: 0 auto; background: pink; line-height: 1;">子領域</p>
</div>

親領域

子領域（両端に 20px のマージンを確保）

L4.5 色の指定方法

L4.5.1 色とグラデーション

色およびグラデーションの指定方法は、以下の各種類があります。

カラーネーム
#rgb（ハッシュ（#）で始まる 16 進数 3 桁）
#rrggbb（ハッシュ（#）で始まる 16 進数 6 桁）
#rrggbbaa（ハッシュ（#）で始まる 16 進数 8 桁）
rgb(r,g,b)（rgb 関数）
rgba(r,g,b,a)（rgba 関数）
hsl(h,s,l)（hsl関数）
hsla(h,s,l,a)（hsla関数）
線形グラデーション（linear-gradient 関数）
放射グラデーション（radial-gradient 関数）
円錐グラデーション（conic-gradient 関数）
反復線形グラデーション（repeating-linear-gradient 関数）
反復放射グラデーション（repeating-radial-gradient 関数）
反復円錐グラデーション（repeating-conic-gradient 関数）

カラーネームや色見本については「Appendix-1 色見本（カラーネーム、カラーコード）」を参照してください。
グラデーション関数で生成されたデータは、画像形式の特殊型になりますので、画像形式が指定可能な場所で使用できます。

L4.5.2 カラーネーム（）

カラーネーム指定は、black、red、lime、blue などのカラーネームで指定します。

カラーネーム指定の使用例を以下に示します。

black（■）
red（■）
lime（■）
blue（■）

L4.5.3 #rgb（ハッシュ（#）で始まる 16 進数 3 桁）（）

#rgb 指定は、r が赤、g が緑、b が青を示します。それぞれの色の強さは 16 進数（0～f）で指定します。0 は無発色で、f は最大発色になります。

#rgb 指定の使用例を以下に示します。

#000（■）
#f00（■）
#0f0（■）
#00f（■）

L4.5.4 #rrggbb（ハッシュ（#）で始まる 16 進数 6 桁）（）

#rrggbb 指定は、rr が赤、gg が緑、bb が青を示します。それぞれの色の強さを2桁の 16 進数で指定します。00 は無発色で、ff は最大発色になります。

#rrggbb 指定の使用例を以下に示します。

#000000（■）
#ff0000（■）
#00ff00（■）
#0000ff（■）

L4.5.5 #rrggbbaa（ハッシュ（#）で始まる 16 進数 8 桁）（）

#rrggbbaa 指定は、rr が赤、gg が緑、bb が青、aa が透明度を示します。それぞれの色の強さを 2 桁の 16 進数で指定します。00 は無発色で、ff は最大発色になります。透明度は、00 は完全に透明、ff は完全に不透明になります。

#rrggbbaa 指定の使用例を以下に示します。

#00000080（■）
#ff000080（■）
#00ff0080（■）
#0000ff80（■）

L4.5.6 rgb(r,g,b)（rgb 関数）

rgb(r,g,b) 指定は、r が赤、g が緑、b が青を示します。それぞれの色の強さを 10 進数（0～255）または百分率（0%～100%）で指定します。0（0%）は無発色で、255(100%)は最大発色になります。

rgb(r,g,b) 指定の使用例を以下に示します。

rgb(0,0,0)（■）
rgb(255,0,0)（■）
rgb(0,255,0)（■）
rgb(0,0,255)（■）

L4.5.7 rgba(r,g,b,a)（rgba 関数）

rgba(r,g,b,a) 指定は、r が赤、g が緑、b が青、a が透明度を示します。それぞれの色の強さを 10 進数（0～255）または百分率（0%～100%）で指定します。0（0%）は無発色で、255（100%）は最大発色になります。透明度は、0（0%）は完全に透明、1（100%）は完全に不透明になります。

rgba(r,g,b,a) 指定の使用例を以下に示します。

rgba(0,0,0,0.5)（■）
rgba(255,0,0,0.5)（■）
rgba(0,255,0,0.5)（■）
rgba(0,0,255,0.5)（■）

L4.5.8 hsl(h,s,l)（hsl 関数）

hsl(h,s,l) 指定は、h が色相（Hue）、s が彩度（Saturation）、l が輝度（Lightness）を示します。

色相（Hue）: 0 ～ 360°の角度で色相を指定します。
彩度（Saturation）: 0 ～ 100% の割合で彩度を指定します。0% は灰色、100% は純色になります。
輝度（Lightness）: 0 ～ 100% の割合で輝度を指定します。0% は黒、50% は純色、100% は白になります。

hsl(h,s,l) 指定の使用例を以下に示します。

hsl(0,100%,0%)（■）
hsl(0,100%,50%)（■）
hsl(120,100%,50%)（■）
hsl(240,100%,50%)（■）

L4.5.9 hsla(h,s,l,a)（hsla 関数）

hsla(h,s,l,a) 指定は、h が色相（Hue）、s が彩度（Saturation）、l が輝度（Lightness）、a が透明度（Alpha）を示します。

色相（Hue）: 0 ～ 360°の角度で色相を指定します。
彩度（Saturation）: 0 ～ 100% の割合で彩度を指定します。0% は灰色、100% は純色になります。
輝度（Lightness）: 0 ～ 100% の割合で輝度を指定します。0% は黒、50% は純色、100% は白になります。
透明度（Alpha）: 0（0%）～ 1（100%）で透明度を指定します。0（0%）は完全透明、1（100%）は完全不透明になります。

hsla(h,s,l,a) 指定の使用例を以下に示します。

hsla(0,100%,0%,0.5)（■）
hsla(0,100%,50%,0.5)（■）
hsla(120,100%,50%,0.5)（■）
hsla(240,100%,50%,0.5)（■）

L4.5.10 線形グラデーション（linear-gradient 関数）

線形グラデーションの作成には、linear-gradient 関数を使用します。linear-gradient 関数は、以下のグラデーション情報をカンマ（,）で区切って複数指定することができます。

方向: グラデーションの方向を指定します。初期状態では、上から下に向けて変化します。to top/to bottom/to left/to right を指定すると指定した方向への変化を行います。方向を組み合わせて指定することで対角方向を指定できます。例えば、右下方向へ変化を行わせるためには to bottom right と指定します。また、角度で指定することもでき 0deg は下から上へ、90deg は左から右へと時計回りに回転します。負の角度を指定すると反時計回りに回転します。
色: グラデーションを作成する色値を複数指定します。単に複数の色値だけを指定した場合は、指定された色値数が均等幅で割り当てられ色を変化させます。色値の後ろにスペースを空けて位置を指定することで色値が占有する幅を指定することができます。また、色値の後ろにスペースを空けて位置を2つ指定することで彩度を保持する幅を指定することができます。位置は、ピクセル数（px）や比率（%）で指定することができます。色値は、透明度のある色値にも対応していますので複数のグラデーションを重ねたり、画像の上にグラデーションを重ねたりすることもできます。

線形グラデーションの使用例を以下に示します。

background: linear-gradient(red,lime,blue);
background: linear-gradient(to right,red,lime,blue);
background: linear-gradient(to bottom right,red,lime,blue);
background: linear-gradient(20deg,red,lime,blue);
background: linear-gradient(red 20%,lime 50%,blue 80%);
background: linear-gradient(red 0% 33%,lime 33% 67%,blue 67% 100%);
background: linear-gradient(180deg,#ff0000c0,#ff000000 70%),
linear-gradient(300deg,#00ff00c0,#00ff0000 70%),
linear-gradient(60deg,#0000ffc0,#0000ff00 70%);
background: linear-gradient(#ff000080,#00ff0080,#0000ff80),
url(images/hamaya.png);
background-size: cover;

L4.5.11 放射グラデーション（radial-gradient 関数）

放射グラデーションの作成には、rasial-gradient 関数を使用します。radial-gradient 関数は、以下のグラデーション情報をカンマ（,）で区切って複数指定することができます。

大きさ

グラデーションの大きさを指定します。グラデーションを円形にする時は「circle 大きさ」で指定し、楕円形にする時は「ellipse 大きさ」で指定します。大きさは、以下の値を指定します。closest-side を指定すると中心位置からボックスを囲む最近接の辺までの大きさになります。

closest-side: 中心位置から最も近い辺までの大きさになります。
farthest-side: 中心位置から最も遠い辺までの大きさになります。
closest-corner: 中心位置から最も近い角までの大きさになります。
farthest-corner: 中心位置から最も遠い角までの大きさになります。（初期値）
値: （ピクセル数（px）や比率（%））で円の大きさを指定します。

中心

グラデーションの中心位置を指定します。中心位置の初期状態は、縦 50%、横 50% の位置になります。中心位置は「at 横位置縦位置」で指定します。位置は、ピクセル数（px）や比率（%）で指定することができます。

色

グラデーションを作成する色値を複数指定します。単に複数の色値だけを指定した場合は、指定された色値数が均等幅で割り当てられ色を変化させます。色値の後ろにスペースを空けて位置を指定することで色値が占有する幅を指定することができます。また、色値の後ろにスペースを空けて位置を2つ指定することで彩度を保持する幅を指定することができます。位置は、ピクセル数（px）や比率（%）で指定することができます。色値は、透明度のある色値にも対応していますので複数のグラデーションを重ねたり、画像の上にグラデーションを重ねたりすることもできます。

放射グラデーションの使用例を以下に示します。

background: radial-gradient(red,lime,blue);
background: radial-gradient(at 0% 100%,red,lime,blue);
background: radial-gradient(circle closest-side,red,lime,blue);
background: radial-gradient(circle farthest-side,red,lime,blue);
background: radial-gradient(circle closest-corner,red,lime,blue);
background: radial-gradient(circle farthest-corner,red,lime,blue);
background: radial-gradient(circle 20px,red,lime,blue);
background: radial-gradient(red 0% 33%,lime 33% 67%,blue 67% 100%));

L4.5.12 円錐グラデーション（conic-gradient 関数）

円錐グラデーションの作成には、conic-gradient 関数を使用します。conic-gradient 関数は、以下のグラデーション情報をカンマ（,）で区切って複数指定することができます。

角度: グラデーションの確度を指定します。グラデーションの角度を指定する時は、時計回りの角度を「from 角度」で指定します。
中心: グラデーションの中心位置を指定します。中心位置の初期状態は、縦 50%、横 50% の位置になります。中心位置は「at 横位置縦位置」で指定します。位置は、ピクセル数（px）や比率（%）で指定することができます。
色: グラデーションを作成する色値を複数指定します。単に複数の色値だけを指定した場合は、指定された色値数が均等幅で割り当てられ色を変化させます。色値の後ろにスペースを空けて角度を指定することで色値が占有する角度を指定することができます。また、色値の後ろにスペースを空けて角度を2つ指定することで彩度を保持する角度を指定することができます。最初の色と最後の色が接して違和感がある場合は、最後の色に最初の色と同じ色を指定することで回避できます。色値は、透明度のある色値にも対応していますので複数のグラデーションを重ねたり、画像の上にグラデーションを重ねたりすることもできます。

円錐グラデーションの使用例を以下に示します。

background: conic-gradient(red,lime,blue);
background: conic-gradient(from 90deg,red,lime,blue);
background: conic-gradient(at 50px 30px,red,lime,blue);
background: conic-gradient(red,lime,blue,red);
background: conic-gradient(white,black);
background: conic-gradient(white,black,white);
background: conic-gradient(red 0deg 90deg,lime 90deg 180deg,blue 180deg 360deg); border-radius: 50%;
background: conic-gradient(red 0deg 90deg,white 90deg 180deg,red 180deg 270deg,white 270deg 360deg)
top left / 20px 20px repeat;

L4.5.13 反復線形グラデーション（repeating-linear-gradient 関数）

反復線形グラデーションの作成には、repeating-linear-gradient 関数を使用します。repeating-linear-gradient 関数は、以下のグラデーション情報をカンマ（,）で区切って複数指定することができます。反復は、最初の色から最後の色までの幅で繰り返しますので色指定で領域全体を指定してしまうと繰り返しは行われません。最初の色と最後の色が接して違和感がある場合は、最後の色に最初の色と同じ色を指定することで回避できます。

方向: グラデーションの方向を指定します。初期状態では、上から下に向けて変化します。to top/to bottom/to left/to right を指定すると指定した方向への変化を行います。方向を組み合わせて指定することで対角方向を指定できます。例えば、右下方向へ変化を行わせるためには to bottom right と指定します。また、角度で指定することもでき 0deg は下から上へ、90deg は左から右へと時計回りに回転します。負の角度を指定すると反時計回りに回転します。
色: グラデーションを作成する色値を複数指定します。単に複数の色値だけを指定した場合は、指定された色値数が均等幅で割り当てられ色を変化させます。色値の後ろにスペースを空けて位置を指定することで色値が占有する幅を指定することができます。また、色値の後ろにスペースを空けて位置を2つ指定することで彩度を保持する幅を指定することができます。位置は、ピクセル数（px）や比率（%）で指定することができます。色値は、透明度のある色値にも対応していますので複数のグラデーションを重ねたり、画像の上にグラデーションを重ねたりすることもできます。

反復線形グラデーションの使用例を以下に示します。

background: repeating-linear-gradient(red,lime,blue);
background: repeating-linear-gradient(red 0px,lime 10px,blue 20px);
background: repeating-linear-gradient(red 0px,lime 10px,blue 20px,red 30px);
background: repeating-linear-gradient(90deg,red 0px,lime 10px,blue 20px,red 30px);
background: repeating-linear-gradient(45deg,red 0px,lime 10px,blue 20px,red 30px);
background: repeating-linear-gradient(red 0px 10px,lime 10px 20px,blue 20px 30px);
background: repeating-linear-gradient(90deg,red 0px 10px,lime 10px 20px,blue 20px 30px);
background: repeating-linear-gradient(45deg,red 0px 10px,lime 10px 20px,blue 20px 30px);
background: repeating-linear-gradient(transparent 0px,red 10px),
repeating-linear-gradient(90deg,transparent 0px,red 10px);
background: repeating-linear-gradient(transparent 0px 5px,red 5px 10px),
repeating-linear-gradient(90deg,transparent 0px 5px,red 5px 10px);

L4.5.14 反復放射グラデーション（repeating-radial-gradient 関数）

反復放射グラデーションの作成には、repeating-rasial-gradient 関数を使用します。repeating-radial-gradient 関数は、以下のグラデーション情報をカンマ（,）で区切って複数指定することができます。反復は、最初の色から最後の色までの幅で繰り返しますので色指定で領域全体を指定してしまうと繰り返しは行われません。最初の色と最後の色が接して違和感がある場合は、最後の色に最初の色と同じ色を指定することで回避できます。

大きさ

closest-side: 中心位置から最も近い辺までの大きさになります。
farthest-side: 中心位置から最も遠い辺までの大きさになります。
closest-corner: 中心位置から最も近い角までの大きさになります。
farthest-corner: 中心位置から最も遠い角までの大きさになります。（初期値）
値: （ピクセル数（px）や比率（%））で円の大きさを指定します。

中心

色

反復放射グラデーションの使用例を以下に示します。

background: repeating-radial-gradient(red,lime,blue);
background: repeating-radial-gradient(red 0px,lime 10px,blue 20px);
background: repeating-radial-gradient(red 0px,lime 10px,blue 20px,red 30px);
background: repeating-radial-gradient(at 0% 100%,red 0px,lime 10px,blue 20px,red 30px);
background: repeating-radial-gradient(red 0px 10px,lime 10px 20px,blue 20px 30px);
background: repeating-radial-gradient(at 0% 100%,red 0px 10px,lime 10px 20px,blue 20px 30px);

L4.5.15 反復円錐グラデーション（repeating-conic-gradient 関数）

反復円錐グラデーションの作成には、repeating-conic-gradient 関数を使用します。repeating-conic-gradient 関数は、以下のグラデーション情報をカンマ（,）で区切って複数指定することができます。反復は、最初の色から最後の色までの幅で繰り返しますので色指定で領域全体を指定してしまうと繰り返しは行われません。最初の色と最後の色が接して違和感がある場合は、最後の色に最初の色と同じ色を指定することで回避できます。

角度: グラデーションの確度を指定します。グラデーションの角度を指定する時は、時計回りの角度を「from 角度」で指定します。
中心: グラデーションの中心位置を指定します。中心位置の初期状態は、縦 50%、横 50% の位置になります。中心位置は「at 横位置縦位置」で指定します。位置は、ピクセル数（px）や比率（%）で指定することができます。
色: グラデーションを作成する色値を複数指定します。単に複数の色値だけを指定した場合は、指定された色値数が均等幅で割り当てられ色を変化させます。色値の後ろにスペースを空けて角度を指定することで色値が占有する角度を指定することができます。また、色値の後ろにスペースを空けて角度を2つ指定することで彩度を保持する角度を指定することができます。最初の色と最後の色が接して違和感がある場合は、最後の色に最初の色と同じ色を指定することで回避できます。色値は、透明度のある色値にも対応していますので複数のグラデーションを重ねたり、画像の上にグラデーションを重ねたりすることもできます。

反復円錐グラデーションの使用例を以下に示します。

background: repeating-conic-gradient(red,lime,blue,red);
background: repeating-conic-gradient(red 0deg,lime 10deg,blue 20deg);
background: repeating-conic-gradient(red 0deg,lime 10deg,blue 20deg,red 30deg);
background: repeating-conic-gradient(red 0deg 10deg,lime 10deg 20deg,blue 20deg 30deg);
background: repeating-conic-gradient(red 0deg 10deg,white 10deg 20deg);
background: repeating-conic-gradient(at 50px 30px,orange 0deg 10deg,white 10deg 20deg);

L4.6 リセット CSS

L4.6.1 リセット CSS とは（）

ブラウザは初期状態でタグ単位のデフォルトのスタイルシートを持っています。このデフォルトのスタイルシートの内容はブラウザによって異なるためブラウザ環境を変更すると意図しない表示になることがあります。このような現象を防ぐために使用するのがリセット CSS です。

リセット CSS は、ブラウザが持っているスタイルシートをリセット（クリア）するためのスタイルシートですがリセットする範囲はコーディングスタイルに依存するため、これが正解というリセット CSS は存在しません。

以下にリセット CSS のサンプルを示しますのでコーディングスタイルに合わせて適時変更してください。

CSS


@charset "utf-8";

/* Reset CSS */
*,*::before,*::after {
	box-sizing: border-box;
}
body,h1,h2,h3,h4,h5,h6,article,section,header,footer,nav,aside,p,hr,ul,ol,li,dl,dt,dd,div,
main,em,strong,small,i,b,span,table,caption,tr,th,td,pre,label,input,textarea,select,button {
	padding: 0;
	margin: 0;
	font-weight: normal;
	line-height: 1.6;
	word-wrap: break-word;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #333;
}
address,em,i {
	font-style: normal;
}
strong,th,b {
	font-weight: normal;
}
img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
a {
	color: inherit;
	text-decoration: none;
}
a:hover {
	opacity: 0.6;
}

L4.7 セレクターの得点

L4.7.1 セレクター得点表（）

セレクターには優先順位があり点数計算をして高得点のものが採用されます。同じ得点の場合は後ろに書いてあるものが採用されます。点数計算の結果によっては前に書いてあるセレクターが採用されてしまうことがありますので意図したスタイルにならない時は点数を確認してください。

セレクターの種類と点数
セレクターの種類	記述例	点数
全般セレクター	すべての要素に適用	0点
要素名	h1 p div span table など	1点
疑似要素	::before ::after など	1点
疑似クラス	:hover :nth-child(1) など	10点
class	.main-text .box など	10点
id	#title #sub など	100点
style属性	<div style="font-size:140%;">	1000点
!important	font-size: 140%!important;	最優先

セレクターの計算例
セレクターの例	計算	合計点
div#main p	1（要素）+100（id）+1（要素）	102点
#main p.main-text	100（id）+1（要素）+10（class）	111点
div#main p.main-text	1（要素）+100（id）+1（要素）+10（class）	112点
div#main main p.main-text	1（要素）+100（id）+1（要素）+1（要素）+10（class）	113点
table tr td.text	1（要素）+1（要素）+1（要素）+10（class）	13点
h1 div span	1（要素）+1（要素）+1（要素）	3点

L4.8 Chrome 検証ツール

L4.8.1 検証ツールの起動と設定（）

ブラウザに表示されるWebページの設定情報を参照したり、想定通りに表示されない場合の調査には、Chrome の検証ツールの使用が有効です。また、スマートフォンやタブレットでの表示型式を確認することもできます。

L4.8.2 検証ツールの画面（）

L4.9.3 スマホの確認画面（）

PAGE
TOP

Lesson-4 CSS でデザインを始める前に

目次

L4.1 はじめに

L4.1.1 概要

L4.2 CSS の基本構造

L4.2.1 CSS の構造（）

(1) HTML ファイルとは別に記述する場合

(2) HTML ファイル内に記述する場合

(3) HTML タグにインラインで記述する場合

注意事項

L4.3 セレクターの記載方法

L4.3.1 全称セレクター（*）（）

L4.3.2 要素型セレクター（）

L4.3.3 id セレクター（#）（）

L4.3.4 class セレクター（.）（）

L4.3.5 子孫結合子セレクター（）

L4.3.6 子結合子セレクター（>）（）

L4.3.7 次兄弟結合子セレクター（+）

L4.3.8 後続兄弟結合子セレクター（~）

L4.3.9 属性セレクター

L4.3.10 セレクターの列挙（）

L4.3.11 入れ子セレクター（&）

L4.4 幅・高さ・角度の単位

L4.4.1 px（ピクセル値）（）

L4.4.2 %（要素の割合（百分率））（）

L4.4.3 em（要素の割合）（）

L4.4.4 rem（ルート要素の割合）（）

L4.4.5 vw/svw/lvw/dvw（画面の幅の割合）

L4.4.6 vh/svh/lvh/dvh（画面の高さの割合）

L4.4.7 svmax/lvmax/dvmax/vmax（画面の幅と高さを比較して大きい方の単位）

L4.4.8 svmin/lvmin/dvmin/vmin（画面の幅と高さを比較して小さい方の単位）

L4.4.9 deg（度数法 (度)の角度）

L4.4.10 turn（回転数の角度）

L4.4.11 calc 関数（値の計算）（）

L4.5 色の指定方法

L4.5.1 色とグラデーション

L4.5.2 カラーネーム（）

L4.5.3 #rgb（ハッシュ（#）で始まる 16 進数 3 桁）（）

L4.5.4 #rrggbb（ハッシュ（#）で始まる 16 進数 6 桁）（）

L4.5.5 #rrggbbaa（ハッシュ（#）で始まる 16 進数 8 桁）（）

L4.5.6 rgb(r,g,b)（rgb 関数）

L4.5.7 rgba(r,g,b,a)（rgba 関数）

L4.5.8 hsl(h,s,l)（hsl 関数）

L4.5.9 hsla(h,s,l,a)（hsla 関数）

L4.5.10 線形グラデーション（linear-gradient 関数）

L4.5.11 放射グラデーション（radial-gradient 関数）

L4.5.12 円錐グラデーション（conic-gradient 関数）

L4.5.13 反復線形グラデーション（repeating-linear-gradient 関数）

L4.5.14 反復放射グラデーション（repeating-radial-gradient 関数）

L4.5.15 反復円錐グラデーション（repeating-conic-gradient 関数）

L4.6 リセット CSS

L4.6.1 リセット CSS とは（）

L4.7 セレクターの得点

L4.7.1 セレクター得点表（）

L4.8 Chrome 検証ツール

L4.8.1 検証ツールの起動と設定（）

L4.8.2 検証ツールの画面（）

L4.9.3 スマホの確認画面（）

Lesson-4
CSS でデザインを始める前に