position属性で2カラム構成 - CSSめもめも

Tweet はてなブックマーク TOPSY

position属性とは

えーと、あんまり詳しくないのでごみんごみんですけど、ブロック要素に position: absolute を指定すると要素の指定順序を無視して絶対位置を指定できます。

例えば、右側に余白を取り、そこにサイドバーを表示させたりすることが可能なのであったのでした。

作ってみる

大枠を作成
左(メイン)列
右サイドバー列

ここから下、うほほほほいー

テスト

   ∩___∩    | ノ ノノ ⌒ヽ   /ノノ●)  ●) |   ♪ クマがただそこにいればいい〜クマがただそこにいればいい〜   ||   ( _●_) ミ  彡、   |∪|  、`\ ♪ I want kumar to stay by me / _(♯) ヽノ /´>  ) (___)   / (_/
   ∩___∩
   | ノ ノノ ⌒ヽ
  /ノノ●)  ●) |   ♪ クマがただそこにいればいい〜クマがただそこにいればいい〜
  ||   ( _●_) ミ
 彡、   |∪|  、`\ ♪ I want kumar to stay by me
 / _(♯) ヽノ /´>  )
(___)   / (_/

BG-Rescue Linux 起動画面

div.mainbox {
margin: 0 auto;
padding: 0;
width: 97%;
position: relative;
border: 1px dotted black;
}

div.contents {
margin: 0 30% 0 0;
padding: 0;
position: relative;
width: 70%;
border: 1px dotted blue;
}

div.sidemenu {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 70%;
right: 0;
bottom: 0;
width: 30%;
border: 1px dotted red;
}

めにゅう

paddingを設定する時

長さの値の単位は%で統一した方がいいかな?

左右にpaddingを設定する場合は、その%分を引いてwidthを設定すること。borderに罫線を引く場合はその分 div.mainbox の width を 1% 程小さくしておいた方がいいかもしれません。

それぞれの要素も再設定した方が安全かも

.sidemenu h2 なんてかんじでセレクタを作って再設定しておいた方が安全かも

特にIEでは「へんなの出ました!」になることが多いので確認は念入りに

はみ出す可能性がある要素にoverflow属性を設定しておく

pre要素などにoverflow: auto;を指定しておく

imgはインライン要素なので、専用divのclassを作るとか?

IEでは width を指定していない要素でoverflowの設定が効かないことがあります。

IEのバグに注意する

なるべく標準モード(文書型宣言でURIあり)で書く(※但し、IE5は非対応)

それぞれのカラムに入れる子要素についてはなるべくwidthを設定しておく

pre要素にoverflow属性でautoを指定した場合、IEではスクロールバーも高さに含まれるため、元の高さ2文字以上ないといけない、文字がかくれてしまう。よって上下 padding に0.5em以上設定しておく。

テスト2

   ∩___∩    | ノ ノノ ⌒ヽ   /ノノ●)  ●) |   ♪ クマがただそこにいればいい〜クマがただそこにいればいい〜   ||   ( _●_) ミ  彡、   |∪|  、`\ ♪ I want kumar to stay by me / _(♯) ヽノ /´>  ) (___)   / (_/
   ∩___∩
   | ノ ノノ ⌒ヽ
  /ノノ●)  ●) |   ♪ クマがただそこにいればいい〜クマがただそこにいればいい〜
  ||   ( _●_) ミ
 彡、   |∪|  、`\ ♪ I want kumar to stay by me
 / _(♯) ヽノ /´>  )
(___)   / (_/
div.mainbox2 {
margin: 0 auto;
padding: 0;
width: 95%;
position: relative;
border: 1px dotted black;
}

div.contents2 {
margin: 0 30% 0 0;
padding: 2%;
position: relative;
width: 66%;
border: 1px dotted blue;
}

div.sidemenu2 {
margin: 0;
padding: 2%;
position: absolute;
top: 0;
left: 70%;
right: 0;
bottom: 0;
width: 26%;
border: 1px dotted red;
}

.sidemenu2 h2 {
margin: 1%;
padding: 3%;
font-size: 1.5em;
line-height: 100%;
letter-spacing: 1px;
}

めにゅう2

サイドメニューの幅を固定

テスト2

   ∩___∩    | ノ ノノ ⌒ヽ   /ノノ●)  ●) |   ♪ クマがただそこにいればいい〜クマがただそこにいればいい〜   ||   ( _●_) ミ  彡、   |∪|  、`\ ♪ I want kumar to stay by me / _(♯) ヽノ /´>  ) (___)   / (_/
   ∩___∩
   | ノ ノノ ⌒ヽ
  /ノノ●)  ●) |   ♪ クマがただそこにいればいい〜クマがただそこにいればいい〜
  ||   ( _●_) ミ
 彡、   |∪|  、`\ ♪ I want kumar to stay by me
 / _(♯) ヽノ /´>  )
(___)   / (_/
div.mainbox3 {
margin: 0 auto;
padding: 0;
width: 97%;
min-width: 750px;
position: relative;
border: 1px dotted black;
}

div.contents3 {
margin: 0 200px 0 0;
padding: 0;
border: 1px dotted blue;
height: 100%;
}

div.sidemenu3 {
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 200px;
border: 1px dotted red;
height: 100%;
}

.mainbox3 h2,
.mainbox3 h3 {
margin: 0;
padding: 0.2em 0.5em;
font-size: 1.5em;
line-height: 100%;
letter-spacing: 1px;
}

div.contents3 pre {
margin: 3% auto;
padding: 1em 0.5em;
background-color: #f1f1f1;
white-space: pre;
font-size: 95%;
overflow: auto;
border: 1px #ccc inset;
line-height: 110%;
width: 88%;
}

めにゅう2

sidemenu の width を px で指定

sidemenu の幅を固定

IE6は min-width 属性に非対応

他のブラウザでは、mainbox を750pxで固定

sidemenu3

備考

最終更新日:2008.6.20

float 属性を使う方が安全だと言う話もあったりなかったり...orz


Valid HTML 4.01! Valid CSS!