仕事でよく使う「詳細はこちらへ」の組み方について

Category ：
CSS リファレンス

久しぶりの更新です。お盆前はくそ忙しく、お盆は遊びほうけ、お盆明けはやる気なしですっかり更新出来ないでいました...
そろそろお盆ボケを戻していかないとまずいので更新していたきたい思います！

ここからが本題ですが、上記画像の様にイメージ画像があり、その中に「詳細はこちら」って感じのパターンって最近仕事でよく使うんですが、こういう時の組み方って大きく分けて背景画像にする方法と position を使う方法があると思うでその方法を紹介したいと思います。

…ここからが続き

背景画像にする方法

XHTML

<p class="sample0825_1"><a href="#header"><img src="/images/css/09/0825-2.gif" alt="詳細はこちらから" class="btn" width="120" height="17" /></a></p>

CSS

#contents .sample0825_1	{
	background: url(../../images/css/09/0825-1.jpg) no-repeat;
	width: 554px;
	border: 1px solid #666;
	text-align: right;
	padding: 75px 7px 7px;
	margin-bottom: 12px;
}

こっちの方法ですと「詳細はこちら」のボタンの配置を指定するのが面倒ですね...それに XHTML 上では何の詳細か分からない状態です。

position を使う方法

CSS Lecture CSSリファレンス、(X)HTML、Movable Typeその他Webサイト制作に関する役立つ情報を掲載します！

XHTML

<div class="sample0825_2">
<p><img src="image/css/09/0825-1.jpg" alt="CSS Lecture CSSリファレンス、(X)HTML、Movable Typeその他Webサイト制作に関する役立つ情報を掲載します！" width="568" height="100" /></p>
<p class="data"><a href="#header"><img src="/images/css/09/0825-2.gif" alt="詳細はこちらから" class="btn" width="120" height="17" /></a></p>
</div>

CSS

#contents .sample0825_2	{
	width: 568px;
	border: 1px solid #666;
	margin-bottom: 12px;
	position: relative;
}
#contents .sample0825_2 p.data	{
	position: absolute;
	right: 7px;
	bottom: 7px;
}

ソースは若干長くなります。でも「詳細はこちら」のボタンの配置も簡単ですし、XHTML 上でも何の詳細か分かります。

こういう理由から自分は position を使う方法を使ってます。他に組み方がありましたら是非コメント下さい＾＾

Comments