レスポンシブサイトのタブレット・PCレイアウトを完成させます。
作例
http://yachin29.webcrow.jp/sp-pc/
タブレット・PCレイアウトを完成させる為に行うこと
HTMLにタブレット・PC専用のコンテンツを挿入する。
ブレイクポイントを指定し、タブレット・PC用のスタイルを新規作成したCSSファイルに記述する。
アコーディオンパネルをタブレット・PCでは動かないようにする。
HTMLファイルにタブレット・PC用のコンテンツを追加する為に「div class="indexBoxes"」部分の記述を一部変更します。
変更前の「div class="indexBoxes"」部分の記述
<div class="indexBoxes"> <ul> <li><a href="#"><div>サービス紹介</div></a></li> <li><a href="#"><div>実績紹介</div></a></li> <li><a href="#"><div>会社概要</div></a></li> <li><a href="#"><div>採用情報</div></a></li> </ul> </div><!--/indexBoxes-->
変更後
<div class="columnWrapper"><!--レスポンシブ用のwrapper--> <div class="indexBoxes"> <ul> <li><a href="#"><h2>サービス紹介</h2> <div class="captionBox"><img src="img/img_index_service.jpg" alt="サービス紹介"> <p>全てのインターネットユーザーにスマートさを。</p></div></a> </li> <li><a href="#"><h2>実績紹介</h2> <div class="captionBox"><img src="img/img_index_proven.jpg" alt="実績紹介"> <p>これまでに手がけたサービス、制作事例をご紹介します。</p></div></a> </li> <li><a href="#"><h2>会社概要</h2> <div class="captionBox"><img src="img/img_index_corporate.jpg" alt="会社概要"> <p>企業沿革、コーポレートメッセージなどご紹介します。</p></div></a> </li> <li><a href="#"><h2>採用情報</h2> <div class="captionBox"><img src="img/img_index_recruit.jpg" alt="採用情報"> <p>私たちの理念に共感でき、ともに未来を創っていける仲間を募集しております。</p></div></a> </li> </ul> </div><!--/indexBoxes--> <section class="seminar toggle"> <h2><span>セミナー</span></h2> <dl class="informationLink"> <dt>2015年11月11日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> <dt>2015年10月19日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> <dt>2015年10月14日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> <dt>2015年10月10日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> <dt>2015年9月29日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> </dl> </section><!--/seminar--> </div><!--/columnWrapper-->
/*レスポンシブデザイン用の追加記述*/ div.indexBoxes .captionBox{ display: none; } div.indexBoxes h2 { font-size: 16px; font-weight: bold; }