Webのお勉強 〜CSS セレクタと最適なフォント〜
セレクタはいろいろ種類があるが授業でやったものだけ復習
○タイプセレクタ
＜body＞にあるHTMLの要素をスタイルを指定できる
例)HTMLは＜h1＞大見出し＜/h1＞
＜style＞に↓
h1{
color:#FFFFFF;
}
○複数セレクタ
基本、上のタイプセレクタと同じ
複数のHTMLの要素を一気にスタイルを指定できる
カンマで区切る
例)HTMLには＜h1＞大見出し＜/h1＞
＜h2＞中見出し＜/h2＞
＜style＞に↓
h1,h2{
color:#FFFFFF;
}
○idセレクタ
要素に＜div id="○○○"＞をつけることによりまとめてスタイルを指定できる
文章や内容をグループ化でき、まとまりをつけやすい
同じページに同じidはダメ
※○○○にはすきに名前をつけられる
例)HTMLに
＜div id="test"＞
＜h1＞大見出し＜/h1＞
＜p＞内容＜/p＞
＜/div＞
＜style＞に↓
#test{
background-color:#FFFFFF;
}
○classセレクタ
要素に＜p class="○○○"＞をつけることで特定の一部のみのスタイルを指定できる
idセレクタとは違い、同じページに複数指定できる
内容の複数箇所や異なる要素に同じスタイルを指定したいときはこのセレクタ
例)HTMLに
＜p class="test"＞内容＜/p＞
＜style＞に↓
.test{
background-color:#000000;
}
○子孫セレクタ
要素に＜h1＞＜em＞大見出し＜/em＞＜/h1＞などあり＜em＞にのみスタイルを指定したいときなどに使う
↑の場合＜h1＞が親要素、その中にある＜em＞が子に当たる。
さらに＜em＞の中にも要素がある場合も指定ができる（孫要素）
＜style＞に親要素と子要素間に半角スペースで区切ることで指定できる
例)HTMLに
＜p＞内容＜em＞強調したい内容＜/em＞内容＜/p＞
＜style＞に↓
p em{
color:#FFFFFF;
}
セレクタの補足
・idセレクタの場合は［#］、classセレクタの場合は［.(カンマ)］を名前の前につける
・id/classセレクタより子孫セレクタを使うほうが良い
・子孫セレクタはわかりやすく
ツリー構造を全部書くとわかりやすい(初心者用)
いきなり孫要素を書くのではなく、親、子、孫みたいに最初から順番に書いていくと理解しやすい
最適なフォント
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
