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

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

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

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

f:id:yachin29:20160906013820j:plain

前回は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」は1回1回リロードしないと現在のwidthを取得しませんが、今回の「.resize」はリロードする必要が無いので非常に便利ですが、使うには注意が必要です。

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

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