擬似min-width

エントリ本文

エントリした日時: 2006-08-15 13:47
カテゴリ: seesaaカスタマイズ
リンクURL: permalink
コメント: comment(0)
トラックバック: trackback(0)

前回のテンプレートの中にいれてある２段組レイアウト用のCSSの中で、WinIEで擬似的なmin-widthを実現しています。今回はその説明。

CSSによる擬似的なmin-width自体は結構メジャーな手法だと思います。たとえばLucky bag::blogさんのIE で min-width を指定する方法が詳しく説明されていて分かりやすいかと思います。

ただ、上記で紹介されている方法は２つのdivでラッピングする必要があるために、どうしても文書構造的に無駄な部分が目立ってしまいます。

ところでmin-widthを何処で使いたいか。というと、たいていの場合はページ全体の最小幅を指定したい場合がほとんどだと思います。前回のテンプレートでもそれを意図して作成したのですが、ページ全体の最小幅設定にターゲットを絞ればdivのネストを多少なりとも抑えることができます。

それではまず、htmlのコードです。

<html>
<head>
<title>疑似min-width</title>
</head>
<body>
<div class="container">

メインコンテンツの内容

<div class="footer">
フッター領域
</div>
</div>
</body>
</html>

説明のために、前回のテンプレートとはクラス名などが変わっていますが、bodyの直下にcontainerクラスがあってその中にメインのコンテンツやfooterなどが格納されている。というhtmlの構造自体はseesaaの標準に近いものだと思います。

上記のhtmlに適用する疑似min-widthを実現する部分のCSSコードです。

* html body {
padding-right:800px; /* 最小横幅分を指定 */
}
* html body div.container {
float:left; /* 通常のレンダリングフローから独立 */
position:relative; /* position:absoluteの基点に設定 */
margin-right:-800px; /* 最小横幅分を指定 */
}

* html body div.footer {
width:100%; /* containerの幅一杯に表示 */
}

上のコードと、今までのmin-widthの違いは、

２重にかけるdivの１つをbodyに割り振る
borderで確保していた最小幅をpaddingで確保するようにする
divブロックの内側の要素に width:100%; を設定する

bodyに役割の一部を割り当てることでdivを一つ減らせるので、多少は構造を整理することが出来ると思います。また、borderで最小幅を確保すると背景画像が切れてしまいますが、paddingで確保することで画像が見切れることもありません。

とまぁこんな感じで、ページの全体幅限定の疑似min-widthを実現しているわけなんですが、IE7の正式版が世に出回るようになれば、あまり意味の無い努力な気がします。

あとちょっと思うこと。世の中のCSSエキスパートな方々がやってない。ってことは致命的な欠点がある方法であるおそれが高いです。問題があったらあっさり見捨ててください。

今回、疑似min-widthを解説しているページを捜して見つけたLucky bag::blogさんですが、凄いですね。このブログなんて見てる暇があったら、あちらをご覧になることをオススメします。いやほんと(´･ω･｀)。

≪ 前 - 次 ≫

このカテゴリの最近のエントリ
※CSS無効の場合（この文章を読んでいる場合）は、全カテゴリでの最近のエントリ

seesaaブログの基礎情報

このカテゴリではカスタマイズの基礎知識となる、seesaaブログで利用できる変数や関数、制御構造などについてまとめていきます。各変数などを個別に説明していく前に、まず全体的な説明をしたいと思います。

2006年10月09日 01:47 - seesaa基礎情報
「このカテゴリの最近のエントリ」を実現

まずはじめに注意事項。今回のカスタマイズは検索エンジンのインデックスに対してリスクを負うおそれがあります。

2006年08月23日 00:58 - seesaaカスタマイズ
擬似min-width

前回のテンプレートの中にいれてある２段組レイアウト用のCSSの中で、WinIEで擬似的なmin-widthを実現しています。今回はその説明。

2006年08月15日 13:47 - seesaaカスタマイズ
カスタマイズテンプレート

これまでに紹介してきた、h1の内容をページによって変更meta descriptionを適切な内容に設定それなりにまともな文書構造の(x)html上記3点を実装したseesaaブログ用のテンプレートを作成しました。アーカイブしてダウンロードできるようにしてありますので、興味のある方は見てやってください。

2006年07月31日 23:49 - seesaaカスタマイズ
seesaaロゴ変更に対応

seesaaロゴが変更になってからtext-align:rightってスタイル指定してたのに、FireFoxで見ると左端に来てる！という方をたまに見かけます。centerで中央に来ない！とか。今回はそれにたいする対処方法です。

2006年07月29日 02:11 - seesaaカスタマイズ
seesaaカスタマイズのエントリ一覧へ...

コメント一覧

2009-07-14 01:13

このエントリへのコメントはありません。

トラックバック

トラックバックURL

トラックバックポリシー

エントリと関係のないトラックバックについては削除させていただくことがあります

リンク用コード

よろしければ言及リンク用に上記のhtmlコードをご利用ください

※target=_blankを設定しています

トラックバック一覧

2009-07-14 01:13

このエントリへのトラックバックはありません。

ツールボックス

注意事項

当ブログで提供する情報につきましては、出切る限りの正確性を確保するよう努めますが、その完全性を保証するものではございません。当ブログをご利用になる際は、ご自身の判断によって、自己責任のもとに行ってください。当ブログのご利用によって（もしくはご利用しなかったことによって）発生したいかなる損害につきまして、当方では一切の責任をおいません。
特にseesaaブログのカスタマイズについては、必ずカスタマイズ前のバックアップを残すなどの対策をお願いいたします。
また、当ブログの内容はあくまでも私が独自に調査した内容ですので、「シーサー株式会社」様の保証があるものではございません。よって、seesaaブログの仕様変更などによって、利用できなくなる場合などがあることをご了承ください。