HTML-CSS 入門講座

HTML-CSS 入門講座

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

目次

L3.1 はじめに

L3.1.1 概要

  • CSS は、Web ページのスタイル(見栄え)を定義するものであり以下の分類となります。
    • レイアウト系プロパティ
    • ボーダー系プロパティ
    • パディング系プロパティ
    • マージン系プロパティ
    • レイアウト関連その他のプロパティ
    • テキスト系プロパティ
    • フォント系プロパティ
    • リスト系プロパティ
    • バックグランド系プロパティ
    • テーブル系プロパティ

L3.2 CSS の基本構造

L3.2.1 CSSの構造(HTML ファイルとは別に記述する場合)

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

<link href="CSS ファイルのパス名" rel="stylesheet" type="text/css">
CSS の構造(別ファイルで記述する場合)

L3.2.2 CSS の構造(HTML ファイル内に記述する場合)

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

CSS の構造(HTML 内に記述する場合)

L3.2.3 CSSの構造(HTML タグにインラインで記述する場合)

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

CSS の構造(HTML にインラインで記述する場合)

L3.2.4 注意事項

(1) 可読性について

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


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

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

L3.3 ボックスモデル

L3.3.1 ボックスモデルの構造

Web ページのレイアウトを作るためには領域定義が必要です。領域の定義にはボックスモデルが適用されコンテンツ(content)、パディング(padding)、ボーダー(border)、マージン(margin)を組み合わせて領域が定義されます。

ボックスモデルの構造

(1) content

要素の内容であるコンテンツ(文字・図・写真など)の領域で領域のサイズは width プロパティ(幅)と height プロパティ(高さ)で指定します。

(2) padding

要素の内側の余白で padding プロパティで指定します。

(3) border

要素の枠線で border プロパティで指定できます。

(4) margin

要素の外側の余白で margin プロパティで指定します。

(5) 注意事項

  • padding、border、margin は上下左右を独立して指定することもでき、それぞれのプロパティに上(-top)、下(-bottom)、右(-right)、左(-left)」を付与します。
  • ボックスのサイズは、「ボックスサイズ = content + padding + border + margin」で計算できます。
  • width プロパティ、height プロパティの指定値は、box-sizing プロパティの指定値により意味が異なります。
    box-sizing: content-box;(初期値)
    width プロパティ・height プロパティの指定値 = content 領域の値
    box-sizing: border-box;
    width プロパティ・height プロパティの指定値 = content + padding + border 領域の合計値

L3.3.2 ボックスモデルの表示ルール

ボックスモデルの表示ルールはタグの種類によって異なりますが display プロパティを使用することで変更可能です。

インライン
(display: inline;)
インラインブロック
(display: inline-block;)
ブロック
(display: block;)
主な用途文章内文章内・横並びレイアウト・サイズ調整
主なタグa,strong,spanなど
(テキスト分類)
imgなど
(コンテンツ埋め込み)
h1,p,ul,li,divなど
(セクション分類)
(コンテンツ分類)
並び方
初期サイズ内容サイズ内容サイズ横は100%、縦は内容
widthとheight指定可能指定可能
padding上下左右 *1上下左右上下左右
margin左右のみ上下左右上下左右
line-height外側にかかる内側にかかる内側にかかる
text-align指定可能指定可能
vertical-align指定可能指定可能

*1 余白はとってくれますが上下の要素の位置には影響しません。

L3.4 セレクタの記載方法

3.4.1 全称セレクタ(*)

* { プロパティ: 値; }

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

使用例


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

L3.4.2 型セレクタ

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

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

使用例


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

L3.4.3 id セレクタ(#)

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

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

使用例


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

L3.4.4 class セレクタ(.)

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

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

使用例


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

L3.4.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

L3.4.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

L3.4.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

L3.4.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

L3.5 幅・高さの単位

L3.5.1 px(ピクセル値)

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

使用例


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

サンプル

L3.5.2 %(要素の割合(百分率))

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

使用例


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

子サンプル

L3.5.3 em(要素の割合)

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

使用例


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

子サンプル

L3.5.4 rem(ルート要素の割合)

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

使用例


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

子サンプル

L3.5.5 vw(画面の表示幅の割合)

画面の表示幅に対する割合(10vw = 画面幅の10%)を指定します。「width: 100vw;」と指定すると画面幅(スクロールバーを含む)と同じ大きさの領域が定義できます。

使用例


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

サンプル

L3.5.6 vh(画面の高さの割合)

画面の高さに対する割合(10vh = 画面の高さの10%)を指定します。「height: 100vh;」と指定すると画面の高さ(スクロールバーを含む)と同じ大きさの領域が定義できます。

使用例


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

サンプル

L3.5.7 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 のマージンを確保)

L3.6 色の指定方法

L3.6.1 色とグラデーション

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

  1. カラーネーム
  2. #rgb(ハッシュ(#)で始まる 16 進数 3 桁)
  3. #rrggbb(ハッシュ(#)で始まる 16 進数 6 桁)
  4. #rrggbbaa(ハッシュ(#)で始まる 16 進数 8 桁)
  5. rgb(r,g,b)(rgb 関数)
  6. rgba(r,g,b,a)(rgba 関数)
  7. hsl(h,s,l)(hsl関数)
  8. hsla(h,s,l,a)(hsla関数)
  9. 線形グラデーション(linear-gradient 関数)
  10. 放射グラデーション(radial-gradient 関数)
  • カラーネームや色見本については「Appendix-1 色見本(カラーネーム、カラーコード)」を参照してください。
  • グラデーションには、上記以外に扇型グラデーション(conic-gradient 関数)、反復グラデーション(repeating-linear-gradient 関数、repeating-radial-gradient 関数、repeating-conic-gradient 関数)などがありますが、ここでは説明を省略します。

L3.6.2 カラーネーム

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

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

  • black(
  • red(
  • lime(
  • blue(

L3.6.3 #rgb(ハッシュ(#)で始まる 16 進数 3 桁)

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

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

  • #000(
  • #f00(
  • #0f0(
  • #00f(

L3.6.4 #rrggbb(ハッシュ(#)で始まる 16 進数 6 桁)

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

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

  • #000000(
  • #ff0000(
  • #00ff00(
  • #0000ff(

L3.6.5 #rrggbbaa(ハッシュ(#)で始まる 16 進数 8 桁)

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

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

  • #00000080(
  • #ff000080(
  • #00ff0080(
  • #0000ff80(

L3.6.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)(

L3.6.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)(

L3.6.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%)(

L3.6.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)(

L3.6.10 線形グラデーション(linear-gradient 関数)

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

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

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

  1. background: linear-gradient(red,lime,blue);

  2. background: linear-gradient(to right,red,lime,blue);

  3. background: linear-gradient(to bottom right,red,lime,blue);

  4. background: linear-gradient(20deg,red,lime,blue);

  5. background: linear-gradient(red 20%,lime 50%,blue 80%);

  6. background: linear-gradient(red 0% 33%,lime 33% 67%,blue 67% 100%);

  7. background: linear-gradient(180deg,#ff0000c0,#ff000000 70%),
    linear-gradient(300deg,#00ff00c0,#00ff0000 70%),
    linear-gradient(60deg,#0000ffc0,#0000ff00 70%);

  8. background: linear-gradient(#ff000080,#00ff0080,#0000ff80),
    url(images/hamaya.png);
    background-size: cover;

L3.6.11 放射グラデーション(radial-gradient 関数)

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

中心と大きさ

グラデーションの中心位置と大きさを指定します。グラデーションを円形にする時は「circle 大きさ at 中心位置」で指定し、楕円形にする時は「ellipse 大きさ at 中心位置」で指定します。大きさは、以下の値を指定します。closest-side を指定すると中心位置からボックスを囲む最近接の辺までの大きさになり、中心位置の初期状態は、縦 50%、横 50% の位置になります。中心位置は「横位置 縦位置」で指定します。位置は、ピクセル数(px)や比率(%)で指定することができます。

closest-side
中心位置から最も近い辺までの大きさになります。
farthest-side
中心位置から最も遠い辺までの大きさになります。
closest-corner
中心位置から最も近い角までの大きさになります。
farthest-corner
中心位置から最も遠い角までの大きさになります。(初期値)
(ピクセル数(px)や比率(%))で円の大きさを指定します。
グラデーションを作成する色値を複数指定します。単に複数の色値だけを指定した場合は、指定された色値数が均等幅で割り当てられ色を変化させます。色値の後ろにスペースを空けて位置を指定することで色値が占有する幅を指定することができます。また、色値の後ろにスペースを空けて位置を2つ指定することで彩度を保持する幅を指定することができます。位置は、ピクセル数(px)や比率(%)で指定することができます。色値は、透明度のある色値にも対応していますので複数のグラデーションを重ねたり、画像の上にグラデーションを重ねたりすることもできます。

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

  1. background: radial-gradient(red,lime,blue);

  2. background: radial-gradient(at 0% 100%,red,lime,blue);

  3. background: radial-gradient(circle closest-side,red,lime,blue);

  4. background: radial-gradient(circle farthest-side,red,lime,blue);

  5. background: radial-gradient(circle closest-corner,red,lime,blue);

  6. background: radial-gradient(circle farthest-side,red,lime,blue);

  7. background: radial-gradient(circle 20px,red,lime,blue);

  8. background: radial-gradient(red 0% 33%,lime 33% 67%,blue 67% 100%));

L3.7 リセット CSS

L3.7.1 リセット CSS とは

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

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

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

CSS


@charset "utf-8";

/* Reset CSS */
html {
	font-size: 16px;
}
* {
	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,
a,em,strong,small,i,b,span
table,caption,tr,th,td,
pre,label,input,textarea,select,
button {
	padding: 0;
	margin: 0;
	font-size: 100%;
	color: #333;
	font-weight: normal;
	line-height: 1.6;
	word-wrap: break-word;
}
address,em,i {
	font-style: normal;
}
strong,th,b {
	font-weight: normal;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	width: 100%;
	height: auto;
	border: 0;
}
li {
	list-style-type: none;
}
small {
	font-size: 80%;
}
a:hover {
	opacity: 0.6;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}

L3.8 セレクタの得点

L3.8.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点
!importantfont-size: 140%!important;最優先
セレクタの計算例
セレクタの例計算合計点
div#main p1(要素)+100(id)+1(要素)102点
#main p.main-text100(id)+1(要素)+10(class)111点
div#main p.main-text1(要素)+100(id)+1(要素)+10(class)112点
div#main main p.main-text1(要素)+100(id)+1(要素)+1(要素)+10(class)113点
table tr td.text1(要素)+1(要素)+1(要素)+10(class)13点
h1 div span1(要素)+1(要素)+1(要素)3点

L3.9 Chrome 検証ツール

L3.9.1 検証ツールの起動と設定

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

検証ツールの起動と設定

L3.9.2 検証ツールの画面

検証ツールの画面

L3.9.3 スマホの確認画面

スマホの確認画面

ロケット本体
PAGE
TOP
ロケット炎