WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

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

授業で進めていた、モバイルファーストを意識したレスポンシブデザインサイトの制作もいよいよPCレイアウト(960px以上)を整えて終了です。基本的にはタブレットサイズで768pxに指定していた横幅を960pxにすれば完成です。

http://yachin29.com/sp-pc/index2.html


ただ、このままではアコーディオンパネル部分のjQueryが有効で、パネルをクリックすると開閉してしまうので、jQueryの書き換えが必要になってきます。

HTML5に入って度々目にするようになった決定演算子もここでしっかりと覚え直しましょう。

gt (greater than)
gte (greater than or equal to)

lt (less than)
lte (less than or equal to)


<IE以外のブラウザ>
<!--[if !IE]> ~ <![endif]-->

<IE 8>
<!--[if IE 8]> ~ <![endif]-->

<IE 8 未満のバージョン → IE 7 , IE 6 など>
<!--[if lt IE 8]> ~ <![endif]-->

<IE 8 以下のバージョン → IE 8, IE 7 , IE 6 など>
<!--[if lte IE 8]> ~ <![endif]-->

<IE 8 より上のバージョン → IE 9>
<!--[if gt IE 8]> ~ <![endif]-->

<IE 8 以上のバージョン → IE 8, IE 9>
<!--[if gte IE 8]> ~ <![endif]-->

タブレットレイアウト以上になるとアコーディオンボタンを効かせない為の処理

  // アコーディオン
  $('.toggle').find('h2').click(function(){
        if( $('body').width() <= 768){ //ブレイクポイント未満でアコーディオンが動くようにする条件分岐
      $(this).siblings('dl ').slideToggle('fast', function(){
        $(this).parent().toggleClass('close');
      });
     }
  });


PCレイアウトも加味したレスポンシブ用スタイルシート

rwd.css

@charset "utf-8";


/*タブレットレイアウト*/
#globalHeader {
  border: none;
  padding: 0;
}
#globalHeader .headerInner {
  margin: 0 auto;
  padding-top: 20px;
  position: relative;
  width: 768px;
  }
#globalHeader h1 {
  width: 235px;
  height: 55px;
  float: none;
}
#globalHeader nav.menu {
  background: url(../img/bg_nav_header.png) left top repeat-x;
  float: none;
  margin: 0;
  padding: 0;
}
#globalHeader nav.menu #menuToggle {
  display: none;
  }

#globalHeader nav.menu ul {
  overflow: hidden;
  background: none;
  border: none;
  box-shadow: none;
  display: block;
  margin: 10px auto;
  width: 768px;
  padding: 0;
  position: static; /*スマホ部分で使っているpositionのリセット*/
  }

#globalHeader nav.menu ul li {
  background: left top no-repeat;
  background-size: 100%;
  border: none;
  float: left;
  width: 25%;
}
#globalHeader nav.menu ul li a {
  border: none;
  display: block;
  height: 44px;
  padding: 0;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
#globalHeader nav.menu ul li.service {
  background-image: url(../img/nav_header_service.png);
}
#globalHeader nav.menu ul li.proven {
  background-image: url(../img/nav_header_proven.png);
}
#globalHeader nav.menu ul li.corporate {
  background-image: url(../img/nav_header_corporate.png);
}
#globalHeader nav.menu ul li.recruit {
  background-image: url(../img/nav_header_recruit.png);
}
#globalHeader nav.menu li a:hover {
  background: #fff;
  opacity: 0.2;
}

/*body部分*/
#body {
  margin: 10px auto 0;
  width: 768px;
}
div.alert {
  margin-top: 18px;
  padding: 10px;
}

/*タブパネル*/
#pickup ul.tab {
  display: none;
}
#pickup h3, 
#pickup div.tabContents,
div.indexBoxes div.captionBox {
  display: block;
}
#pickup {
  margin-top: 18px;
  padding: 0 18px 0;
  overflow: hidden;
}

#pickup h2 {
  font-size: 18px;
  padding: 10px 0;
}
#pickup div.tabContents {
  float: left;
  width: 33.33%;
  padding: 10px;
  box-sizing: border-box;
}

#pickup div.round {
  border-radius: 10px;
}
#pickup div.tabContents p.text {
  margin: 10px 10px;
  line-height: 1.6;
}

/*indexBoxエリアのスタイル*/
.columnWrapper {
  overflow: hidden;
}
div.indexBoxes {
  float: left;
  margin-top: 20px;
  width: 68%;
}
div.indexBoxes ul {
  border: none;
  overflow: hidden;
}
div.indexBoxes ul li {
  float: left;
  margin-bottom: 12px;
  width: calc(50% - 20px);
  margin-right: 20px;
  border-top: none;
  background: none;
}
div.indexBoxes ul li a {
  padding: 0;
}

div.indexBoxes li h2 {
  border: 1px solid #CCC;
  box-sizing: border-box;
  border-radius: 5px;
  background-image: -webkit-linear-gradient(top, #ffffff, #efefef);
  background-image: linear-gradient(to bottom, #ffffff, #efefef);
  display: block;
  font-size: 16px;
  font-weight: bold;
  line-hegiht: 1;
  padding: 12px 10px;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
  margin-bottom: 20px;
}
div.indexBoxes ul li a {
  background-image: none;
}
div.indexBoxes ul li img {
  float: left;
  border: 1px solid #ccc;
  padding: 3px;
  margin-right: 10px;
}
div.indexBoxes ul li p {
  font-size: 14px;
  font-weight: normal;
  line-height: 1.4;
}

/*アコーディオン部分*/
section.seminar {
  float: right;
  width: 32%;
  margin-top: 20px;
}
 
section.information {
  border: none;
  margin-top: 18px;
}

section.seminar h2,
section.information h2 {
  border: 1px solid #ccc;
  border-radius: 5px;
} 

.toggle.close dl {
  display: block !important;/* スマホ画面でcloseした状態のままPC画面に移動した時に閉じた状態にならないように*/
}

dl.informationLink dt {
  padding: 0 10px;
  width: auto;
  line-height: 1.8;
}

dl.informationLink dd {
  background: none;
  border-top: none;
  border-bottom: 1px solid #ccc;
  line-height: 1.8;
}

dl.informationLink dd a {
  padding: 12px 10px;
}
 
section.information dl.informationLink dt {
  width: 8em;
}

section.information dl.informationLink dd a {
  padding-left: 10em;
}

.toggle h2 {
  cursor: default;
}

.toggle h2 span,
.toggle.close h2 span {
  background: none !important;
}

/*footer部分*/
#globalFooter nav {
  background: #eaeaea;
}

#globalFooter nav ul {
  margin: 0 auto;
  padding: 16px 6px;
  width: 756px;
}

#globalFooter nav ul li {
  border: none;
  margin-right: 30px;
  width: auto;
}

#globalFooter nav ul li a:hover {
  text-decoration: underline;
}


@media only screen and (min-width:960px){
#globalHeader .headerInner {
  width: 960px;
}
#globalHeader nav.menu ul {
  width: 960px;
}
#globalHeader nav.menu ul li a {
  height: 50px;
}
#body {
  width: 960px;
}
}