読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

positionプロパティを使用する際の注意点|ブラウザ間での違い

f:id:seintoseiya:20150404090743p:plain:w500
positionプロパティを使って絶対位置・固定位置を指定した際に、ブラウザ間で配置が異なる事がある。その際の対処法を紹介する。

まずはpositionプロパティのおさらい。

positionプロパティとは

positionプロパティは、ボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する際に使用します。
positionプロパティで指定するのは、配置方法(基準位置)のみです。 実際の表示位置の指定には、 top、 bottom、 left、 rightを併用して、基準位置からの距離を設定する必要があります。
■値
static
特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。
relative
相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
absolute
絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
fixed
絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。
引用元:HTMLクイックリファレンス

サンプルサイト

これを踏まえて、以下の様なWebサイトを作成しました。
プロジェクトNo.5:Horizon
このWebサイトでは細かい位置設定が大切になっています。

仕様

星はstaticでスクロールすると見えなくなる。
「Scroll down」や「Horizon」のテキストと海は、fixedで画面下部固定にして、スクロールしてもついてくる。
太陽はabsoluteで画面最下部に配置して、スクロールした後に見える。

HTML

	<div id="description">← Scroll down</div>
	<div id="star1"></div>
	<div id="star2"></div>
	<div id="star3"></div>
	<div id="star4"></div>
	<div id="star5"></div>
	<div id="copy">Horiz&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;n</div>
	<div id="sea"></div>
	<div id="sun"></div>

CSS

#description{
	position: fixed;
	right: 0;
	top: 60px;
	/* 省略 */
}
#copy{
	position: fixed;
	width: 350px;
	/* position: fixed時の左右中央表示 */
	left: 0;
	right: 0;
	margin: auto;
	bottom: 340px;
	/* 省略 */
}
#sea{
	position: fixed;
	bottom:0;
	/* 省略 */
}
#sun{
	position: absolute;
	top: 2640px;
	/* position: absolute時の左右中央表示 */
	width: 60px;
	left: 160px; /* 本来、中央表示だと0指定だが少しずらす */
	right: 0;
	margin: auto;
	/* 省略 */
}

positionプロパティを使用する際の注意点

absoluteまたはfixedの利用時の左右中央表示

widthを与えたオブジェクトに、leftとrightをそれぞれ0にして、margin: autoにする。
参考:position:absolute、margin:0 autoして左右中央配置する - not good but great

fixedのオブジェクトの高さ指定はbottomで指定する

topから指定するとブラウザによってツールバーなどがある場合、高さが変わってくるため、bottomから指定するとブラウザ間での違いがなくなる。

f:id:seintoseiya:20150404090759p:plain

f:id:seintoseiya:20150404090819p:plain

absoluteのオブジェクトの高さ指定はtopで指定する(オブジェクトがスクロール後にある場合)

absoluteの基準位置に関しては、

親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。

なので、topから指定した場合は、「スクロールした後」は高さが一致します。スクロールしていない状態だとツールバーなどの高さで変わってしまします。
また、bottomからの指定にすると「スクロールしていない状態の画面下部が基点」になるので、スクロールした後の配置の違いが生じます。(ツールバーなどの分、スクロールしていない状態の画面の縦幅がブラウザ間で異なるため)

この辺は細かい話なので、実際にサンプルソースをいじってみていただけるとご理解いただけるかと思います。

position以外で注意すべき点

ブラウザの余白設定

ブラウザによって余白が異なるため、bodyセレクタに以下のスタイルを指定。

CSS
body{
	/* ブラウザによる余白の削除 */
	margin: 0;
	padding: 0;
	/* 省略 */

フォント

Webフォントを使う事でブラウザによって使用できないフォントなど気にせずに統一することができます。

今回はGoogleフォントの以下のフォントを利用しました。
Google Fonts

使い方は簡単。
好きなフォントを選んで、サイトにあるコードをコピーしてソースに張り付け。

HTML

headに以下のコードを追加。

<head>
	<!-- 省略 -->
	<link href='http://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'>
</head>

CSS

適用させたい要素にfontを指定。

#copy{
	font-family: 'Paytone One', sans-serif;
	/* 省略 */
}


positionプロパティはなかなか難しいですが、基準点がどこなのか意識して使うと理解しやすいかと思います。
位置設定がシビアなサイトではブラウザチェックが必須です。

参考書籍

できるポケット HTML5&CSS3/2.1全事典

できるポケット HTML5&CSS3/2.1全事典