忍者ブログ
Flex,Java,Html など、調べた事のメモ帳です。 間違ってたらゴメンなさい。
×

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

positionrelativeとは?

まず、そもそもpositionrelativeとは何でしょうか。

CSSpositionプロパティはボックスの配置方法を決めるためのプロパティで、その値としてはstaticabsoluterelativefixedの4種があります。初期値はstaticです。位置の指定はtop、bottom、left、rightの各プロパティで行います。

それぞれの値の意味は下の表のようになります。

説明
static HTMLに記述された順序に従い通常の方法でブロックを配置します。
relative staticの場合の位置を基準にブロックを相対配置します。後続のブロックの配置はそのままです。
absolute 親要素またはbody要素(つまりページ全体)を基準にブロックを絶対配置します。後続のブロックは詰めて配置されます。
fixed ウインドウを基準にブロックを絶対配置します*1。さらにウインドウ内での位置は固定されスクロールしても位置が変化しなくなります。

すなわちpositionrelativeを指定すると通常の位置からtop、bottom、left、rightの各プロパティの値の分だけずらして要素を配置することができます。top、bottom、left、rightの各プロパティにはマイナス値も使えます。例えば、top: 10pxと組み合わせれば通常位置を基準に上から10pxの位置(すなわち通常位置の10px下)に、top: -10px; left: 10pxと組み合わせれば通常位置を基準に上から-10px左から10pxの位置(すなわち通常位置から上に10px右に10pxずれた位置)にボックスが配置されます(下図)。

position: relativeの例

ただ、実際のところpositionrelativeでは位置をずらした分後続の要素を詰めないので通常の配置の位置にぽっかりと無駄なスペースが空いてしまい、CSSでWebデザインをする上ではあまり使い勝手が良くありません。また、IEではバグにより本来のスペース以上に広く空白が空くことがあるのでposition:relative;を使う場合にはIEでの表示にも注意する必要があります。

それではpositionrelativeは使わないかというとそんなことはありません。確かに相対配置は使いにくいのですが、positionrelativeという設定自体はpositionプロパティを利用したデザインの上で欠かせない存在だと思います。

次にどのような場面でpositionrelativeという設定を使うのか、使いドコロを見ていきましょう。

使いドコロ1: position: absoluteと組み合わせる

1つ目の使いドコロはposition: absoluteと組み合わせる使い方です。

先程の表のposition: absoluteの説明で「親要素またはbody要素を基準に…」と書きました。では親要素とbody要素のどちらを基準にするかはどのように決まるのでしょうか?

実はこれは親要素のpositionプロパティの値によって決まります。position: absoluteを指定した要素の親要素にpositionプロパティの値がrelativeabsolutefixedのものがあればそのうち最も近い階層の親要素が、relativeabsolutefixedのものがなければbody要素が絶対配置の基準となります。つまり絶対配置でbody要素以外を基準にしてボックスを配置したい場合、基準としたい親要素のpositionプロパティをrelativeabsolutefixedのいずれかに設定しておけばよいわけです。

このとき便利なのがpositionrelativeです。デザイン上の必要性があり基準としたい親要素に既にrelativeabsolutefixedのいずれかが設定されていればそれをそのまま利用できますが、そうでない場合positionrelativeにしておけば、absolutefixedのように後続の要素を詰めないのでデザインを崩しませんし、top、bottom、left、rightの各プロパティの値を設定しなければ通常位置のまま絶対配置の基準とすることができます。

この使い方は言うならば「絶対配置の基準を定めるpositionrelative」といったところでしょうか。

使いドコロ2: z-indexと組み合わせる

2つめの使いドコロはz-indexプロパティの指定と組み合わせる使い方です。

position: absoluteなどを使ってブロックを色々な場所に配置しているとブロックの重なり方を制御する必要性が出てきます。このようなブロックの重なる順序を制御するのがz-indexプロパティです。z-indexプロパティは通常の値を0として値が大きいものほど手前に重ねて表示します。

z-indexは凝ったデザインを作る際に便利なプロパティですが、これを有効にするためには適用する要素のpositionプロパティの値がrelativeabsolutefixedのいずれかである必要があります。

使いドコロ1の場合と同じくここでもposition: absoluteが便利です。通常位置に配置しながらz-indexプロパティを指定したい場合にtop、bottom、left、rightの各プロパティを設定せずにpositionプロパティの値をrelativeに設定すれば、デザインを崩さずにz-indexプロパティの指定を適用することができます。

CSS3では色の指定の他に透明度を指定することができます。
rgbaとは、赤(red)・緑(green)・青(blue)・透明(alpha)の事。
指定する順番もこの順番になります。

色の指定は『#FFFFFF』のような16進数は使えず、『0-255』または『0%-100%』で指定します。

透明度の指定は『0.0-1.0』で指定します。

記述方法

background-color: rgba(赤,緑,青,透明);

サンプル

.sample1 { background-color: rgba(255,0,255,0.0);}
.sample2 { background-color: rgba(255,0,255,0.2);}
.sample3 { background-color: rgba(255,0,255,0.4);}
.sample4 { background-color: rgba(255,0,255,0.6);}
.sample5 { background-color: rgba(255,0,255,0.8);}
.sample6 { background-color: rgba(255,0,255,1.0);}
 
SAMPLE1
SAMPLE2
SAMPLE3
SAMPLE4
SAMPLE5
SAMPLE6
今まで画像で角丸を表現していた部分を border-radius を使用する事で簡単に角丸を表現出来ちゃうプロパティです。

border-radius 基礎

現在のところ Safari、Google Chrome では -webkit-border-radius、Firefox では -moz-border-radius と指定するようになってます。
IE や Opera にも実装させるなら JavaScript 等を使用しなくてはいけません。

border-radius 指定方法




.demo   {  
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}  

<style>要素で文書単位に適用する

HTML文書の<head>要素内に<style>要素を記述して、文書単位にスタイルシートを設定します。 適用されるスタイルがCSSによるものであることをブラウザなどに知らせるために<style>要素のtype属性の値にはtext/cssを指定します。

尚、スタイルシート部分を<!-- -->でコメントにするのは、スタイルシートに対応していない古いブラウザで<style>要素の内容がそのまま表示されてしまうのを防ぐためです。ただし、近年ではほとんどのブラウザは<style>要素をサポートしているので、<!--と-->を省略してもほぼ問題ないでしょう。

<html>
<head>
<style type="text/css">
<!--
p {color:blue; line-height:1.5;}
-->

</style>
</head>
<body>
<p>段落となります。</p>
</body>
</html>

1. リストのマーカーとして画像を設定する

HTML でリストを書くには、ul, li 要素を用いる。

<ul id="list0">
	<li>hoge</li>
	<li>piyo</li>
	<li>fuga</li>
</ul>

このリストの項目の前に、マーカーとして画像star(star.png) を付けるには、CSS で指定する。

#list0 { 
	list-style-image: url("star.png"); 
	list-style-position: inside;
} 

img05-30-2010[1]

これにより、右図のように表示される。

 

リスト項目の背景画像を設定

マーカーの中心に文字の位置を合わせるには、マーカーをリスト項目の背景画像として設定する。

#list0 li { 
	list-style: none;
	background: url("star.png") no-repeat top left;
	padding: 15px 0px 15px 60px;
} 

img05-30-2010[2]

文字が真ん中に位置するように padding で上下の間隔を調整する。

 

2. 画像と文字を揃える

a. 要素を垂直方向に対して、中央で揃える

画像と文字の位置を、垂直方向に真ん中で揃えたい場合は vertical-align を使う。

<img src="star.png" style="vertical-align:middle;" />
<span >hoge piyo fuga</span>

 img05-30-2010[4]

 

b. 要素を水平方向に対して、中央に配置

水平方向に対して、要素を中央に配置したい場合は text-align を用いる。

text-align が適用される対象は、

Applies to: block-level elements, table cells and inline blocks

(16.2 Alignment: the 'text-align' property より)

div 要素の子要素として画像を配置。

<div style="text-align:center;">
  <img src="star.png" />
</div>

または、display と 要素をセンタリング するための margin の設定を併用し、

<img src="star.png" style="display:block; text-align:center; margin:auto;" />

 

ブログランキング
にほんブログ村 IT技術ブログ IT技術メモへ
 
カレンダー
09 2017/10 11
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
人気ブログランキング
ブログランキング ブログランキング
最新CM
最新TB
ブログ内検索
PR
ATOM  
ATOM 
RSS  
RSS 
Copyright ©   プログラムメモ   All Rights Reserved
Design by MMIT  Powered by NINJA TOOLS
忍者ブログ [PR]