求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

dlを可変にする

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>dlを可変</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="0809.css">
</head>
<body>

<h2 id="News_click">ニュースリリース</h2>
<dl id="News_text">
<dt>2016年8月5日</dt><dd>[スプリングバレーブルワリー東京(代官山)限定]「サワーバケーション」を新発売</dd>
<dt>2016年8月3日</dt><dd>「プードゥ スパークリング」を新発売</dd>
<dt>2016年8月3日</dt><dd>「キリン 午後の紅茶 大人のこだわりミルクティー」9月6日(火)期間限定で新発売</dd>
<dt>2016年8月3日</dt><dd>「淡麗プラチナダブル」の中味・パッケージともにリニューアル</dd>
<dt>2016年8月3日</dt><dd>
ディズニーの仲間たちによる夢のパーティーへご招待!「東京ディズニーリゾート(R)・ドリームパーティーキャンペーン」9月12日(月)より全国で実施</dd>
<dt>2016年8月2日</dt><dd>
「シャトー・メルシャン 桔梗ヶ原メルロー 2012」、「同 北信シャルドネRDC千曲川右岸収穫 2015」が金賞・部門最高賞を受賞</dd>
<dt>2016年8月1日</dt><dd>「シャトー・メルシャン」シリーズの新ヴィンテージを発売</dd>
</dl>
</body>
</html>
@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}

ul {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
  color: #222;
}
img {
  border: none;
}
img, input {
  vertical-align: bottom;
}

h2 {
  margin:20px;
  text-align:center;
}
dl#News_text  {
  width:720px;
  margin: 0 auto;
  overflow: hidden;
}
#News_text dt, dd {
  font-size: 12px;
  line-height: 22px;
}
#News_text dt {
  width:16%;
  text-align: center;
  float: left;
  padding: 10px 0;
}
#News_text dd {
  width:100%;
  padding:10px 2%;
  box-sizing:border-box;
}
#News_text dt:nth-of-type(odd), dd:nth-of-type(odd) {
  background: #999;
}

@media screen and (max-width:959px){
#News_release {
width:100%;
float:none;
}
dl#News_text  {
  width:100%;
}
}
@media screen and (max-width:767px){
#News_text dt {
  width:100%;
  float: none;
  padding: 4px 4%;
  box-sizing:border-box;
  text-align:left;
}
#News_text dd {
  width:100%;
  padding:0 2% 4px;
}
}
広告を非表示にする