はじめてのCSS:やさしさいっぱいのCSSが肌にしみこむ!カモ。

デザイン通りに組む! ~配置指定~

ケンジ
ふー!
ここまで来たか。残るはラスボス、巨大ネコ画像のみだね!!
図:今回の作業箇所
トモ・リーン
そうね!
ケンジ
でも、ここ思いっきりネコ画像がはみ出てるけど、大丈夫なの??
トモ・リーン
大丈夫!
「position」で指定するのよ。
positionについて

ボックス要素の位置指定用プロパティです。
top、right、bottom、left で指定をします。

.sample {
position: 位置指定の方法 relativeやabsoluteなど;
top: ※px;
left: ※px;
}
static
通常のボックス要素の状態です。
top、right、bottom、left の指定をしても位置に反映されません。
relative
通常の位置からの位置指定。
absolute
親要素の左上が基点とした位置指定。
fixed(IEでは使用出来ない)
ブラウザウィンドウの基点からの位置指定で、固定される。

各プロパティの挙動確認

ケンジ
ふむふむ。
で、ネコの配置にはどれを使うの?
トモ・リーン
absoluteね。
こんな感じで位置を決めるのよ。
位置指定のサンプル
トモ・リーン
あと、全体的にはこんな組み方ね。
組み方図
ケンジ
ふむふむ、書いてみるね!!
組んでみたファイル【HTML】 組んでみたファイル【CSS】
トモ・リーン
うんうん。
出来てるわね!
ケンジ
あんまり考えなくても、指定した位置に来るから楽ちんだね!
トモ・リーン
ポジションは簡単にレイアウトが出来るけど、色々欠点もあるわ。
ケンジ
ええ〜〜〜〜っ?
トモ・リーン
positionで指定した物は浮いている状態なのでその下に続く物が下に重なっちゃうわね。
このデザインの場合は #mainImgがposition指定では無い高さを指定しているから続くh3(見出し部分)はメイン画像やネコ画像は重ならないのよ。
浮いてる概念図
ケンジ
なんかポヤッとしてるな・・・。
トモ・リーン
う〜ん、じゃあ#mainImgの高さを外してみるから見てみて。
下の要素が重なっちゃうわよ。
#mainImgを外してみたファイル【HTML】
ケンジ
うわ〜。バリバリ☆重なってるよ!
トモ・リーン
だからポジションによるレイアウトが使えるところは限られてるわね。
ケンジ
そうなんだ〜!
フロートとかしちめんどくさい事教えやがって〜!って
キレる準備をするところだったよ。
トモ・リーン
・・・・・・。
ケンジ
じゃあ、ちゃんと見えてたときと同じ状態にもどして、と。
トモ・リーン
今回のデザインは左寄せで固定だったから大丈夫だったけど、中央寄せなどのデザインで左上からの距離が変わる場合は、もうひと工夫いるわ。
あと、IEだと工夫だけじゃなくて、Javascriptも必要になるのよ。
ケンジ
ふ〜ん、そのうち教えてね!
トモ・リーン
いいわよ〜。
ケンジ
あ〜〜〜〜〜〜〜〜!!!!
っていうか、IE6で見たらネコ画像とか透明の箇所がグレーになってるよ!!
グレーが出ている残念な画像
トモ・リーン
うふうふ・・・。
ケンジ
なんだよー!
笑い事じゃないぜ!!
トモ・リーン
これはそういう画像のフォーマットなのよ。
PhotoshopではPNG-24+透明にチェック、Fireworksでは背景を透明にしてPNG32で保存するとこの画像の形式になるわ。
書き出し窓の画像
ケンジ
これって、何かするとIE6でもちゃんと透過されるんだよね??
トモ・リーン
そうよ。
また次回解説するわね!
今回のポイント!
ポジションは便利だけど中央寄せのデザインだとIE系で別途Javascriptが必要な場合があるので、注意して使って行こう。