定義型リストを学ぶ

cocohp

7年前

更新情報レイアウト

トップページに配置されている「更新情報」の部分を作成します。ニュースのエリアは、あらかじめ高さを設定し、高さ以上の内容になった場合、自動でスクロール出現する仕様にします。

【サンプルを見る】
http://cocohp.com/sample/news/
いろんな方法が考えられますが、日付と内容は関連性があり「ペア」として関連性を持たせる方が良いと考えます。また、dlやdtは、デフォルトで余白がありますので全てリセットしてください。

「定義型リスト」を使って実現してみましょう。

<dl>
<dt>日付</dt>
<dd>内容</dd>
<dl>

<dl>

<dl>

【参考】　※枠内に、小さいスクロールが出現して過去ログを見ることができます。

2013/05/01: 連休かもしれない。旅行に行くぞ。
2013/04/01: 会社概要を更新しました。
2013/03/20: Webサイトをリニューアルしました。
Webサイトをリニューアルしました。代表取締役が、変更になりました。
所在地も変更があります。詳細は、会社概要をご覧ください。
2013/02/20: 新入社員募集中！詳しくは、リクルートをご覧ください。
2013/01/20: 新年あけましておめでとうございます。本年もよろしくお願い致します。

//リセットしておく
p,dl{margin:0;padding:0;}
//分かりやすいようにセンター揃いしてあります。
body{text-align:center;}
//モバイルファーストにてスマホの際は、横幅を80%に設定
#news {
	width:80%;
	text-align:left;
	margin:30px auto;
	background: #FFFFFF;
	font: medium/1.6em "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	padding: 10px;
	color: #333;
	overflow: auto;//スクロールが自動で表示
	border: 5px solid #D6D5D6;
}
#news dt {
	font-weight: bold;
	color: #F60;
}
#news dd {
	margin-bottom: 10px;
	padding: 0 0 5px 5px;
	border-bottom: 1px dotted #999;
	margin-left: 0px;
}
footer{position:absolute;font-size:small;background-color:#eee;
bottom:0;width:100%;padding:10px;}
/*最後のリストには、点線を入れない*/
#news > dd:last-child {border:none;}
@media screen and (min-width:600px){
	#news{width:500px;height: 250px;}
//PCの際は横幅を設定し、横にフロートさせる。
同時にclear:bothも施すのもポイントです。//
	#news dt {
	width: 150px;
	float: left;
	clear: both;
	}
}

//リセットしておく

p,dl{margin:0;padding:0;}

//分かりやすいようにセンター揃いしてあります。

body{text-align:center;}

//モバイルファーストにてスマホの際は、横幅を80%に設定

#news {

width:80%;

text-align:left;

margin:30px auto;

background: #FFFFFF;

font: medium/1.6em "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif;

padding: 10px;

color: #333;

overflow: auto;//スクロールが自動で表示

border: 5px solid #D6D5D6;

}

#news dt {

font-weight: bold;

color: #F60;

}

#news dd {

margin-bottom: 10px;

padding: 0 0 5px 5px;

border-bottom: 1px dotted #999;

margin-left: 0px;

}

footer{position:absolute;font-size:small;background-color:#eee;

bottom:0;width:100%;padding:10px;}

/*最後のリストには、点線を入れない*/

#news > dd:last-child {border:none;}

@media screen and (min-width:600px){

#news{width:500px;height: 250px;}

//PCの際は横幅を設定し、横にフロートさせる。

同時にclear:bothも施すのもポイントです。//

#news dt {

width: 150px;

float: left;

clear: both;

}

練習問題

【参考スタイル】

*{margin:0;padding:0;}/*----リセット*/
body{background-color:#eee;}

section{
background-color:#fff;width:60%;
margin:20px auto;
padding:20px;
overflow: hidden;}

dl{line-height:3em;}

dt {
float: left;
clear: left;
width:20%;
white-space: nowrap;
margin-right:1.5em;
color:#999;
}	
			
dd {
border-bottom: 1px dotted #ccc;
padding-left: 40%;
}

*{margin:0;padding:0;}/*----リセット*/

body{background-color:#eee;}

section{

background-color:#fff;width:60%;

margin:20px auto;

padding:20px;

overflow: hidden;}

dl{line-height:3em;}

dt {

float: left;

clear: left;

width:20%;

white-space: nowrap;

margin-right:1.5em;

color:#999;

}

dd {

border-bottom: 1px dotted #ccc;

padding-left: 40%;

}