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

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

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

ここからが本題ですが、上記画像の様にイメージ画像があり、その中に「詳細はこちら」って感じのパターンって最近仕事でよく使うんですが、こういう時の組み方って大きく分けて背景画像にする方法と 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

MIYA

MIYA

チバさんお久しぶりです!

確かに一枚画像でやれば全部解決出来ちゃいますね!どうも「詳細はこちら」の部分がボタンチックになっている事が多いので気になってしまうんですよね;;

2009年08月26日 10:11

チバ

チバ

1枚の画像の中に「詳細はこちら」も含めてしまって、画像全体にリンクを設定するとか。
リンクも押しやすいし、何の詳細かもわかるし。
なにより簡単だし。

2009年08月25日 23:12

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article