◆第１4回　表（テーブル）のクラス分け＆セル内の文字の表示位置を変える　◆

その１

同じページの表ごとにデザインを指定する

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

まずは変更したcssを見てくだされ。
第11回で小見出しごとに違った表示をした時と同じように、テーブルもクラスわけぢゃ。
そして、やっぱりクラス名をつけない場合の指定は、tableという学年（笑）全体に影響する。ぢゃから、クラス名をつけてないその１の表の方は、学年用の指定が反映されるのぢゃ。

html, body{
scrollbar-3dlight-color: yellow;
scrollbar-hightlight-color: blue;
scrollbar-arrow-color: red;
scrollbar-face-color: white;
scrollbar-shadow-color: gray;
scrollbar-darkshadow-color: black;
scrollbar-track-color: lightblue;
}

body {
background-color: white;
color: black;
margin-left: 5em;
margin-right: 5em;
}

table {
border-color: blue;
border-width: 1px;
}

table.2 {
border-width: 10px;
background-color: lightblue;
border-style: dotted;
}

th {
background-color: yellow;
border-color: green;
border-width: 5px;
}

td {
border-style: solid;
border-color: orange;
border-width: 2px;
}

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;
}

htmlの方のその２のtableタグに、きちんとクラス名をつけないとダメだぞい

<html>

<head>

<title>cssで表のデザイン・テストページ</title>
<link rel="stylesheet" type="text/css" href="style14.css">
</head>

<body>

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th colspan="2">お話その１</th>
</tr>
<tr>
<td>プロローグ</td>
<td>ある日のことです。あとは読んでのお楽しみ（おい！</td>
</tr>
<tr>
<td>その１</td>
<td>野原でうさぎを見つけたアンは・・・</td>
</tr>
<tr>
<td>その２</td>
<td>穴へおっこちた？</td>
</tr>
</table>
<p>　</p>
<table border="1" cellpadding="0" cellspacing="0" class=2>
<tr>
<th colspan="2">お話その２</th>
</tr>
<tr>
<td>プロローグ</td>
<td>一作はカシキとして漁船に</td>
</tr>
<tr>
<td>その１</td>
<td>いきなり大嵐？</td>
</tr>
<tr>
<td>その２</td>
<td>嵐は去ったものの？</td>
</tr>
</table>

</body>

</html>

さて、個々の解説ぢゃ。

table { border-color: blue; border-width: 1px; }	tableタグという学年全体用の設定ぢゃ。線の色は青。線の太さは１px
table.2 { border-width: 10px; background-color: lightblue; border-style: dotted; }	線の太さは１０px 背景色は、lightblue 線種は、点々

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

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

その２

セル内の文字の表示位置を変える

論より証拠。さっそく書き換えといくぞい！

html, body{
scrollbar-3dlight-color: yellow;
scrollbar-hightlight-color: blue;
scrollbar-arrow-color: red;
scrollbar-face-color: white;
scrollbar-shadow-color: gray;
scrollbar-darkshadow-color: black;
scrollbar-track-color: lightblue;
}

body {
background-color: white;
color: black;
margin-left: 5em;
margin-right: 5em;
}

table {
border-color: blue;
border-width: 1px;
}

table.2 {
border-width: 10px;
background-color: lightblue;
border-style: dotted;
}

th {
background-color: yellow;
border-color: green;
border-width: 5px;
}

th.2 {
text-align: left;
}

td {
border-style: solid;
border-color: orange;
border-width: 2px;
}

td.2 {
text-align: right;
}

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;
}

今回も、htmlの方にも、スタイルシートの指定に合わせてクラス名をつけないとダメだぞい

<html>

<head>
<title>cssで表のデザイン・テストページ</title>
<link rel="stylesheet" type="text/css" href="style14.css">
</head>

<body>

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th colspan="2">お話その１</th>
</tr>
<tr>
<td>プロローグ</td>
<td>ある日のことです。あとは読んでのお楽しみ（おい！</td>
</tr>
<tr>
<td>その１</td>
<td>野原でうさぎを見つけたアンは・・・</td>
</tr>
<tr>
<td>その２</td>
<td>穴へおっこちた？</td>
</tr>
</table>
<p>　</p>
<table border="1" cellpadding="0" cellspacing="0" class=2>
<tr>
<th colspan="2" class=2>お話その２</th>
</tr>
<tr>
<td>プロローグ</td>
<td>一作はカシキとして漁船に</td>
</tr>
<tr>
<td class=2>その１</td>
<td>いきなり大嵐？</td>
</tr>
<tr>
<td>その２</td>
<td>嵐は去ったものの？</td>
</tr>
</table>

</body>

</html>

さて、個々の解説ぢゃ。
お話その２の見出しセルを左寄せ、その２のセルを右寄せに指定してみた

text-align: left;	見出しセルぢゃから、中央寄せになっておるのをわざわざ左寄せにしてみた。（ｗ
text-align: right;	こっちは右寄せ指定。

で、ページはこうぢゃ。どうちゃの？

文字位置の指定としては、下の表ののようなものがある。
text-align（文字の位置）：（は） ○○；（です）　の形で記述してくだされのぉ。

left	左寄せ（ぢゃが見出しセルでなければ、通常何も指定してなければ左寄せで表示されるぞい。）
center	中央寄せ（htmlで見出しセル指定をしておけば、指定しなくても中央寄せにはなるが、太文字になってしまう。太文字にしたくなくて中央寄せにしたいセルは、tdとしてこれを使う。）
right	右寄せ

にこにこ顔の助手
でも、htmlの方でもできますよね？
文字の表示位置なんて、リニューアルで変更するときも少ないというかほとんどないんじゃないかと思うんで、わざわざスタイルシートでやらなくてもいいような気がしますけど？

まー、そうなんぢゃがの。一応説明しといたまでぢゃ。（笑

その３

セル内の縦の位置指定

ぢゃから、これも余分かもしれんが・・・・一応説明しておくとしようかいの。
セルの高さが高い場合、普通、真ん中に表示されるんぢゃが、これを上にしたり、下に持ってきたりもできる。
もちろん、これも、htmlでできるんで、ソフトでならセルのプロパティ設定で一発なんぢゃがのぉ。（ｗ

上と同じように、thやtdの指定に書いてくださればよい。
下の表はわざと高さを文字より高く設定し、スタイルシートで指定して表示させておる。
中央揃えのセルには、htmlの方でわざと下表示に指定してみたぞい。

vertical-align: top;	上揃え	（htmlでは設定なし）
vertical-align: middle;	中央揃え	（このセルの行はhtmlでわざと下に設定）
vertical-align: bottom;	下揃え	（htmlでは設定なし）

さて、お次からはいよいよブログスタイルの解析というか、ブログテンプレートの解析準備というか・・ページの中身をブロックに分けて段組を作ったりメニュー部分を設けたりしていこうかのぉ？
そして、ホームページにもそれで得た知識を組み込んで、ページ作成していってみよう。
（一気にはせぬぞい。順番にやっていくから大丈夫だぞい。）