忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[102] [101] [100] [99] [98] [97] [96] [95] [94] [93] [92

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

CSSにできること―ポジションレイアウト編

CSSにできること第八弾。
今回は、画面に対し、相対的、絶対的にコンテンツを配置していく、ポジションレイアウト(positionプロパティを使うので勝手に名付けました。正式名称ではありません)について書いていきます。
前作:CSSにできること―フロートレイアウト編


前回のフロートレイアウトは、右に回りこみ、左に回りこみ、という方向性の指定ですが、
positionプロパティを使うと、画面に対して固定の配置ができるようになります。

こちらの配置に関しても、floatと同様、widthとheightを指定する必要があります。
さらに、positionプロパティを指定したボックスには、「重なり」という概念が出てきます。
z-indexというプロパティによって、そのコンテンツが前景になるのか、背景になるのかを指定する必要があります。


1.相対配置

positionに対してrelativeという値を指定します。
画面に対し、相対的に配置する方法です。

この後で述べる絶対配置、固定配置をする際に、配置の基準となるボックスが必要になります。そこで、relativeという値を指定することによって、基準であるということを示すことができます。
(これ以外で私はrelativeを使ったことがありません・・・)


2.絶対配置

positionに対してabsoluteという値を指定します。
画面に対し、絶対的に配置する方法です。

上から何px、右から何px、という風に指定します。
この、上から、右から、という基準は、absoluteが指定されている部分を囲んでいるボックス、またはposition: relative;が指定されているボックスを指します。
top: 10px; left: 20px;だと、上から10px、右から20pxの部分に配置をする、という指定になります。
topとbottomからひとつ、leftとrightからひとつ選んで指定します。


3.固定配置

positionに対してfixedという値を指定します。
画面に対し、固定配置する方法です。

場所の指定方法は絶対配置と同じですが、fixedでは、画面に対して固定されます。
スクロールしても位置がかわらないので、サイドのメニュー部分の表示に使われることが多いです。
ただし、IE6以下には対応していませんので、現時点ではあまり実用的ではありません。


positionプロパティを使う際に共通に言えることですが、
positionにabsolute、fixedを使用したボックスは、他の要素とは別の次元といいますか、別のレイヤーに配置されます。(この、レイヤーというのがz-indexで指定する値です。)

高さを指定していない通常のボックスでは、文章量が多くなった場合、自動的にボックスが長くなり、その下のボックスも自動的に下に下がります。
しかし、absolute、fixedを使用したボックスは、文章量が多くなった場合、その下のボックスの上に重なるようにして表示されます。

文章ではすごく説明しづらいのですが、言いたいことは、
ボックスの中身が固定でない場合には、ポジションレイアウトをしないほうがいいということです。

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
02« 2017/03 »04
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
ブログ内検索
忍者ブログ [PR]