 やっぱり属性の違ってるものは、小見出しのデザインも違っていた方がいいからやってみるぞい。
前のと比べる為に、わしは、久しぶりに新しい名前をつけようかいのぉ。
前回の最終ページのhtmlファイルを名前をつけて保存で、sample11.html、
cssファイルを、style11.cssとするぞい。
ぢゃが、お前さん達は自分の好きな名前でも、そのままでもお好きなようにしてくだされ。
説明は sytle11.cssでいくから、そこんところ気を付けてくだされや。
さっそくcssファイルの変更といくぞい。
前回の最後のcssファイルが左側ぢゃ。
小見出しを変更ぢゃから、問題は、h2 のところぢゃのぉ。
それを右側のように変更してくだされ。
body {
background-color: white;
color: black;
margin-left: 5em;
margin-right: 5em;
}
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;
clear: both;
}
p {
line-height: 1.5em;
}
img {
float: left;
margin-right: 1em;
margin-bottom: 1em;
}
a:link {
color: green;
text-decoration: none;
}
a:visited {
color: red;
}
a:hover {
color: blue;
background-color: yellow;
text-decoration:UNDERLINE OVERLINE;
}
|
body {
background-color: white;
color: black;
margin-left: 5em;
margin-right: 5em;
}
h1 {
text-align: center;
color: white;
background-color: green;
font-size: x-large;
font-family: "HG明朝E";
}
h2 {
color: green;
font-size: large;
clear: both;
}
h2.s-title {
border-color: green;
border-style: solid;
border-width: 1px;
padding-left: 2em;
}
h2.link {
background-color: orange;
font-size: normal;
clear: both;
}
p {
line-height: 1.5em;
}
img {
float: left;
margin-right: 1em;
margin-bottom: 1em;
}
a:link {
color: green;
text-decoration: none;
}
a:visited {
color: red;
}
a:hover {
color: blue;
background-color: yellow;
text-decoration:UNDERLINE OVERLINE;
}
|
つまり、同じh2をクラス分けして、それぞれのデザインを指定するということぢゃ。
これもcssファイルを見てその指定先の内容がすぐわかるように、それにあったクラス名をつけることぢゃな。
h2.s-title ・・・サブタイトル用ぢゃから、この名前にしたぞい。
h2.link ・・・リンクル用ぢゃから、この名前にしたぞい。
h2 の指定もあることに気付かれたと思うが、これは、クラスが違っていても、同じh2学年（笑）なら、全てに共通して適用される設定内容を書いておくのぢゃ。
これのよってクラス分けしても、共通部分の同じ指定を何度も書く必要がなくなるわけぢゃ。
わかったかのぉ？
わしかこんな感じにしたが、それぞれ自分の好きなデザインになるよう、{ }内に記述してくだされ。
ぢゃが、cssファイルを書き換えただけでは、ページは変わらん、ということも、もうわかっておるぢゃろうが、それは、htmlの方に<h2></h2>で挟んだところはあっても、クラス分けしたところがないからなんぢゃ。
ぢゃから、cssファイルに合わせ、記事のタイトル部分の<h2>ところを<h2
class="s-title">として、クラス名を書いて分けるのぢゃ。終了を示す最後の</h2>は、そのままでいいんぢゃぞ。
一応htmlを表示しておくとしようかの？赤と青の部分が変更というか、追記したところぢゃの。
cssファイルをわしみたいに新調（笑）した場合は、緑色の文字のところのスタイルシート名もきちんと合わせてくだされよ。
<html>
<head>
<title>ページ見本１</title>
<link rel="stylesheet" type="text/css" href="style11.css"><!--cssファイルの呼び出し-->
</head>
<body>
<h1>創作絵本／うさぎさんと少女</h1><!--h1タグで囲んで、大見出しとする-->
<br>
<br>
<h2 class="s-title">［その１］出会い</h2><!--h2タグで囲んで、小見出しとする-->
<p><img border="0" src="ikkenya2.jpg" width="300" height="500">ある日、近くの森を散歩してい
たアンジーは、道に迷ってしまい、森の奥へと入ってしまいました。<br>
小川のほとりに見つけた小さなお家。そこで洋服を着て人間のように歩いているウサギに出会いまし
た。<br>
<br>
「お嬢さんの名前は？」<br>
「アンジー。でもみんなは私のことをアンって呼んでるわ。」<br>
「アン・・・気に入った。その名前をもらおう。」<br>
「え？もらうって？」<br>
「でも、私は男だから、そうだな、アンドリューを正式名としようか。通称アン。」<br></p>
<h2 class="s-title">［その２］レースは始まった</h2><!--h2タグで囲んで、小見出しとする-->
<p><img border="0" src="ikkenya3.jpg" width="300" height="200">
ウサギと一緒にその夜は、その家で泊まったアン。<br>?
翌朝、ウサギはアンの寝ている間に出かけてしまいました。<br>
「大変だよ！名前を返してもらわないとお家に帰れないよ。だって、今頃みんな君の事など忘れてる
よ。」<br>
「ええっ？それってママもパパも？」<br>
「そうだよ。早く返してもらわないと、あのウサギが君ん家の子供になっちゃうよ。」<br>
「そ、そんなの困るわ。」<br>
<br>
ウサギが向かった次の家の場所を聞き、女の子はウサギを追いかけ始めました。<br></p>
<h2 class="link">［リンク］</h2>
<a href="test1.html">●テスト１</a><br>
<a href="test6.html">●テスト６</a><br>
</body>
</html>
|
どうぢゃ？変わったぢゃろう？
こんな感じになっておると思うが。
小見出しごとにそうやってクラス分けをし、数種類用意しておくことも可能ぢゃ。
勿論大見出しもやれるぞい。
共通部分はクラス名なしの中にまとめて記述するということも忘れずにの。
それから、クラス名は、分かりやすい名前にすることぢゃ。変更するとき楽だぞい。
このクラス分けは、他の設定事項にも応用できるんぢゃ。それはまた後日説明するがの。
今回は短いがここまでぢゃ。
|