定義型リストを学ぶ
更新情報レイアウト
トップページに配置されている「更新情報」の部分を作成します。ニュースのエリアは、あらかじめ高さを設定し、高さ以上の内容になった場合、自動でスクロール出現する仕様にします。
【サンプルを見る】
http://cocohp.com/sample/news/
いろんな方法が考えられますが、日付と内容は関連性があり「ペア」として関連性を持たせる方が良いと考えます。また、dlやdtは、デフォルトで余白がありますので全てリセットしてください。
「定義型リスト」を使って実現してみましょう。
1 2 3 4 |
<dl> <dt>日付</dt> <dd>内容</dd> <dl> |
【参考】 ※枠内に、小さいスクロールが出現して過去ログを見ることができます。
- 2013/05/01
- 連休かもしれない。旅行に行くぞ。
- 2013/04/01
- 会社概要を更新しました。
- 2013/03/20
- Webサイトをリニューアルしました。
Webサイトをリニューアルしました。代表取締役が、変更になりました。
所在地も変更があります。詳細は、会社概要をご覧ください。 - 2013/02/20
- 新入社員募集中!詳しくは、リクルートをご覧ください。
- 2013/01/20
- 新年あけましておめでとうございます。本年もよろしくお願い致します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
//リセットしておく 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 Pゴシック", "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; } } |
練習問題
【参考スタイル】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
*{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%; } |