アジェンダ
- CSSの書き方
- CSSにおけるブロック要素とインライン要素の違い
- 親要素、子要素、兄弟関係
- CSSのセレクタ
- idセレクタ
- classセレクタ
- 属性セレクタ
- 擬似要素
- 特殊なセレクタ
- 実践
- ブロック要素とインライン要素
- 様々なセレクタ
- 特殊なセレクタ
CSSの書き方
CSSは「セレクタ」「プロパティ」「値」の三要素から成る。
書き方は以下のとおり。
セレクタ1,
セレクタ2 {
プロパティ1: 値;
プロパティ2: 値;
}
CSSにおけるブロック要素とインライン要素の違い
ブロック要素は、要素の先頭から末尾まで全ての範囲を含む。
インライン要素は、指定した範囲しか含まない。
例えば、行間について、ブロック要素は行間も要素に含むが、インライン要素は行間は要素に含まない。
イマイチ伝わりにくいが、実践で補足を行う。
親要素、子要素、兄弟関係
親要素
ある要素に対し、外側にある要素のこと。
子要素
ある要素に対し、内側にある要素のこと。
兄弟関係
ある要素に対し、同じ階層(インデント)に存在する要素のこと。
具体例
<body>
<h1>子1</h1>
<p>子2</p>
</body>
上記のようなHTMLの場合
- bodyタグの要素に対し、h1は子要素、pは子要素
- h1タグの要素に対し、bodyは親要素、pは兄弟関係
- pタグの要素に対し、bodyは親要素、h1は兄弟関係
CSSのセレクタ
idセレクタ
HTMLのid属性の値を指定して、装飾を行うセレクタ。
#を使用して指定する。
classセレクタ
HTMLのclass属性の値を指定して、装飾を行うセレクタ。
.を使用して指定する。
属性セレクタ
HTMLの属性を指定して、装飾を行うセレクタ。
[ ]を使用して指定する。
指定した属性を使用しているタグ全てが装飾される。
擬似要素
動的に発生する事象を指定して、装飾を行うセレクタ。
:を使用して指定する。
いくつか例を挙げる。
hover
マウスカーソルが乗っている状態を指定する。
link
未訪問のリンク先を指定する。
visited
訪問済みのリンク先を指定する。
first-child
最初の子要素を指定する。
last-child
最後の子要素を指定する。
only-child
"唯一の子要素"である要素を指定する。
特殊なセレクタ
子セレクタ >
親要素を指定した子要素、を指定するときに使用する。
例) p > a : pタグの子要素であるaタグ
隣接セレクタ +
隣り合っている(直後の)要素、を指定するときに使用する。
例) h1 + p : h1タグと隣接しているpタグ
関節セレクタ ~
兄弟関係にある(同じインデントの)要素、を指定するときに使用する。
例) h1 ~ p : h1タグと兄弟関係にあるpタグ
実践
ブロック要素とインライン要素
ブロック要素とインライン要素を確認するため、以下のblock_inline.htmlとblock_inline.cssを作成した。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="./block_inline.css">
<title>ブロック要素とインライン要素</title>
</head>
<body>
<h1>ブロック要素</h1>
<div>
これはdivタグなのでブロック要素です。<br>
改行したらどうなるでしょうか。
</div>
<h1>インライン要素</h1>
<span>
これはspanタグなのでインライン要素です。<br>
改行したらどうなるでしょうか。
</span>
</body>
</html>
div {
background-color: greenyellow;
}
span {
background-color: gold;
}
これをWebブラウザで表示させるとこんな感じ。
ブロック要素は、文書だけでなく文書が表示されている横幅が全体となっている。
インライン要素は、文書のある範囲のみとなっている。
様々なセレクタ
上記のセレクタを使用して、以下のselector.htmlとselector.cssを作成した。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="./selector.css">
<title>様々なセレクタ</title>
</head>
<body>
<h1>☆自己紹介☆</h1>
<img src="./makoto.jpg" alt="上目遣いの天使" title="マコト">
<p>
私の名前は<span class="marker" id="my_name">マコト</span>です。天界出身です。<br>
将来の夢は<span class="marker">恋のキューピット</span>です！<br>
<br>
私のことをもっと知りたい人は<a href="#">ココ</a>へ！
</p>
</body>
</html>
#my_name {
font-weight: bold;
font-size: 25px;
}
.marker {
background-color: pink;
}
[href] {
font-size: 20px;
color: blue;
}
span:hover {
font-size: 30px;
}
これをWebブラウザに表示させるとこんな感じ。
それぞれそのセレクタで指定した要素が装飾されているのが分かる。
また、「恋のキューピット」にマウスカーソルを乗せると、文字サイズが大きくなった！
特殊なセレクタ
特殊なセレクタを使用して、以下のspecial.htmlとspecial.cssを作成した。
<!DOCTYPE html>
<head>
<meta lang="ja">
<link type="text/css" rel="stylesheet" href="./special.css">
<title>隣接セレクタと間接セレクタ</title>
</head>
<body>
<h1>h1要素</h1>
<p>
h2 + p は文字を大きくする。<br>
h2 ~ p は文字色を変える。<br>
</p>
<h2>h2要素</h2>
<p>h2直下のp要素</p>
<p>h2直下のp要素</p>
<h2>h2要素</h2>
<h3>h2直下のh3要素</h3>
<p>h3直下のp要素</p>
<p>h3直下のp要素</p>
<h3>h2直下のh3要素</h3>
<p>h3直下のp要素</p>
<p>h3直下のp要素</p>
</body>
h2 ~ p {
color: brown;
}
h2 + p {
font-size: 20px;
}
これをWebブラウザに表示させるとこんな感じ。
h2 + pは、h2の直後のp要素のみを指定している。
h2 ~ pは、h2と兄弟関係にあるp要素を全て指定している。
おわりに
今回は、基本的なCSSの記述方法を学んだ。
編集しやすいWebページを目指すためには、class属性や、HTMLの構造を適切に設計しなければならない、と感じた。
難しそうだ。
次 >> ここ
参考
2-1 インライン要素とブロック要素（CSSのセレクタ）
2-2 classセレクタとidセレクタ（CSSのセレクタ）
2-3 CSSをまとめる（CSSのセレクタ）
2-4 特殊なセレクタ（CSSのセレクタ）
2-5 属性セレクタ（CSSのセレクタ）
2-6 擬似要素（CSSのセレクタ）
2-7 構造的な擬似要素（CSSのセレクタ）