2006年12月25日

段落(pタグ)とアンカー(aタグ)さえあればどこにでも配置できるさ

こないだ知人に「ある部分にボタンを後からいれようと思ったけど方法が思いつかない」と相談され、
よしきた、下記のような方法を伝授しました。
結構当たりまえのテクニックだと思っていたんですが、まだまだ浸透していないようなのでご紹介します。

普通ボタンってこんな構造になってると思います。

<p><a href="#"><img src="#" /></a></p>

そして、どのように配置したいかというと、
ようするにこの「more>>」ってとこみたいに配置したいって事ですね。
（イメージはwordpress.comです。)

このようなレイアウトを後から実現するにあたって結構簡単な方法があります。

仮ですが、以下のようなマークアップが一般的だと思いますのでこれに挿入してみます。

<h2>Entry</h2>
<ul>
<li>* Code</li>
<li>* Content</li>
<li>* Culture</li>
<li>* Design</li>
<li>* Process</li>
</ul>

こんな感じですね

これに上で書いたコードを追加（今回はボタンを作るのが面倒くさかったのでimgタグはなしでテキストのアンカー）

<h2>Entry</h2>
<p><a href="#">more>></a></p>
<ul>
<li>* Code</li>
<li>* Content</li>
<li>* Culture</li>
<li>* Design</li>
<li>* Process</li>
</ul>

こんな感じになります

CSSで調整

p{
	position:relative;
	text-align:right;
	margin:0;
}
p a{
	position:absolute;
	display:block;
	top:-1.5em;
	right:1em;
}

これで完成

解説をすると、
ようするにですが、pを相対配置して基準の座標にし、aを絶対配置しています。
それによりpは内包する要素がなくなり高さ消失、
あとは絶対配置ですので座標を指定してあげると配置は好きな場所に自由自在です。

今日はアンカーの中はテキストですが、imgタグでボタンを挿入すれば知人のボタンの件は解決ですね。
もしinputやbuttonが使いたい場合はaタグの部分を入れ替えてもらえればそのまま使う事ができます。
一部分のテキストを抜き出したい場合はアンカーの代わりにスパンなどを利用するといいでしょうね。
ほかにもこのテクニックはいろんな用途に利用できますので、いい使い道を発見したら僕にも教えてください。

• 個別ページ｜
• コメント(4)｜
• トラックバック(1)