読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

既存サイトのトレース ニュースリリース部分

レスポンシブデザイン

f:id:yachin29:20170217123900j:plain


このようなニュースリリース部分はレスポンシブを考えるとul要素を使ってコーディングする方が簡単に出来るので、多くの場合はul・liで組まれていますが、文章構造的にはdl要素を使う方が良いでしょう。
なので、今回はdl要素を使って実際にコーディングして行きます。

ポイント
  • ddがdtの下に回り込まないようにする
  • dtとddで行数が違う場合にレイアウトが崩れないようにする
  • dtとddの高さを1行目で合わせる

文章構造

<div class="inner">
<div id="news">
<h2>ニュースリリース</h2>
<dl>
<dt>2017年2月16日</dt>
<dd><a href="#">「ブルックリン ラガー」の飲食店向け大樽・家庭向け缶をキリンビール社が全国で発売</a></dd>
<dt>2017年2月16日</dt>
<dd><a href="#">「よなよなエール」(ヤッホーブルーイング社)の大樽を、キリンビール社が全国の飲食店にて販売開始</a></dd>
<dt>2017年2月16日</dt>
<dd><a href="#">「CLUB SVB」を創設</a></dd>
<dt>2017年2月15日</dt>
<dd><a href="#">「キリン 午後の紅茶」×「グリコ ポッキー」のコラボ第3弾 史上初「道頓堀グリコサイン」に「午後の紅茶」登場!?</a></dd>
<dt>2017年2月14日</dt>
<dd><a href="#">「カッシェロ・デル・ディアブロ」のキャンペーンを3月14日(火)より開始!~絶対もらえる!悪魔の晩餐グルメキャンペーン~</a></dd>
<dt>2017年2月9日</dt>
<dd><a href="#">「キリン 午後の紅茶 ストレートティー」500ml紙パック3月7日(火)リニューアル発売</a></dd>
<dt>2017年2月9日</dt>
<dd><a href="#">「シャトー・メルシャン マリコ・ヴィンヤード シラー 2013」、「同 マリコ・ヴィンヤード ソーヴィニヨン・ブラン 2015」、「同 北信シャルドネ RGC 千曲川左岸収穫 2015」が「Asian Wine Review 2017」にて金賞を受賞</a></dd>
</dl>
</div>

<div id="new_info">
<h2>新着情報</h2>
<dl>
<dt>2017年2月14日</dt>
<dd><a href="#">「キリン サプリ レモン」を新発売!(2月14日発売)</a></dd>
<dt>2017年2月14日</dt>
<dd><a href="#">「ワールドセレクション」を新発売!(2月14日発売)</a></dd>
<dt>2017年2月14日</dt>
<dd><a href="#">「キリン 氷結®ストロング 佐藤錦」を新発売!(2月14日発売)</a></dd>
<dt>2017年2月14日</dt>
<dd><a href="#">キリンクイズ検定-第21回 キリン 午後の紅茶 いちごティー編- クイズに答えてキリン 午後の紅茶 いちごティーを当てよう!</a></dd>
<dt>2017年2月14日</dt>
<dd><a href="#">『キリン淡麗 絶対もらえるキャンペーン』情報公開!</a></dd>
<dt>2017年2月13日</dt>
<dd><a href="#">「CSV活動」トップをリニューアル!</a></dd>
<dt>2017年2月7日</dt>
<dd><a href="#">キリン食生活文化研究所 あなたのくらしのアンケート「自由時間の過ごし方」公開中!</a></dd>
</dl>
</div>
</div>