日々のデザイン現場で発生する問題・難題を解決します！
WEB制作トラブル速戦即決術！ 第4回
[TROUBLE 18] |
メインカラムとサイドバーの 高さがそろわない |
文＝Quattro（mBlog）
| A. | divの親要素に背景画像を使って高さを統一する |
2カラム構成のレイアウトをCSSで構成するときに、ふつうにdivをfloatさせるとメインカラム（横幅の大きいdiv。ソース内ではid＝main）とサイドバー（横幅の小さいdiv。ソース内ではid＝sidemenu）の高さがそろわない。そこで両divの親要素のdiv（ソース内ではid＝contents）に背景画像を指定することでボックスの高さをそろえてみよう。親要素となるdivにメインカラムとサイドバーを内包させる点がポイントだ。
この場合、サイドメニューは内包するコンテンツ量が少ないため、メインカラムと高さがそろわない。両者が同調して伸縮するようなコーディングを行えば、後々の更新にも対応でき汎用性が高まる
まずは画像をスライスしよう。top.gifはid＝topに、middle.gifはid＝contentsに、bottom.gifはid＝bottomの背景にそれぞれ指定する。角丸などの装飾が必要なければ、top.gifとbottom.gifは省いてもよい
このようにコーディングすれば、div内の情報量に応じてメインカラムとサイドメニューが一緒に伸縮するようになる。ちなみにclass＝clrはfloatクリア用の空divだ
[INDEX]
>>> [TROUBLE 18]メインカラムとサイドバーの高さがそろわない
>>> [TROUBLE 19]レイヤーにFlashが重なりz-indexの設定も効かない
>>> [TROUBLE 20]parseInt()関数がうまく動作しない
>>> [TROUBLE 21]リンクに:hover疑似クラスを指定したのに正常に適用されない
>>> [TROUBLE 22]PhotoshopからPNGを書き出すのに時間がかかる
『web creators』の情報はこちら！＞＞＞
