【スタイルシートを使ったホームページ作成♪】
−初心者の初心者による初心者のためのCSS入門−


◆第20回 ブロックの表示高さを指定してスクロールバーをつける ◆

その1 ブロックの高さを決め、はみ出した分はスクロールバーで
あまりダラダラと下に長く続くページにはしたくない人にお勧めぢゃの。
一応見本としては、まとめのページの1ページを使って説明するとしようかいの。
メニューが結構あるからのぉ。

さて、今回もまた一気に行ってしまおうかいの?

●使用例
※div#menuの指定の中に、赤字と青字の部分を追記

height: 300px;
overflow: auto;
そのブロックの表示高さを指定
それ以上あった場合の指定
auto:必要な時だけスクロールバーを表示
scroll:常にスクロールバーを表示
hidden:はみ出した部分を表示しない


上の指定をした場合の見本ページはこれぢゃ!その2行がない場合が、これぢゃ。
おっと、それから、見本ページには、menuブロックのみのスクロールバーの指定も追記しておる。
同じように、div#menu の指定の中に、スクロールバーの色指定のプロパティーを追記しておけばいいんぢゃ。
参照:【第12回】クロールバーに色をつける

 
にこにこ顔の助手
こうすると、もしもずうっと下の方まで長いメニューがあったとしても、すっきりしますよね。
スクロールバーの方が目障りだと思われる方は別として。(笑


そうぢゃ。そして、何もメニューに限られたことぢゃないんぢゃ!
ブロックごとの指定ぢゃから、本文にも応用して、こじんまりしたWEBページにすることもできるんぢゃ!

にこにこ顔の助手
なるほど・・・でも、あまりたくさんあっちにもこっちにもで使うと、スクロールバーばかり目について、うるさくもなりそうですね。用はすっきりまとめることが肝心。多用はよ〜く考えて、といったところですね。


そうぢゃ、そうぢゃ。何事も適度にの。
と言うわけで、一応入門講座はこれで終了ぢゃ。
お疲れさん!もうここまで来りゃ、スタイルシート辞典など見ても、理解できると思う。
がんばって素敵なページを作ってくだされ。

にこにこ顔の助手
ほんとにお疲れ様でした。
講座内容は、今後必要にかられて新しいことを調べた場合、増えることもあると思います。そのときはまたよろしくお願いします。
まとめのスタイルシート簡易辞典も、よかったら参考にしてくださいね。
余計なセリフがない分、読みやすいかも?


ん?なんか今気になることを言ったような?



にこにこ顔の助手
あ、いえ、な〜〜にも言ってませんよ(w
教授もお疲れ様でした!



それでは、またいつかお会いしましょうぞ!
お元気での!



Back INDEX 実践ページ◆ ページトップ