【スタイルシートを使ったホームページ作成♪】
−初心者の初心者による初心者のためのCSS入門−


◆第2回 「見出し」&「ページ全体」の文字色を指定してみよう◆

その1 ページ全体の文字の色を指定
1)作成済みのstyle.cssを開いて追記していくぞい。
  下の赤い文字の部分をすべて半角で書き込んでくだされ。もちろんコピーペーストでもおっけーぢゃ。
body {
  background-color: powderblue;
  color: red;
}

2)書き込んだら上書き保存で、test1.htmlを開けてみてくだされ。
 「テストページ」が赤くなっておれば、成功ぢゃ!

これで、test1のページに書かれる文字は全て赤になるわけなんぢゃ。

困った顔の助手

ページ全体の文字色が赤って・・・・読みにくくありません?目に悪いですよ?



真に受けてどうする?単に変化の確認がしやすい色だからぢゃっ!
第一回同様、あれこれ色換えをして確認しておいてくれのぉ。
その2 見出し(一部分の)文字の色を指定
1)再びスタイルシートぢゃ。
  今度は、ページ全体の設定ぢゃないからの。bodyの{ }内でなく、新しくその下へ追加ぢゃ。文字色が青の部分ぢゃ。
 おお!そうぢゃ!見やすくする為に、ページの背景は白(white)全体の文字色は黒(black)にしたぞい。
body {
  background-color: white;
  color: black;
}
h1 {
color: blue;
}

h1というのは、見出しのパターンの名前と思っておいてくれ。
特に設定しなくとも、普通の文字より大きく、太字で表示されるんぢゃ。

で、今回はスタイルシートの変更だけでは終わらんのぢゃ。


2)test1.htmlをメモ帳など(サクラエディタ)で開いてくだされ。
又は、test1.htmlをブラウザで開けてから、ソースを表示でもいいぞい。
で、下のように、赤い字のところを追加してくだされ。
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>スタイルシートに挑戦!</h1>
テストページ
</body>
</html>

<h1></h1>で囲んだ文字は、好きな文字でオッケーぢゃっ!
つまり、スタイルシートで h1 に対して設定された内容が、<h1></h1>で囲んだ文字に適用されるという具合なのぢゃ。
お分かり願えたかのぉ?


そこでちょいと、このhシリーズのタグの説明をしとこうかのぉ?
これは、htmlのタグの1つでの、実は、 h1〜h6 までランクがあるんぢゃ。
で、それぞれ文字の大きさが決まっておって、いちいち文字の大きさを指定せずとも、勝手に見出し用として表示してくれるんぢゃ。見出しだから太字になっとる。

にこにこ顔の助手
ということで、ついでだからちょこっと追加して、見出しタグ、hシリーズの違いを見てみましょう。

test1.htmlのソース(メモ帳などで開いて)を開け、赤い文字の部分を追加してみましょう。
面倒な人は、下の表のを全てコピーペースト&上書き保存でもオッケーですよん。
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>スタイルシートに挑戦</h1>
<h2>スタイルシートに挑戦2!</h2>
<h3>スタイルシートに挑戦3!</h3>
<h4>スタイルシートに挑戦4!</h4>
<h5>スタイルシートに挑戦5!</h5>
<h6>スタイルシートに挑戦6!</h6>

テストページ
</body>
</html>

にこにこ顔の助手もっとhシリーズが続くんじゃないかと思った人は、同じようにh7,h8で文字を挟んでテストしてみてください。
7以上のは、テストページと書いた文字と同じように表示され、hシリーズがそれ以上ないことがお分かりだと思います。

そうぢゃ!どうせなら、追加した見出し(hシリーズ)もスタイルシートで色を変えてみたらどうぢゃ?
同じように追加していけばいいんぢゃ。

body {
  background-color: white;
  color: black;
}

h1 {
color: blue;
}

h2 {
color: purple;
}

h6 {
color: green;
}

指定の区切りが分かるように、一行開けて書いてもいいかもしれんのぉ。
cssファイルは、上の表の例のように色分けでは書くことができん。
これから、指定内容がますます増えてくるから、行やスペースを空けて、見た時に分かりやすくしておくことも大切ぢゃぞ。うん。

にこにこ顔の助手
そうそう、本当は、 body {  background-color: white;  color: black; } な感じに、1行で書いてもいいんですが、指定事項を追加していく予定だから、わざと改行してあるわけです。



にこにこ顔の助手ということで、今回はここまでです。ご自分でいろいろ試してみてくださいね。
こういったものは、実験あるのみです!実際にやってみて自分の目で確かめて覚えてください!
では、教授、今日もお疲れ様でした。第2回の最終webページはこうなってます。
次回は、スタイルシートで文字の大きさの変更を予定してます。
質問、間違いなどのつっこみ、訂正指摘など、BBSへお気軽にどうぞ。



Back INDEX Next◆ ページトップ