【スタイルシートを使ったホームページ作成♪】 −初心者の初心者による初心者のためのCSS入門− |
◆第2回 「見出し」&「ページ全体」の文字色を指定してみよう◆
その1 | ページ全体の文字の色を指定 | ||||
1)作成済みのstyle.cssを開いて追記していくぞい。 下の赤い文字の部分をすべて半角で書き込んでくだされ。もちろんコピーペーストでもおっけーぢゃ。
2)書き込んだら上書き保存で、test1.htmlを開けてみてくだされ。 「テストページ」が赤くなっておれば、成功ぢゃ! これで、test1のページに書かれる文字は全て赤になるわけなんぢゃ。 ページ全体の文字色が赤って・・・・読みにくくありません?目に悪いですよ? 真に受けてどうする?単に変化の確認がしやすい色だからぢゃっ! 第一回同様、あれこれ色換えをして確認しておいてくれのぉ。 |
|||||
その2 | 見出し(一部分の)文字の色を指定 | ||||
1)再びスタイルシートぢゃ。 今度は、ページ全体の設定ぢゃないからの。bodyの{ }内でなく、新しくその下へ追加ぢゃ。文字色が青の部分ぢゃ。 おお!そうぢゃ!見やすくする為に、ページの背景は白(white)、全体の文字色は黒(black)にしたぞい。
h1というのは、見出しのパターンの名前と思っておいてくれ。 特に設定しなくとも、普通の文字より大きく、太字で表示されるんぢゃ。 で、今回はスタイルシートの変更だけでは終わらんのぢゃ。 2)test1.htmlをメモ帳など(サクラエディタ)で開いてくだされ。 又は、test1.htmlをブラウザで開けてから、ソースを表示でもいいぞい。 で、下のように、赤い字のところを追加してくだされ。
<h1></h1>で囲んだ文字は、好きな文字でオッケーぢゃっ! つまり、スタイルシートで h1 に対して設定された内容が、<h1></h1>で囲んだ文字に適用されるという具合なのぢゃ。 お分かり願えたかのぉ? そこでちょいと、このhシリーズのタグの説明をしとこうかのぉ? これは、htmlのタグの1つでの、実は、 h1〜h6 までランクがあるんぢゃ。 で、それぞれ文字の大きさが決まっておって、いちいち文字の大きさを指定せずとも、勝手に見出し用として表示してくれるんぢゃ。見出しだから太字になっとる。 ということで、ついでだからちょこっと追加して、見出しタグ、hシリーズの違いを見てみましょう。 test1.htmlのソース(メモ帳などで開いて)を開け、赤い文字の部分を追加してみましょう。 面倒な人は、下の表のを全てコピーペースト&上書き保存でもオッケーですよん。
もっとhシリーズが続くんじゃないかと思った人は、同じようにh7,h8で文字を挟んでテストしてみてください。
指定の区切りが分かるように、一行開けて書いてもいいかもしれんのぉ。 |