横スクロールバーを避ける方法

『Useful Cascading Style Sheets (CSS) samples』（YEAR OF THE CAT）を読んで
http://desperadoes.biz/style/index.php
次の部分

スタイルシートを使ってサイトをレイアウトする際に、文法が正しいかということ同様、或いはそれ以上に大事なのことは、ブラウザが、そのスタイルシートをサポートしているかどうかということです。

　その通りだと思う。
　So-net blogのスキンが変になってから、スタイルシートに関するあちらこちらのサイトを見て回っている。そして上記のサイトを見つけた。同じサイトの「段組レイアウト」の所には次のように書いている。

ネットサーフィンをしていると、floatを使って段組しいていて、レイアウトが崩れているサイトを時々見かけます。ほとんどの場合が、左のみwidthを指定しているが、右に指定していない場合です。

　So-net blogのスキンもfloatを使って段組している。しかし私が利用している「エコ」スキンでは右側もwidthを指定しているようである。「クリスマスブルー」スキンでは「エコ」スキンとは異なるレイアウトの崩れ方であるが右側もwidthを指定しているようである。サンプルの「TYPE A-1」や「TYPE A-2」のようにも見えるが、main要素は「float:right;」であり、親要素container（body要素の子であるが、main要素やside-a要素から見れば親要素に当たりそうだがcontent要素が親でcontainer要素はcontent要素の親かもしれない）の幅780pxはside-a要素の幅208pxとmain要素の幅570pxの合計よりも広い。それでもレイアウトが崩れている。ただcontainer要素とcontent要素の幅を800pxにすると改善することから、やはり幅の指定の問題のような気がする。

　さて、ここからが本題である。
　上記サイトの「TYPE C-5」サンプルが気に入った。ブログのスキンは閲覧するウィンドウの最低幅が指定されていることが多いと思われる。So-net blogも同じである。すると「TYPE A-1」サンプルの所に書いてあるように『小さめのモニターなどでは全画面表示にしなくてならない』し『横スクロールしないと閲覧できない事もあります』となる。すなわち、ウィンドウの幅を狭くすると横スクロールバーが出てくるのである。「TYPE C-5」サンプルではウィンドウの幅を狭くしても横スクロールバーを出さずに閲覧できる。この「TYPE C-5」サンプルを参考にして私のブログのスタイルを変えてみた。

　まず、追加のスタイルを外部ファイルを使って指定することにして、「@import」をサイドバーに次のように記入した。

<style type="text/css"> @import url("http://www002.upp.so-net.ne.jp/self/robamimi/blog-eco-style.css"); </style>

　しかし「@import」は機能しなかった。So-net blogではサポートしていないのかもしれない。また、WindowsのIE3.0はサポートしてないし、Netscape 4.0で閲覧すると問題が生じるらしいし、So-net blogでは「スキンCSS編集機能」が追加されるようなので（参照）、それを待った方が良いかもしれない。でも、やはり試してみたくて、サイドバーに次のスタイルを追加した。

#container {
width:85%;
background:#ffffcc url("/_skin/system/101/images/banner-bg2.jpg") repeat-x left top;
}
#main {
float:none;
width:auto;
margin-left:214px;
}
.articles { width:auto;}
#footer { width:85%; }
.articles-body img { width:95%; }
.comment-input { width:95%; }
.trackback-button { font-size:90%; }

　今回は他にも追加したが、段組に関係するのはこれだけである。
　「#container」には「margin:0 auto;」はすでに指定されていたので「width:85%;」だけを加えた。以前は「width :770px;」だった。「background」は「no-repeat center」を「repeat-x left」に変えた。これは「#container」の幅がバナーの図「banner-bg2.jpg」の幅を超えた場合に隙間ができるのを避けるためである。
　「#main」はまず「float:right;」と指定されていたのを「float:none;」と解除し、「width:540px;」を「width:auto;」に解除した。幅を絶対値で指定するのをやめたのである。「.articles」の「width:auto;」も同じである。「#footer」はcontainer要素と同じ幅にするために「width:85%;」を指定した。「#main」の「margin-left:214px;」はside-a要素の幅202pxとside-a要素とmain要素の隙間12pxを足し合わせて指定した。
　「.articles-body img { width:95%; }」はウィンドウの幅が狭くなることで図がはみ出る（追記：これはMacOS9.2.2+IE5.1.7での現象であって、WindowsのIEではmain要素がside-a要素の右下に移動してしまう）のを防ぐためであるが必要ないかもしれない。いつか解除するかもしれない。これを指定すると小さな図も大きく表示されてしまうので、サイズを変えたくない図には「style="width:○○px; height:○○px;"」を指定しなくてはいけない。「img」タグで用いる「width=○○px height=○○px」は無視されるようである。「.comment-input { width:95%; }」は図と同じようにコメント欄がはみ出るのを防ぐためで、「.trackback-button { font-size:90%; }」は「この記事について書く(簡単トラックバック)」ボタンがはみ出るのを少しでも防ぐために文字を小さくしたのだが、どちらも必要ないかもしれない。

　上のスタイルシートに辿り着くまでにかなりの時間を要した。一番の原因はmain要素で「float:none;」と解除するのを忘れたためである。「margin-left:214px;」ではなく「padding-right:12px;」を指定して誤魔化そうとしたがNetscape7.02でレイアウトが崩れてしまった。（Netscape7.02は別の原因で表示されないトラブルが継続中）。IE以外のブラウザでも崩れていただろう。「padding-right:12px;」で誤魔化そうとした際には図の大きさを縮小しないとmain要素がside-a要素の下に移ってしまうトラブルもあった。「.articles-body img { width:95%; }」はその時に指定した名残でもある。とにかく、main要素に「float」を使ってはいけなかったのである。side-a要素の右に表示したければside-a要素の幅だけ「margin」を指定すれば良かったのである。疲れた。
　明日はもう一つスタイルシートについて書く予定。そちらは目的通りに表示する方法が見つからなくて困っている。

追記（2007/1/1）：
　上の仕組みではWindowsのIEで閲覧する際に、ウィンドウ幅を狭くしている途中でmain要素がside-a要素の右下に移動してしまうトラブルが発生した。
　どうやらWindowsのIEではスペースのない長い英文を改行できないことが原因のようである。例えばＵＲＬはMacOS9.2.2のIE5.1.7では「/」の所で改行してくれる。さらに狭くすると枠をはみだして表示してくれる。しかしWindowsのIEではそのような配慮はないようである。それで英文の幅よりもmain要素の幅が狭くなるとmain要素がside-a要素の右下に移ってしまうらしい。さらに強引に狭くするとウィンドウに横スクロールバーが登場する。飽くまでも表示領域の幅を狭めたくないようである。
　引用タグの部分は「blockquote { width:80%; overflow:auto; }」で対応しようと思ったのだが、WindowsのIEでは問題ないが、MacOS9.2.2のIEでは引用文が全て消えてしまったので使えない。悩んでいる最中である。ウィンドウ幅を変えて閲覧できるようにするスタイルの指定は諦めるしかないのだろうか？
　ちょっと不便に思えてきたので、このエントリーで紹介したスタイルの指定は改善策が見つかるまでは解除することにした。残念。

追記（2007/1/1）：
　blockquoteの中に関してはWindowsのIE専用らしい「overflow-X」を使うことでWindowsのIEとMacOS9.2.2のIEの両方で上記の症状を避けられるようである。しかしIE以外ではトラブルが起こるらしい。また、articles-bodyに「overflow-X」を使うと長過ぎる英文（ＵＲＬなど）は変化せずそれ以外の文章だけが狭くなる。articles-bodyの幅はその英文よりも狭くならず、文章の幅だけが狭くなるので、見栄えが悪くなる。スクロールバーはウィンドウそのものに発生する。ただ、main要素がside-a要素の右下に移る現象は見られなくなった。ところで、blockquoteやarticles-bodyに「overflow」や「overflow-X」を使う場合、「width」の指定が必須のようである。

追記（2007/1/2）：
　このエントリーで紹介したmain要素で「float:none;」と「float」を解除する手法を用いると、【「エコ」スキンの改善法】で紹介した「#content { overflow:hidden; }」が必要なくなることが分かった。やはりあのトラブルもmain要素の「float」が原因だったようである。でも、main要素に「float」を使うとcontainer要素の背景色ではなくbodyの背景色になってしまう理由は分からない。

追記（2007/1/7）：
　「追記（2007/1/1）」と同じトラブルがNetscape7.02でもありそうです。