カテゴリ web制作

当サイトはアフィリエイト広告を使用しています

レスポンシブ対応の手順 【実践編】

模写コーディングしたページを実際の手順を追ってレスポンシブ化していきます！

前回記事で模写したサイトのレスポンシブ対応の準備は整いました！

※前回までの記事をご覧になっていない方は是非ご覧ください！

この記事からはレスポンシブ対応を実際の手順を追って紹介します！

完成形の確認

模写するサイトでのレスポンシブ完成形をもう一度確認しましょう。

完成形

元の模写コーディング前に確認したPC版のレイアウトはこんな感じでした。

元のレイアウト

ヘッダーのレスポンシブ化

ヘッダーは以下の方向でレスポンシブ化を進めます。

  • .wrapperを固定幅としていたものを解除して親要素一杯とし、左右にpaddingを付けて余白を調整する。
  • ナビゲーションメニュー.header_navをページ読込時は非表示とし、ぬるっと出てくるようにする(ドロワーメニュー)。
  • ドロワーメニューを出す為のハンバーガーメニューを設置する。
  • ドロワーメニューとする都合上、ヘッダー全体の高さを固定する。
  • その他はPC版のスタイルを踏襲する。

早速、前回までに作成したサイトを開き、デベロッパツールからデバイスモードを選択しましょう。

デベロッパーツールを開く

画面幅を768px以下とします。

デベロッパーツール開いたところ

デザインが崩れていますね～"(-""-)"

.wrapperの調整

コンテンツ領域を覆う.wrapperは固定幅を解除して、左右のpaddingを単位vwを用いて指定します。

@media screen and (max-width: 768px) {
  .wrapper {
    width: 100%;
    padding: 0 1vw;
  }
}

基本的に単位vwの指定は、先に紹介した方法でもいいですが、デベロッパーツールでvw指定での値を確認しながら、いい具合の値を見つけるのもありです。

paddingのvw調整

ハンバーガーメニューの設置

.header_navはスマホでは初期で非表示として、ハンバーガーメニューをクリックするとぬるっと表示する、ドロワーメニューにしていきます。

ドロワーメニューの動作

ナビゲーションメニューはPC版とは結構見た目が変わりますが、HTML要素はそのまま流用し、CSSを書き換える方針でいきます。

とりあえずはハンバーガーメニューの設置と、ナビゲーションメニューをいったん非表示にしましょう。

index.htmlは<header>内に次を追加します。

<header class="header">
<div class="wrapper header_wrap">
  <h1 class="header_ttl">KATSU portforio</h1>
  <nav class="header_nav">
    <ul>
      <li><a>service</a></li>
      <li><a>portfolio</a></li>
      <li><a>skill</a></li>
      <li><a>price</a></li>
      <li><a>profile</a></li>
      <li><a>contact</a></li>
    </ul>
  </nav>
  <button class="menu-btn"><span></span></button></div>
</header>

style.cssは次のようにします。

@media screen and (max-width: 768px) {
  .wrapper {
    width: 100%;
    padding: 0 1vw;
  }
  .header_nav {    display: none;  }   /*  ハンバーガーメニュー  */  .menu-btn {    cursor: pointer;    position: relative;    display: block;    border-radius: 2px;    width: 32px;    z-index: 20;  }  .menu-btn span {    position: relative;    display: block;    height: 32px;    z-index: 3;  }  .menu-btn:before,  .menu-btn span:before,  .menu-btn span:after {    content: "";    position: absolute;    left: 6px;    right: 6px;    top: 50%;    height: 2px;    border-radius: 2px;    margin-top: -1px;    background-color: #5b77b6;    -webkit-transition: all 0.2s;    -o-transition: all 0.2s;    transition: all 0.2s;  }  .menu-btn span:before {    -webkit-transform: translateY(-6px);    -ms-transform: translateY(-6px);    -o-transform: translateY(-6px);    transform: translateY(-6px);  }  .menu-btn span:after {    -webkit-transform: translateY(6px);    -ms-transform: translateY(6px);    -o-transform: translateY(6px);    transform: translateY(6px);  }  /* メニューを開いた状態のハンバーガー */  .menu-btn.open:before {    opacity: 0;  }  .menu-btn.open span:before {    transform: translateY(0) rotate(45deg);  }  .menu-btn.open span:after {    transform: translateY(0) rotate(-45deg);  }}

ハンバーガーメニューのCSSについては結構複雑ですが、この全てを理解する必要はありません。

上記の要素・CSSを記述すればハンバーガーメニューができる、という事と、最後の方に記述されている.openクラスを付与するとメニューの表示が変わる、という事を押さえておきましょう。

基本的にはこのまま他のサイトを作成するときにも使いまわせます。

慣れてきたら見た目をカスタマイズしてみるのもいいかもしれません。

一旦ここまでを確認してみましょう。

ヘッダー図1

ちょっとそれっぽくはなりました。PCのスタイルを踏襲しているので見出しとハンバーガーメニューはいい感じに並んでいます。

ナビゲーションメニューのスタイル変更

続いてナビゲーションメニューのスタイルを考えてきます。もう一度模写するサイトを見てみましょう。

ドロワーメニューの動作

ナビゲーションメニューは、.header下部に絶対位置指定で表示する方向で行きます。.headerに高さを指定した方が絶対表示する際楽なので指定しましょう。

@media screen and (max-width: 768px) {
  .wrapper {
    width: 100%;
    padding: 0 1vw;
  }
  .header {
    height: 50px;  }
  .header_nav {
    display: none;
  }
  
  /*  …ハンバーガーメニューのCSS(省略)…  */

どうなったかな…？

ヘッダー図2

あれ、タイトルとハンバーガーメニューが少し下に寄ってる…

デベロッパーツールで調べてみましょう。

ヘッダー図3

.headerにPC版のpaddingが付いているのが悪さしているようです。

.headerのpaddingを消し、ついでに一つ内側の.header_wrapも.headerの高さに合わせます(.wrapperに高さ指定しないように注意)。

@media screen and (max-width: 768px) {
  .wrapper {
    width: 100%;
    padding: 0 1vw;
  }
  .header {
    height: 50px;
    padding: 0;  }
  .header_wrap {    height: 100%;  }  .header_nav {
    display: none;
  }
  
  /*  …ハンバーガーメニューのCSS(省略)…  */
  
}

ヘッダー画像

いい感じになりました！

続いてナビゲーションメニューのスタイルを指定していきましょう。

.header_navのdisplay:block;を消して絶対位置指定で、.headerの下にくるようにしましょう。

@media screen and (max-width: 768px) {
  .wrapper {
    width: 100%;
    padding: 0 1vw;
  }
  .header {
    height: 50px;
    padding: 0;
  }
  .header_wrap {
    height: 100%;
  }
  .header_nav {
    width: 100%;    position: absolute;    top: 50px;  /* ヘッダーと同じ値 */    left: 0;  }
  
  /*  …ハンバーガーメニューのCSS(省略)…  */
  
}

top: 50px;と、先ほど指定したヘッダーの高さと同じ値にすることで、ヘッダーの下部にくるようにしています。

ヘッダー下部に来たでしょうか…？

ヘッダー図4

※見づらいのでメニューに背景色を付けています

下には来ました…がこれもPC版でのCSSが適用されたままで、メニューが横並びになったままです。横並びを元に戻しましょう。

@media screen and (max-width: 768px) {
  .wrapper {
    width: 100%;
    padding: 0 1vw;
  }
  .header {
    height: 50px;
    padding: 0;
  }
  .header_wrap {
    height: 100%;
  }
  .header_nav {
    width: 100%;
    position: absolute;
    top: 50px;
    left: 0;
  }
  .header_nav ul {    display: block;  /* display:flex;をやめる */  }  .header_nav ul li {    margin: 0;  }  
  /*  …ハンバーガーメニューのCSS(省略)…  */
  
}

横並びは解除されました！

ヘッダー画像5

あとは適宜スタイルを調整します。

@media screen and (max-width: 768px) {
  .wrapper {
    width: 100%;
    padding: 0 1vw;
  }
  .header {
    height: 50px;
    padding: 0;
  }
  .header_wrap {
    height: 100%;
  }
  .header_nav {
    width: 100%;
    position: absolute;
    top: 50px;
    left: 0;
  }
  .header_nav ul {
    display: block;
  }
  .header_nav ul {
    display: block;
  }
  .header_nav ul li {
    margin: 0;
    border-bottom: 1px dotted black;    background-color: #FFF1BF;  }
  .header_nav ul li a {    display: block;    padding: 10px 0;    text-align: center;  }  .header_nav ul li a:hover {    border-bottom: none;  }
  /*  …ハンバーガーメニューのCSS(省略)…  */
  
}

ここでナビゲーションメニューのスタイルにポイントが一点あります。

.header_nav ul li aにdisplay: block;とpadding: 10px 0;を指定しています。

これは<a>要素は元々インライン要素であり、幅がテキストの分しかなく、クリックできる領域が狭い為の対策です。

ヘッダー画像6

<a>要素を、ブロック要素とすることで、親要素の<li>一杯に広がり、<li>の薄オレンジ色表示のどこでもクリックできるようにしています。

<a>ではなく、<li>にpaddingを指定してもよさそうに思われますが、その場合、<li>のpadding部分は薄オレンジ色表示でクリックできそうに見えるのに、クリックできない領域となるのでNGです。

ナビゲーションメニューのドロワースタイルの実装

ここまでで、メニューを表示している時のスタイルは仕上がりました。あとは表示・非表示の方法を考えます。

ドロワーはぬるっと出てくるのが印象的です。ページを読込んだ時はヘッダー上方に隠しておいて、.openクラスを付与すると移動してくるようにします。

@media screen and (max-width: 768px) {
  .wrapper {
    width: 100%;
    padding: 0 1vw;
  }
  .header {
    height: 50px;
    padding: 0;
    position: relative;    z-index: 0;  }
  .header_wrap {
    height: 100%;
    background-color: white;
  }
  .header_nav {
    width: 100%;
    position: absolute;
    top: 50px;
    left: 0;
    transition: transform 0.5s;    transform: translateY(-100%);    z-index: -10;  }
  .header_nav.open {    transform: translateY(0);  }  .header_nav ul {
    display: block;
  }
  .header_nav ul {
    display: block;
  }
  .header_nav ul li {
    margin: 0;
    border-bottom: 1px dotted black;
    background-color: #FFF1BF;
  }
  .header_nav ul li a {
    display: block;
    padding: 10px 0;
    text-align: center;
  }
  .header_nav ul li a:hover {
    border-bottom: none;
  }

  /*  …ハンバーガーメニューのCSS(省略)…  */
  
}

ナビゲーションメニュー全体(.header_nav)に、初期状態でtransform: translateY(-100%);を指定し、先ほど調整用にナビゲーションメニューを表示していた位置から、ナビゲーションの高さ分上方向に移動しています。

また、ぬるっと動かす為にtransition: transform 0.5s;とし、transformの動きを0.5秒かけてぬるっと動かすようにていします。

ここから.openクラスを付与したときに、transform: translateY(0);で元の位置に戻すようにします。

ヘッダー画像

これでナビゲーションメニューに.openクラスを付けたり外したりすると開閉可能になります。

実際にデベロッパーツールでクラスを付け外ししてみましょう。

ヘッダー画像7

※この.openクラスの付けたり外したりは今後jQueryを使って行います！

尚、ヘッダーの後ろにナビゲーションメニューを隠すため、.header_navにz-index: -10;としていますが、これを追加するだけでは、z-indexを指定していない全ての要素の後ろに行ってしまい、表示されなくなってしまいます。

親要素の一つ後ろに表示したい場合は、親要素の更に一つ親の要素にposition: relative;とz-index: 0;とします。

z-index指定していない親要素(ここでは.header_wrap)の後ろには隠れるけど、その一つ親要素(.header)よりは前面に出す、といったイメージです。
(詳しく解説すると深みにハマるのでこの辺で…重ね合わせコンテキストでググると分かるかもしれません)

とりあえずヘッダーのレスポンシブ化はこんなところです。お疲れさまでした！！

次回はヒーロービューとSERVICEセクションをレスポンシブ化します！






次の記事
ヒーロービューとSERVICEセクションのレスポンシブ対応を実施していきます！