WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

レスポンシブに対応した定義型リストの制作

使用するサンプルテキスト

<div class="inner news-box">
<div class="news">
<h2>ニュースリリース</h2>
<dl>
<dt>2018年1月4日</dt>
<dd>EC限定“バレンタイン用ギフトセット”「GRAND KIRIN GRAND GIFT(グランドキリン グランドギフト)」をAmazon.co.jpおよびLOHACOにて数量限定で先行発売</dd>
<dt>2017年12月27日</dt>
<dd>紅茶飲料のNo.1ブランド「キリン 午後の紅茶」年間販売数量が過去最高を更新!</dd>
<dt>2017年12月26日</dt>
<dd>ワイン一部商品の価格改定について</dd>
<dt>2017年12月22日</dt>
<dd>「第6回いきものにぎわい企業活動コンテスト」で「審査員特別賞」を受賞! 椀子(マリコ)ヴィンヤード生態系調査・植生再生活動</dd>
<dt>2017年12月21日</dt>
<dd>「キリンビール大学」レポート 2016年 世界主要国のビール消費量</dd>
<dt>2017年12月21日</dt>
<dd>「復興応援 キリン絆プロジェクト」熊本支援 熊本ごはん組に支援金を助成</dd>
<dt>2017年12月20日</dt>
<dd>「STARFLYER Black BREWERY」を開催</dd>
</dl>
</div>

<div class="info">
<h2>新着情報</h2>
<dl>
<dt>2018年1月5日</dt>
<dd>「Ketel One - ケテル ワン」サイトを公開!</dd>
<dt>2017年12月31日</dt>
<dd>「キリン一番搾り生ビール」新CM『「おいしい日本」篇 60秒』を公開!</dd>
<dt>2017年12月26日</dt>
<dd>キリン食生活文化研究所 連載コラム「Vol.20 ユニークな時代を生きている幸せ」公開中!</dd>
<dt>2017年12月25日</dt>
<dd>「キリン ファイア」新CM『「冬の高台 年末」篇』を公開!</dd>
<dt>2017年12月19日</dt>
<dd>「キリン 氷結® 紅ほっぺ<期間限定>」を新発売!(12月19日発売)</dd>
<dt>2017年12月19日</dt>
<dd>キリン食生活文化研究所 キリン食生活文化研究所のアンケート「ちょっと教えて」実施中!</dd>
<dt>2017年12月12日</dt>
<dd>「キリン メッツ みかん」を新発売!(12月12日発売)</dd>
</dl>
</div>
</div>