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

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

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

モバイルファーストを意識したレスポンシブデザインサイトの制作 その3

レスポンシブサイトのタブレット・PCレイアウトを完成させます。

今回のブレイクポイントは

PC         960px以上
タブレット     768px~959px
スマートフォン   767px以下

タブレット・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-->

タブレット用レイアウトの完成図(768px~959px)

f:id:yachin29:20160124191104j:plain


PC用レイアウトの完成図(960px以上)
f:id:yachin29:20160124191154j:plain