Step.6 CSSのセレクタなどについて学ぼう

CSSを書く際の半角スペースや改行などについて

はて、今の段階でもCSSの文字数が結構な量になってきたね。

ほんとにねー。色々指定できるからどんどん増えちゃう。

まだまだあと6倍くらいには膨れ上がると思うよ。
そんなわけで、ちょっとCSSを書く際の工夫というか、半角スペースとか改行について教えておくね。

[code language=”css” title=”CSS” highlight=””]
header {
display:block;
background:#ffb0c6;
width:1000px;
height:180px;
margin:0px auto;
font-size:20px;
font-weight:bold;
}
main {
display:block;
background:#ffffff;
width:1000px;
height:400px;
margin:0px auto;
}
footer{
display:block;
background:#ffb0c6;
width:1000px;
height:50px;
margin:0px auto;
}
body {
margin:0px;
color:#9e2634;
font-size:14px;
line-height:23px;
background:#fff7de;
font-family:’ＭＳゴシック’;
}
p {
padding:10px;
margin:0px;
}
[/code]

これがメルちゃんが作ったCSSだね。
さっきから私がCSSを出す時に半角スペースとか改行を入れていたのだけれども、これ実は必須じゃないの。ただ見えやすいようにしてるだけなのね。
無駄を取っ払ったら一行で書けちゃうよ。

[code language=”css” title=”CSS” highlight=””]
header{display:block;background:#ffb0c6;width:1000px;height:180px;margin:0px auto;font-size:20px;font-weight:bold;}main{display:block;background:#ffffff;width:1000px;height:400px;margin:0px auto;}footer{display:block;background:#ffb0c6;width:1000px;height:50px;margin:0px auto;}body{margin:0px;color:#9e2634;font-size:14px;line-height:23px;background:#fff7de;font-family:’ＭＳゴシック’;}p{padding:10px;margin:0px;}
[/code]

すっげぇ見づらい!!!

うん。そんなわけだから、好みの場所にスペースや改行を入れて読みやすいようにすればいいよ。ただし、スペースは必ず半角で行うこと。全角にするとうまくいかないからね。
私が表示しているやり方はCSSを解説してるサイトとかでよく見かけるかな。

[code language=”css” title=”CSS” highlight=””]
header{
display: block;
background: #ffb0c6;
width: 1000px;
height: 180px;
margin: 0px auto;
font-size: 20px;
font-weight:bold;
}

main{
display: block;
background: #ffffff;
width: 1000px;
height: 400px;
margin: 0px auto;
}

footer{
display: block;
background: #ffb0c6;
width: 1000px;
height: 50px;
margin: 0px auto;
}

body{
margin: 0px;
color: #9e2634;
font-size: 14px;
line-height: 23px;
background: #fff7de;
font-family:’ＭＳゴシック’;
}

p {
padding: 10px;
margin: 0px;
}
[/code]

これ見やすいんだけどさ、すっごい縦に長くなるよね。

うん。私もここまで縦に長いのはあんまり好きじゃないから普段はもうちょっと改行少なくしているかな。
書き方はほんとメルちゃんの好きにしたらいいよ。自分でルール決めて書くと後で編集するときにも困らないしね。後で編集するのも大体自分自身になるんだしね。
例えば、セレクタごとに一行で書いちゃうとか

[code language=”css” title=”CSS” highlight=””]
header { display:block; background:#ffb0c6; width:1000px; height:180px; margin:0px auto; font-size:20px; font-weight:bold; }
main { display:block; background:#ffffff; width:1000px; height:400px; margin:0px auto; }
footer{ display:block; background:#ffb0c6; width:1000px; height:50px; margin:0px auto; }
body { margin:0px; color:#9e2634; font-size:14px; line-height:23px; background:#fff7de; font-family:’ＭＳゴシック’; }
p { padding:10px; margin:0px; }
[/code]

あとは似たようなプロパティは同じ行に書くとかもいいね。
私もよく margin と padding を同じ行にしたり、font-size と line-height と color など文字関連のプロパティは全部同じ行にしたり、とかしてるよ。

[code language=”css” title=”CSS” highlight=””]
header {
display:block;
background:#ffb0c6;
width:1000px; height:180px;
margin:0px auto;
font-size:20px; font-weight:bold;
}
main {
display:block;
background:#ffffff;
width:1000px; height:400px;
margin:0px auto;
}
footer{
display:block;
background:#ffb0c6;
width:1000px; height:50px;
margin:0px auto;
}
body {
margin:0px;
color:#9e2634; font-size:14px; line-height:23px; font-family:’ＭＳゴシック’;
background:#fff7de; }
p {
padding:10px; margin:0px;
}
[/code]

ほっほー！　自分で工夫してわかりやすいように書いていいんだね！
ところでさ、この行頭の空白ってどうしてるの？　スペースキー連打してるの？

これはタブキーで空白を作っているよ。キーボードのTabのキーを押すと大体半角8文字分のスペースが空くよ。
スペースを作ることでセレクタと見分けがつくようにしてる感じだね。
テキストエディターソフトによってはタブによるスペースを何文字分にできるかも設定できたりするから便利よ。私は半角8文字だと開けすぎて嫌だからよく4文字ぐらいにしてるかな。

テキストエディターソフト？メモ帳のこと？

そう。メモ帳のことだけれど、メモ帳以外にもテキストエディターソフトって沢山作られているのよ。ブラウザに沢山種類があるのと同じようにね。多機能なものも沢山あったりするし、HTMLやCSSを書くのに非常に便利な機能を持ったソフトだってあるよ。まぁ暇があったら調べてごらん
ちなみに残念ながらメモ帳にはタブの空白文字数を設定する機能はなさそうね。

へぇ……

あと、HTMLと同じようにCSSもメモ書きができるよ。
/* メモの内容 */
といった感じに指定してね。最後の */ の直前の文字は半角スペースか半角英数字でないといけないよ。半角スペースを入れる癖をつけることをお勧めしておくよ。

[code language=”css” title=”CSS” highlight=””]
/* ヘッダー関連 */
header {
display:block; /* こんな風に */
background:#ffb0c6; /* ここに入れることもできるよ */
width:1000px; /* 横幅 */
height:180px; /* 縦幅 */
margin:0px auto; /* って感じに説明入れておくと */
font-size:20px; /* 後で編集するときにわかりやすいね */
font-weight:bold;
}

/* メイン関連 */
main {
display:block;
background:#ffffff;
width:1000px;
height:400px;
margin:0px auto;
}

/* フッター関連 */
footer {
display:block;
background:#ffb0c6;
width:1000px;
height:50px;
margin:0px auto;
}

/* その他 */
body {
margin:0px;
color:#9e2634;
font-size:14px;
line-height:23px;
background:#fff7de;
font-family:’ＭＳゴシック’;
}
p {
padding:10px;
margin:0px;
}
[/code]

こんな感じに、まぁ適当にね。CSSの指定量がバカみたいに増えたら、このメモがかなり役に立ったりするね。

あー確かに、日本語があるってほっとするね。

CSSの対象となる要素の指定方法　class属性を使ってみよう

今まで全部要素に対してCSSを指定していたよね。

うん。全部要素のタグ名だったけど、それがどうしたの？

セレクタはね、要素のタグ名以外にも色々指定できるの。結構いろんな種類があるから気が向いたら調べてみるといいよ。
今回はその中でもよく使うのを伝えておくね。
はて、メルちゃん。今のindex.htmlファイルを見て欲しい。

[code language=”html” title=”HTML” highlight=”10″]
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header><p>メルちゃんの素敵なサイト★</p></header>
<main><p>メイン</p><p>行間を試すために文字を沢山書いておきます。文章を読みやすくするには多少行間を開けておいたほうが良いでしょう。文字の大きさも、女性は小さい文字を好むことが多いようですが、小さすぎると大変読み辛くなり、せっかくサイトを作ったのに見てもらえなくなったりしますので単純に見た目だけに拘らず、見やすさ、使いやすさ、わかりやすさ、といったものに目を向けるのも大切だと思います。</p></main>
<footer><p>コピーライト</p></footer>

</body>
</html>
[/code]

さて、問題だ。<main>要素内に今<p>要素が2つあるよね？これの一つ目と二つ目を別の違う文字色にしたい場合、どうする？

ん……んー………ん？………困る！！！

そうだろうね。そんなわけで、同じ要素でも別々に設定できる方法の一つとして、属性を使うよ。
それぞれの<p>要素に class っていう属性を指定してみよう。

[code language=”html” title=”HTML” highlight=”12,13″]
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header><p>メルちゃんの素敵なサイト★</p></header>

<main>
<p class="main1">メイン</p>
<p class="main2">行間を試すために文字を沢山書いておきます。文章を読みやすくするには多少行間を開けておいたほうが良いでしょう。文字の大きさも、女性は小さい文字を好むことが多いようですが、小さすぎると大変読み辛くなり、せっかくサイトを作ったのに見てもらえなくなったりしますので単純に見た目だけに拘らず、見やすさ、使いやすさ、わかりやすさ、といったものに目を向けるのも大切だと思います。</p>
</main>

<footer><p>コピーライト</p></footer>

</body>
</html>
[/code]

<タグ名 class=”クラス名”>といった感じに、好きなクラス名を指定しておけるよ。
クラス名を決めておくことによって、そのクラス名を指定してCSSを書くことができるよ

[code language=”css” title=”CSS” highlight=”36-41″]
header {
display:block;
background:#ffb0c6;
width:1000px;
height:180px;
margin:0px auto;
font-size:20px;
font-weight:bold;
}
main {
display:block;
background:#ffffff;
width:1000px;
height:400px;
margin:0px auto;
}
footer {
display:block;
background:#ffb0c6;
width:1000px;
height:50px;
margin:0px auto;
}
body {
margin:0px;
color:#9e2634;
font-size:14px;
line-height:23px;
background:#fff7de;
font-family:’ＭＳゴシック’;
}
p {
padding:10px;
margin:0px;
}
.main1 {
color:#ff0000;
}
.main2 {
color:#000000;
}
[/code]

クラス名で指定する場合は、頭にドット「.」を入れるよ。
ちなみに、クラス名は半角英数にしておくのが無難だよ。

おお！別々の色になった！ほほー！面白い面白い！なるほどねー！

タグ名が違っても、同じクラス名にしておいたらスタイルを共有できたりもするね。
<footer>要素のクラス名を main1 にしてごらん。

[code language=”html” title=”HTML” highlight=”16″]
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header><p>メルちゃんの素敵なサイト★</p></header>

<footer class="main1"><p>コピーライト</p></footer>

</body>
</html>
[/code]

おー！フッターの文字色も赤くなった！へぇえ！なるほどねー！

結構よく使うことになると思うよ。あと、これと似たような機能で「id」という属性もあるよ。

CSSの対象となる要素の指定方法　idとclassの違い

idもclassとほぼ同じだよ。
<タグ名 id=”ID名”>
ってID名を入れるの。セレクタでは頭にシャープ「#」をつけるよ。
ID名は頭文字は半角英文字じゃないとだめだよ。頭文字に数字使えないからね。

<header><p>メルちゃんの素敵なサイト★</p></header>

<main>
<p id="main1">メイン</p>
<p id="main2">行間を試すために文字を沢山書いておきます。文章を読みやすくするには多少行間を開けておいたほうが良いでしょう。文字の大きさも、女性は小さい文字を好むことが多いようですが、小さすぎると大変読み辛くなり、せっかくサイトを作ったのに見てもらえなくなったりしますので単純に見た目だけに拘らず、見やすさ、使いやすさ、わかりやすさ、といったものに目を向けるのも大切だと思います。</p>
</main>

<footer><p>コピーライト</p></footer>

</body>
</html>
[/code]

[code language=”css” title=”CSS” highlight=”36-41″]
header {
display:block;
background:#ffb0c6;
width:1000px;
height:180px;
margin:0px auto;
font-size:20px;
font-weight:bold;
}
main {
display:block;
background:#ffffff;
width:1000px;
height:400px;
margin:0px auto;
}
footer {
display:block;
background:#ffb0c6;
width:1000px;
height:50px;
margin:0px auto;
}
body {
margin:0px;
color:#9e2634;
font-size:14px;
line-height:23px;
background:#fff7de;
font-family:’ＭＳゴシック’;
}
p {
padding:10px;
margin:0px;
}
#main1 {
color:#ff0000;
}
#main2 {
color:#000000;
}
[/code]

この id と class の違いは何かっていうと、 id は氏名 class は学級だと思ってくれたらいいかな。
メルちゃん小学三年生の時クラスは何組だった？

うわ、懐かしい。1組だったよ。

じゃあ、メルちゃんは <p class=”1kumi” id=”meru”>って感じ。わかった？

ほ……ほう

id は1つのページに同じID名は存在しない。 class は同じクラス名が複数あっても大丈夫。そんな違いよ。
同じクラスの人はたくさんいるけれど、メルちゃんはメルちゃん一人だけってこと。

んーIDの必要性がいまいちわからない

まぁ別に全部 class にしてもいいけれど、ID はCSSのセレクタに使う以外にも色々使われるのよ。そのうち教えるね。

ん。……なんかあとで教えるね系が増えてきて私たぶん覚えてないけど

うん。わかってる。気にしない。

さすがロロちゃんわかってくれてありがとう……。

複数のセレクタにCSSを指定する

さっき class 属性メインの上側の<p>要素とフッターに同じCSSを指定したけれども、わざわざクラス属性を入れなくても同じようなことができるよ。
カンマ「,」で区切ることによって複数のセレクタにCSSを指定することができるんだ。

[code language=”css” title=”CSS” highlight=”1″]
footer,#main1 {
color:#ff0000;
}
[/code]

これで、<footer>要素とIDがmain1の要素の文字色を変えるってことになるよ。

ほう！プチ便利！

こういうのを駆使すると、ごちゃごちゃしがちなCSSのソースコードを少しはまとめることができるよ。
例えば今のCSSならば

[code language=”css” title=”CSS” highlight=”2,4,6,11,13,15,18,20,22″]
header {
display:block;
background:#ffb0c6;
width:1000px;
height:180px;
margin:0px auto;
font-size:20px;
font-weight:bold;
}
main {
display:block;
background:#ffffff;
width:1000px;
height:400px;
margin:0px auto;
}
footer {
display:block;
background:#ffb0c6;
width:1000px;
height:50px;
margin:0px auto;
}
body {
margin:0px;
color:#9e2634;
font-size:14px;
line-height:23px;
background:#fff7de;
font-family:’ＭＳゴシック’;
}
p {
padding:10px;
margin:0px;
}
#main1 {
color:#ff0000;
}
#main2 {
color:#000000;
}
[/code]

灰色になっている部分は共通しているでしょう？
この部分をまとめて指定した後に、個別で違う部分を指定してやるといいよ。
こっちの方が後々ページの全体の横幅を変えたいって時に一気に変えられるし便利だね。

[code language=”css” title=”CSS” highlight=”1-5″]
header,main,footer {
display:block;
width:1000px;
margin:0px auto;
}
header {
background:#ffb0c6;
height:180px;
font-size:20px;
font-weight:bold;
}
main {
background:#ffffff;
height:400px;
}
footer {
background:#ffb0c6;
height:50px;
}
body {
margin:0px;
color:#9e2634;
font-size:14px;
line-height:23px;
background:#fff7de;
font-family:’ＭＳゴシック’;
}
p {
padding:10px;
margin:0px;
}
#main1 {
color:#ff0000;
}
#main2 {
color:#000000;
}
[/code]

へぇえ、そういう書き方もありかー！

記述する量も少し減るし、一斉に横幅を変えたいときとかにここ一つ弄るだけでよくなるし、見やすいし、と、使い方を工夫すればかなり便利になるから覚えておいて損はないよ。

使いこなせるかなぁ……

自分でCSS書くようになって、自分の中で書き方のルールができてきたら便利さを実感できるようになると思うよ。
はて、他にも色々使えるセレクタとかあるんだけれど、メルちゃん飽きてきてそうだから次はサイト弄りにしようか。

やった♪

Step.5 よく使うCSSを学ぼう余白・文字関連編

Step.7 画像にリンクを貼ってみよう

Step.6 CSSのセレクタなどについて学ぼう

CSSを書く際の半角スペースや改行などについて

CSSの対象となる要素の指定方法 class属性を使ってみよう

CSSの対象となる要素の指定方法 idとclassの違い

複数のセレクタにCSSを指定する

CSSの対象となる要素の指定方法　class属性を使ってみよう

CSSの対象となる要素の指定方法　idとclassの違い