デザイン通りに組む！ ～配置指定～
- ケンジ
- ふー！
ここまで来たか。残るはラスボス、巨大ネコ画像のみだね！！
- トモ・リーン
- そうね！
- ケンジ
- でも、ここ思いっきりネコ画像がはみ出てるけど、大丈夫なの？？
- トモ・リーン
- 大丈夫！
「position」で指定するのよ。
positionについて
ボックス要素の位置指定用プロパティです。
top、right、bottom、left で指定をします。
.sample {
position: 位置指定の方法 relativeやabsoluteなど;
top: ※px;
left: ※px;
}
- static
- 通常のボックス要素の状態です。
top、right、bottom、left の指定をしても位置に反映されません。 - relative
- 通常の位置からの位置指定。
- absolute
- 親要素の左上が基点とした位置指定。
- fixed（IEでは使用出来ない）
- ブラウザウィンドウの基点からの位置指定で、固定される。
- ケンジ
- ふむふむ。
で、ネコの配置にはどれを使うの？
- トモ・リーン
- absoluteね。
こんな感じで位置を決めるのよ。
- トモ・リーン
- あと、全体的にはこんな組み方ね。
- ケンジ
- ふむふむ、書いてみるね！！
- トモ・リーン
- うんうん。
出来てるわね！
- ケンジ
- あんまり考えなくても、指定した位置に来るから楽ちんだね！
- トモ・リーン
- ポジションは簡単にレイアウトが出来るけど、色々欠点もあるわ。
- ケンジ
- ええ〜〜〜〜っ？
- トモ・リーン
- positionで指定した物は浮いている状態なのでその下に続く物が下に重なっちゃうわね。
このデザインの場合は ＃mainImgがposition指定では無い＋高さを指定しているから続くh3(見出し部分)はメイン画像やネコ画像は重ならないのよ。
- ケンジ
- なんかポヤッとしてるな・・・。
- トモ・リーン
- う〜ん、じゃあ#mainImgの高さを外してみるから見てみて。
下の要素が重なっちゃうわよ。
- ケンジ
- うわ〜。バリバリ☆重なってるよ！
- トモ・リーン
- だからポジションによるレイアウトが使えるところは限られてるわね。
- ケンジ
- そうなんだ〜！
フロートとかしちめんどくさい事教えやがって〜！って
キレる準備をするところだったよ。
- トモ・リーン
- ・・・・・・。
- ケンジ
- じゃあ、ちゃんと見えてたときと同じ状態にもどして、と。
- トモ・リーン
- 今回のデザインは左寄せで固定だったから大丈夫だったけど、中央寄せなどのデザインで左上からの距離が変わる場合は、もうひと工夫いるわ。
あと、IEだと工夫だけじゃなくて、Javascriptも必要になるのよ。
- ケンジ
- ふ〜ん、そのうち教えてね！
- トモ・リーン
- いいわよ〜。
- ケンジ
- あ〜〜〜〜〜〜〜〜！！！！
っていうか、IE6で見たらネコ画像とか透明の箇所がグレーになってるよ！！
- トモ・リーン
- うふうふ・・・。
- ケンジ
- なんだよー！
笑い事じゃないぜ！！
- トモ・リーン
- これはそういう画像のフォーマットなのよ。
PhotoshopではPNG-24+透明にチェック、Fireworksでは背景を透明にしてPNG32で保存するとこの画像の形式になるわ。
- ケンジ
- これって、何かするとIE6でもちゃんと透過されるんだよね？？
- トモ・リーン
- そうよ。
また次回解説するわね！
- 今回のポイント！
- ポジションは便利だけど中央寄せのデザインだとIE系で別途Javascriptが必要な場合があるので、注意して使って行こう。