その１

大見出しの文字を中央揃えにする

まずは、スタイルシートぢゃ。style6.cssで保存してくだされ。
見出しの文字の大きさが大きすぎるんで、１ランク下げて、x-largeにしたぞい。

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

h1 {
text-align: center;
color: red;
font-size: x-large;
font-family: "HG明朝E";
font-style: italic;
}

h2 {
color: blue;
font-size: large;
}

text-align: center; がstyle5.cssの内容に、追加したところぢゃぞい。
これだけで、もう中央寄せになるんぢゃ！
つまり・・・訳すとぢゃな・・・
text（文字）-（の）align（横位置）:（は） center（中央）;（です）となるのぢゃ。

そして、いつものごとく、webページも新規作成するぞい。
ファイル名は、test6.htmlぢゃな。
内容も追加しておるからのぉ。そうしたら、それを開いて、見出しがきちんと中央寄せになっておるか確認してくだされ。

<html>
<head>
<link rel="stylesheet" type="text/css" href="style6.css">
</head>
<body>
<h1>スタイルシートに挑戦！</h1>
<h2>その１・フォントサイズ</h2>
文字の大きさを変えてみる
<h2>その２・書体変更</h2>
文字の書体を変えてみる
</body>
</html>

その２

大見出しに背景色を設定して白抜きにする

白抜きに、というのは、文字の色を白で指定すればいいというのは、ここまで学習してくださった人にはお分かりになると思うが、問題は背景色ぢゃの。

にこにこ顔の助手

え？そうなんですか？背景色もページ全体の背景色を指定したときみたいに、今度はbodyの{　}内じゃなく、同じように、h1の{　}に記入すればいいんじゃないんですか？

おおっ！いいところに目をつけたのぉ！そうぢゃ。つまりは、そういった指定用語（htmlはタグと言うが、cssはなんと言うんぢゃろ？本には書いてないが・・）は、共通しておるからの。
ということで、下のようにcssファイルを書き加えてくだされ。

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

h1 {
text-align: center;
color: white;
background-color: green;
font-size: x-large;
font-family: "HG明朝E";
}

h2 {
color: blue;
font-size: large;
}

上では大見出しの背景色を緑に指定しておる。文字色は、白ぢゃぞ。
ぢゃが、好きな色にしたり、文字の大きさも変えたり、中央寄せを外してみたり、いろいろテストしてみてくだされや。

その３

小見出しを枠線で囲んでみよう

では、今度は、小見出し（h2）を変えてみるぞ！
少し変更項目が多いが、頑張ってくれ。

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

h1 {
text-align: center;
color: white;
background-color: green;
font-size: x-large;
font-family: "HG明朝E";
}

h2 {
border-color: green;
border-style: solid;
border-width: 1px;
padding-left: 2em;
color: blue;
font-size: large;
}

こうなっておればいいんぢゃが？どうぢゃの？

それでは解説ぢゃ。

border（線）-（の）color（色）:（は） green（緑）;です
border（線）-（の）style（スタイル）:（は） solid（実線）;（です）
border（線）-（の）width（太さ）:（は） 1px（１px）;（です）
padding（余白）-（は）left（左）:（に） 2em（２em）;（です）＝文字の左側に2em空白を置く　

枠線のスタイル（線種）としては、
solid（実線）、double（二重線）、dashed（破線）、dotted（点線）、groove（へこんだ線）、ridge（盛り上がった線）、inset（全体が凹んで見える線）、outset（全体が盛り上がってみえる線）
などがあるんぢゃが・・ブラウザによっては表示されんのもあるかもしれんところが痛いのぉ。

にこにこ顔の助手

線種の確認はこちらでどうぞ

でもって、枠線というのは四角いから、当然辺が４つということはお分かりぢゃの？
ぢゃから、border-color、style、width、のそれぞれは、各辺で指定もできるんぢゃ。
つまり、　border-left-color: blue; とかいいうように、　border-の次に、left（左）、right（右）、top（上）、bottom（下）を入れて指定すればいいんぢゃ。
　

にこにこ顔の助手は～～い、お疲れ様でした。
えー、おまけとして、大見出しの部分に枠線をつけてみたものが、これです。
これは、枠の周囲を色違いで変えてありますが、線種とか線の太さなども、それぞれ違った線にすることもできます。入力するのは面倒ですけどね。いろいろ試してみてくださいね。

次回は、ページの背景に画像を設定する方法、あれこれです。
質問、間違いなどのつっこみ、訂正指摘など、BBSへお気軽にどうぞ。