2004年08月04日

CSS絶対配置レイアウトについて

とりあえず検索ブロックを右上に移しました。
簡単な例
position: absolute;
top: 0px;
right: 0px;rightの部分をleftに変えれば左、topの部分をbottomに変えれば下に配置される。ただしbottomは表示した段階のページの一番下に配置されるので注意。ようするに2ページ分のスクロールする長さのページの時には1ページ目の終わりにあたる部分に表示されてしまうという感じと説明するとイメージがわくだろうか。

あと高さに関しては、テーブルレイアウトに慣れていると若干使いにくいかもしれない。というよりもこの部分に関してはテーブルレイアウトの方がかっちりしたものは作れるかもしれない。
特に背景を設定してしまうと、絶対配置の場合は使用している領域までにしか背景が表示されないため、途中で途切れているような感じになってしまう。

そこで裏技というほどでもないが、100%幅の親コンテンツにあたるブロックを用意して、その中に絶対配置をするという手段がある。

親コンテンツにあたる部分にはこのように記述をする。
position: relative;
width: 100%;

そして背景は親コンテンツに記述すると、子コンテンツである絶対配置されたコンテンツの高さに関係なく背景が表示されているように見える。
(この場合だと絶対配置されたコンテンツの幅は固定する必要がある。もし%で記述したい場合はheightの値を大きめにとるなどの手段に変更がある)
ちなみにposition: relative;とwidth: 100%;の記述をしておくことによって、ブラウザのバグ対策にもなるらしい(絶対配置の表示がおかしくなるらしいです。このあたりはうろ覚えなため、間違った解釈かもしれません。)

なお親コンテンツに記述された絶対配置のコンテンツは「親コンテンツのコンテンツ内に絶対配置されます」。わかりやすく書くと
position: absolute;
top: 0px;
right: 0px;
と記述した場合、絶対配置されたコンテンツは親コンテンツの範囲内の右上に表示されます。(ページの右上ではない)
このサイトの検索の場合、親コンテンツにあたるものはbodyになっています。

以上を踏まえると段組を使ったサイトも、この絶対配置で作ればレイアウトに関してはかなり自由度の高いものに仕上がります。
左にメニュー、真ん中にメインのコンテンツをおく場合だったら、メインのマージンレフトにメニューの幅の値を入れておき、メニューは絶対配置すればウィンドウ、解像度に関係なく表示されます。メインコンテンツはあくまで軸で、余白部分にメニューをおくという感じになります。メインコンテンツの高さ>メニューの高さになっている必要があります。

もし興味がございましたら、質問していただければもうちょっと詳しく記述します。
posted by mirror at 01:08| ☀| Comment(2) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
こんにちは。いつも参考にさせて頂いております。絶対配置だと、レイアウトが縦に伸びるという動作は出来ませんよね・・><
それをやる場合、float使うしかありませんよね?

初心者質問で申し訳ありませんm(__)m
Posted by お茶目 at 2006年05月02日 19:18
お茶目さん、こんにちは。

絶対配置でもjavascriptを使えば実現できるかもしれません、ただどちらにしても周りの要素からは独立してしまうことには変わりはないので、文字サイズやウィンドウ幅を変えられるデザインにするのであればfloatの方がおすすめです。
Posted by ミラ at 2006年05月02日 20:26
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。