今日は、サイトを作っている時に使う小技をひとつ。

小さい画像やボタンなどを並べて配置したいときに、微妙にずれてしまって見映えが悪くなる時って、ありますよね。
修正しようとして位置調整用のプロパティを使っても、他のタグとの兼ね合いかブラウザのバグか、何やら面倒な理由があるらしくてその場所からガンとして動かず、イライラしてしまう。
たとえばソーシャルボタンのように、自分では管理出来ないところで値が決められてしまっており、厳密に調整しようとしてもどうにもならないなどという場合もあります。

スポンサーリンク

そんな時は、位置を調整するため《だけ》のために用意した<DIV>タグでその要素（ブロック、インラインを問わず）をくくってしまうと、うまくいきます。
コードはちょっとスマートでなくなりますが、どんな要素でも確実に思った通りの場所に配置出来るある意味必勝パターンなので、最後の手段として時たま使っています。

たとえば、『Stenny』という要素があるとしますね。

<div class="Stenny">
(^･ｘ･^)？
</div><!--Stenny-->

これを、『Box』というid要素

#Box{
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background: #ff0;
}

<div id="Box">
みかん箱
</div><!--Box-->

のすぐ右隣に配置したい、とします。

まず、位置指定用（要素のサイズに関係なく左上のポイントを指定するためだけのものなので、《アンカー用》という言い方が良いかも知れません）の<DIV>タグで、配置したい要素をラッピングしてしまいます。こんな風に。

<div class="anchor">
	<div class="Stenny">
	(^･ｘ･^)？
	</div><!--Stenny-->
</div><!--anchor-->

class名『anchor』となっているのが、位置指定用のタグですね。
そしてさらにそれを、配置の基準にしたい要素（id名『Box』）のタグで丸ごとくくってしまうのです。

<div id="Box">
	みかん箱
	<div class="anchor">
		<div class="Stenny">
		(^･ｘ･^)？
		</div><!--Stenny-->
	</div><!--anchor-->
</div><!--Box-->

スポンサーリンク

スタイルの指定は、こんな感じ。

#Box{
position: relative;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background: #ff0;
}

.anchor{
position: absolute;
top: 0px;
left: 100px;
}

ポイントは、３つ。
１つめはまず、基準にする要素（親要素、今回はid名『Box』）のスタイル指定に、

position: relative;

を入れること。これを入れないと、その次の配置したい要素が基準として認識してくれません。
２つめは、配置したい要素（子（位置指定用）要素、今回はclass名『anchor』）のスタイル指定に、

position: absolute;

を入れること。これでやっと、基準にしたい要素と配置したい要素、その両方で準備が整いました。
そして最後の３つめが、配置したい要素の位置指定です。

top: 0px;
left: 100px;

この位置指定では配置したい要素（子（位置指定用）要素、今回はclass名『anchor』）の左上の座標ポイントを指定していますが、基準にする要素（親要素、今回はid名『Box』）と同じ位置からどれだけずれているかという意味で、プラスの数値として右／下にずれていきます。
マイナス符号をつけて、左／上に移動した位置に指定することも出来ます。
今回は箱の右隣にくっつく形に配置したいので、高さは0px、横位置を『Box』の横幅と同じ100pxとしました。

ちなみに0pxなら指定しなくてもいいんじゃ、となりそうですが、そうではありません。ここ注意です。
0pxを指定しないと、配置したい基準と同じ位置ではなくその中に入っている要素を含んだ上で場所が決められてしまうらしいので、中に入っているものによって位置が変わってしまうんですね。
この辺は結構複雑みたいなので、とりあえず0pxを指定するべき、とだけ覚えてます＾＾；

positionプロパティのabsoluteとrelativeの関係はちょっと理解しにくくて、スタイルシート初心者を卒業するためのカベのひとつとも言われていますね。
横着してずっとフレームやテーブルタグに逃げていたわたしも、先日やっとCSS初心者から一歩先へ進むことが出来ました（汗）
この先HTMLを書くときはデザイン部分はすべてスタイルシートで！と、目下頑張って修練を積んでいるところです。

投稿タグ
, , ,