第9回 CSSレイアウト練習の「作成チェック」4点指摘されました。気ままな改変におつきあいいただきありがとうございます。言い訳を書いてみました。
冒頭に「html{overflow-y:scroll;}」と指定したことによるご指摘です。
この指定は、ページに縦方向のスクロールバーを表示させるために入れました。ページが短いのにスクロールバーは必要ありません。又ページが長くなれば自動的にスクロールバーが表示されるのでこれまた必要ありません。この指定無しで、同じ形式やや長めのページを作り相互にリンクしたところ、長いページから短いページへのジャンプの度に微妙に左右にずれて表示されました。原因はページ右端にスクロールバーの表示/非表示にあること教えて頂きました。解決策は短いページもスクロールバーを表示させる、又は長いページにスクロールバーを表示させないのいずれかです。後者は少々不親切かと判断し、前者を採用することとして、あえてのこ指定を加えました。
指が滑りました。ユニバーサル・セレクタで「０px」に指定しているのでこの指定そのものが不必要なのではなどと考えながら書いていたらミスりました。ご指摘のとおり改善しました。
指定「line-height : 18px;」のところを「line-height : 1.5;」としたことによるご指摘です。
line-heightは、px、em、％等単位付きで指定する方法と単位無しで指定する方法があります。今回のようにピクセルで指定すると子孫要素にも同じ値が適用され、形が崩れるの防ぐことができますが、大きな文字を挿入しても同じ行間になるので、場合によっては文字が重なって表示されます。単位なしの場合は挿入される文字の大きさによって行の高さが再計算されます。例題の場合は18pxに指定しても全く問題はありませんが、この様式の汎用性を考慮しで無名数指定としました。本講習会3回目の「斬・Webオーサリングソフト」ページの行の高さは「line-height : 1.5;」を採用しています。
「margin-top : 10px; margin-bottom : 10px;」のところを「margin-top : 10px;margin-bottom : 5px;」としたことによるご指摘です。
見出し３の上下を同じ間隔で余白をつけるか、上下異なる値にするかの違いがあります。上余白を大きく下余白を小さくした方が見やすいと思いあえて差をつけました。
2013.2.10 記