アイコンやサムネイルの横にタイトルと概要文があるような時。

とりあえず、暑いっす。えぇ。
ここ最近の暑さにやられ気味なhirasawaです。そんなやられ気味な状況なので、HappyLifeも夏っぽくしてみました。

あと、弊社のベトナム事業部の女性マネージャーがブログを開始しました。

ベトナムに興味がある方や女性マネージャーに興味がある方、更新率も高いので、ぜひに。

さて、そろそろ本題に。

こんな感じで、アイコンとかサムネイルがあってその横にタイトルと概要文があるような、そんなデザインってよく見かけるかと。

今回は、これの組み方の一つとしてサンプルを用意してみました。
サンプルの確認は以下より。

• サンプルを見る

---- こっから続き

こういうデザインの場合、どうやって組もうか結構悩むんです。
何に悩むって、この画像をどうやってマークアップするか。

今まで多かったパターンは、基本的には定義リストを選んで、ddに入れたりしてましたが、コレだとリンクを画像とdtに張る必要があって手間だなぁ～と。
なので、画像もdtに入れてしまえばリンクは一つですむので良い感じがしました。

と、言う訳で今回は以下のように組んでます。

<dl class="serviceList">
<dt><a href="./">デジパのウェブサイト制作
<img src="./img/item/icon_digiper.gif" alt="digipeアイコン" /></a></dt>
<dd>
デジパ(略)評価される理由とは。
</dd>
<dt><a href="./">デジパのウェブサイト制作
<img src="./img/item/icon_digiper.gif" alt="digipeアイコン" /></a></dt>
<dd>
デジパ(略)評価される理由とは。デジパ(略)評価される理由とは。
</dd>
<dt><a href="./">デジパのウェブサイト制作
<img src="./img/item/icon_digiper.gif" alt="digipeアイコン" /></a></dt>
<dd>
デジパ(略)評価される理由とは。
</dd>
</dl>

dt要素のテキストの後にimg要素を配置。dd要素が簡単な説明とか概要文です。
h3要素とかの見出しに、pって組み合わせでも、h3要素に画像を入れれば同様の事が出来る風味です。

CSSは以下のようになってます。

#main dl.serviceList {
	margin: 0 0 20px;
}
 
#main dl.serviceList dt {
	position: relative;
	width: 460px;
	margin-bottom: 5px;
	padding-top: 15px;
	padding-left: 80px;
	font-weight: bold;
	border-top: 1px dotted #ACACAC;
}
 
#main dl.serviceList dt.firstChild,
#main dl.serviceList dt:first-child {
	border-top: 0;
	padding-top: 0;
}
 
#main dl.serviceList dt a {
	padding-left: 15px;
	background: url(../img/item/mark_01.gif) no-repeat left center;
}
 
#main dl.serviceList dt img {
	position: absolute;
	top: 15px;
	left: 0;
	padding: 2px;
	border: 1px solid #EEE;
}
 
#main dl.serviceList dt.firstChild img,
#main dl.serviceList dt:first-child img {
	top: 0;
}
 
#main dl.serviceList dd {
	margin-bottom: 15px;
	padding-left: 80px;
	height: 50px;
}
 
#main dl.serviceList > dd {
	min-height: 50px;
	height: auto;
}

デザインを整えるために本題とは関係ないプロパティやらがありますが、基本的にやってることは、positionプロパティでdt要素の左上を基点として、img要素を飛ばしてる感じです。
後は、dd要素のテキストが少ない場合に、レイアウトが破綻しないよう、min-heightの指定をして最低の高さを確保してます。

もし、dt内のテキストが画像の場合は、アイコンにclass指定して上げれば良い感じです。

こんな感じのデザインを組む必要がある場合の一つの選択肢として如何でしょうか。

最後に、

サンプルのダウンロードとサンプルの確認

• サンプルをダウンロード（zip：20kb）
• サンプルを見る

各種SBMに追加

• 
• 
• 
• 
• 
• 
•