その１

ＩＤをつけたブロックの内のデザインを指定

いつものように先回の最終ページを変更していくが、わしは、またファイル名を変更するからの。見本ページはsample16.htmlとstyle16.cssぢゃ。

にこにこ顔の助手

sample16のようなページができてない方は、sample16を表示させてマウス右クリック、ソースを表示させて、そのソースをメモ帳（テキストエディタ）にコピペして作ってください。同様にcssファイルも作ってくださいね。
cssファイルは、sample16.htmlのソースを表示させると、ファイルへのリンクがページの上の方に書いてあるので、そのファイル名を、sample16.htmlを表示しているブラウザのURL（アドレス）欄の、sample16.htmlのところと変えると、cssファイルが表示されますよ。
（で、先回の宿題の答えがわかりますね。・・と言っても分かりづらいですか？
　cssファイルURLはこれになります。→http://c-leaf.cool.ne.jp/else/css/sample1/style16.css　）

先回、タグにＩＤ名をつけてブロック分けしたんぢゃが、そのＩＤを設定した中身について指定できるんぢゃ。まー、今までやったクラス分けと同じ感じぢゃの。
記述方式がちょいと違うだけぢゃ。

ということで、さっそくスタイルシートを変更していくぞい。
メニュー部分をデザインといこうかの。
先回のcssのMENU部分の指定箇所に下のように追加してみた。色のついている文字のところがそうぢゃ。

ついでに、MENUの文字がちょいと大きすぎるような気がしたから、h2.link　の文字の大きさの指定をsmallにしたぞい。

div#menu {
width: 20%;
float: left;
background-color: lightyellow;
margin-left: 1em;
font-size: 0.8em;
padding: 0.7em;
border-style: dotted;
border-style: dotted;
border-color: darkred;
border-width: 2px;
}

さて、個々の解説ぢゃ。

div#menu	ID「menu」のブロック内の指定だということを宣言
background-color: lightyellow;	menu内の背景色は、lightyellow ※background: 画像名;　にすれば、背景画像を敷くことができる。
margin-left: 1em;	左側に余白を1文字分設ける
font-size: 0.8em;	文字の大きさは、通常サイズ×０.８の大きさ
padding: 0.7em;	メニューブロックの内側の余白は０.７文字分
border-style: dotted; border-style: dotted; border-color: darkred; border-width: 2px;	枠線は、（スタイル）点線　（色）darkred　（線の太さ）2px

　※マージン、パディングは、それぞれ四隅（left、right、top、bottom）

マージンやパディングをまとめて設定するには・・・

●padding: 0.5em;
　　　…　数値が１つだけの時　＝　上下左右の余白が0.5文字分
●padding: 0.5em 0.2em;
　　　…　数値が２つの時　＝　上下は0.5em、左右は0.2emの余白
●padding: 0.5em 0.2em 0.3em;
　　　…　数値が３つの時　＝　上は0.5em、左右は0.2em、下は0.3emの余白
●padding: 0.5em 0.2em 0.3em .01em;
　　　…　数値が４つの時＝４つバラバラの数値　＝　上は0.5em、左右は0.2em、下は0.3em、左は0.1emの余白

※上の例では、paddingだけですが、marginも同じです。

で、ページはこうなっとるかいの？
例のごとくいろいろ変更してどうなるかテストしてみてくだされ。

こういう風にしてクラス分けはいろんなタグに応用できるんぢゃ。
セルもクラス分けして設定もできる。が、あんまり細かくすると、htmlにクラス名を追加するのも大変かもしれんのぉ。（ｗ

その２

特定のブロック内のリンク表示の色を変える

今現在リンク表示の色は、スタイルシートでページ全体に指定しておる色ぢゃが、
これをMENU部分だけ目立つように変えてみたい場合をやってみようかいの。

で、ページ全体の色と変えたことがわかるように、htmlの方で、更新記録の方をリンク付けしてみた。リンクさせてないと普通の文字になってしまうから、適当なページにリンクしておいてくだされ。リンク先はこの際問題外ぢゃ。

下の部分をスタイルシートに追加ぢゃぞ！

div#menu a:link {
color: brown;
}
div#menu a:visited {
color: navy;
}

menuブロックの中の未訪問リンクの指定と宣言
色は、茶色

menuブロックの中の訪問済みリンクの指定と宣言
色は、紺色

勿論、オンマウスの状態とか、指定もできるぞい。
ページに指定してあるリンクの装飾とは変えたい部分だけ指定すればいいんぢゃぞ。

【第10回】で学習したリンク文字の色変え、装飾などを今度は、そのブロックID（この場合は、MENU部分＝div#menu）のあとに、半角スペースを空けて、その後に指定したいリンク状態を続けて書くんぢゃ。
未訪問の場合、訪問済みの場合、マウスポインタを置いた場合とあったことを思い出してくだされ。

さて、個々の解説を一応しておこうかの。

div#menu a:link	menuブロックの未訪問についての指定だと宣言
color: brown;	色は茶色
div#menu a:visited	menuブロックの訪問済みについての指定だと宣言
color: navy;	色は紺色

で、ページはこうぢゃ。どうちゃの？
ページ全体のリンク表示指定を読み込んでおる「更新履歴」のところと色が変わっておるぢゃろ？

もちろん、例で指定したことだけでなく、【第10回】でリンク表示について学習したことすべて、そのブロック内のみの変更ができるのぢゃ。

にこにこ顔の助手
例のごとく、いろいろテストしてみてくださいね。

さて、お次もブロック内の編集をしていくぞい。
ｍｅｎｕ部分の変更ぢゃ。