1. ホーム
  2. ホームページの作り方
  3. 無料で使えるデモサイト
  4. メニューはタブを使って表示する

メニューはタブを使って表示する

メニューはタブを使って表示する

前回はメインコンテンツの「お知らせ」を制作しましたので今回は「メニュー」を仕上げていきます。ちょっとコードが長いですが単純に商品の量が多いだけです（笑）。

ここでは「タブメニュー」というものを使っています。今回のように情報が多い時などはすべての情報を見せるのではなく、ボタンをクリックして情報を切り替える方法がオススメです。

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

目次 [閉じる]

タイトルとテキスト部分をHTMLで構築する

まずはメニュー全体の骨組みを作って、上部に表示しているタイトルと画像を背景としているテキスト部分のコードを見ていきます。

index.html

                	
    
                        
  1. <section id="menu">
    2. 
                        
  2.   <div class="inner">
    3. 
                        
  3.     <div class="title">
    4. 
                        
  4.       <h2>メニュー</h2>
    5. 
                        
  5.     </div>
    6. 
                        
  6.     <div class="menuMain">
    7. 
                        
  7.       <div class="menuMainInner">
    8. 
                        
  8.         <div class="menuMainBox">
    9. 
                        
  9.           <h3>落ち着いた空間、<br>スパイスの香るカレーと<br>美味しいチャイで<br>リラックスしませんか？</h3>
    10. 
                        
  10.           <p>サラッとしたスパイシーなカレーに四季折々の美味しい野菜を使用しています。たっぷりと加えたカルダモンの香りをお楽しみください。</p>
    11. 
                        
  11.         </div>
    12. 
                        
  12.       </div>
    13. 
                        
  13.     </div>
    14. 
                        
  14.   </div>
    15. 
                        
  15. </section>
    16.

今回は画像の数が少ないかわりにひとつの画像のサイズを大きくしてインパクトのあるデザインにしています。

横幅いっぱいの画像を背景にして、その上に透け感のある白いボックスを配置します。そこにお客さんの興味を惹くようなセールスポイントなどを記述する方法です。

少しずつHTMLに慣れてきましたでしょうか？「画像を背景にして～」と言ってるのにimgタグがないですね。はい、ここの画像はCSSで指定していきます。

テキストを表示するにしてもちょっとしたコツがあります。例えば同じ文字の大きさで淡々と書かれた文章を見るとサラッと読んであまり印象に残らなかったりするもんです。

文字は大きさや太さでコントラストを付けてやると言いたい事がハッキリと伝わります。さらに端的な文章でパッと読める長さが良いですね。ここで興味を持ってもらえればあとの文章も読んでくれるはずです。

背景で使っている画像はこちらからダウンロードできます。→「メニュー背景画像のダウンロード」

竹馬

画像が少ないなら少ない画像で出来るだけインパクトのある形にするコトが大事です。今回は一部分だけ画像を背景にしていますが、メニュー全体の背景を画像にしても良いですね。

タイトルとテキスト部分をCSSで調整する

では先ほどhtmlファイルで記述したタイトルと画像を背景としているテキスト部分のデザインを整えていきます。

style.css

                	
    
                    	
  1. /* ------ menu ------ */
    2. 
                    	
  2. #menu {
    3. 
                    	
  3.   padding-top: 80px;
    4. 
                    	
  4.   margin-top: -80px
    5. 
                    	
  5. }
    6. 
                    	
  6. #menu .inner {
    7. 
                    	
  7.   text-align: center;
    8. 
                    	
  8.   padding: 80px 0
    9. 
                    	
  9. }
    10. 
                    	
  10. #menu h2 {
    11. 
                    	
  11.   font-size: 2.4rem;
    12. 
                    	
  12.   letter-spacing: 0.09em
    13. 
                    	
  13. }
    14. 
                    	
  14. #menu .menuMain {
    15. 
                    	
  15.   width: 100%;
    16. 
                    	
  16.   height: 480px;
    17. 
                    	
  17.   margin-top: 60px;
    18. 
                    	
  18.   background: url("../img/menu_main.jpg") no-repeat;
    19. 
                    	
  19.   background-size: cover
    20. 
                    	
  20. }
    21. 
                    	
  21. #menu .menuMainInner {
    22. 
                    	
  22.   width: 1200px;
    23. 
                    	
  23.   margin: 0 auto;
    24. 
                    	
  24.   position: relative
    25. 
                    	
  25. }
    26. 
                    	
  26. #menu .menuMainBox {
    27. 
                    	
  27.   width: 500px;
    28. 
                    	
  28.   height: 480px;
    29. 
                    	
  29.   text-align: left;
    30. 
                    	
  30.   padding: 80px;
    31. 
                    	
  31.   background: rgba(255,255,255,0.7);
    32. 
                    	
  32.   position: absolute;
    33. 
                    	
  33.   top: 0;
    34. 
                    	
  34.   right: 40px
    35. 
                    	
  35. }
    36. 
                    	
  36. #menu .menuMainBox h3 {
    37. 
                    	
  37.   font-size: 2.8rem;
    38. 
                    	
  38.   letter-spacing: 0.09em
    39. 
                    	
  39. }
    40. 
                    	
  40. #menu .menuMainBox p {
    41. 
                    	
  41.   font-size: 1.6rem;
    42. 
                    	
  42.   letter-spacing: 0.09em;
    43. 
                    	
  43.   margin-top: 30px
    44. 
                    	
  44. }
    45. 
                    	
  45. @media screen and (max-width: 768px) {
    46. 
                    	
  46.   #menu {
    47. 
                    	
  47.     padding-top: 60px;
    48. 
                    	
  48.     margin-top: -60px
    49. 
                    	
  49.   }
    50. 
                    	
  50.   #menu .inner {
    51. 
                    	
  51.     text-align: center;
    52. 
                    	
  52.     padding: 60px 0 20px
    53. 
                    	
  53.   }
    54. 
                    	
  54.   #menu h2 { font-size: 2rem }
    55. 
                    	
  55.   #menu .menuMain {
    56. 
                     	
  56.     height: 400px;
    57. 
                     	
  57.     background: url("../img/menu_main.jpg") center center no-repeat
    58. 
                    	
  58.   }
    59. 
                    	
  59.   #menu .menuMainInner {
    60. 
                    	
  60.     width: 100%;
    61. 
                    	
  61.     padding: 0 4%
    62. 
                    	
  62.   }
    63. 
                    	
  63.   #menu .menuMainBox {
    64. 
                    	
  64.     width: 90%;
    65. 
                    	
  65.     height: 400px;
    66. 
                     	
  66.     padding: 60px 40px;
    67. 
                     	
  67.     margin: auto;
    68. 
                     	
  68.     position: absolute;
    69. 
                     	
  69.     top: 0;
    70. 
                     	
  70.     right: 0;
    71. 
                     	
  71.     left: 0
    72. 
                     	
  72.   }
    73. 
                    	
  73.   #menu .menuMainBox h3 { font-size: 2rem }
    74. 
                    	
  74.   #menu .menuMainBox p { margin-top: 20px }
    75. 
                    	
  75. }
    76.

こちらの「メニュー」も「お知らせ」と同じくページ内リンクを設置していますので、「menu」のidに「padding-top:80px;」と「margin-top:-80px;」を設定しています。

デザイン的には特に難しいところはないですが、背景色についてちょっとお話します。背景色は「background-color」というプロパティを使うんですが、僕は「background」のみを使っています。

CSSで指定する際は「background-color:red;」でも「background:red;」でも、どちらも背景色は赤色に設定できます。

「background-color」は背景色しか指定できないですが、「background」を使うと背景色・背景画像・背景画像のリピート表示・背景画像の位置…などをまとめて指定する事ができます。

例えば「menuMain」のクラス名の付いたdivはbackgroundの指定が「url(“../img/menu_main.jpg”) no-repeat」となっています。

これは1つのbackgroundで「background-image」と「background-repeat」の2つのプロパティを設定しているという事です。

竹馬

背景色を白色に設定するには、英語表記の「white」、16進数の「#fff」もしくは「#ffffff」に加え、透明度の指定もできる「rgba（255,255,255,1）」のパターンがあります。

タブメニューの「ランチ」をHTMLで構築する

次からはタグを使ってメニュー一覧を記述していきます。タグはjQueryを使うものもありますが今回はCSSのみで実装しています。

index.html

                	
    
                        
  1. <section id="menu">
    2. 
                        
  2.   <div class="inner">
    3. 
                        
  3.     ～「.title」の記述省略～
    4. 
                        
  4.     ～「.menuMain」の記述省略～
    5. 
                        
  5.     <div class="menuWrap">
    6. 
                        
  6.       <input id="lunch" type="radio" name="tabItem" checked>
    7. 
                        
  7.       <label class="tabItem" for="lunch">ランチ</label>
    8. 
                        
  8.       <input id="dinner" type="radio" name="tabItem">
    9. 
                        
  9.       <label class="tabItem" for="dinner">ディナー</label>
    10. 
                        
  10.       <input id="drink" type="radio" name="tabItem">
    11. 
                        
  11.       <label class="tabItem" for="drink">ドリンク</label>
    12. 
                        
  12.       <div class="tabContent" id="lunchContent">
    13. 
                        
  13.         <div class="menuTop cf">
    14. 
                        
  14.           <div class="imageWrap">
    15. 
                        
  15.             <img src="./img/menu_lunch.jpg" alt="いやしのカレー サンプルのランチメニュー">
    16. 
                        
  16.           </div>
    17. 
                        
  17.           <div class="listWrap">
    18. 
                        
  18.             <h3>ランチセット</h3>
    19. 
                        
  19.             <dl>
    20. 
                        
  20.               <dt>チキンカレー</dt>
    21. 
                        
  21.               <dd>800円<span>（税込）</span></dd>
    22. 
                        
  22.             </dl>
    23. 
                        
  23.             <dl>
    24. 
                        
  24.               <dt>キーマカレー</dt>
    25. 
                        
  25.               <dd>800円<span>（税込）</span></dd>
    26. 
                        
  26.             </dl>
    27. 
                        
  27.             <dl>
    28. 
                        
  28.               <dt>季節の野菜カレー</dt>
    29. 
                        
  29.               <dd>800円<span>（税込）</span></dd>
    30. 
                        
  30.             </dl>
    31. 
                        
  31.             <dl>
    32. 
                        
  32.               <dt>グリーンカレー</dt>
    33. 
                        
  33.               <dd>850円<span>（税込）</span></dd>
    34. 
                        
  34.             </dl>
    35. 
                        
  35.             <dl>
    36. 
                        
  36.               <dt>マッサマンカレー</dt>
    37. 
                        
  37.               <dd>850円<span>（税込）</span></dd>
    38. 
                        
  38.             </dl>
    39. 
                        
  39.             <p>※ランチセットにはチャイもしくはラッシーが付きます。</p>
    40. 
                        
  40.           </div>
    41. 
                        
  41.         </div>
    42. 
                        
  42.       </div>
    43. 
                        
  43.     </div>
    44. 
                        
  44.   </div>
    45. 
                        
  45. </section>
    46.

ここからはコードが長くなりますので、わかりにくかったら商品を削ってもらっても良いです（笑）。

タグメニューの仕様をザックリと説明すると、まずは「ランチ」「ディナー」「ドリンク」を表示している「tabContent」のクラス名が付いたdivを非表示にします。

そして「input」タグを「type=”radio”」としてラジオボタンにし、チェックされたラジオボタンに連動する要素を切り替えています。はじめは「#lunch」のinputに「checked」を付けてランチメニューを表示している状態です。

CSSのみでタグメニューを実装する場合は、このinputタグを使用してそれぞれの要素をCSSで紐付けする必要があります。

慣れていないとちょっと複雑なので手が出ないという方もおられるかも知れませんが、タグメニューは色んなところで使えますので覚えておいて損はないです。しかもこれはjQueryも必要ないのでオススメです。

ランチメニューで使っている画像はこちらからダウンロードできます。→「ランチ画像のダウンロード」

竹馬

さらにinputタグはlabelタグとも連動しています。そのままのラジオボタンは表示したくないのでinputタグは非表示にし、labelタグをデザインして画面上に表示しています。

タブメニューの「ディナー」をHTMLで構築する

同じくタグメニューの「ディナー」部分の記述を見ていきます。

index.html

                	
    
                        
  1. <section id="menu">
    2. 
                        
  2.   <div class="inner">
    3. 
                        
  3.     ～「.title」の記述省略～
    4. 
                        
  4.     ～「.menuMain」の記述省略～
    5. 
                        
  5.     <div class="menuWrap">
    6. 
                        
  6.       <input id="lunch" type="radio" name="tabItem" checked>
    7. 
                        
  7.       <label class="tabItem" for="lunch">ランチ</label>
    8. 
                        
  8.       <input id="dinner" type="radio" name="tabItem">
    9. 
                        
  9.       <label class="tabItem" for="dinner">ディナー</label>
    10. 
                        
  10.       <input id="drink" type="radio" name="tabItem">
    11. 
                        
  11.       <label class="tabItem" for="drink">ドリンク</label>
    12. 
                        
  12.       ～ランチメニューの記述省略～
    13. 
                        
  13.       <div class="tabContent" id="dinnerContent">
    14. 
                        
  14.         <div class="menuTop cf">
    15. 
                        
  15.           <div class="imageWrap">
    16. 
                        
  16.             <img src="./img/menu_dinner.jpg" alt="いやしのカレー サンプルのディナーメニュー">
    17. 
                        
  17.           </div>
    18. 
                        
  18.           <div class="listWrap">
    19. 
                        
  19.             <h3>カレー</h3>
    20. 
                        
  20.             <dl>
    21. 
                        
  21.               <dt>チキンカレー</dt>
    22. 
                        
  22.               <dd>800円<span>（税込）</span></dd>
    23. 
                        
  23.             </dl>
    24. 
                        
  24.             <dl>
    25. 
                        
  25.               <dt>キーマカレー</dt>
    26. 
                        
  26.               <dd>800円<span>（税込）</span></dd>
    27. 
                        
  27.             </dl>
    28. 
                        
  28.             <dl>
    29. 
                        
  29.               <dt>季節の野菜カレー</dt>
    30. 
                        
  30.               <dd>800円<span>（税込）</span></dd>
    31. 
                        
  31.             </dl>
    32. 
                        
  32.             <dl>
    33. 
                        
  33.               <dt>グリーンカレー</dt>
    34. 
                        
  34.               <dd>850円<span>（税込）</span></dd>
    35. 
                        
  35.             </dl>
    36. 
                        
  36.             <dl>
    37. 
                        
  37.               <dt>マッサマンカレー</dt>
    38. 
                        
  38.               <dd>850円<span>（税込）</span></dd>
    39. 
                        
  39.             </dl>
    40. 
                        
  40.             <dl>
    41. 
                        
  41.               <dt>ライス / ナン</dt>
    42. 
                        
  42.               <dd>300円<span>（税込）</span></dd>
    43. 
                        
  43.             </dl>
    44. 
                        
  44.           </div>
    45. 
                        
  45.         </div>
    46. 
                        
  46.         <div class="menuBottom">
    47. 
                        
  47.           <div class="listWrap">
    48. 
                        
  48.             <h3>一品</h3>
    49. 
                        
  49.             <dl>
    50. 
                        
  50.               <dt>豚肉の串焼き</dt>
    51. 
                        
  51.               <dd>700円<span>（税込）</span></dd>
    52. 
                        
  52.             </dl>
    53. 
                        
  53.             <dl>
    54. 
                        
  54.               <dt>タンドリーチキン</dt>
    55. 
                        
  55.               <dd>750円<span>（税込）</span></dd>
    56. 
                        
  56.             </dl>
    57. 
                        
  57.             <dl>
    58. 
                        
  58.               <dt>鶏肉とカシューナッツ炒め</dt>
    59. 
                        
  59.               <dd>800円<span>（税込）</span></dd>
    60. 
                        
  60.             </dl>
    61. 
                        
  61.             <dl>
    62. 
                        
  62.               <dt>シーフードのニンニク炒め</dt>
    63. 
                        
  63.               <dd>800円<span>（税込）</span></dd>
    64. 
                        
  64.             </dl>
    65. 
                        
  65.             <dl>
    66. 
                        
  66.               <dt>空芯菜炒め</dt>
    67. 
                        
  67.               <dd>800円<span>（税込）</span></dd>
    68. 
                        
  68.             </dl>
    69. 
                        
  69.             <dl>
    70. 
                        
  70.               <dt>生春巻き</dt>
    71. 
                        
  71.               <dd>850円<span>（税込）</span></dd>
    72. 
                        
  72.             </dl>
    73. 
                        
  73.             <dl>
    74. 
                        
  74.               <dt>青パパイヤのサラダ</dt>
    75. 
                        
  75.               <dd>800円<span>（税込）</span></dd>
    76. 
                        
  76.             </dl>
    77. 
                        
  77.             <dl>
    78. 
                        
  78.               <dt>春雨と海老のサラダ</dt>
    79. 
                        
  79.               <dd>800円<span>（税込）</span></dd>
    80. 
                        
  80.             </dl>
    81. 
                        
  81.           </div>
    82. 
                        
  82.           <div class="listWrap">>
    83. 
                        
  83.             <h3>麺類</h3>
    84. 
                        
  84.             <dl>
    85. 
                        
  85.               <dt>パッタイ</dt>
    86. 
                        
  86.               <dd>800円<span>（税込）</span></dd>
    87. 
                        
  87.             </dl>
    88. 
                        
  88.             <dl>
    89. 
                        
  89.               <dt>カレーラーメン</dt>
    90. 
                        
  90.               <dd>850円<span>（税込）</span></dd>
    91. 
                        
  91.             </dl>
    92. 
                        
  92.             <h3>デザート</h3>
    93. 
                        
  93.             <dl>
    94. 
                        
  94.               <dt>マンゴープリン</dt>
    95. 
                        
  95.               <dd>300円<span>（税込）</span></dd>
    96. 
                        
  96.             </dl>
    97. 
                        
  97.             <dl>
    98. 
                        
  98.               <dt>ココナッツアイス</dt>
    99. 
                        
  99.               <dd>350円<span>（税込）</span></dd>
    100. 
                        
  100.             </dl>
    101. 
                        
  101.             <dl>
    102. 
                        
  102.               <dt>揚げバナナとココナッツアイス</dt>
    103. 
                        
  103.               <dd>550円<span>（税込）</span></dd>
    104. 
                        
  104.             </dl>
    105. 
                        
  105.             <dl>
    106. 
                        
  106.               <dt>マンゴーかき氷</dt>
    107. 
                        
  107.               <dd>550円<span>（税込）</span></dd>
    108. 
                        
  108.             </dl>
    109. 
                        
  109.           </div>
    110. 
                        
  110.         </div>
    111. 
                        
  111.       </div>
    112. 
                        
  112.     </div>
    113. 
                        
  113.   </div>
    114. 
                        
  114. </section>
    115.

ここもランチの部分とデザインは同じです。サクッとコピペしておきましょう。

商品を文字だけで一覧表示しているだけなのでかなりシンプルです（笑）。この辺はご自身でカスタマイズしてもらえれば良いかなぁ～と思います。

例えば文字の太さや色を変えたり、背景に画像を入れてみたり、「カレー」や「一品」を記述している部分にモチーフやアイコンなんかも入れたりできますね。

個人的には主な商品の写真をすべて用意して、ひとつずつ写真と商品名を表記する形が理想です。手間はかかりますけどそうする事によってよりお客さんの興味を惹く事ができます。

ディナーメニューで使っている画像はこちらからダウンロードできます。→「ディナー画像のダウンロード」

タブメニューの「ドリンク」をHTMLで構築する

最後にタグメニューの「ドリンク」部分をコピペしましょう。

index.html

                	
    
                        
  1. <section id="menu">
    2. 
                        
  2.   <div class="inner">
    3. 
                        
  3.     ～「.title」の記述省略～
    4. 
                        
  4.     ～「.menuMain」の記述省略～
    5. 
                        
  5.     <div class="menuWrap">
    6. 
                        
  6.       <input id="lunch" type="radio" name="tabItem" checked>
    7. 
                        
  7.       <label class="tabItem" for="lunch">ランチ</label>
    8. 
                        
  8.       <input id="dinner" type="radio" name="tabItem">
    9. 
                        
  9.       <label class="tabItem" for="dinner">ディナー</label>
    10. 
                        
  10.       <input id="drink" type="radio" name="tabItem">
    11. 
                        
  11.       <label class="tabItem" for="drink">ドリンク</label>
    12. 
                        
  12.       ～ランチメニューの記述省略～
    13. 
                        
  13.       ～ディナーメニューの記述省略～
    14. 
                        
  14.       <div class="tabContent" id="drinkContent">
    15. 
                        
  15.         <div class="menuTop cf">
    16. 
                        
  16.           <div class="imageWrap">
    17. 
                        
  17.             <img src="./img/menu_drink.jpg" alt="いやしのカレー サンプルのドリンクメニュー">
    18. 
                        
  18.           </div>
    19. 
                        
  19.           <div class="listWrap">
    20. 
                        
  20.             <h3>カクテル</h3>
    21. 
                        
  21.             <dl>
    22. 
                        
  22.               <dt>カシス</dt>
    23. 
                        
  23.               <dd>500円<span>（税込）</span></dd>
    24. 
                        
  24.             </dl>
    25. 
                        
  25.             <dl>
    26. 
                        
  26.               <dt>マンゴスティン</dt>
    27. 
                        
  27.               <dd>550円<span>（税込）</span></dd>
    28. 
                        
  28.             </dl>
    29. 
                        
  29.             <dl>
    30. 
                        
  30.               <dt>ライチ</dt>
    31. 
                        
  31.               <dd>550円<span>（税込）</span></dd>
    32. 
                        
  32.             </dl>
    33. 
                        
  33.             <dl>
    34. 
                        
  34.               <dt>ヨギー</dt>
    35. 
                        
  35.               <dd>550円<span>（税込）</span></dd>
    36. 
                        
  36.             </dl>
    37. 
                        
  37.             <dl>
    38. 
                        
  38.               <dt>ビア</dt>
    39. 
                        
  39.               <dd>550円<span>（税込）</span></dd>
    40. 
                        
  40.             </dl>
    41. 
                        
  41.             <dl>
    42. 
                        
  42.               <dt>ワイン</dt>
    43. 
                        
  43.               <dd>550円<span>（税込）</span></dd>
    44. 
                        
  44.             </dl>
    45. 
                        
  45.           </div>
    46. 
                        
  46.         </div>
    47. 
                        
  47.         <div class="menuBottom">
    48. 
                        
  48.           <div class="listWrap">
    49. 
                        
  49.             <h3>ビール</h3>
    50. 
                        
  50.             <dl>
    51. 
                        
  51.               <dt>アサヒスーパードライ（生）</dt>
    52. 
                        
  52.               <dd>550円<span>（税込）</span></dd>
    53. 
                        
  53.             </dl>
    54. 
                        
  54.             <dl>
    55. 
                        
  55.               <dt>アサヒスーパードライ（中瓶）</dt>
    56. 
                        
  56.               <dd>600円<span>（税込）</span></dd>
    57. 
                        
  57.             </dl>
    58. 
                        
  58.             <dl>
    59. 
                        
  59.               <dt>ノンアルコールビール</dt>
    60. 
                        
  60.               <dd>550円<span>（税込）</span></dd>
    61. 
                        
  61.             </dl>
    62. 
                        
  62.             <h3>チューハイ</h3>
    63. 
                        
  63.             <dl>
    64. 
                        
  64.               <dt>マンゴー</dt>
    65. 
                        
  65.               <dd>450円<span>（税込）</span></dd>
    66. 
                        
  66.             </dl>
    67. 
                        
  67.             <dl>
    68. 
                        
  68.               <dt>グアバ</dt>
    69. 
                        
  69.               <dd>450円<span>（税込）</span></dd>
    70. 
                        
  70.             </dl>
    71. 
                        
  71.             <dl>
    72. 
                        
  72.               <dt>ライチ</dt>
    73. 
                        
  73.               <dd>450円<span>（税込）</span></dd>
    74. 
                        
  74.             </dl>
    75. 
                        
  75.             <dl>
    76. 
                        
  76.               <dt>レモン</dt>
    77. 
                        
  77.               <dd>450円<span>（税込）</span></dd>
    78. 
                        
  78.             </dl>
    79. 
                        
  79.             <dl>
    80. 
                        
  80.               <dt>ライム</dt>
    81. 
                        
  81.               <dd>450円<span>（税込）</span></dd>
    82. 
                        
  82.             </dl>
    83. 
                        
  83.             <h3>果実酒</h3>
    84. 
                        
  84.             <dl>
    85. 
                        
  85.               <dt>梅酒</dt>
    86. 
                        
  86.               <dd>500円<span>（税込）</span></dd>
    87. 
                        
  87.             </dl>
    88. 
                        
  88.             <dl>
    89. 
                        
  89.               <dt>ライチ</dt>
    90. 
                        
  90.               <dd>500円<span>（税込）</span></dd>
    91. 
                        
  91.             </dl>
    92. 
                        
  92.             <dl>
    93. 
                        
  93.               <dt>サンザシ</dt>
    94. 
                        
  94.               <dd>500円<span>（税込）</span></dd>
    95. 
                        
  95.             </dl>
    96. 
                        
  96.             <dl>
    97. 
                        
  97.               <dt>杏子</dt>
    98. 
                        
  98.               <dd>500円<span>（税込）</span></dd>
    99. 
                        
  99.             </dl>
    100. 
                        
  100.             <dl>
    101. 
                        
  101.               <dt>リンゴ</dt>
    102. 
                        
  102.               <dd>500円<span>（税込）</span></dd>
    103. 
                        
  103.             </dl>
    104. 
                        
  104.             <h3>ワイン</h3>
    105. 
                        
  105.             <dl>
    106. 
                        
  106.               <dt>グラスワイン（赤・白）</dt>
    107. 
                        
  107.               <dd>500円<span>（税込）</span></dd>
    108. 
                        
  108.             </dl>
    109. 
                        
  109.           </div>
    110. 
                        
  110.           <div class="listWrap">
    111. 
                        
  111.             <h3>ウィスキー</h3>
    112. 
                        
  112.             <dl>
    113. 
                        
  113.               <dt>ハイボール</dt>
    114. 
                        
  114.               <dd>500円<span>（税込）</span></dd>
    115. 
                        
  115.             </dl>
    116. 
                        
  116.             <dl>
    117. 
                        
  117.               <dt>コーラハイボール</dt>
    118. 
                        
  118.               <dd>500円<span>（税込）</span></dd>
    119. 
                        
  119.             </dl>
    120. 
                        
  120.             <dl>
    121. 
                        
  121.               <dt>ジンジャーハイボール</dt>
    122. 
                        
  122.               <dd>500円<span>（税込）</span></dd>
    123. 
                        
  123.             </dl>
    124. 
                        
  124.             <h3>焼酎</h3>
    125. 
                        
  125.             <dl>
    126. 
                        
  126.               <dt>いいちこ（麦）</dt>
    127. 
                        
  127.               <dd>400円<span>（税込）</span></dd>
    128. 
                        
  128.             </dl>
    129. 
                        
  129.             <h3>ソフトドリンク</h3>
    130. 
                        
  130.             <dl>
    131. 
                        
  131.               <dt>チャイ</dt>
    132. 
                        
  132.               <dd>550円<span>（税込）</span></dd>
    133. 
                        
  133.             </dl>
    134. 
                        
  134.             <dl>
    135. 
                        
  135.               <dt>ラッシー</dt>
    136. 
                        
  136.               <dd>550円<span>（税込）</span></dd>
    137. 
                        
  137.             </dl>
    138. 
                        
  138.             <dl>
    139. 
                        
  139.               <dt>バナナラッシー</dt>
    140. 
                        
  140.               <dd>650円<span>（税込）</span></dd>
    141. 
                        
  141.             </dl>
    142. 
                        
  142.             <dl>
    143. 
                        
  143.               <dt>マンゴーラッシー</dt>
    144. 
                        
  144.               <dd>650円<span>（税込）</span></dd>
    145. 
                        
  145.             </dl>
    146. 
                        
  146.             <dl>
    147. 
                        
  147.               <dt>マンゴ―ジュース</dt>
    148. 
                        
  148.               <dd>450円<span>（税込）</span></dd>
    149. 
                        
  149.             </dl>
    150. 
                        
  150.             <dl>
    151. 
                        
  151.               <dt>グアバジュース</dt>
    152. 
                        
  152.               <dd>450円<span>（税込）</span></dd>
    153. 
                        
  153.             </dl>
    154. 
                        
  154.             <dl>
    155. 
                        
  155.               <dt>ライチジュース</dt>
    156. 
                        
  156.               <dd>450円<span>（税込）</span></dd>
    157. 
                        
  157.             </dl>
    158. 
                        
  158.             <dl>
    159. 
                        
  159.               <dt>オレンジジュース</dt>
    160. 
                        
  160.               <dd>400円<span>（税込）</span></dd>
    161. 
                        
  161.             </dl>
    162. 
                        
  162.             <dl>
    163. 
                        
  163.               <dt>グレープフルーツジュース</dt>
    164. 
                        
  164.               <dd>400円<span>（税込）</span></dd>
    165. 
                        
  165.             </dl>
    166. 
                        
  166.             <dl>
    167. 
                        
  167.               <dt>コーラ</dt>
    168. 
                        
  168.               <dd>300円<span>（税込）</span></dd>
    169. 
                        
  169.             </dl>
    170. 
                        
  170.             <dl>
    171. 
                        
  171.               <dt>ジンジャーエール<>/dt>
    172. 
                        
  172.               <dd>300円<span>（税込）</span></dd>
    173. 
                        
  173.             </dl>
    174. 
                        
  174.             <dl>
    175. 
                        
  175.               <dt>ウーロン茶</dt>
    176. 
                        
  176.               <dd>300円<span>（税込）</span></dd>
    177. 
                        
  177.             </dl>
    178. 
                        
  178.           </div>
    179. 
                        
  179.         </div>
    180. 
                        
  180.       </div>
    181. 
                        
  181.     </div>
    182. 
                        
  182.   </div>
    183. 
                        
  183. </section>
    184.

今回は「ランチ」「ディナー」「ドリンク」の3項目とも同じデザインで作りましたが、項目ごとにデザインを変更する事もできますので色々と試してもらうとホームページの幅も広がっていくと思います。

デモサイトではメニュー項目をすべて文字で記述していますが、お店のメニューなどを画像としてお持ちの方でしたらそちらを利用するのもアリかと思います。

ページ内に画像としてメニューを貼り付ける方法と、クリックするとPDFのメニューページに移動する方法などは有名サイトでもよく見ます。

細かい事ですけど2021年の4月から消費税を含めた総額表示が義務化されましたので、商品が多いほど消費税の変動に伴う料金変更の作業とかも手間になりますしね（笑）。

ドリンクメニューで使っている画像はこちらからダウンロードできます。→「ドリンク画像のダウンロード」

竹馬

メニューを画像として表示する際の注意点として、パソコンでは読める文字サイズであってもスマホでは読めない事がよくあります。余裕があればスマホ用の画像も欲しいですね。

タブメニューをCSSで調整する

それではタブメニューのデザインを見ていきます。使い慣れない指定があるかと思いますので、しっかりと意味の確認もしていきましょう。

style.css

                	
    
                    	
  1. /* ------ menu ------ */
    2. 
                    	
  2. ～タイトルとテキスト部分のデザイン省略～
    3. 
                    	
  3. #menu .menuWrap {
    4. 
                    	
  4.   width: 1200px;
    5. 
                    	
  5.   font-size: 0;
    6. 
                    	
  6.   margin: 60px auto 0
    7. 
                    	
  7. }
    8. 
                    	
  8. #menu .menuWrap .tabItem {
    9. 
                    	
  9.   width: 200px;
    10. 
                    	
  10.   height: 50px;
    11. 
                    	
  11.   color: #fff;
    12. 
                    	
  12.   font-size: 1.6rem;
    13. 
                    	
  13.   letter-spacing: 0.09em;
    14. 
                    	
  14.   line-height: 50px;
    15. 
                    	
  15.   text-align: center;
    16. 
                    	
  16.   background: #c1c1c1;
    17. 
                    	
  17.   transition: all 0.3s ease-in-out;
    18. 
                    	
  18.   display: inline-block;
    19. 
                    	
  19.   cursor: pointer
    20. 
                    	
  20. }
    21. 
                    	
  21. #menu .menuWrap .tabItem:hover { background: #e21412 }
    22. 
                    	
  22. #menu .menuWrap input[name="tabItem"] { display: none }
    23. 
                    	
  23. #menu .menuWrap .tabContent {
    24. 
                    	
  24.   margin-top: 60px;
    25. 
                    	
  25.   display: none;
    26. 
                    	
  26.   overflow: hidden
    27. 
                    	
  27. }
    28. 
                    	
  28. #menu .menuWrap #dinner + label,
    29. 
                    	
  29. #menu .menuWrap #drink + label {
    30. 
                    	
  30.   margin-left: 20px
    31. 
                    	
  31. }
    32. 
                    	
  32. #menu .menuWrap #lunch:checked ~ #lunchContent,
    33. 
                    	
  33. #menu .menuWrap #dinner:checked ~ #dinnerContent,
    34. 
                    	
  34. #menu .menuWrap #drink:checked ~ #drinkContent {
    35. 
                    	
  35.   display: block
    36. 
                    	
  36. }
    37. 
                    	
  37. #menu .menuWrap input:checked + .tabItem { background: #e21412 }
    38. 
                    	
  38. #menu .menuWrap .menuTop { font-size: 0 }
    39. 
                    	
  39. #menu .menuWrap .menuTop .imageWrap {
    40. 
                    	
  40.   width: 640px;
    41. 
                    	
  41.   margin-left: 60px;
    42. 
                    	
  42.   float: right
    43. 
                    	
  43. }
    44. 
                    	
  44. #menu .menuWrap .menuTop .listWrap {
    45. 
                    	
  45.   width: 480px;
    46. 
                    	
  46.   text-align: left;
    47. 
                    	
  47.   display: inline-block
    48. 
                    	
  48. }
    49. 
                    	
  49. #menu .menuWrap .menuTop .listWrap h3 {
    50. 
                    	
  50.   font-size: 2.4rem;
    51. 
                    	
  51.   letter-spacing: 0.09em;
    52. 
                    	
  52.   padding-bottom: 10px;
    53. 
                    	
  53.   border-bottom: 1px solid #c1c1c1
    54. 
                    	
  54. }
    55. 
                    	
  55. #menu .menuWrap .menuTop .listWrap dl {
    56. 
                    	
  56.   font-size: 0;
    57. 
                    	
  57.   padding: 20px 10px;
    58. 
                    	
  58.   border-bottom: 1px dashed #c1c1c1
    59. 
                    	
  59. }
    60. 
                    	
  60. #menu .menuWrap .menuTop .listWrap dt {
    61. 
                    	
  61.   width: 320px;
    62. 
                    	
  62.   font-size: 1.6rem;
    63. 
                    	
  63.   letter-spacing: 0.09em;
    64. 
                    	
  64.   vertical-align: middle;
    65. 
                    	
  65.   display: inline-block
    66. 
                    	
  66. }
    67. 
                    	
  67. #menu .menuWrap .menuTop .listWrap dd {
    68. 
                    	
  68.   width: 140px;
    69. 
                    	
  69.   font-size: 1.6rem;
    70. 
                    	
  70.   letter-spacing: 0.09em;
    71. 
                    	
  71.   vertical-align: middle;
    72. 
                    	
  72.   text-align: right;
    73. 
                    	
  73.   display: inline-block
    74. 
                    	
  74. }
    75. 
                    	
  75. #menu .menuWrap .menuTop .listWrap dd span { font-size: 1.3rem }
    76. 
                    	
  76. #menu .menuWrap .menuTop .listWrap p {
    77. 
                    	
  77.   font-size: 1.6rem;
    78. 
                    	
  78.   letter-spacing: 0.09em;
    79. 
                    	
  79.   margin-top: 20px
    80. 
                    	
  80. }
    81. 
                    	
  81. #menu .menuWrap .menuBottom {
    82. 
                    	
  82.   font-size: 0;
    83. 
                    	
  83.   margin-top: 60px
    84. 
                    	
  84. }
    85. 
                    	
  85. #menu .menuWrap .menuBottom .listWrap {
    86. 
                    	
  86.   width: 560px;
    87. 
                    	
  87.   vertical-align: top;
    88. 
                    	
  88.   text-align: left;
    89. 
                    	
  89.   display: inline-block
    90. 
                    	
  90. }
    91. 
                    	
  91. #menu .menuWrap .menuBottom .listWrap + .listWrap { margin-left: 60px }
    92. 
                    	
  92. #menu .menuWrap .menuBottom .listWrap h3 {
    93. 
                    	
  93.   font-size: 2.4rem;
    94. 
                    	
  94.   letter-spacing: 0.09em;
    95. 
                    	
  95.   padding-bottom: 10px;
    96. 
                    	
  96.   border-bottom: 1px solid #c1c1c1
    97. 
                    	
  97. }
    98. 
                    	
  98. #menu .menuWrap .menuBottom .listWrap dl + h3 { margin-top: 60px }
    99. 
                    	
  99. #menu .menuWrap .menuBottom .listWrap dl {
    100. 
                    	
  100.   font-size: 0;
    101. 
                    	
  101.   padding: 20px 10px;
    102. 
                    	
  102.   border-bottom: 1px dashed #c1c1c1
    103. 
                    	
  103. }
    104. 
                    	
  104. #menu .menuWrap .menuBottom .listWrap dt {
    105. 
                    	
  105.   width: 400px;
    106. 
                    	
  106.   font-size: 1.6rem;
    107. 
                    	
  107.   letter-spacing: 0.09em;
    108. 
                    	
  108.   vertical-align: middle;
    109. 
                    	
  109.   display: inline-block
    110. 
                    	
  110. }
    111. 
                    	
  111. #menu .menuWrap .menuBottom .listWrap dd {
    112. 
                    	
  112.   width: 140px;
    113. 
                    	
  113.   font-size: 1.6rem;
    114. 
                    	
  114.   letter-spacing: 0.09em;
    115. 
                    	
  115.   vertical-align: middle;
    116. 
                    	
  116.   text-align: right;
    117. 
                    	
  117.   display: inline-block
    118. 
                    	
  118. }
    119. 
                    	
  119. #menu .menuWrap .menuBottom .listWrap dd span { font-size: 1.3rem }
    120. 
                    	
  120. @media screen and (max-width: 768px) {
    121. 
                    	
  121.   ～タイトルとテキスト部分のデザイン省略～
    122. 
                    	
  122.   #menu .menuWrap {
    123. 
                    	
  123.     width: 100%;
    124. 
                    	
  124.     padding: 0 4%
    125. 
                    	
  125.   }
    126. 
                    	
  126.   #menu .menuWrap .tabItem { width: 100px }
    127. 
                    	
  127.   #menu .menuWrap #dinner + label,
    128. 
                    	
  128.   #menu .menuWrap #drink + label {
    129. 
                    	
  129.     margin-left: 10px
    130. 
                    	
  130.   }
    131. 
                     	
  131.   #menu .menuWrap .menuTop .imageWrap {
    132. 
                     	
  132.     width: 100%;
    133. 
                     	
  133.     margin-left: 0;
    134. 
                     	
  134.     float: none
    135. 
                     	
  135.   }
    136. 
                     	
  136.   #menu .menuWrap .menuTop .listWrap {
    137. 
                     	
  137.     width: 100%;
    138. 
                     	
  138.     margin-top: 40px;
    139. 
                     	
  139.     display:  block
    140. 
                     	
  140.   }
    141. 
                    	
  141.   #menu .menuWrap .menuTop .listWrap h3 { font-size: 2rem }
    142. 
                    	
  142.   #menu .menuWrap .menuTop .listWrap dl { padding: 20px 0 }
    143. 
                    	
  143.   #menu .menuWrap .menuTop .listWrap dt { width: calc(100% - 140px) }
    144. 
                    	
  144.   #menu .menuWrap .menuTop .listWrap dd span { font-size: 1.2rem }
    145. 
                    	
  145.   #menu .menuWrap .menuTop .listWrap p {
    146. 
                    	
  146.     text-indent: -1em;
    147. 
                    	
  147.     padding-left: 1em
    148. 
                    	
  148.   }
    149. 
                    	
  149.   #menu .menuWrap .menuBottom { margin-top: 40px }
    150. 
                    	
  150.   #menu .menuWrap .menuBottom .listWrap {
    151. 
                      	
  151.     width: 100%;
    152. 
                      	
  152.     display:  block
    153. 
                     	
  153.   }
    154. 
                     	
  154.   #menu .menuWrap .menuBottom .listWrap + .listWrap {
    155. 
                     	
  155.     margin-top: 40px;
    156. 
                     	
  156.     margin-left: 0
    157. 
                     	
  157.   }
    158. 
                     	
  158.   #menu .menuWrap .menuBottom .listWrap h3 { font-size: 2rem }
    159. 
                     	
  159.   #menu .menuWrap .menuBottom .listWrap dl + h3 { margin-top: 40px }
    160. 
                     	
  160.   #menu .menuWrap .menuBottom .listWrap dl { padding: 20px 0 }
    161. 
                    	
  161.   #menu .menuWrap .menuBottom .listWrap dt { width: calc(100% - 140px) }
    162. 
                    	
  162.   #menu .menuWrap .menuBottom .listWrap dd span { font-size: 1.2rem }
    163. 
                    	
  163. }
    164.

いくつか記号を使ったプロパティの指定などがありますので順番に見ていきます。

まず「+（プラス）」記号は隣接セレクタと言います。「#menu .menuWrap #dinner + label」の部分でいうとlabelは3つありますが「#dinnerの次にあるlabel」という事になります。

この「+」で指定される要素は次の要素である事に注意してください。隣り合っていても手前の要素には適応されません。そして親要素や子要素ではなく同じ階層のものに適応されます。

そして「~（波線）」記号は間接セレクタと言います。「#menu .menuWrap #dinner:checked ~ #dinnerContent」の場合、「#dinnerと同じ階層の#dinnerContent」となります。

「~」で指定の場合は隣り合う要素だけではなく、同じ階層であればいくつでも間の要素を飛び越えて特定の要素を指定する事ができます。こちらも「+」と同じく手前の要素には適応されません。

もうひとつ上記にも出てきましたが、「#dinner」のラジオボタンにチェックが付いている時のデザインを指定するには「#dinner:checked」とすればOKです。

竹馬

ちょっとフォーム関連のタグは設定が複雑になのでゆっくり覚えていってください（笑）。htmlで指定したname属性もCSSで「input[name=”tabItem”]」と指定できたりします。

記述したHTMLとCSSの確認

HTMLとCSSを分割して紹介してきましたので、メニュー項目全体のコードを確認しておきましょう。

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. ～headerの記述省略～
    9. 
                    	
  9. </header>
    10. 
                        
  10. <main>
    11. 
                        
  11.   ～スライダーの記述省略～
    12. 
                        
  12.   ～お知らせの記述省略～
    13. 
                        
  13.   <section id="menu">
    14. 
                        
  14.     <div class="inner">
    15. 
                        
  15.       <div class="title">
    16. 
                        
  16.         <h2>メニュー</h2>
    17. 
                        
  17.       </div>
    18. 
                        
  18.       <div class="menuMain">
    19. 
                        
  19.         <div class="menuMainInner">
    20. 
                        
  20.           <div class="menuMainBox">
    21. 
                        
  21.             <h3>落ち着いた空間、<br>スパイスの香るカレーと<br>美味しいチャイで<br>リラックスしませんか？</h3>
    22. 
                        
  22.             <p>サラッとしたスパイシーなカレーに四季折々の美味しい野菜を使用しています。たっぷりと加えたカルダモンの香りをお楽しみください。</p>
    23. 
                        
  23.           </div>
    24. 
                        
  24.         </div>
    25. 
                        
  25.       </div>
    26. 
                        
  26.       <div class="menuWrap">
    27. 
                        
  27.         <input id="lunch" type="radio" name="tabItem" checked>
    28. 
                        
  28.         <label class="tabItem" for="lunch">ランチ</label>
    29. 
                        
  29.         <input id="dinner" type="radio" name="tabItem">
    30. 
                        
  30.         <label class="tabItem" for="dinner">ディナー</label>
    31. 
                        
  31.         <input id="drink" type="radio" name="tabItem">
    32. 
                        
  32.         <label class="tabItem" for="drink">ドリンク</label>
    33. 
                        
  33.         <div class="tabContent" id="lunchContent">
    34. 
                        
  34.           <div class="menuTop cf">
    35. 
                        
  35.             <div class="imageWrap">
    36. 
                        
  36.               <img src="./img/menu_lunch.jpg" alt="いやしのカレー サンプルのランチメニュー">
    37. 
                        
  37.             </div>
    38. 
                        
  38.             <div class="listWrap">
    39. 
                        
  39.               <h3>ランチセット</h3>
    40. 
                        
  40.               <dl>
    41. 
                        
  41.                 <dt>チキンカレー</dt>
    42. 
                        
  42.                 <dd>800円<span>（税込）</span></dd>
    43. 
                        
  43.               </dl>
    44. 
                        
  44.               <dl>
    45. 
                        
  45.                 <dt>キーマカレー</dt>
    46. 
                        
  46.                 <dd>800円<span>（税込）</span></dd>
    47. 
                        
  47.               </dl>
    48. 
                        
  48.               <dl>
    49. 
                        
  49.                 <dt>季節の野菜カレー</dt>
    50. 
                        
  50.                 <dd>800円<span>（税込）</span></dd>
    51. 
                        
  51.               </dl>
    52. 
                        
  52.               <dl>
    53. 
                        
  53.                 <dt>グリーンカレー</dt>
    54. 
                        
  54.                 <dd>850円<span>（税込）</span></dd>
    55. 
                        
  55.               </dl>
    56. 
                        
  56.               <dl>
    57. 
                        
  57.                 <dt>マッサマンカレー</dt>
    58. 
                        
  58.                 <dd>850円<span>（税込）</span></dd>
    59. 
                        
  59.               </dl>
    60. 
                        
  60.               <p>※ランチセットにはチャイもしくはラッシーが付きます。</p>
    61. 
                        
  61.             </div>
    62. 
                        
  62.           </div>
    63. 
                        
  63.         </div>
    64. 
                        
  64.         <div class="tabContent" id="dinnerContent">
    65. 
                        
  65.           <div class="menuTop cf">
    66. 
                        
  66.             <div class="imageWrap">
    67. 
                        
  67.               <img src="./img/menu_dinner.jpg" alt="いやしのカレー サンプルのディナーメニュー">
    68. 
                        
  68.             </div>
    69. 
                        
  69.             <div class="listWrap">
    70. 
                        
  70.               <h3>カレー</h3>
    71. 
                        
  71.               <dl>
    72. 
                        
  72.                 <dt>チキンカレー</dt>
    73. 
                        
  73.                 <dd>800円<span>（税込）</span></dd>
    74. 
                        
  74.               </dl>
    75. 
                        
  75.               <dl>
    76. 
                        
  76.                 <dt>キーマカレー</dt>
    77. 
                        
  77.                 <dd>800円<span>（税込）</span></dd>
    78. 
                        
  78.               </dl>
    79. 
                        
  79.               <dl>
    80. 
                        
  80.                 <dt>季節の野菜カレー</dt>
    81. 
                        
  81.                 <dd>800円<span>（税込）</span></dd>
    82. 
                        
  82.               </dl>
    83. 
                        
  83.               <dl>
    84. 
                        
  84.                 <dt>グリーンカレー</dt>
    85. 
                        
  85.                 <dd>850円<span>（税込）</span></dd>
    86. 
                        
  86.               </dl>
    87. 
                        
  87.               <dl>
    88. 
                        
  88.                 <dt>マッサマンカレー</dt>
    89. 
                        
  89.                 <dd>850円<span>（税込）</span></dd>
    90. 
                        
  90.               </dl>
    91. 
                        
  91.               <dl>
    92. 
                        
  92.                 <dt>ライス / ナン</dt>
    93. 
                        
  93.                 <dd>300円<span>（税込）</span></dd>
    94. 
                        
  94.               </dl>
    95. 
                        
  95.             </div>
    96. 
                        
  96.           </div>
    97. 
                        
  97.           <div class="menuBottom">
    98. 
                        
  98.             <div class="listWrap">
    99. 
                        
  99.               <h3>一品</h3>
    100. 
                        
  100.               <dl>
    101. 
                        
  101.                 <dt>豚肉の串焼き</dt>
    102. 
                        
  102.                 <dd>700円<span>（税込）</span></dd>
    103. 
                        
  103.               </dl>
    104. 
                        
  104.               <dl>
    105. 
                        
  105.                 <dt>タンドリーチキン</dt>
    106. 
                        
  106.                 <dd>750円<span>（税込）</span></dd>
    107. 
                        
  107.               </dl>
    108. 
                        
  108.               <dl>
    109. 
                        
  109.                 <dt>鶏肉とカシューナッツ炒め</dt>
    110. 
                        
  110.                 <dd>800円<span>（税込）</span></dd>
    111. 
                        
  111.               </dl>
    112. 
                        
  112.               <dl>
    113. 
                        
  113.                 <dt>シーフードのニンニク炒め</dt>
    114. 
                        
  114.                 <dd>800円<span>（税込）</span></dd>
    115. 
                        
  115.               </dl>
    116. 
                        
  116.               <dl>
    117. 
                        
  117.                 <dt>空芯菜炒め</dt>
    118. 
                        
  118.                 <dd>800円<span>（税込）</span></dd>
    119. 
                        
  119.               </dl>
    120. 
                        
  120.               <dl>
    121. 
                        
  121.                 <dt>生春巻き</dt>
    122. 
                        
  122.                 <dd>850円<span>（税込）</span></dd>
    123. 
                        
  123.               </dl>
    124. 
                        
  124.               <dl>
    125. 
                        
  125.                 <dt>青パパイヤのサラダ</dt>
    126. 
                        
  126.                 <dd>800円<span>（税込）</span></dd>
    127. 
                        
  127.               </dl>
    128. 
                        
  128.               <dl>
    129. 
                        
  129.                 <dt>春雨と海老のサラダ</dt>
    130. 
                        
  130.                 <dd>800円<span>（税込）</span></dd>
    131. 
                        
  131.               </dl>
    132. 
                        
  132.             </div>
    133. 
                        
  133.             <div class="listWrap">>
    134. 
                        
  134.               <h3>麺類</h3>
    135. 
                        
  135.               <dl>
    136. 
                        
  136.                 <dt>パッタイ</dt>
    137. 
                        
  137.                 <dd>800円<span>（税込）</span></dd>
    138. 
                        
  138.               </dl>
    139. 
                        
  139.               <dl>
    140. 
                        
  140.                 <dt>カレーラーメン</dt>
    141. 
                        
  141.                 <dd>850円<span>（税込）</span></dd>
    142. 
                        
  142.               </dl>
    143. 
                        
  143.               <h3>デザート</h3>
    144. 
                        
  144.               <dl>
    145. 
                        
  145.                 <dt>マンゴープリン</dt>
    146. 
                        
  146.                 <dd>300円<span>（税込）</span></dd>
    147. 
                        
  147.               </dl>
    148. 
                        
  148.               <dl>
    149. 
                        
  149.                 <dt>ココナッツアイス</dt>
    150. 
                        
  150.                 <dd>350円<span>（税込）</span></dd>
    151. 
                        
  151.               </dl>
    152. 
                        
  152.               <dl>
    153. 
                        
  153.                 <dt>揚げバナナとココナッツアイス</dt>
    154. 
                        
  154.                 <dd>550円<span>（税込）</span></dd>
    155. 
                        
  155.               </dl>
    156. 
                        
  156.               <dl>
    157. 
                        
  157.                 <dt>マンゴーかき氷</dt>
    158. 
                        
  158.                 <dd>550円<span>（税込）</span></dd>
    159. 
                        
  159.               </dl>
    160. 
                        
  160.             </div>
    161. 
                        
  161.           </div>
    162. 
                        
  162.         </div>
    163. 
                        
  163.         <div class="tabContent" id="drinkContent">
    164. 
                        
  164.           <div class="menuTop cf">
    165. 
                        
  165.             <div class="imageWrap">
    166. 
                        
  166.               <img src="./img/menu_drink.jpg" alt="いやしのカレー サンプルのドリンクメニュー">
    167. 
                        
  167.             </div>
    168. 
                        
  168.             <div class="listWrap">
    169. 
                        
  169.               <h3>カクテル</h3>
    170. 
                        
  170.               <dl>
    171. 
                        
  171.                 <dt>カシス</dt>
    172. 
                        
  172.                 <dd>500円<span>（税込）</span></dd>
    173. 
                        
  173.               </dl>
    174. 
                        
  174.               <dl>
    175. 
                        
  175.                 <dt>マンゴスティン</dt>
    176. 
                        
  176.                 <dd>550円<span>（税込）</span></dd>
    177. 
                        
  177.               </dl>
    178. 
                        
  178.               <dl>
    179. 
                        
  179.                 <dt>ライチ</dt>
    180. 
                        
  180.                 <dd>550円<span>（税込）</span></dd>
    181. 
                        
  181.               </dl>
    182. 
                        
  182.               <dl>
    183. 
                        
  183.                 <dt>ヨギー</dt>
    184. 
                        
  184.                 <dd>550円<span>（税込）</span></dd>
    185. 
                        
  185.               </dl>
    186. 
                        
  186.               <dl>
    187. 
                        
  187.                 <dt>ビア</dt>
    188. 
                        
  188.                 <dd>550円<span>（税込）</span></dd>
    189. 
                        
  189.               </dl>
    190. 
                        
  190.               <dl>
    191. 
                        
  191.                 <dt>ワイン</dt>
    192. 
                        
  192.                 <dd>550円<span>（税込）</span></dd>
    193. 
                        
  193.               </dl>
    194. 
                        
  194.             </div>
    195. 
                        
  195.           </div>
    196. 
                        
  196.           <div class="menuBottom">
    197. 
                        
  197.             <div class="listWrap">
    198. 
                        
  198.               <h3>ビール</h3>
    199. 
                        
  199.               <dl>
    200. 
                        
  200.                 <dt>アサヒスーパードライ（生）</dt>
    201. 
                        
  201.                 <dd>550円<span>（税込）</span></dd>
    202. 
                        
  202.               </dl>
    203. 
                        
  203.               <dl>
    204. 
                        
  204.                 <dt>アサヒスーパードライ（中瓶）</dt>
    205. 
                        
  205.                 <dd>600円<span>（税込）</span></dd>
    206. 
                        
  206.               </dl>
    207. 
                        
  207.               <dl>
    208. 
                        
  208.                 <dt>ノンアルコールビール</dt>
    209. 
                        
  209.                 <dd>550円<span>（税込）</span></dd>
    210. 
                        
  210.               </dl>
    211. 
                        
  211.               <h3>チューハイ</h3>
    212. 
                        
  212.               <dl>
    213. 
                        
  213.                 <dt>マンゴー</dt>
    214. 
                        
  214.                 <dd>450円<span>（税込）</span></dd>
    215. 
                        
  215.               </dl>
    216. 
                        
  216.               <dl>
    217. 
                        
  217.                 <dt>グアバ</dt>
    218. 
                        
  218.                 <dd>450円<span>（税込）</span></dd>
    219. 
                        
  219.               </dl>
    220. 
                        
  220.               <dl>
    221. 
                        
  221.                 <dt>ライチ</dt>
    222. 
                        
  222.                 <dd>450円<span>（税込）</span></dd>
    223. 
                        
  223.               </dl>
    224. 
                        
  224.               <dl>
    225. 
                        
  225.                 <dt>レモン</dt>
    226. 
                        
  226.                 <dd>450円<span>（税込）</span></dd>
    227. 
                        
  227.               </dl>
    228. 
                        
  228.               <dl>
    229. 
                        
  229.                 <dt>ライム</dt>
    230. 
                        
  230.                 <dd>450円<span>（税込）</span></dd>
    231. 
                        
  231.               </dl>
    232. 
                        
  232.               <h3>果実酒</h3>
    233. 
                        
  233.               <dl>
    234. 
                        
  234.                 <dt>梅酒</dt>
    235. 
                        
  235.                 <dd>500円<span>（税込）</span></dd>
    236. 
                        
  236.               </dl>
    237. 
                        
  237.               <dl>
    238. 
                        
  238.                 <dt>ライチ</dt>
    239. 
                        
  239.                 <dd>500円<span>（税込）</span></dd>
    240. 
                        
  240.               </dl>
    241. 
                        
  241.               <dl>
    242. 
                        
  242.                 <dt>サンザシ</dt>
    243. 
                        
  243.                 <dd>500円<span>（税込）</span></dd>
    244. 
                        
  244.               </dl>
    245. 
                        
  245.               <dl>
    246. 
                        
  246.                 <dt>杏子</dt>
    247. 
                        
  247.                 <dd>500円<span>（税込）</span></dd>
    248. 
                        
  248.               </dl>
    249. 
                        
  249.               <dl>
    250. 
                        
  250.                 <dt>リンゴ</dt>
    251. 
                        
  251.                 <dd>500円<span>（税込）</span></dd>
    252. 
                        
  252.               </dl>
    253. 
                        
  253.               <h3>ワイン</h3>
    254. 
                        
  254.               <dl>
    255. 
                        
  255.                 <dt>グラスワイン（赤・白）</dt>
    256. 
                        
  256.                 <dd>500円<span>（税込）</span></dd>
    257. 
                        
  257.               </dl>
    258. 
                        
  258.             </div>
    259. 
                        
  259.             <div class="listWrap">
    260. 
                        
  260.               <h3>ウィスキー</h3>
    261. 
                        
  261.               <dl>
    262. 
                        
  262.                 <dt>ハイボール</dt>
    263. 
                        
  263.                 <dd>500円<span>（税込）</span></dd>
    264. 
                        
  264.               </dl>
    265. 
                        
  265.               <dl>
    266. 
                        
  266.                 <dt>コーラハイボール</dt>
    267. 
                        
  267.                 <dd>500円<span>（税込）</span></dd>
    268. 
                        
  268.               </dl>
    269. 
                        
  269.               <dl>
    270. 
                        
  270.                 <dt>ジンジャーハイボール</dt>
    271. 
                        
  271.                 <dd>500円<span>（税込）</span></dd>
    272. 
                        
  272.               </dl>
    273. 
                        
  273.               <h3>焼酎</h3>
    274. 
                        
  274.               <dl>
    275. 
                        
  275.                 <dt>いいちこ（麦）</dt>
    276. 
                        
  276.                 <dd>400円<span>（税込）</span></dd>
    277. 
                        
  277.               </dl>
    278. 
                        
  278.               <h3>ソフトドリンク</h3>
    279. 
                        
  279.               <dl>
    280. 
                        
  280.                 <dt>チャイ</dt>
    281. 
                        
  281.                 <dd>550円<span>（税込）</span></dd>
    282. 
                        
  282.               </dl>
    283. 
                        
  283.               <dl>
    284. 
                        
  284.                 <dt>ラッシー</dt>
    285. 
                        
  285.                 <dd>550円<span>（税込）</span></dd>
    286. 
                        
  286.               </dl>
    287. 
                        
  287.               <dl>
    288. 
                        
  288.                 <dt>バナナラッシー</dt>
    289. 
                        
  289.                 <dd>650円<span>（税込）</span></dd>
    290. 
                        
  290.               </dl>
    291. 
                        
  291.               <dl>
    292. 
                        
  292.                 <dt>マンゴーラッシー</dt>
    293. 
                        
  293.                 <dd>650円<span>（税込）</span></dd>
    294. 
                        
  294.               </dl>
    295. 
                        
  295.               <dl>
    296. 
                        
  296.                 <dt>マンゴ―ジュース</dt>
    297. 
                        
  297.                 <dd>450円<span>（税込）</span></dd>
    298. 
                        
  298.               </dl>
    299. 
                        
  299.               <dl>
    300. 
                        
  300.                 <dt>グアバジュース</dt>
    301. 
                        
  301.                 <dd>450円<span>（税込）</span></dd>
    302. 
                        
  302.               </dl>
    303. 
                        
  303.               <dl>
    304. 
                        
  304.                 <dt>ライチジュース</dt>
    305. 
                        
  305.                 <dd>450円<span>（税込）</span></dd>
    306. 
                        
  306.               </dl>
    307. 
                        
  307.               <dl>
    308. 
                        
  308.                 <dt>オレンジジュース</dt>
    309. 
                        
  309.                 <dd>400円<span>（税込）</span></dd>
    310. 
                        
  310.               </dl>
    311. 
                        
  311.               <dl>
    312. 
                        
  312.                 <dt>グレープフルーツジュース</dt>
    313. 
                        
  313.                 <dd>400円<span>（税込）</span></dd>
    314. 
                        
  314.               </dl>
    315. 
                        
  315.               <dl>
    316. 
                        
  316.                 <dt>コーラ</dt>
    317. 
                        
  317.                 <dd>300円<span>（税込）</span></dd>
    318. 
                        
  318.               </dl>
    319. 
                        
  319.               <dl>
    320. 
                        
  320.                 <dt>ジンジャーエール<>/dt>
    321. 
                        
  321.                 <dd>300円<span>（税込）</span></dd>
    322. 
                        
  322.               </dl>
    323. 
                        
  323.               <dl>
    324. 
                        
  324.                 <dt>ウーロン茶</dt>
    325. 
                        
  325.                 <dd>300円<span>（税込）</span></dd>
    326. 
                        
  326.               </dl>
    327. 
                        
  327.             </div>
    328. 
                        
  328.           </div>
    329. 
                        
  329.         </div>
    330. 
                        
  330.       </div>
    331. 
                        
  331.     </div>
    332. 
                        
  332.   </section>
    333. 
                        
  333. </main>
    334. 
                        
  334. ～JSファイルの読み込み省略～
    335. 
                        
  335. </body>
    336. 
                        
  336. </html>
    337.

style.css

                	
    
                    	
  1. ～共通デザイン省略～
    2. 
                    	
  2. ～headerデザイン省略～
    3. 
                    	
  3. ～navデザイン省略～
    4. 
                    	
  4. ～スライダーデザイン省略～
    5. 
                    	
  5. ～お知らせデザイン省略～
    6. 
                    	
  6. /* ------ menu ------ */
    7. 
                    	
  7. #menu {
    8. 
                    	
  8.   padding-top: 80px;
    9. 
                    	
  9.   margin-top: -80px
    10. 
                    	
  10. }
    11. 
                    	
  11. #menu .inner {
    12. 
                    	
  12.   text-align: center;
    13. 
                    	
  13.   padding: 80px 0
    14. 
                    	
  14. }
    15. 
                    	
  15. #menu h2 {
    16. 
                    	
  16.   font-size: 2.4rem;
    17. 
                    	
  17.   letter-spacing: 0.09em
    18. 
                    	
  18. }
    19. 
                    	
  19. #menu .menuMain {
    20. 
                    	
  20.   width: 100%;
    21. 
                    	
  21.   height: 480px;
    22. 
                    	
  22.   margin-top: 60px;
    23. 
                    	
  23.   background: url("../img/menu_main.jpg") no-repeat;
    24. 
                    	
  24.   background-size: cover
    25. 
                    	
  25. }
    26. 
                    	
  26. #menu .menuMainInner {
    27. 
                    	
  27.   width: 1200px;
    28. 
                    	
  28.   margin: 0 auto;
    29. 
                    	
  29.   position: relative
    30. 
                    	
  30. }
    31. 
                    	
  31. #menu .menuMainBox {
    32. 
                    	
  32.   width: 500px;
    33. 
                    	
  33.   height: 480px;
    34. 
                    	
  34.   text-align: left;
    35. 
                    	
  35.   padding: 80px;
    36. 
                    	
  36.   background: rgba(255,255,255,0.7);
    37. 
                    	
  37.   position: absolute;
    38. 
                    	
  38.   top: 0;
    39. 
                    	
  39.   right: 40px
    40. 
                    	
  40. }
    41. 
                    	
  41. #menu .menuMainBox h3 {
    42. 
                    	
  42.   font-size: 2.8rem;
    43. 
                    	
  43.   letter-spacing: 0.09em
    44. 
                    	
  44. }
    45. 
                    	
  45. #menu .menuMainBox p {
    46. 
                    	
  46.   font-size: 1.6rem;
    47. 
                    	
  47.   letter-spacing: 0.09em;
    48. 
                    	
  48.   margin-top: 30px
    49. 
                    	
  49. }
    50. 
                    	
  50. #menu .menuWrap {
    51. 
                    	
  51.   width: 1200px;
    52. 
                    	
  52.   font-size: 0;
    53. 
                    	
  53.   margin: 60px auto 0
    54. 
                    	
  54. }
    55. 
                    	
  55. #menu .menuWrap .tabItem {
    56. 
                    	
  56.   width: 200px;
    57. 
                    	
  57.   height: 50px;
    58. 
                    	
  58.   color: #fff;
    59. 
                    	
  59.   font-size: 1.6rem;
    60. 
                    	
  60.   letter-spacing: 0.09em;
    61. 
                    	
  61.   line-height: 50px;
    62. 
                    	
  62.   text-align: center;
    63. 
                    	
  63.   background: #c1c1c1;
    64. 
                    	
  64.   transition: all 0.3s ease-in-out;
    65. 
                    	
  65.   display: inline-block;
    66. 
                    	
  66.   cursor: pointer
    67. 
                    	
  67. }
    68. 
                    	
  68. #menu .menuWrap .tabItem:hover { background: #e21412 }
    69. 
                    	
  69. #menu .menuWrap input[name="tabItem"] { display: none }
    70. 
                    	
  70. #menu .menuWrap .tabContent {
    71. 
                    	
  71.   margin-top: 60px;
    72. 
                    	
  72.   display: none;
    73. 
                    	
  73.   overflow: hidden
    74. 
                    	
  74. }
    75. 
                    	
  75. #menu .menuWrap #dinner + label,
    76. 
                    	
  76. #menu .menuWrap #drink + label {
    77. 
                    	
  77.   margin-left: 20px
    78. 
                    	
  78. }
    79. 
                    	
  79. #menu .menuWrap #lunch:checked ~ #lunchContent,
    80. 
                    	
  80. #menu .menuWrap #dinner:checked ~ #dinnerContent,
    81. 
                    	
  81. #menu .menuWrap #drink:checked ~ #drinkContent {
    82. 
                    	
  82.   display: block
    83. 
                    	
  83. }
    84. 
                    	
  84. #menu .menuWrap input:checked + .tabItem { background: #e21412 }
    85. 
                    	
  85. #menu .menuWrap .menuTop { font-size: 0 }
    86. 
                    	
  86. #menu .menuWrap .menuTop .imageWrap {
    87. 
                    	
  87.   width: 640px;
    88. 
                    	
  88.   margin-left: 60px;
    89. 
                    	
  89.   float: right
    90. 
                    	
  90. }
    91. 
                    	
  91. #menu .menuWrap .menuTop .listWrap {
    92. 
                    	
  92.   width: 480px;
    93. 
                    	
  93.   text-align: left;
    94. 
                    	
  94.   display: inline-block
    95. 
                    	
  95. }
    96. 
                    	
  96. #menu .menuWrap .menuTop .listWrap h3 {
    97. 
                    	
  97.   font-size: 2.4rem;
    98. 
                    	
  98.   letter-spacing: 0.09em;
    99. 
                    	
  99.   padding-bottom: 10px;
    100. 
                    	
  100.   border-bottom: 1px solid #c1c1c1
    101. 
                    	
  101. }
    102. 
                    	
  102. #menu .menuWrap .menuTop .listWrap dl {
    103. 
                    	
  103.   font-size: 0;
    104. 
                    	
  104.   padding: 20px 10px;
    105. 
                    	
  105.   border-bottom: 1px dashed #c1c1c1
    106. 
                    	
  106. }
    107. 
                    	
  107. #menu .menuWrap .menuTop .listWrap dt {
    108. 
                    	
  108.   width: 320px;
    109. 
                    	
  109.   font-size: 1.6rem;
    110. 
                    	
  110.   letter-spacing: 0.09em;
    111. 
                    	
  111.   vertical-align: middle;
    112. 
                    	
  112.   display: inline-block
    113. 
                    	
  113. }
    114. 
                    	
  114. #menu .menuWrap .menuTop .listWrap dd {
    115. 
                    	
  115.   width: 140px;
    116. 
                    	
  116.   font-size: 1.6rem;
    117. 
                    	
  117.   letter-spacing: 0.09em;
    118. 
                    	
  118.   vertical-align: middle;
    119. 
                    	
  119.   text-align: right;
    120. 
                    	
  120.   display: inline-block
    121. 
                    	
  121. }
    122. 
                    	
  122. #menu .menuWrap .menuTop .listWrap dd span { font-size: 1.3rem }
    123. 
                    	
  123. #menu .menuWrap .menuTop .listWrap p {
    124. 
                    	
  124.   font-size: 1.6rem;
    125. 
                    	
  125.   letter-spacing: 0.09em;
    126. 
                    	
  126.   margin-top: 20px
    127. 
                    	
  127. }
    128. 
                    	
  128. #menu .menuWrap .menuBottom {
    129. 
                    	
  129.   font-size: 0;
    130. 
                    	
  130.   margin-top: 60px
    131. 
                    	
  131. }
    132. 
                    	
  132. #menu .menuWrap .menuBottom .listWrap {
    133. 
                    	
  133.   width: 560px;
    134. 
                    	
  134.   vertical-align: top;
    135. 
                    	
  135.   text-align: left;
    136. 
                    	
  136.   display: inline-block
    137. 
                    	
  137. }
    138. 
                    	
  138. #menu .menuWrap .menuBottom .listWrap + .listWrap { margin-left: 60px }
    139. 
                    	
  139. #menu .menuWrap .menuBottom .listWrap h3 {
    140. 
                    	
  140.   font-size: 2.4rem;
    141. 
                    	
  141.   letter-spacing: 0.09em;
    142. 
                    	
  142.   padding-bottom: 10px;
    143. 
                    	
  143.   border-bottom: 1px solid #c1c1c1
    144. 
                    	
  144. }
    145. 
                    	
  145. #menu .menuWrap .menuBottom .listWrap dl + h3 { margin-top: 60px }
    146. 
                    	
  146. #menu .menuWrap .menuBottom .listWrap dl {
    147. 
                    	
  147.   font-size: 0;
    148. 
                    	
  148.   padding: 20px 10px;
    149. 
                    	
  149.   border-bottom: 1px dashed #c1c1c1
    150. 
                    	
  150. }
    151. 
                    	
  151. #menu .menuWrap .menuBottom .listWrap dt {
    152. 
                    	
  152.   width: 400px;
    153. 
                    	
  153.   font-size: 1.6rem;
    154. 
                    	
  154.   letter-spacing: 0.09em;
    155. 
                    	
  155.   vertical-align: middle;
    156. 
                    	
  156.   display: inline-block
    157. 
                    	
  157. }
    158. 
                    	
  158. #menu .menuWrap .menuBottom .listWrap dd {
    159. 
                    	
  159.   width: 140px;
    160. 
                    	
  160.   font-size: 1.6rem;
    161. 
                    	
  161.   letter-spacing: 0.09em;
    162. 
                    	
  162.   vertical-align: middle;
    163. 
                    	
  163.   text-align: right;
    164. 
                    	
  164.   display: inline-block
    165. 
                    	
  165. }
    166. 
                    	
  166. #menu .menuWrap .menuBottom .listWrap dd span { font-size: 1.3rem }
    167. 
                    	
  167. @media screen and (max-width: 768px) {
    168. 
                    	
  168.   #menu {
    169. 
                    	
  169.     padding-top: 60px;
    170. 
                    	
  170.     margin-top: -60px
    171. 
                    	
  171.   }
    172. 
                    	
  172.   #menu .inner {
    173. 
                    	
  173.     text-align: center;
    174. 
                    	
  174.     padding: 60px 0 20px
    175. 
                    	
  175.   }
    176. 
                    	
  176.   #menu h2 { font-size: 2rem }
    177. 
                    	
  177.   #menu .menuMain {
    178. 
                     	
  178.     height: 400px;
    179. 
                     	
  179.     background: url("../img/menu_main.jpg") center center no-repeat
    180. 
                    	
  180.   }
    181. 
                    	
  181.   #menu .menuMainInner {
    182. 
                    	
  182.     width: 100%;
    183. 
                    	
  183.     padding: 0 4%
    184. 
                    	
  184.   }
    185. 
                    	
  185.   #menu .menuMainBox {
    186. 
                    	
  186.     width: 90%;
    187. 
                    	
  187.     height: 400px;
    188. 
                     	
  188.     padding: 60px 40px;
    189. 
                     	
  189.     margin: auto;
    190. 
                     	
  190.     position: absolute;
    191. 
                     	
  191.     top: 0;
    192. 
                     	
  192.     right: 0;
    193. 
                     	
  193.     left: 0
    194. 
                     	
  194.   }
    195. 
                    	
  195.   #menu .menuMainBox h3 { font-size: 2rem }
    196. 
                    	
  196.   #menu .menuMainBox p { margin-top: 20px }
    197. 
                    	
  197.   #menu .menuWrap {
    198. 
                    	
  198.     width: 100%;
    199. 
                    	
  199.     padding: 0 4%
    200. 
                    	
  200.   }
    201. 
                    	
  201.   #menu .menuWrap .tabItem { width: 100px }
    202. 
                    	
  202.   #menu .menuWrap #dinner + label,
    203. 
                    	
  203.   #menu .menuWrap #drink + label {
    204. 
                    	
  204.     margin-left: 10px
    205. 
                    	
  205.   }
    206. 
                     	
  206.   #menu .menuWrap .menuTop .imageWrap {
    207. 
                     	
  207.     width: 100%;
    208. 
                     	
  208.     margin-left: 0;
    209. 
                     	
  209.     float: none
    210. 
                     	
  210.   }
    211. 
                     	
  211.   #menu .menuWrap .menuTop .listWrap {
    212. 
                     	
  212.     width: 100%;
    213. 
                     	
  213.     margin-top: 40px;
    214. 
                     	
  214.     display:  block
    215. 
                     	
  215.   }
    216. 
                    	
  216.   #menu .menuWrap .menuTop .listWrap h3 { font-size: 2rem }
    217. 
                    	
  217.   #menu .menuWrap .menuTop .listWrap dl { padding: 20px 0 }
    218. 
                    	
  218.   #menu .menuWrap .menuTop .listWrap dt { width: calc(100% - 140px) }
    219. 
                    	
  219.   #menu .menuWrap .menuTop .listWrap dd span { font-size: 1.2rem }
    220. 
                    	
  220.   #menu .menuWrap .menuTop .listWrap p {
    221. 
                    	
  221.     text-indent: -1em;
    222. 
                    	
  222.     padding-left: 1em
    223. 
                    	
  223.   }
    224. 
                    	
  224.   #menu .menuWrap .menuBottom { margin-top: 40px }
    225. 
                    	
  225.   #menu .menuWrap .menuBottom .listWrap {
    226. 
                      	
  226.     width: 100%;
    227. 
                      	
  227.     display:  block
    228. 
                     	
  228.   }
    229. 
                     	
  229.   #menu .menuWrap .menuBottom .listWrap + .listWrap {
    230. 
                     	
  230.     margin-top: 40px;
    231. 
                     	
  231.     margin-left: 0
    232. 
                     	
  232.   }
    233. 
                     	
  233.   #menu .menuWrap .menuBottom .listWrap h3 { font-size: 2rem }
    234. 
                     	
  234.   #menu .menuWrap .menuBottom .listWrap dl + h3 { margin-top: 40px }
    235. 
                     	
  235.   #menu .menuWrap .menuBottom .listWrap dl { padding: 20px 0 }
    236. 
                    	
  236.   #menu .menuWrap .menuBottom .listWrap dt { width: calc(100% - 140px) }
    237. 
                    	
  237.   #menu .menuWrap .menuBottom .listWrap dd span { font-size: 1.2rem }
    238. 
                    	
  238. }
    239.

ダウンロードした画像は「img」フォルダに入れておきましょう。そしてブラウザでチェックしてみてください。タブメニューは正常に動いていますでしょうか？

デモサイトの階層

今回はコードが長いので大変でしたね（笑）。デモサイトはひとつの例として見てもらって、商品をそんなにホームページで紹介しないならタブメニューも外してコンパクトにまとめてください。

ちょっとずつでもタグの使い方やプロパティで指定できるデザインがわかってくればご自身で思い描く形を作り上げる事ができるようになっていきます。

次は「お店情報」の項目を作っていきましょう。Googleマップを使って簡単に地図を設置していきます。

お知らせに新着情報を表示する お店情報にGoogleマップを埋め込む

よく読まれている記事

おすすめの記事

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

チェピレア日記