HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

★月々263円からオンラインショップを運営!高機能カート・クレジット決済が簡単導入 [PR]

● 表示位置の設定

ブロック要素にマージンや、パディングあることを利用して文字列や画像の位置を調整する方法を紹介しましたが、 (正確にはレイアウトです) ここでは、ブロック要素ではない、インライン要素の位置を設定する方法を紹介します。

position』というプロパティを使用することで、 要素の表示位置を設定することが出来ます。
positionプロパティで配置方法、( 『static』・『relative』・ 『absolute』・『fixed』の4種)と、 『top』・『bottom』・ 『left』・『right』 プロパティで表示する位置を設定します。
各段落等、基準となる場所(文頭等)に『position:relative』を設定し、 位置を設定したい記事に 『position:値 ; top:値 ; bottom:値 ; left:値 ; right:値』を設定します。
ウィンドウを広げたり、狭めたりして確認してみてください。

static : 配置は適用されません。 position:static ; top:20px ; left:50px

<P style="height:30px; background-color:#efefef ; position:relative">
<CODE class=emph>static</CODE>&nbsp;:&nbsp;配置は適用されません。
<SPAN class=stro style="position:static ; top:20px ; left:50px">position:static ; top:20px ; left:50px</SPAN>
</P>

relative : staticを設定した場合(通常の時)に表示される位置を基準に相対位置への配置されます。 position:relative ; top:20px ; left:50px

<P style="height:30px; background-color:#efefef ; position:relative">
<CODE class=emph>relative</CODE>&nbsp;:&nbsp;staticを設定した場合(通常の時)に表示される位置を基準に相対位置への配置されます。
<SPAN class=stro style="position:relative ; top:20px ; left:50px">position:relative ; top:20px ; left:50px</SPAN>
</P>

absolute : そのブロックにpositionプロパティの値として、staticが与えられた場合はウィンドウの左上を基準に絶対位置で表示し、static以外が設定されている場合は、そのブロックのの左上が基準に表示します。 position:absolute ; top:20px ; left:50px

<P style="height:30px; background-color:#efefef ; position:relative">
<CODE class=emph>absolute</CODE>&nbsp;:&nbsp;そのブロックにpositionプロパティの値として、staticが与えられた場合はウィンドウの左上を基準に絶対位置で表示し、static以外が設定されている場合は、そのブロックのの左上が基準に表示します。
<SPAN class=stro style="position:absolute ; top:20px ; left:50px">position:absolute ; top:20px ; left:50px</SPAN>
</P>

fixed : absoluteと同様の絶対位置の表示で、スクロールしても位置が固定されたまま。(IE5.5未対応) position:fixed ; top:20px ; left:50px

<P style="height:30px; background-color:#efefef ; position:relative">
<CODE class=emph>fixed</CODE>&nbsp;:&nbsp;absoluteと同様の絶対位置の表示で、スクロールしても位置が固定されたまま。(Operaで確認)
<SPAN class=stro style="position:fixed ; top:20px ; left:50px">position:fixed ; top:20px ; left:50px</SPAN>
</P>

※IMG要素への設定も可能です。

relative : staticを設定した場合(通常の時)に表示される位置を基準に相対位置への配置されます。 position:relative ; top:20px ; left:50pxと設定した画像です。 ロゴ

absolute : そのブロックにpositionプロパティの値として、staticが与えられた場合はウィンドウの左上を基準に絶対位置で表示し、static以外が設定されている場合は、そのブロックのの左上が基準に表示します。 position:absolute ; top:20px ; left:50pxと設定した画像です。ロゴ

重なりの順序

CSSのpositionプロパティによって位置を定められた記事は、他の記事と重なってしまうことがあります。
この時どちらが上になるかによっては、制作者の意図しない見え方になるかもしれません。 この時z-indexプロパティを使用する事により、この重なりの順序を設定する事が出来ます。
z-indexプロパティを適用するには、positionプロパティにstatic以外の値が設定されている必要があります。
値は、重なりの順序を整数で設定します。0が基準となり、値が大きいものほど上に位置します。 autoを設定すると親要素と同じ位置になり、これが初期値です。

上に重なります。

bannr

<P style="position:relative ; top:20px ; background-color:#EFEFEF ; z-index:2">上に重なります。</P>
<P>
<IMG src="../img/bannr.gif" alt="サンプル画像" style="position:relative ; top:-20px ; z-index:1">
</P>

<<前へ  |上へ|  次へ>>
1234567891011121314151617

広告掲載で簡単収入!!登録無料のアフィリエイトプログラムなら導入は安心。
Click Here! リンクシェア アフィリエイト紹介プログラム http://draft.j-a-net.jp/banner/NEXT アクセストレード
アフィリエイトプログラム比較

TOP] [HOME

更新日時:2014/08/09