« 「その時歴史が動いた」危うし | トップページ | 入力欄が隠れてしまいます »

2004/01/26

横スクロールバーが出ないレイアウトを目指して

ココログ用のスタイルシートを作るとしたら横幅800ピクセルに固定ではなくて、窓の大きさに合わせて伸び縮みするレイアウトにしたいと思っています。「両サイドバー付き」でそれが実用になるかどうか試してみました。

プロフィールのページは作っていません。固定リンクのページだけです。

レイアウトだけ見るために文字サイズや書体などの指定は省いています。bodyに全体共通の文字色・背景色、リンクの色、ブロック要素divに共通のmargin、padding、borderを指定しました。またdivのうちid container、id banner、id left、id right、class sidebar、id center、class contentに背景色を指定して配置を見やすくしました。

大枠のレイアウト1~padding 8px~
普通に縦に並んだ状態。
大枠のレイアウト2~floatで幅の合計100%、padding 8px~
#left、#right、#centerをfloatで横に並べる。横幅の指定は%。合計100%にすると#rightが収まり切らず一番下へ行く。
大枠のレイアウト3~floatで幅の合計100%、padding 0px~
paddingを0にして節約しても#rightが収まり切らず一番下へ行く。
大枠のレイアウト4~floatで幅の合計96%、padding 0px~
さらに横幅の合計を96%にすると横に3つ並んだ。
大枠のレイアウト5~positionで幅の合計100%、padding 8px~
#left、#right、#centerをpositionで横に並べる。横幅の合計が100%でも横に3つ並んだ。しかし#containerの枠からはみ出してしまった。
大枠のレイアウト6~positionで幅の合計100%、padding 0px~
paddingを0にした。#containerにもpositionを指定した。Opera6で見ると横幅は一応#container内に収まった。IE6は右側がはみ出した。縦方向はどちらで見てもはみ出したまま。そしてIE6で縦スクロールバーが動かない! 
大枠のレイアウト7~positionでサイドバー右寄せ、padding 0px~
#containerのheightを指定した。縦スクロールバーが戻って来た。相変わらず#containerから縦にはみ出している。
大枠のレイアウト8~positionで上にずらす、padding 0px~
デフォルトテンプレートの「春」を参考に#centerのposition指定をやめた。全体が#container内に収まるようになった。#rightにtopを指定しないと#centerの下端の右下に行ってしまう。でも#bannerの高さは決まっていないので#rightのtopは0pxにでもしない限り中途半端な位置になる。とりあえず#bannerのmarginとwidthを指定して左脇に寄せた。

※1以外のレイアウトでは窓のサイズを小さくするとコメント本文入力欄が#centerからはみ出します。どんな指定をすればはみ出さないのかよくわかりません。伸び縮みスタイルシートでは3列並べるのはやめた方がいいのかも。

※カレンダーは文字サイズを調整しても無理な気がします。

自分ではWindows版IE6とOpera6でしか見ていません。他の環境の方で例えば「3列が重なって全然読めません」というような方がいらっしゃったら教えて下さい。

※追記

2004/01/27
コメント本文入力欄について訂正しました。追加記事は「入力欄が隠れてしまいます。」。
2009/12/11
サンプルページをniftyの@homepageからココログへ移しました。

|

« 「その時歴史が動いた」危うし | トップページ | 入力欄が隠れてしまいます »

ウェブログ・ココログ関連」カテゴリの記事

コメント

私の環境(Window98SE、IE6SP1、画面は800×600)だと、右サイドバーが全く見えません。たぶん、右のサイドバーにカレンダーがあるんだと思いますが、全く表示されていません。本当に3列なんでしょうか? 2列の間違いでは? という見え方をしてます。

あと、コメント本文入力欄の右端が切れてしまってます(背景とくっついてしまってます)。

参考になるでしょうか?

投稿: tsupo | 2004/01/27 02:51

念のために、htmlのソースを拝見させていただきましたが、今はサイドバーは左側だけなんですね。失礼しました。

投稿: tsupo | 2004/01/27 02:56

tsupoさん、コメントありがとうございます。
「梅ヶ枝」のデザインはデフォルト「エレガンス」のままで2列のレイアウトです。
本文のリンク先がそれぞれのサンプルになっているのですよ。分かりにくくてすみません。
しかしデフォルトのままでもコメント本文入力欄が切れて見える、というのは盲点でした。
http://juma.cocolog-nifty.com/branch/2004/01/post_2.html
ここで作ったサンプルをIE6で見ると、「清流」「無地」以外はみんな右端が切れて縦スクロールバーが見えなくなってますね。入力した文字はぎりぎり読めますが。
「春」は右にサイドバーがなければ切れないようです。
困ったことにOpera6では余裕で余白が出来てます。IE向けに調整すると小さくなり過ぎる可能性が……(汗)。

投稿: JUMA | 2004/01/27 12:01

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/8228/138887

この記事へのトラックバック一覧です: 横スクロールバーが出ないレイアウトを目指して:

» 800px×600pxが最小? [36ph engine]
JUMAさんのBlog 【梅ヶ枝】 横スクロールバーが出ないレイアウトを目指してを読み、サイドバーが長すぎることが気になっていた私も3段カラムにしてみました。 ... [続きを読む]

受信: 2004/01/28 16:56

« 「その時歴史が動いた」危うし | トップページ | 入力欄が隠れてしまいます »