はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。
デザイン通りに組む！　～配置指定～
2008/09/29
ケンジ
ふー！
ここまで来たか。残るはラスボス、巨大ネコ画像のみだね！！
図：今回の作業箇所
トモ・リーン
そうね！
ケンジ
でも、ここ思いっきりネコ画像がはみ出てるけど、大丈夫なの？？
トモ・リーン
大丈夫！
「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が必要な場合があるので、注意して使って行こう。
トラックバック(0)
このブログ記事を参照しているブログ一覧：デザイン通りに組む！　～配置指定～
このブログ記事に対するトラックバックURL
http://www.rasen-d.net/z/mt/mt-tb.cgi/104
コメントする
名前
e-mail
URL
コメント(スタイル用のHTMLタグを使うことができます)
オススメ本
HTMLタグ+スタイルシート辞典ちび

基礎はもちろんCSSの記述に必要なことも載っているのでオススメ！

現場のプロから学ぶXHTML+CSS

実際のXHTML+CSSの作業について学びたい方にオススメ！

オススメCSSのサイト
TAG index

ものすごく使いやすいHTML & CSSのリファレンスサイト

CSSフリーライブラリー

色々なテーマごとにCSSの情報が集まっています！

オススメ勉強会
CSS Nite

お気軽な無料の会（主にアップルストアで）から、本格的な有料セミナーまで楽しい勉強会を開催してくれます。

Re:Creator’s Kansai（リクリ）

関西のクリエイターの交流、勉強会・セミナーの開催を目的としたコミュニティです。

螺旋デザインメンバーも執筆に参加！
アイコン：大藤幹のHYML/XHTML辞典
XHTML+CSS プロが教える“本当の使い方”

現場で培われたXHTML+CSSのテクニックを徹底解説!!

話題のiPhoneアプリ
アイコン：大藤幹のHYML/XHTML辞典icon
大藤幹のHYML/XHTML辞典icon

HTML5に対してもアップデート対応するらしいですよ！これで重い辞書とはおさらば♪

アイコン：myPANTONE
myPANTONE

色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！

POWERED BY MOVABLE TYPE® ver4