1. ホーム
  2. ホームページの作り方
  3. 無料で使えるデモサイト
  4. ハンバーガーメニューの設置【SP】

ハンバーガーメニューの設置【SP】

ハンバーガーメニューの設置【SP】

前回はheaderをパソコンで表示するためのデザインを設定しました。今回は前回のタグにスマホで表示するためのコードを追加していきます。

デモサイトはレスポンシブデザインで制作していきますので、同じファイルにパソコン用とスマホ用の2つのデザインを指定する必要があります。

こちらの「デモサイト」から実際のページを確認して頂けます。

目次 [閉じる]

HTMLにスマホで表示するタグを追加する

スマホでも表示するために前回のタグの中へ新たに2ヶ所コードを追加しましたのでご確認ください。記述が長くなっただけでそんなに難しくないですよ。

index.html

                	
    
                    	
  1. <header>
    2. 
                     	
  2.   <div class="inner cf">
    3. 
                     	
  3.     <div class="logo">
    4. 
                     	
  4.       <a href="./">
    5. 
                     	
  5.         <h1>いやしのカレー <span>サンプル</span></h1>
    6. 
                     	
  6.       </a>
    7. 
                     	
  7.     </div>
    8. 
                      	
  8.     <nav>
    9. 
                      	
  9.       <div class="globalNav">
    10. 
                     	
  10.         <ul>
    11. 
                     	
  11.           <li><a href="#news">お知らせ</a></li>
    12. 
                     	
  12.           <li><a href="#menu">メニュー</a></li>
    13. 
                    	
  13.           <li><a href="#shop">お店情報</a></li>
    14. 
                    	
  14.           <li><a href="./contact/">お問い合わせ</a></li>
    15. 
                    	
  15.         </ul>
    16. 
                    	
  16.       </div>
    17. 
                    	
  17.       <div class="snsWrap">
    18. 
                    	
  18.         <ul>
    19. 
                     	
  19.           <li><a href="TwitterページのURL" target="_blank"><img src="./img/icon_twitter_b.png" alt="Twitter"></a></li>
    20. 
                     	
  20.           <li><a href="FacebookページのURL" target="_blank"><img src="./img/icon_facebook_b.png" alt="Facebook"></a></li>
    21. 
                     	
  21.           <li><a href="InstagramページのURL" target="_blank"><img src="./img/icon_instagram_b.png" alt="Instagram"></a></li>
    22. 
                    	
  22.         </ul>
    23. 
                    	
  23.       </div>
    24. 
                    	
  24.     </nav>
    25. 
                    	
  25.     <div class="menuBtn">
    26. 
                    	
  26.       <a href="javascript:void(0)" class="menuTrigger">
    27. 
                    	
  27.         <div class="menuIcon">
    28. 
                     	
  28.           <span></span>
    29. 
                     	
  29.           <span></span>
    30. 
                     	
  30.           <span></span>
    31. 
                    	
  31.         </div>
    32. 
                    	
  32.       </a>
    33. 
                    	
  33.     </div>
    34. 
                    	
  34.   </div>
    35. 
                    	
  35. </header>
    36.

追加したのはnavタグの中に「snsWrap」のクラス名を付けたdivと、navタグの後ろに「menuBtn」のクラスを付けたdivです。この2つはスマホでのみ表示され、パソコンの画面には表示されない部分です。

                	
    
                    	
  1. <div class="snsWrap">
    2. 
                    	
  2.   <ul>
    3. 
                     	
  3.     <li><a href="TwitterページのURL" target="_blank"><img src="./img/icon_twitter_b.png" alt="Twitter"></a></li>
    4. 
                     	
  4.     <li><a href="FacebookページのURL" target="_blank"><img src="./img/icon_facebook_b.png" alt="Facebook"></a></li>
    5. 
                     	
  5.     <li><a href="InstagramページのURL" target="_blank"><img src="./img/icon_instagram_b.png" alt="Instagram"></a></li>
    6. 
                    	
  6.   </ul>
    7. 
                    	
  7. </div>
    8.

まず「snsWrap」の部分では、スマホでハンバーガーメニューを開いた時にTwitter・Facebook・Instagramの3つのSNSアイコンを表示しています。ここにはご自身のページのURLを記述してください。

やはりホームページを運営していくのであればSNSも同時に利用される事をオススメします。今やSNSを通じてお店や会社を知るというのも珍しい話ではないですからね。

業種によってはSNSはやらないという方もおられると思いますので、そんな時はこのタグを外しておいてください。逆に「YoutubeやLINEも付けたい」という方は同じ要領でliタグを追加してもらえればOKです！

ここで使っているアイコン画像はこちらでダウンロードできます。→「Twitterアイコンのダウンロード」「Facebookアイコンのダウンロード」「Instagramアイコンのダウンロード」

                	
    
                    	
  1. <div class="menuBtn">
    2. 
                    	
  2.   <a href="javascript:void(0)" class="menuTrigger">
    3. 
                    	
  3.     <div class="menuIcon">
    4. 
                     	
  4.       <span></span>
    5. 
                     	
  5.       <span></span>
    6. 
                     	
  6.       <span></span>
    7. 
                    	
  7.     </div>
    8. 
                    	
  8.   </a>
    9. 
                    	
  9. </div>
    10.

「menuBtn」の部分は何かというと、スマホ表示の際に右上に表示される三本線のマークを表しています。ここをタップするとハンバーガーメニューが開きます。

しれっとaタグにJavaScriptが書いてありますね（笑）。「javascript:void(0)」を付ける事によってこのaタグをタップしても画面遷移をしないようにしています。

竹馬

グローバルナビとハンバーガーメニューでリンク部分の事を言い換えていますが、同じものと思ってください。三本線をタップして開くハンバーガーメニューの中にあるのがグローバルナビです。

スマホデザインをCSSで調整する

それではここのCSSも長いですがご確認ください。header全体のロゴとハンバーガーメニューについてデザインしています。

style.css

                	
    
                    	
  1. ～共通デザイン省略～
    2. 
                    	
  2. /* ------ header ------ */
    3. 
                    	
  3. ～パソコンデザイン省略～
    4. 
                        
  4. @media screen and (min-width: 769px) {
    5. 
                        
  5.   header .menuBtn { display: none }
    6. 
                        
  6. }
    7. 
                        
  7. @media screen and (max-width: 768px) {
    8. 
                        
  8.   header { height: 60px }
    9. 
                        
  9.   header .inner { padding: 0 0 0 4% }
    10. 
                        
  10.   header .logo {
    11. 
                        
  11.     width: 260px;
    12. 
                        
  12.     padding: 0
    13. 
                        
  13.   }
    14. 
                        
  14.   header .logo h1,
    15. 
                        
  15.   header .logo p {
    16. 
                        
  16.     font-size: 1.4rem;
    17. 
                        
  17.     line-height: 60px
    18. 
                        
  18.   }
    19. 
                        
  19.   header .logo h1 span,
    20. 
                        
  20.   header .logo p span {
    21. 
                        
  21.     font-size: 2rem
    22. 
                        
  22.   }
    23. 
                        
  23.  
    24. 
                        
  24.   /* menu trigger */
    25. 
                        
  25.   .menuBtn {
    26. 
                        
  26.     width: 60px;
    27. 
                        
  27.     height: 60px;
    28. 
                        
  28.     text-align: center;
    29. 
                        
  29.     position: absolute;
    30. 
                        
  30.     top: 0;
    31. 
                        
  31.     right: 0;
    32. 
                        
  32.     display: inline-block;
    33. 
                        
  33.     z-index: 100
    34. 
                        
  34.   }
    35. 
                        
  35.   .menuTrigger,
    36. 
                        
  36.   .menuTrigger span {
    37. 
                        
  37.     transition: all .4s;
    38. 
                        
  38.     display: inline-block
    39. 
                        
  39.   }
    40. 
                        
  40.   .menuTrigger .menuIcon {
    41. 
                        
  41.     width: 25px;
    42. 
                        
  42.     height: 20px;
    43. 
                        
  43.     position: relative;
    44. 
                        
  44.     top: 20px;
    45. 
                        
  45.     display: inline-block
    46. 
                        
  46.   }
    47. 
                        
  47.   .menuTrigger span {
    48. 
                        
  48.     width: 100%;
    49. 
                        
  49.     height: 3px;
    50. 
                        
  50.     background: #e21412;
    51. 
                        
  51.     position: absolute;
    52. 
                        
  52.     left: 0
    53. 
                        
  53.   }
    54. 
                        
  54.   .menuTrigger span:nth-child(1) { top: 0 }
    55. 
                        
  55.   .menuTrigger span:nth-child(2) { top: 9px }
    56. 
                        
  56.   .menuTrigger span:nth-child(3) { bottom: 0 }
    57. 
                        
  57.   .menuTrigger span:nth-child(1) { animation: menu-bar01 .75s forwards }
    58. 
                        
  58.   .menuTrigger.active span:nth-child(1) { transform: translateY(9px) rotate(-45deg) }
    59. 
                        
  59.   .menuTrigger.active span:nth-child(2) {
    60. 
                        
  60.     left: 50%;
    61. 
                        
  61.     animation: active-menu-bar02 .8s forwards;
    62. 
                        
  62.     opacity: 0
    63. 
                        
  63.   }
    64. 
                        
  64.   @-webkit-keyframes active-menu-bar02 {
    65. 
                        
  65.     100% { height: 0 }
    66. 
                        
  66.   }
    67. 
                        
  67.   @keyframes active-menu-bar02 {
    68. 
                        
  68.     100% { height: 0 }
    69. 
                        
  69.   }
    70. 
                        
  70.   .menuTrigger.active span:nth-child(3) { transform: translateY(-9px) rotate(45deg) }
    71. 
                        
  71. }
    72. 
                        
  72.  
    73. 
                    	
  73. /* ------ nav ------ */
    74. 
                    	
  74. ～パソコンデザイン省略～
    75. 
                        
  75. @media screen and (min-width: 769px) {
    76. 
                        
  76.   header nav .snsWrap { display: none }
    77. 
                        
  77. }
    78. 
                        
  78. @media screen and (max-width: 768px) {
    79. 
                        
  79.   header nav {
    80. 
                        
  80.     width: 100%;
    81. 
                        
  81.     height: 100%;
    82. 
                        
  82.     margin: 0 auto;
    83. 
                        
  83.     border-top: 1px solid #c1c1c1;
    84. 
                        
  84.     position: fixed;
    85. 
                        
  85.     top: 60px;
    86. 
                        
  86.     right: -100%;
    87. 
                        
  87.     transition: all 0.3s ease-in-out;
    88. 
                        
  88.     float: none;
    89. 
                        
  89.     overflow-y: scroll
    90. 
                        
  90.   }
    91. 
                        
  91.   header nav.open {
    92. 
                        
  92.     min-height: 100vh;
    93. 
                        
  93.     padding-bottom: 100px;
    94. 
                        
  94.     background: #fff;
    95. 
                        
  95.     right: 0;
    96. 
                        
  96.     z-index: 99
    97. 
                        
  97.   }
    98. 
                        
  98.   header nav .globalNav ul {
    99. 
                        
  99.     height: auto;
    100. 
                        
  100.     margin-top: 60px
    101. 
                        
  101.   }
    102. 
                        
  102.   header nav .globalNav li {
    103. 
                        
  103.     height: 60px;
    104. 
                        
  104.     font-size: 1.8rem;
    105. 
                        
  105.     line-height: 60px;
    106. 
                        
  106.     display: block
    107. 
                        
  107.   }
    108. 
                        
  108.   header nav .globalNav li::before {
    109. 
                        
  109.     width: 0;
    110. 
                        
  110.     height: 0
    111. 
                        
  111.   }
    112. 
                        
  112.   header nav .snsWrap {
    113. 
                        
  113.     margin-top: 30px;
    114. 
                        
  114.     display: block
    115. 
                        
  115.   }
    116. 
                        
  116.   header nav .snsWrap ul { font-size: 0 }
    117. 
                        
  117.   header nav .snsWrap li {
    118. 
                        
  118.     width: 26px;
    119. 
                        
  119.     vertical-align: middle;
    120. 
                        
  120.     display: inline-block
    121. 
                        
  121.   }
    122. 
                        
  122.   header nav .snsWrap li + li { margin-left: 40px }
    123. 
                        
  123. }
    124.

レスポンシブでデザインする場合は「ブレイクポイント」を考える必要があります。ブレイクポイントとはパソコンとスマホでデザインを切り替える「横幅」の事です。

「@media screen and (min-width: 769px)」では、横幅の最小値が769pxまでのデバイスにデザインを適応する事ができます。要はこちらがパソコンで見た場合のデザインを指定しています。

スマホの設定は「@media screen and (max-width: 768px)」として、横幅の最大値が768pxまでのデバイスに対してデザインを指定する事ができます。

細かい話をするとこのブレイクポイントはなかなか面倒くさいです（笑）。デモサイトでは「768px」以下のサイズをスマホ、「769px」以上のサイズをパソコンとタブレットで表示しています。

ですが、もっと細かく指定するならタブレットとパソコンで切り替えるブレイクポイントも設定したりします。

例えば640px以下をスマホ、641px～1024pxまでをタブレット、1025px以上をパソコンという形にします。はじめはゴチャゴチャしてわかりづらいと思うんでタブレットはパソコンと同じデザインでいいと思います。

竹馬

ホームページ全般に言える事ですが、新しいデバイスや技術が出てくるたびに指定や記述方法が変わっていきます。ブレイクポイントも時代に合わせて変化していくという事を覚えておいてください。

jquery.min.jsを読み込む

デモサイトではJSを使用して動きを3点追加していますので「jquery.min.js」を読み込む必要があります。

index.html

                	
    
                    	
  1. <!DOCTYPE html>
    2. 
                        
  2. <html>
    3. 
                        
  3. <head>
    4. 
                        
  4. ～head内の記述省略～
    5. 
                        
  5. </head>
    6. 
                        
  6. <body>
    7. 
                    	
  7. ～headerの記述省略～
    8. 
                        
  8. <script type="text/javascript" src="./js/jquery.min.js"></script>
    9. 
                        
  9. <script type="text/javascript" src="./js/slick.min.js"></script>
    10. 
                        
  10. <script type="text/javascript" src="./js/main.js"></script>
    11. 
                        
  11. </body>
    12. 
                        
  12. </html>
    13.

ひとつ目の動きは、ハンバーガーメニューを動作させるために三本線をタップすると「nav」タグにクラスを追加するように設定しています。

ふたつ目の動きは、「お知らせ」などのページ内リンクをクリックした時にお知らせ項目までスルスルっと自動で移動する設定です。

みっつ目の動きは、スライダーのカスタム設定です。まずは上記のコードをコピペしてJSファイルを3点読み込みます。JSファイルは「body」の閉じタグ直前に読み込むと覚えておきましょう。

あとは「jQueryを使うために必要な「jquery.min.js」ファイルをダウンロードしよう」を参考に「jquery.min.js」をダウンロードしておいてください。

こちらも見てください

竹馬

JSはheadタグ内で読み込む事もできるんですが、「body」タグの閉じタグ直前に読み込む事によってページの表示速度が速くなります。JSファイルは重たいので表示に時間がかかるんです。

ハンバーガーメニューに動きを加える

JSの各設定を記述するファイルを「main.js」という名前にして下記コードをコピペしましょう。

main.js

                    
    
                        
  1. // sp nav
    2. 
                        
  2. jQuery(document).ready(function($){
    3. 
                        
  3.   $('.menuTrigger').click(function () {
    4. 
                        
  4.     $(this).toggleClass('active');
    5. 
                        
  5.     $('header nav').toggleClass('open');
    6. 
                        
  6.   });
    7. 
                        
  7.   $('header nav a').click(function () {
    8. 
                        
  8.     $('.menuTrigger').toggleClass('active');
    9. 
                        
  9.     $('header nav').toggleClass('open');
    10. 
                        
  10.   });
    11. 
                        
  11. });
    12.

この記述で「menuTrigger」のクラスが付いたaタグ（要は三本線）をタップするとnavに「open」というクラスを付与する事ができます。

これで三本線をタップするごとに「open」を付けたり外したりを繰り返します。そして開いたメニュー内のグローバルナビをタップする事によっても「open」を外す事ができます。

これを見たらわかってもらえると思いますがJSでは要素を動かしてるんじゃなくて単にクラス名を付けているだけです。この動作と連携してCSSでアニメーションを加えています。

style.css

                	
    
                        
  1. header nav {
    2. 
                        
  2.   width: 100%;
    3. 
                        
  3.   height: 100%;
    4. 
                        
  4.   margin: 0 auto;
    5. 
                        
  5.   border-top: 1px solid #c1c1c1;
    6. 
                        
  6.   position: fixed;
    7. 
                        
  7.   top: 60px;
    8. 
                        
  8.   right: -100%;
    9. 
                        
  9.   transition: all 0.3s ease-in-out;
    10. 
                        
  10.   float: none;
    11. 
                        
  11.   overflow-y: scroll
    12. 
                        
  12. }
    13. 
                        
  13. header nav.open {
    14. 
                        
  14.   min-height: 100vh;
    15. 
                        
  15.   padding-bottom: 100px;
    16. 
                        
  16.   background: #fff;
    17. 
                        
  17.   right: 0;
    18. 
                        
  18.   z-index: 99
    19. 
                        
  19. }
    20.

先ほどのCSSを確認して頂くと、navには「right:-100%;」が指定してあります。これはnavを右部の枠外に設置しているので画面上には表示されませんが、nav.openになると「right:0;」となり画面上に表示されるようになるという事です。

この設定ではメニューが右側から流れてきますが、「right:-100%;」と「right:0;」を「left:-100%;」と「left:0;」に変更すればメニューは左から流れてきます。

この辺の動きと記述の仕方はいくつもありますので、余裕のある方はご自身でカスタマイズしてもらえれば楽しいんじゃないかなぁと思います。

記述したHTMLとCSSとJSの確認

それではheader部分はこれで完成なので各ファイルを確認しておきます。

index.html

                	
    
                    	
  1. <!DOCTYPE html>
    2. 
                        
  2. <html>
    3. 
                        
  3. <head>
    4. 
                        
  4. ～head内の記述省略～
    5. 
                        
  5. </head>
    6. 
                        
  6. <body>
    7. 
                    	
  7. <header>
    8. 
                     	
  8.   <div class="inner cf">
    9. 
                     	
  9.     <div class="logo">
    10. 
                     	
  10.       <a href="./">
    11. 
                     	
  11.         <h1>いやしのカレー <span>サンプル</span></h1>
    12. 
                     	
  12.       </a>
    13. 
                     	
  13.     </div>
    14. 
                      	
  14.     <nav>
    15. 
                      	
  15.       <div class="globalNav">
    16. 
                     	
  16.         <ul>
    17. 
                     	
  17.           <li><a href="#news">お知らせ</a></li>
    18. 
                     	
  18.           <li><a href="#menu">メニュー</a></li>
    19. 
                    	
  19.           <li><a href="#shop">お店情報</a></li>
    20. 
                    	
  20.           <li><a href="./contact/">お問い合わせ</a></li>
    21. 
                    	
  21.         </ul>
    22. 
                    	
  22.       </div>
    23. 
                    	
  23.       <div class="snsWrap">
    24. 
                    	
  24.         <ul>
    25. 
                     	
  25.           <li><a href="TwitterページのURL" target="_blank"><img src="./img/icon_twitter_b.png" alt="Twitter"></a></li>
    26. 
                     	
  26.           <li><a href="FacebookページのURL" target="_blank"><img src="./img/icon_facebook_b.png" alt="Facebook"></a></li>
    27. 
                     	
  27.           <li><a href="InstagramページのURL" target="_blank"><img src="./img/icon_instagram_b.png" alt="Instagram"></a></li>
    28. 
                    	
  28.         </ul>
    29. 
                    	
  29.       </div>
    30. 
                    	
  30.     </nav>
    31. 
                    	
  31.     <div class="menuBtn">
    32. 
                    	
  32.       <a href="javascript:void(0)" class="menuTrigger">
    33. 
                    	
  33.         <div class="menuIcon">
    34. 
                     	
  34.           <span></span>
    35. 
                     	
  35.           <span></span>
    36. 
                     	
  36.           <span></span>
    37. 
                    	
  37.         </div>
    38. 
                    	
  38.       </a>
    39. 
                    	
  39.     </div>
    40. 
                    	
  40.   </div>
    41. 
                    	
  41. </header>
    42. 
                        
  42. <script type="text/javascript" src="./js/jquery.min.js"></script>
    43. 
                        
  43. <script type="text/javascript" src="./js/slick.min.js"></script>
    44. 
                        
  44. <script type="text/javascript" src="./js/main.js"></script>
    45. 
                        
  45. </body>
    46. 
                        
  46. </html>
    47.

style.css

                	
    
                    	
  1. ～共通デザイン省略～
    2. 
                    	
  2. /* ------ header ------ */
    3. 
                    	
  3. header {
    4. 
                    	
  4.   width: 100%;
    5. 
                    	
  5.   height: 80px;
    6. 
                    	
  6.   background: #fff;
    7. 
                    	
  7.   position: fixed;
    8. 
                    	
  8.   top: 0;
    9. 
                    	
  9.   box-shadow: 0 0 5px rgb(0,0,0,0.3);
    10. 
                    	
  10.   z-index: 100
    11. 
                    	
  11. }
    12. 
                    	
  12. header .inner {
    13. 
                    	
  13.   width: 100%;
    14. 
                    	
  14.   font-size: 0;
    15. 
                    	
  15.   margin: 0 auto
    16. 
                    	
  16. }
    17. 
                    	
  17. header .logo {
    18. 
                    	
  18.   vertical-align: middle;
    19. 
                    	
  19.   padding: 0 0 0 20px;
    20. 
                    	
  20.   position: relative;
    21. 
                    	
  21.   display: inline-block;
    22. 
                    	
  22.   z-index: 100
    23. 
                    	
  23. }
    24. 
                    	
  24. header .logo a { display: block }
    25. 
                    	
  25. header .logo h1,
    26. 
                    	
  26. header .logo p {
    27. 
                    	
  27.   font-size: 1.6rem;
    28. 
                    	
  28.   font-weight: 600;
    29. 
                    	
  29.   line-height: 80px;
    30. 
                    	
  30.   letter-spacing: 0.09em;
    31. 
                    	
  31.   transition: all 0.3s;
    32. 
                    	
  32.   display: inline-block
    33. 
                    	
  33. }
    34. 
                    	
  34. header .logo h1 span,
    35. 
                    	
  35. header .logo p span {
    36. 
                    	
  36.   font-size: 2.4rem
    37. 
                    	
  37. }
    38. 
                        
  38. @media screen and (min-width: 769px) {
    39. 
                        
  39.   header .menuBtn { display: none }
    40. 
                        
  40. }
    41. 
                        
  41. @media screen and (max-width: 768px) {
    42. 
                        
  42.   header { height: 60px }
    43. 
                        
  43.   header .inner { padding: 0 0 0 4% }
    44. 
                        
  44.   header .logo {
    45. 
                        
  45.     width: 260px;
    46. 
                        
  46.     padding: 0
    47. 
                        
  47.   }
    48. 
                        
  48.   header .logo h1,
    49. 
                        
  49.   header .logo p {
    50. 
                        
  50.     font-size: 1.4rem;
    51. 
                        
  51.     line-height: 60px
    52. 
                        
  52.   }
    53. 
                        
  53.   header .logo h1 span,
    54. 
                        
  54.   header .logo p span {
    55. 
                        
  55.     font-size: 2rem
    56. 
                        
  56.   }
    57. 
                        
  57.  
    58. 
                        
  58.   /* menu trigger */
    59. 
                        
  59.   .menuBtn {
    60. 
                        
  60.     width: 60px;
    61. 
                        
  61.     height: 60px;
    62. 
                        
  62.     text-align: center;
    63. 
                        
  63.     position: absolute;
    64. 
                        
  64.     top: 0;
    65. 
                        
  65.     right: 0;
    66. 
                        
  66.     display: inline-block;
    67. 
                        
  67.     z-index: 100
    68. 
                        
  68.   }
    69. 
                        
  69.   .menuTrigger,
    70. 
                        
  70.   .menuTrigger span {
    71. 
                        
  71.     transition: all .4s;
    72. 
                        
  72.     display: inline-block
    73. 
                        
  73.   }
    74. 
                        
  74.   .menuTrigger .menuIcon {
    75. 
                        
  75.     width: 25px;
    76. 
                        
  76.     height: 20px;
    77. 
                        
  77.     position: relative;
    78. 
                        
  78.     top: 20px;
    79. 
                        
  79.     display: inline-block
    80. 
                        
  80.   }
    81. 
                        
  81.   .menuTrigger span {
    82. 
                        
  82.     width: 100%;
    83. 
                        
  83.     height: 3px;
    84. 
                        
  84.     background: #e21412;
    85. 
                        
  85.     position: absolute;
    86. 
                        
  86.     left: 0
    87. 
                        
  87.   }
    88. 
                        
  88.   .menuTrigger span:nth-child(1) { top: 0 }
    89. 
                        
  89.   .menuTrigger span:nth-child(2) { top: 9px }
    90. 
                        
  90.   .menuTrigger span:nth-child(3) { bottom: 0 }
    91. 
                        
  91.   .menuTrigger span:nth-child(1) { animation: menu-bar01 .75s forwards }
    92. 
                        
  92.   .menuTrigger.active span:nth-child(1) { transform: translateY(9px) rotate(-45deg) }
    93. 
                        
  93.   .menuTrigger.active span:nth-child(2) {
    94. 
                        
  94.     left: 50%;
    95. 
                        
  95.     animation: active-menu-bar02 .8s forwards;
    96. 
                        
  96.     opacity: 0
    97. 
                        
  97.   }
    98. 
                        
  98.   @-webkit-keyframes active-menu-bar02 {
    99. 
                        
  99.     100% { height: 0 }
    100. 
                        
  100.   }
    101. 
                        
  101.   @keyframes active-menu-bar02 {
    102. 
                        
  102.     100% { height: 0 }
    103. 
                        
  103.   }
    104. 
                        
  104.   .menuTrigger.active span:nth-child(3) { transform: translateY(-9px) rotate(45deg) }
    105. 
                        
  105. }
    106. 
                        
  106.  
    107. 
                    	
  107. /* ------ nav ------ */
    108. 
                    	
  108. header nav {
    109. 
                    	
  109.   text-align: center;
    110. 
                    	
  110.   vertical-align: top;
    111. 
                    	
  111.   display: inline-block;
    112. 
                    	
  112.   float: right
    113. 
                    	
  113. }
    114. 
                    	
  114. header nav .globalNav ul {
    115. 
                    	
  115.   height: 80px;
    116. 
                    	
  116.   font-size: 0
    117. 
                    	
  117. }
    118. 
                    	
  118. header nav .globalNav li {
    119. 
                    	
  119.   height: 80px;
    120. 
                    	
  120.   font-size: 1.5rem;
    121. 
                    	
  121.   font-weight: 600;
    122. 
                    	
  122.   line-height: 80px;
    123. 
                    	
  123.   letter-spacing: 0.09em;
    124. 
                    	
  124.   text-align: center;
    125. 
                    	
  125.   position: relative;
    126. 
                    	
  126.   display: inline-block
    127. 
                    	
  127. }
    128. 
                    	
  128. header nav .globalNav li::before {
    129. 
                    	
  129.   content: "";
    130. 
                    	
  130.   width: 1px;
    131. 
                    	
  131.   height: 40%;
    132. 
                    	
  132.   margin: auto;
    133. 
                    	
  133.   background: #999;
    134. 
                    	
  134.   position: absolute;
    135. 
                    	
  135.   top: 0;
    136. 
                    	
  136.   bottom: 0;
    137. 
                    	
  137.   left: 0
    138. 
                    	
  138. }
    139. 
                    	
  139. header nav .globalNav li a {
    140. 
                    	
  140.   padding: 0 20px;
    141. 
                    	
  141.   display: block;
    142. 
                    	
  142.   z-index: 1
    143. 
                    	
  143. }
    144. 
                    	
  144. header nav .globalNav li a:hover { color: #e21412 }
    145. 
                        
  145. @media screen and (min-width: 769px) {
    146. 
                        
  146.   header nav .snsWrap { display: none }
    147. 
                        
  147. }
    148. 
                        
  148. @media screen and (max-width: 768px) {
    149. 
                        
  149.   header nav {
    150. 
                        
  150.     width: 100%;
    151. 
                        
  151.     height: 100%;
    152. 
                        
  152.     margin: 0 auto;
    153. 
                        
  153.     border-top: 1px solid #c1c1c1;
    154. 
                        
  154.     position: fixed;
    155. 
                        
  155.     top: 60px;
    156. 
                        
  156.     right: -100%;
    157. 
                        
  157.     transition: all 0.3s ease-in-out;
    158. 
                        
  158.     float: none;
    159. 
                        
  159.     overflow-y: scroll
    160. 
                        
  160.   }
    161. 
                        
  161.   header nav.open {
    162. 
                        
  162.     min-height: 100vh;
    163. 
                        
  163.     padding-bottom: 100px;
    164. 
                        
  164.     background: #fff;
    165. 
                        
  165.     right: 0;
    166. 
                        
  166.     z-index: 99
    167. 
                        
  167.   }
    168. 
                        
  168.   header nav .globalNav ul {
    169. 
                        
  169.     height: auto;
    170. 
                        
  170.     margin-top: 60px
    171. 
                        
  171.   }
    172. 
                        
  172.   header nav .globalNav li {
    173. 
                        
  173.     height: 60px;
    174. 
                        
  174.     font-size: 1.8rem;
    175. 
                        
  175.     line-height: 60px;
    176. 
                        
  176.     display: block
    177. 
                        
  177.   }
    178. 
                        
  178.   header nav .globalNav li::before {
    179. 
                        
  179.     width: 0;
    180. 
                        
  180.     height: 0
    181. 
                        
  181.   }
    182. 
                        
  182.   header nav .snsWrap {
    183. 
                        
  183.     margin-top: 30px;
    184. 
                        
  184.     display: block
    185. 
                        
  185.   }
    186. 
                        
  186.   header nav .snsWrap ul { font-size: 0 }
    187. 
                        
  187.   header nav .snsWrap li {
    188. 
                        
  188.     width: 26px;
    189. 
                        
  189.     vertical-align: middle;
    190. 
                        
  190.     display: inline-block
    191. 
                        
  191.   }
    192. 
                        
  192.   header nav .snsWrap li + li { margin-left: 40px }
    193. 
                        
  193. }
    194.

main.js

                    
    
                        
  1. // sp nav
    2. 
                        
  2. jQuery(document).ready(function($){
    3. 
                        
  3.   $('.menuTrigger').click(function () {
    4. 
                        
  4.     $(this).toggleClass('active');
    5. 
                        
  5.     $('header nav').toggleClass('open');
    6. 
                        
  6.   });
    7. 
                        
  7.   $('header nav a').click(function () {
    8. 
                        
  8.     $('.menuTrigger').toggleClass('active');
    9. 
                        
  9.     $('header nav').toggleClass('open');
    10. 
                        
  10.   });
    11. 
                        
  11. });
    12.

新たに作ったファイルも下記の階層になるように配置していきます。ダウンロードされたアイコン画像はすべて「img」フォルダに入れておけばOKです。

デモサイトの階層

はじめはブレイクポイントなどを考えてパソコンとスマホのデザインを構築していくのは難しいかもしれないですが、デモサイトでは簡単な形で制作していますので頑張って慣れていきましょう。

次はスライダーの設定をおこなっていきます。ファーストビュー（初見）でホームページを訪れた人に興味を持ってもらえるかどうかという結構重要な部分です。

ロゴとグローバルナビの設置【PC】 メイン画像にスライダーを設置

よく読まれている記事

おすすめの記事

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ！Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。

チェピレア日記