MS Access Tips/Sample and VBA and Blog customize etc...

リキッドスタイルに最大幅と最小幅を設定

最近、このブログをちょくちょく見に来ている人は、毎日、ブログのどこかが変化しているいることに気がつかれたでしょうか。そうです、カスタマイズにはまりました。

昔、ホームページを持っていた頃は一通り、HTMLは覚えたのですが、その後、WEBの世界も進化して、CSS とか ブログ とか名前だけで中身はまったく分からなくなっていのですが、ブログを FC2 に変更していじるようになってから CSS(スタイルシート)、JavaScript を少しずつ勉強して、いろいろいじっては実験して、遊んでいます。

どこをどういじったか、分からなくなりそうなので、いじったところをブログに載せておこうと思います。

とりあえず、地味な部分ですが、結構、苦労したので、備忘録として。

このブログはプラウザのウィンドウのサイズ変更によって表示領域も追随して変化します。リキッドスタイルというらしいです。それに対して、表示幅が固定なのはソリッドスタイルだそうです。

このスタイルのメリットはウィンドウサイズにかかわらず無駄な空白でできないということです。しかし、デメリットとして、画面の幅を狭くするとレイアウトが崩れて読みにくくなる、広くしすぎると1行がやたら長くなりまた読みづらくなるということです。

MinWidth1.gif

そこで、最大幅と最小幅を設定できないか調べてみました。

難易度:

スタイルシートのリファレンスを調べてみると、min-width, max-width というが使えそうです。

私のテンプレート(death)の HTML CSS を見てみると下記のようなブロック構造になっています。 (後で気がついたのですが、テンプレートとしてはかなり特殊な構造のようです。)

テンプレート HTML

テンプレート スタイルシート (位置決めに関係ある要素のみ抽出してます。)
というように右ブロックを absolute で位置決めしているようです。 そこで、

テンプレート スタイルシート とbodyに 最大値、最小値を設定してみました。

MinWidth3.gif

失敗です。幅を小さくすると横スクロールバーが現れて幅が固定されるのですが、メインの記事 にサイドメニューがかぶってしまいました。また、広くすると、記事本体は、最大幅で固定されるのですが、サイドメニューが右に張り付いたままなので、記事とサイドメニューが離ればなれになって見栄えがよろしくないです。 .left に max-width, min-width を設定しても同じ結果です。

そこで、全体の親となるブロックを作成して、その中に、他のブロックを入れてしまうことにしました。 (他のテンプレートを見てみると、このような構造が一般的なようです。) で、そのコンテナに、max-width, min-width を設定します。

としてみました。

MinWidth4.gif

うまく行きました。最小幅以下になると横スクロールバーが現れて、記事本体にサイドメニューが重なることもありません。広くした場合は、サイドメニューも最大幅の位置に固定されて、離ればなれになることはありません。

注意点は、親ブロックに、position:relative; を設定しておくことです。そうしないと、子の位置決めの基準がbodyになってしまうのでレイアウトが崩れてしまいます。

さて、これでうまくいったと安心して、さっそく、テンプレートを更新しました。
ところが、しばらくして、自分のブログを最後までスクロールして、FC2の1行広告が表示されてないことに気がつきました。
これは、えらいことです。規約違反で、公開停止されるおそれがあります。

いろいろ悪戦苦闘して、 1行広告の載っているフッターブロックにも position: absolute; を設定してボトムに位置決めすることで表示できるようになりました。 このままでは、記事本体とフッターが重なってしまうので、.left の下paddingを調整しました。

これで、なんとか、公開停止にならずにすみます。しかし、CSS は難しいですね。まったくの手探り状態です。

このテンプレートがかなり特殊なので、他の人の参考になるかどうかは分かりませんが、もし参考になれたのなら幸いです。

補足

positionプロパティの使い方はなかなか難しいのですが、WEB工房きくちゃんの 表示位置の調整(position) の説明が図もあって分かりやすかったです。

また、IE6 では、min-width, max-width に非対応なんですが、IE6でmin-width,max-widthを実装する:CSS で紹介されている方法で対処できます。

拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/43-a04c940e
該当の記事は見つかりませんでした。