ブログのレイアウトを幅100%の3カラム構成に変更
この記事ではアフィリエイト広告を利用しています。
ブログのサイドバーのコンテンツが増えてきたので、ブログのレイアウトを3カラム構成に変更しました。
これまでは幅固定の2カラム構成でしたが、最近のディスプレイは解像度が高くなってきているので、幅100％で3カラムの構成にしてみることにしたわけです。
なるべくCSSの変更を少なくするために、#container #container2というようにidを付けなおして、それらのidに対してスタイルを定義しました。3カラムの実現にはfloat属性を使わずに、絶対配置と幅の%指定とマージン指定で実現しています。
#container2 {
width: 100%;
}
#alpha2, #beta2, #gamma2 {
position: absolute;
}
/* 中央カラム */
#alpha2 {
top: 0px; left: 0px; margin-left: 27%; margin-right: 27%; width: 46%;
}
/* 左カラム */
#beta2 {
top: 0px; left: 0px; width: 24%;
}
/* 右カラム */
#gamma2 {
top: 0px; right: 0px; width: 24%;
}
このように、全体の幅を#container2で100%に指定し、#alpha2, #beta2, #gamma2をposition: absolute;で絶対配置にします。
中央カラム#alpha2はtop: 0px; left: 0px;で左上表示にしますが、右と左にmarginを27％とって左カラムと右カラムを表示するスペースを確保しています。中央カラムの幅は左右のマージンをのぞいた46%に指定しています。
左カラム#beta2はtop: 0px; left: 0px;で左上表示、右カラム#gamma2はtop 0px; right 0px;で右上表示にして、それぞれ幅を24%に指定しています。
こうすることで、崩れない3カラムのレイアウトができます。もちろん幅を極端に狭くすると、画像を使っている場合に画像がはみ出したり表示されなかったりすることはありますが、たいていの場合は大丈夫です。
ちなみにこのようなスタイルシートのテクニックは、
CSSプロフェッショナル・スタイル―世界の「最先端」事例に学ぶ
にたくさん紹介されています。
著者について
コメントを残す