HTML5/CSS3の授業ノート

CSS

Date.2022.1.13

CSSの基本

CSSとは

文書の見栄え(レイアウトやデザイン)に関する情報を、文書の内容や構造とは別に定義するという概念を「スタイルシート」と言います。
スタイルシートを実現するにはいくつかの方法がありますが、HTML文書に適用させる場合には「CSS/Cascading Style Sheets」と呼ばれる方法を用いるのが一般的です。
WEBページを記述するHTMLは本来文書の構造を示す言語ですが、WEBの発展によりWEBページの装飾性が求められるようになるにつれ「構造」と「見映えの指定」が混在するようになってしまいました。
文書の論理構造と見た目を分離させるという目的で、HTMLの要素をどのように表示するかということを指定するために導入されたのがCSSです。
スタイルシート＝CSSではなく、スタイルシート機能を実現する方法の一つがCSSです。

CSSの読み込み方について

CSSを書くことができる場所は3箇所あります。
それぞれにメリット・デメリットがあるため、メリットを活かしながら組み合わせて記述していきましょう。

style属性で要素に直接スタイルを指定する：インラインスタイル

HTMLの開始タグにstyle属性を書く方法で、インラインスタイルとも呼ばれます。
スタイルを適用したい全てのタグにひとつひとつstyle属性を指定する必要があり、記述が長くなり読みにくいため入力ミスも起きやすくなります。後からまとめてデザインを変更することもできません。
ただしサイト内で１箇所しかない指定には便利です。

<h2 style="color: red; font-size: 200%;">見出し</h2>

HTMLファイルの<head>要素内にstyle要素でまとめて指定する

HTMLのstyle要素中に指定したいスタイルを記述して文書に組み込む方法で、内部CSSとも呼ばれます。
記述したページ内でのみ有効になるので、ページ毎に特有のスタイルを適用したい場合に便利な方法です。

<head>
	<style type="text/css">
		h2{
		color: red;
		font-size: 200%;
		}
	</style>
</head>

外部ファイルを読み込む

指定したいスタイルのみを記述したテキストファイル(*.css)を別に用意してHTMLファイルに読み込む方法で、外部CSSとも呼ばれます。
複数のHTML文書で同じCSSファイルを共有できるため、サイト全体のスタイルを一括で指定できます。

<head>
	<meta charset="UTF-8">
	<meta name="Description" content="〜〜">
	<meta name="Keywords" content="〜〜">
	<title>〜〜</title>
	<link rel="stylesheet" type="text/css" href="*.css">
</head>

実際にどの方法を利用するかは状況や優先度によって変わりますが、上記の理由から外部スタイルシートの利用が推奨されています。

HTML文書をいじらずにスタイルの変更ができるためメンテナンスしやすい。
一つのスタイルファイルを共有することでサイトのイメージを統一でき、作成や修正の手間も軽減できる。
「構造」と「見栄え」の分離

スタイル適用の優先順位

CSSにはいくつもの適用方法があるため、複数の一つの要素に複数のスタイルが設定されて競合する可能性があります。
そこでスタイルには優先度がつけられています。
もし一つの要素に複数のスタイルが指定されていた場合、どれが優先されるかのルールを確認しておきましょう。

1.!important宣言

セミコロンの前に『␣!important』を記述すると最優先されます。
ただし全体の構造が分かりにくくなるので、基本的には使わなくて済むように設計し、どうしようもなくなったときの最後の手段として「!important」と思ってください。

h1{color:red␣!important;}

2.得点計算(詳細度)

スタイルの指定方法によって得点が加算され、一番得点が高いものが適用されます。

指定方法	例	点数
!important宣言	{color:red !important;}	無敵
style属性	<p style="…">	1000点
idセレクタ	#id名{}	100点
classセレクタ	.class名{}	10点
擬似クラスセレクタ	:hover{} など	10点
属性セレクタ	[type="radio"]{} など	10点
要素セレクタ	h1{} など	1点
擬似要素セレクタ	::before{} など	1点
全称セレクタ	*{}	0点

以下のようなスタイル指定があった場合、どれが優先されるか考えてみましょう。

<h1␣id="top"␣class="title">タイトル</h1>

指定方法	計算式	回答
h1{color:red;}	1(要素)	1点
h1#top{color:purple;}	1(要素)+100(id)	101点
.title{color:blue;}	10(class)	10点
h1.title{color:green;}	1(要素)+10(class)	11点
body␣h1.title{color:orange;}	1(要素)+1(要素)+10(class)	12点

See the Pen specificity by minato (@minatoxxx)on CodePen.

3.記述順

同じ得点なら、後ろに書いたものが優先されます。

4.組み込み方法

記述する場所によっても優先順位が違います。

優先順位まとめ

以上の内容をまとめるとこのようになります。

!important
インライン記述(style属性)
idセレクタ
classセレクタ、属性セレクタ、疑似クラス(:hoverなど)
要素型セレクタ(h1､p､div等)、疑似要素(::before､::after等)
ユニバーサルセレクタ (*)

DOM(要素の木構造)

Document Object Modelの略です。
HTMLの要素には主従関係があり、木構造(ツリー構造)をとっています。
家系図のようなものだと思ってください。

ルート要素: 木構造の出発点であるhtml要素
親要素: 任意のある要素から見て一つ上の要素
子要素: 任意のある要素から見て一つ下の要素
祖先要素: 親やその親、さらにその親
子孫要素: 子や孫、さらにその子孫

ある要素が生成するボックスはその子要素や子孫要素の親ボックスとして機能します。
スタイルシートでは要素の親子関係がセレクタの指定や初期値、継承などに影響します。
親子関係をよく理解しておきましょう。

包含ブロックとレイアウト

要素のサイズや配置は、「包含ブロック」に影響されます。
ほとんどの場合において包含ブロックはその要素から見て直近の親のブロックレベル要素になります。

例外として、

positionプロパティがabsoluteの場合: positionの値がstatic以外(fixed/absolute/relative/sticky)の直近の祖先要素のサイズ
positionプロパティがfixedの場合: ブラウザの表示領域のサイズ

などがあります。

スタイルの継承

プロパティの中には、親要素に指定した値がそのまま子孫要素にも適用されるものと、そうでないものがあります。
たとえばbody要素に文字色を指定した場合、次に文字色を指定するまではそのNumbしますが、背景画像やボックスサイズなどは子孫要素に継承されません。

継承される値が絶対単位の場合: 指定した値がそのまま継承される
継承される値が相対単位の場合: 親要素と子要素の値を掛け合わせ、その算出値が継承されます。

強制的に値を継承させる

各プロパティの値に「inherit」を指定することで、通常継承しないプロパティでも強制的に継承させることができます。
ほぼ全てのプロパティに指定できます。

ボックスモデル

CSSでレイアウトをする際には、「ボックスモデル」を理解する必要があります。
CSSの定義するボックスモデルは以下の図のように4つの領域で構成されています。

content（コンテンツ）: テキストや画像など、要素の内容そのものが表示される領域です。width/heightプロパティで指定できます。
padding（パディング）: contentとborderの間にある余白の領域です。要素の内側の余白を取るために使います。paddingプロパティで指定できます。
border（ボーダー）: paddingの外側にある、いわゆる枠線です。初期値では太さ0になっているので見えませんが、存在しています。border-widthプロパティで指定できます。
margin（マージン）: ボックスの一番外側の余白の領域です。marginプロパティで指定することができます。

ボックスサイズの算出

子要素（.box_yellow）の幅を100％、paddingとborderを追加すると親要素（.box）からはみ出てしまいます。

See the Pen boxmodel-before by minato (@minatoxxx)onCodePen.

ボックスのサイズは「content + padding + border + margin」の合計で算出されます。
先ほど説明した通り、CSSのwidthとheightプロパティはcontentの領域のサイズを指定する為に使うので、上記の例だと.box_yellowの全体の幅は「250px(content)+20px(左右のpadding、10×2)+10px(左右のborder、5×2)=280px」と親要素の250pxより大きくなり、はみ出してしまいます。
はみ出さないようにするにはどうすればいいのでしょうか？方法は以下の3つです。

1:計算する: 左右のpadding+左右のborder+左優のmarginをあらかじめ計算して、親要素の幅から引いた値をwidthに指定すれば親要素に収まります。
以前はこのやり方が主流でしたが、毎回計算するのが面倒です。
2:box-sizingを使う: box-sizingプロパティを使うと CSSのwidth,heightプロパティで指定できる領域のサイズを変更することができます。
本来ならwidthの外側にあるborder＋paddingを指定の数値に含めます。
ただしmarginは含まれません。画像などの場合、その分少し縮小されます
3:calc関数を使う: 値にcalc関数を入れると自動的に計算してくれます。
この方法ならmarginの分もあらかじめ引くことができます。

See the Pen boxmodel-after by minato (@minatoxxx)on CodePen.

色の指定方法

WEB上での色の指定は「光の三原色」で指定します。主にテレビ画面やパソコン画面など、光の透過で表現される光の三原色は『赤(R)』『緑(G)』『青(B)』の3色で構成され、色を混ぜれば混ぜるほど明度が上がり白に近づくので加法混色と言われています。

反対に、印刷物など光の透過ができない物に多く使用される「色の三原色」は『シアン(C)』『マゼンタ(M)』『イエロー(Y)』の3色＋黒の4色で構成され、混ぜれば混ぜるほど明度が下がり黒に近づくので減法混色と言われています。

16進数を使ったカラーコード

最も多く使われている色の指定方法です。
6桁の数字/アルファベットの組み合わせの先頭に#をつけて色を指定します。
2桁ずつで3色(R/G/B)それぞれの量を表し、00から始まって最大値はFFです。FF0のように3桁にはなりません。

普段私たちが数を数える時に使っているのは10進法といい、0〜9の10個の数字を1つのかたまりとして繰り上がって行く数え方です。
WEBの世界の中で使われる16進法は、0,1,2,3…9,A,B,C…Fの16個の英数字を1つのかたまりとした数え方です。

		2桁め
		0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F
1 桁め	0	00	01	02	03	04	05	06	07	08	09	0A	0B	0C	0D	0E	0F
	1	10	11	12	13	14	15	16	17	18	19	1A	1B	1C	1D	1E	1F
	2	20	21	22	23	24	25	26	27	28	29	2A	2B	2C	2D	2E	2F
	…	…	…	…	…	…	…	…	…	…	…	…	…	…	…	…	…
	F	F0	F1	F2	F3	F4	F5	F6	F7	F8	F9	FA	FB	FC	FD	FE	FF

16×16＝256通りの組み合わせになり、10進法に置き換えると、最小値は00=0、0A=10、最大値のFF=255(0から数えた256番目)、となります。

#ff6600(ff/66/00)のように2桁ごとに区切った時に同じ数値の連続の場合、#f60のように省略することもできます。#fc6600(fc/66/00)のように一つでも連続しない数値があれば省略することはできません。 #rrggbbの後ろに透明度をつけたして8桁で表記することもできます。

rgb()関数/rgba()関数

rgba(255,102,0,0.8)のように記述します。
FFを変換すると256ですが、0から数えるため最大値は255になります。
透明度は0〜1の間の数値(小数点)で指定します。

hsl()関数/hsla()関数

hsl()ではhue：色相、saturation：彩度、lightness：輝度の3要素、alpha：透明度もあわせて指定する場合はhsla()を使います。
RGBより直感的な色指定方法としてCSS3で追加されました。

hue：色相: 色相環上の角度(0〜360)を数値で指定します。
saturation：彩度: 0〜100%で指定します。大きいほど純色に近くなり、小さいほど灰色に近い色になります。
lightness：輝度: 0〜100%で指定します。0%は黒、100%は白になり、純色を表すのは50%です。
alpha：透明度: 0～1の間で指定します。

hsla(0,100%,50%,0.5)のように記述します。

		s：彩度
		100%	75%	50%	25%	0%
l ：輝度	100%
	75%
	50%	純色
	25%
	0%

hsl(任意,100%,50%) が純色になり、これを基準として

彩度を下げるとくすみカラー
輝度を上げると薄く明るい色
輝度を下げると暗く落ち着いた色

になります。

キーにする色(Hue)を最初に決めておき彩度と輝度を変更するだけ、または彩度と輝度を固定して色相を変えるだけでまとまりの良い配色になります。

hsl(360,60%,95%)

hsl(220,60%,95%)

hsl(120,60%,95%)

同じ色をRGBで指定すると、全ての数値が変わってしまうので少し難しくなります。

rgb(235,173,173)

rgb(194,173,235)

rgb(173,235,214)

CSSのブラウザ対応について

ブラウザにはさまざまな種類があり、基本的にはW3Cなどが定めた標準を元にしているものの、バージョンによっての差やブラウザ独自の拡張など、解釈や挙動の異なる部分があったり、PC用ブラウザでは使えるがスマートフォン用ブラウザでは使えないものもあります。
どのブラウザでも正しく表示されるように工夫することを「クロスブラウザ」と言います。

クロスブラウザ対応は、WEBサイトを運営していく上でとても重要です。
WEBサイトを訪問したとき表示が崩れていたら、離脱してしまう可能性が高いからです。

このサイトで紹介しているHTMLタグやCSSプロパティは主要ブラウザ(InternetExplorer以外)で表示できるものですが、検索などで調べたタグを使用するときは、必ず「どのブラウザでも表示できるのか」調べる必要があります。

Can I use…HTMLタグ・CSSプロパティどちらも対応しています。
MDN web docs…仕様についても詳しく載っています。