更新情報レイアウト
トップページに配置されている「更新情報」の部分を作成します。ニュースのエリアは、あらかじめ高さを設定し、高さ以上の内容になった場合、自動でスクロール出現する仕様にします。
【サンプルを見る】
http://cocohp.com/sample/news/
いろんな方法が考えられますが、日付と内容は関連性があり「ペア」として関連性を持たせる方が良いと考えます。また、dlやdtは、デフォルトで余白がありますので全てリセットしてください。
「定義型リスト」を使って実現してみましょう。
- 日付
- 内容
- 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;
}
}
練習問題
【参考スタイル】
*{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%;
}