[雑記] 複数カラムの高さをそろえるCSSを使ってテンプレート編集

2008.11.16 ( Sun )
equal-height-columns-problem
CSSハックや画像、JavaScriptを使用しないで複数カラムの高さをそろえるCSSというものを発見したので、試しにこのブログで使用してみました。

複数カラムの高さをそろえるCSSの詳細は以下
Equal Height Columns with Cross-Browser CSS & No Hacks

原理は、複数のカラムを背景色の異なる複数コンテナで囲い、そのコンテナを「position:relative; right:XX%」でずらして色分けを行い、コンテナの移動で移動してしまったカラムを「position:relative; left:XX%;」で場所を戻しています。

Yahoo!のトップページのように、カラムで分けていても背景色が1色であればカラムの高さをそろえなくても問題はないのですが、このブログのようにカラムで色が異なる場合、カラムの高さが異なるとデザインが変になってしまいます。

今までカラムの高さをそろえるのに
  1. CSSでカラムのdiv要素に「padding-bottom: 32768px; margin-bottom: -32768px;」を追加する
  2. JavaScriptで高さをそろえる
  3. カラムの背景にカラムと同じ色分けをした画像をbackgroundで使用
  4. tableを使用

といろいろな方法を試していたのですが…

  • 1は、ページ内アンカーを使用すると要素が消失する不具合があり、このブログでは使えない。
  • 2は、JavaScriptを無効にしているユーザには意味がない。
  • 3は、カラムの背景色と同じ色の画像を作ってもOSによって色の見え方が異なる場合があり、表示が変になってしまう場合がある。
  • 4は、高さは揃うのですが、table要素はテーブルを表す要素であり、レイアウト目的で用いることは推奨されていないのと、tableは中身を全て読み込んでからでないと描画されず、ページ全体の表示完了時間は変わらなくても、表示が遅いと感じられてしまいます。(Firefoxだと「table-layout:fixed」を指定して横幅を固定すると描画は早くなりますが、IEだと変わらない)

とあまり良い方法が無かったのですが、このCSSを使う方法だと、ブラウザやJavaScriptの実行の有無に関係なくカラムの色分けが出来るのでかなり便利です。

このブログでは、今まで仕方なくtableでカラム分けを行っていたので、IEを使用している場合、ヘッダ部分で表示が止まったり、表示が遅く感じることがあったかもしれませんが、現在このCSSを使ったカラム分けに変えたので、表示が若干速く感じるようになったんじゃないかと…

一応、Internet Explorer7, Sleipnir2, Firefox3で表示確認を行っていますが、表示が変になっているという方がいらっしゃいましたら、コメント等頂けると助かります。


スポンサードリンク


この記事に対するコメント


dotさん、こんばんわ
こちらのブログを
自分のほうでさまざまな確認をさせていただきました。

IE7・OK
IE6・OK
IE5.5・OK
Firefox3・OK
Firefox2・OK
Firefox1.5・OK
Avant11.7・OK
Opera 8.53・OK
Opera 9.62・OK
Safari 3.2・OK
SeaMonkey 2.0・OK
Safari 3.2・XP?□にて文字化け?
Flock 2.0・OK
Chrome 0.2・XPエラー?
エラー画像
ttp://blog-imgs-19.fc2.com/a/n/n/annkokunokizinn/era-.jpg

自分の調べた限りじゃこのような感じですね。
それでは、ご参考になれば幸いです。
【2008/11/20 18:41】 暗黒の鬼神 #wLMIWoss [編集]


暗黒の鬼神さん
コメント&いろいろ調べていただいて、有難うございます。

エラーがとなっているブラウザをインストールして調べてみたところ

■ Google Chromeの最新版(0.3.1549)
■ Safari for Windows バージョン3.2 (525.26.13)

共に表示は問題ありませんでした。
もしかすると、ブラウザではなくOSの問題かもしれませんね。

それにしても、ブラウザによってCSSの解釈が違うっていうのどうにかならないんですかね…
【2008/11/21 02:51】 dot #4YADpMfQ [編集]


この記事に対するコメントの投稿












※ スパムコメント対策のため、現在「http」が含まれているコメントを拒否しています。
URLを書く場合は、"h"を抜いて書くなどして下さい。

申し訳ありませんが、いろいろ忙しくなってしまったので、
今後、質問などのコメントに対しての返信はほとんど出来ないと思います。
不明点が場合はGoogle等を利用して自力で解決して頂くか、諦めてください (´・ω・`)

この記事に対するトラックバック

トラックバックURL
http://ub.blog85.fc2.com/tb.php/311-3731fea3
この記事にトラックバックする(FC2ブログユーザー)
ブログ内検索
RSS
Google +1 ボタン
リンク
人気記事ランキング
ブログパーツ
アクセスランキング
ブログパーツ
カウンター

カレンダー
«09 | 2017/10 | 11»
1234567
891011121314
15161718192021
22232425262728
293031----
テスト
track word track feed この日記のはてなブックマーク数