レスポンシブサイトのタブレット・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>
変更後
<div class="columnWrapper">
<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>
<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>
</div>
スマホサイト用のスタイルシートに追加
div.indexBoxes .captionBox{
display: none;
}
div.indexBoxes h2 {
font-size: 16px;
font-weight: bold;
}
