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

2021.4.1 移転しました...

• このページの旧URLは
  • http://www10.plala.or.jp/palm84/css_memo_position.html

position属性とは

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

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

作ってみる

大枠を作成

• width から左右 margin 分を引く
• relative指定

左（メイン）列

• sidemenu用の右 margin 設定
• sidemenu分を引いて width 指定

右サイドバー列

• position: absolute で top,right,bottom,left の絶対位置を指定

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

　　 ∩＿＿＿∩
　　 | ノ　ﾉノ　⌒ヽ
　　/ﾉノ●)　　●) |　　　♪ クマがただそこにいればいい〜クマがただそこにいればいい〜
　 |｜　　　( _●_)　ミ
　彡､　　　|∪|　　､｀＼　♪ I want kumar to stay by me
 /　＿(♯) ヽノ　/´>　 )
(＿＿＿）　　　/　(_／

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以上設定しておく。

　　 ∩＿＿＿∩
　　 | ノ　ﾉノ　⌒ヽ
　　/ﾉノ●)　　●) |　　　♪ クマがただそこにいればいい〜クマがただそこにいればいい〜
　 |｜　　　( _●_)　ミ
　彡､　　　|∪|　　､｀＼　♪ 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;
}

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

　　 ∩＿＿＿∩
　　 | ノ　ﾉノ　⌒ヽ
　　/ﾉノ●)　　●) |　　　♪ クマがただそこにいればいい〜クマがただそこにいればいい〜
　 |｜　　　( _●_)　ミ
　彡､　　　|∪|　　､｀＼　♪ 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%;
}

sidemenu の width を px で指定

sidemenu の幅を固定

IE6は min-width 属性に非対応

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

sidemenu3

備考

最終更新日：2008.6.20

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

• ←
• H
• ↑
• ↓