きゃらりこ日誌

私がよく使っているCSSのレイアウト

個人的によく使っているスタイルシートのレイアウト技法をメモ。
他にもっとスマートな方法もあるとは思いますが、とりあえずということで。

● 2カラム(横2段組)レイアウトを作る

[図解1]右メニューは、float:right;で右に寄せ、width:○em;で幅を確保。左側のエリアは、margin-right:○em;やpadding-right:○em;で、右側に右メニューが入るスペースを開けてやる。右メニュー・左側のエリアの中に
があると段組にならないので、次に書くCSSで代替。

● DIV等で外枠を作ったとき、画像が枠からはみ出て(突き抜けて)しまう

[図解2]外枠に、overflow:auto;を指定してやると、突き抜けなくなる。

● 枠の下部にフッターを固定したいが、うまくいかない

[図解3]上の枠と、下のフッターの枠をくっつけてごまかす。重なる部分の枠線は、背景色や0pxにして消す。