htmlの定義型リストを使ってみる: CANPANマニア

<< ２０１３年２月のブログサロン～CANPANブログとFacebookの連携・活用 | TOP | 文字にリンクを貼る >>

2013年04月10日

htmlの定義型リストを使ってみる

「定義型リスト」とは
「用語」と「説明」によって構成されます。

■通常
<記事内容>

<dt>都道府県</dt>
<dd>サイトのURL</dd>
<dt>山口県</dt>
<dd>http://www.pref.yamaguchi.lg.jp/</dd>
<dt>島根県</dt>
<dd>http://www.pref.shimane.lg.jp/</dd>
</dl>

<記事表示>

都道府県: サイトのURL
山口県: http://www.pref.yamaguchi.lg.jp/
島根県: http://www.pref.shimane.lg.jp/

■横並び
<記事内容>

<dl class="d120">
<dt >都道府県</dt>
<dd>サイトのURL</dd>
<dt >山口県</dt>
<dd>http://www.pref.yamaguchi.lg.jp/</dd>
<dt>島根県</dt>
<dd>http://www.pref.shimane.lg.jp/</dd>
</dl>

dl.d120 {  
   overflow: hidden;  
   zoom: 1;  
}  
dl.d120 dt {  
	width: 100px;  
	float: left;  
	clear: both;  
	font-weight: bold;  
}  
dl.d120 dd {  
	padding: 0 0 5px 120px;  
}

<記事表示>

都道府県: サイトのURL
山口県: http://www.pref.yamaguchi.lg.jp/
島根県: http://www.pref.shimane.lg.jp/

■横並び下線ドット
<記事内容>

<dl class="dl120dt">
<dt >都道府県</dt>
<dd>サイトのURL</dd>
<dt >山口県</dt>
<dd>http://www.pref.yamaguchi.lg.jp/</dd>
<dt>島根県</dt>
<dd>http://www.pref.shimane.lg.jp/</dd>
</dl>

dl.dl120dt{  
	overflow: hidden;  
	zoom: 1;  
}  
dl.dl120dt dt{  
	margin-bottom: 5px;  
	padding-bottom: 5px;  
	width: 100px;  
	float: left;  
	clear: both;  
	font-weight: bold;  
}  
dl.dl120dt dd{  
	margin-bottom: 5px;  
	padding: 0 0 5px 120px;  
	border-bottom: 1px dotted #999;  
}

<記事表示>

都道府県: サイトのURL
山口県: http://www.pref.yamaguchi.lg.jp/
島根県: http://www.pref.shimane.lg.jp/

【マニアの覚書(seesaa関数など)の最新記事】

posted by CANPANマニアスタッフ at 09:43 | Comment(0) | TrackBack(0) | マニアの覚書(seesaa関数など)

この記事へのコメント

コメントを書く

この記事へのトラックバックURL
トラックバックの受付は終了しました
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック