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

前回はdl要素を使いましたが、今回はli要素でマークアップをしていきましょう。

文章構造

<div id="News_area">
<div id="News_release">
<h2 id="News_click">ニュースリリース</h2>
<ul  id="News_text">
<li><span>2016年9月2日</span><a href="#">[スプリングバレーブルワリー東京（代官山）限定]「秋三昧」を新発売</a></li>
<li><span>2016年9月1日</span><a href="#">「のどごし〈生〉」の新CMがスタート</a></li>
<li><span>2016年9月1日</span><a href="#">「グランドキリン 十六夜お月見ボックス」を数量限定で発売</a></li>
<li><span>2016年9月1日</span><a href="#">『セブンプレミアム アンデスキーパー カベルネ・ソーヴィニヨン 750ml／ソーヴィニヨン・ブラン 750ml』を発売</a></li>
<li><span>2016年8月31日</span><a href="#">「ギュギュッと搾ったサングリア 赤ワイン×ピーチ＆ストロベリー＆ラズベリー」新発売</a></li>
<li><span>2016年8月30日</span><a href="#">「キリン 氷結® ハロウィンオレンジ＜期間限定＞」発売中止について</a></li>
<li><span>2016年8月30日</span><a href="#">「キリン 本搾り™ハイボール グレープフルーツ＆ライム＜期間限定＞」を発売</a></li>
</ul>
</div>

<div id="banner">
<h2>お知らせ</h2>
<ul>
<li><a href="#">「午後の紅茶」キャンペーン景品の自主回収に関するお詫びとお知らせ</a></li>
<li><a href="#">弊社グループに関する不審な投資勧誘にご注意ください</a></li>
<li><a href="#"><img></a></li>
<li><a href="#"><img></a></li>
<li><a href="#"><img></a></li>
<li><a href="#"><img></a></li>
</ul>
</div>
</div><!--/#News_area-->

アコーディオンパネルの導入

コーディングが終わったら、アコーディオンパネルを導入しましょう。
さらにスマホレイアウト（640px以下）のみの時に動くように条件分岐していきましょう。

.resize( )

ブラウザのウインドウをリサイズした時に引数のfunctionを実行します。また引数に何も設定しない場合は、要素に設定されたリサイズ時の処理を実行します。セレクタにはwindowsを指定しなければなりません（documentやhtmlでは機能しません）。

前回のモバイルファーストの際に使用した「.width」は１回１回リロードしないと現在のwidthを取得しませんが、今回の「.resize」はリロードする必要が無いので非常に便利ですが、使うには注意が必要です。

$(window).resize(function(){
$('#News_click').on('click touchstart',function(){
if($(window).width() <= 640){ 
	$('#News_text').slideToggle();
}
});
});

この記述だと、ul部分が縦にスクロールしても「.resize」が適応されるため、ulが開いた直後にもう１度「.slideToggle」が効いてしまうので、スクリプトの書き換えが必要になります。