手作りソフト実験室 → 2．2カラム構成のサイト両側マージンに画像を追加
手作りソフト実験室では、基本的なプログラミングで何が出来るかを実験します。
2 2カラム構成のサイト両側マージンに画像を追加する
ヤフーサイトの両側に広告用画像が表示される場合がありますよね？今まで見た事の無い構成で迫力があり斬新です。この構成について書籍などでは触れてある記事が無いようなので、これを実現する方法を説明します。
まず元になる2カラム構成はこのような形とします。
これに左右に新たなBOXを追加して、そこに画像を貼り付ければ良いわけです。追加するBOXの位置指定が問題ですよね。
表示しているブラウザの幅を狭めても左右バランスがズレないように表示するにはCSSの position プロパティを使ってheaderと左右BOX(rightbox,leftbox)の相互位置関係を指定します。
まずHTMLの方では以下のように header ネストの内側に rightbox, leftbox を配置します。これにより相互の位置関係が設定できるようになります。
LEFT BOXRIGHT BOXThe header part
CSSではヘッダー（header）が原点になるように ヘッダーのpositionプロパティをrelativeとします。
これに対して左右のrightbox,leftboxでは positionプロパティをabsoluteとしてheaderを基準に配置します。
rightbox → right: -100px;
leftbox → left: -100px;
なんだか英語としてはabsoluteとrelativeが逆のようですが、これが正しい設定です。
.header {
position: relative;
padding-top: 10px;
margin: 0 auto;
display: block;
height: 40px;
width: 400px;
}
.leftbox {
position: absolute;
top: 0px;
left: -100px;
height: 200px;
width: 100px;
}
.rightbox {
position: absolute;
top: 0px;
right: -100px;
height: 200px;
width: 100px;
}
サンプル画面へ