ホームページを自作しよう≪JoyWave便利箱≫ ジョイのHTML勉強 ホームページを自作しよう≪JoyWave便利箱≫
Joyの動物百科≪犬編≫ の解説

HTML5とCSS3を使って作成したWEBページ（Joyの動物百科≪犬編≫）のスタイルシートの解説です。
≪注意≫正しく学びたい方は読まないでください。自分勝手な都合の良い解説です。

使ったスタイルシートの解説

@charset "UTF-8";
 先頭の行に必ず書きます。
今回のHTMLはUTF-8ですので、UTF-8と指定しました。		 
.zen {
	width: 960px;
	margin: 0 auto;
}
 ページ全体の横幅と左右の中央配置を指示します。横幅を指定（％でもよい）しないと中央配置ができません。
何故、margin: 0 auto; なのか？margin: auto; としても大丈夫でした。でも調べた他のサイトはすべて margin: 0 auto; でしたので合わせます。		 
.hidari {
	width: 216px;
	vertical-align: top;
	padding: 4px;
	float: left;
}
 リンク部（左側）の横幅と上詰め指定です。
ここで float: left; が出てきました。この<div>ブロックを次の<div>ブロックに対して左に配置する指示です。		 
.main {
	width: 718px;
	vertical-align: top;
	padding: 8px;
	margin-bottom: 5px;
	float: left;
	border: solid 1px #ddd;
}
 中央（右側）の横幅と上詰め指定です。ここも float: left; を使用します。何故だか判りませんが外すとうまくいかなかったからそうします。
このあとの<div>の空ブロックで float: left; を解除します。
また、横幅全体を960px、左側220px、右側740pxで設計しましたが、border、margin、paddingなどでpxを使用しているものと思われ、そのままではリンクと本文が左右に配置されなかったので、左・右とも少し小さな数値にしました。
色コードの書き方ですが、スタイルシートの場合3桁で指示できます。#ffffff は #fff、#00ccff は #0cf と省略できます。		 
.clr {
	clear: both;
}
 HTMLには <div class="clr"></div> と書いています。左右配置を解除する方法は他にもあるようですがこの方法が確実みたいです。
このウェブページでは float: left しか使っていないので、clear: both を clear: left でもいいのですが、将来 right が出てきてもこのまま使えるので both としました。		 
.sita,.syasindai {
	text-align: center;
}
 「,」で複数個所の指定ができます。ここでは、クラス指定で「.sita」と「.syasindai」の個所を中央配置にします。
ページ全体では margin: 0 auto; で指定したのに、ここでは text-align: center; なのは何故？
文字や画像はインライン要素と呼ばれ、この場合 text-align: center; が使えます。<div>や<table>はブロック要素なので margin: 0 auto; になります。
私は改行されて終わるものがブロック要素、改行されないものがインライン要素と覚えています。		 
.cell {
	list-style: none;
	padding-left: 5px;
	float: left;
	display: cell;
}

.cell li a {
	display: block;
	padding: 3px;
	text-decoration: none;
	color: #333;
}

.cell li a:hover {
	background: #fbb;
	color: #f00;
}

.cell li.now {
	background: #fdd;
}
 リンク部分をリスト形式で作成し、先頭の記号を非表示、背景や文字の色など指定しています。float: left; を使っていますが犬のページには必要ありません。この解説のリンク部で必要になるのでそのまま残しているだけです。
display: cell; や display: block; なども使っていますがよく判っていません。
.cell li a:hover はマウスを乗せた時の変化、.cell li.now は見ているページを示します。		 
.cell#fl {
	position: fixed !important;
	position: absolute;
	top: 220px;
}
 リンク部分を固定する（ページをスクロールしても動かさない）ための技法で、ここはかなり難しいです。
最後の top: 220px; は「上から220pxの位置に固定する」という意味で、bottom: 50px; なら「下から50pxの位置に固定する」意味になります。 上の場合は上からの距離、下の場合は下からの距離になっています。

私が書けるのはこのくらいで、正しいかどうかも判りません。使ってみてうまくいったので「良し」としています。