1. ホーム
  2. ホームページの作り方
  3. CSS
  4. CSSだけで簡単にタブメニューを実装！コピペで作れるサンプルコードをご紹介
  • 最終更新日
  • CSS

CSSだけで簡単にタブメニューを実装！コピペで作れるサンプルコードをご紹介

タブの切り替え機能のコトをタブメニューって言ったりしますが、今回はこのタブ機能を実装していきます。ページを遷移することなく同じページ内で情報を切り替えるアレです。

タブメニューの使用例を身近なトコで言うと飲食店のメニューですね。「ランチ」「ディナー」「ドリンク」などのタブを切り替える事によってそれぞれの情報が表示されるというものです。

もともとはjQueryを使ってタブを切り替える方法が一般的でしたが、今ではCSSだけで簡単に実装する事も可能になりましたので、シンプルなタブメニューを実装するにはオススメです。

目次 [閉じる]

タブメニューをHTMLで構築する

さっそくサンプルコードを見ていきましょう。今回は冒頭でも触れた飲食店のメニューを作ってみます。すべてのメニューを表示すると下にズラ～っと長くなり過ぎるので、「ランチ」「ディナー」「ドリンク」のタブを使って表示を切り替えます。

index.html

            
    
                
  1. <!DOCTYPE html>
    2. 
                
  2. <html>
    3. 
                
  3. <head>
    4. 
                
  4. <meta charset="UTF-8">
    5. 
                
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
    6. 
                
  6. <title>タブメニューを実装しよう</title>
    7. 
                
  7. <link type="text/css" rel="stylesheet" href="css/style.css">
    8. 
                
  8. </head>
    9. 
                
  9. <body>
    10. 
                
  10.   <div class="menuWrap">
    11. 
                
  11.     <input id="lunch" type="radio" name="tabItem" checked>
    12. 
                
  12.     <label class="tabItem" for="lunch">ランチ</label>
    13. 
                
  13.     <input id="dinner" type="radio" name="tabItem">
    14. 
                
  14.     <label class="tabItem" for="dinner">ディナー</label>
    15. 
                
  15.     <input id="drink" type="radio" name="tabItem">
    16. 
                
  16.     <label class="tabItem" for="drink">ドリンク</label>
    17. 
                
  17.     <div class="tabContent" id="lunchContent">
    18. 
                
  18.       <p>ランチ</p>
    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>950円<span>（税込）</span></dd>
    26. 
                
  26.       </dl>
    27. 
                
  27.       <dl>
    28. 
                
  28.         <dt>ねぎ焼き定食</dt>
    29. 
                
  29.         <dd>900円<span>（税込）</span></dd>
    30. 
                
  30.       </dl>
    31. 
                
  31.       <dl>
    32. 
                
  32.         <dt>焼きそば定食</dt>
    33. 
                
  33.         <dd>800円<span>（税込）</span></dd>
    34. 
                
  34.       </dl>
    35. 
                
  35.     </div>
    36. 
                
  36.     <div class="tabContent" id="dinnerContent">
    37. 
                
  37.       <p>ディナー</p>
    38. 
                
  38.       <dl>
    39. 
                
  39.         <dt>ブタ玉</dt>
    40. 
                
  40.         <dd>800円<span>（税込）</span></dd>
    41. 
                
  41.       </dl>
    42. 
                
  42.       <dl>
    43. 
                
  43.         <dt>ミックスモダン</dt>
    44. 
                
  44.         <dd>1,000円<span>（税込）</span></dd>
    45. 
                
  45.       </dl>
    46. 
                
  46.       <dl>
    47. 
                
  47.         <dt>スジねぎ焼き</dt>
    48. 
                
  48.         <dd>900円<span>（税込）</span></dd>
    49. 
                
  49.       </dl>
    50. 
                
  50.       <dl>
    51. 
                
  51.         <dt>焼きそば（豚・イカ）</dt>
    52. 
                
  52.         <dd>800円<span>（税込）</span></dd>
    53. 
                
  53.       </dl>
    54. 
                
  54.     </div>
    55. 
                
  55.     <div class="tabContent" id="drinkContent">
    56. 
                
  56.       <p>ドリンク</p>
    57. 
                
  57.       <dl>
    58. 
                
  58.         <dt>生ビール</dt>
    59. 
                
  59.         <dd>500円<span>（税込）</span></dd>
    60. 
                
  60.       </dl>
    61. 
                
  61.       <dl>
    62. 
                
  62.         <dt>酎ハイ</dt>
    63. 
                
  63.         <dd>350円<span>（税込）</span></dd>
    64. 
                
  64.       </dl>
    65. 
                
  65.       <dl>
    66. 
                
  66.         <dt>焼酎</dt>
    67. 
                
  67.         <dd>400円<span>（税込）</span></dd>
    68. 
                
  68.       </dl>
    69. 
                
  69.       <dl>
    70. 
                
  70.         <dt>ソフトドリンク</dt>
    71. 
                
  71.         <dd>300円<span>（税込）</span></dd>
    72. 
                
  72.       </dl>
    73. 
                
  73.     </div>
    74. 
                
  74.   </div>
    75. 
                
  75. </body>
    76. 
                
  76. </html>
    77.

はい、ちょっと長いですが上記をコピペしておきましょう。

ファイル名は何でも構いませんが僕は「index.html」としています。あとはココに「style.css」というファイル名のCSSを読み込みます。CSSに関しては次項の「タブメニューをCSSで調整する」で紹介します。

CSSのみでタブメニューを実装するには「input」タグを使用します。inputタグとそれぞれのコンテンツを紐付けておき、選択されたタブによってコンテンツが切り替わるというものです。

            
    
                
  1. <input id="lunch" type="radio" name="tabItem" checked>
    2. 
                
  2. <label class="tabItem" for="lunch">ランチ</label>
    3. 
                
  3. <input id="dinner" type="radio" name="tabItem">
    4. 
                
  4. <label class="tabItem" for="dinner">ディナー</label>
    5. 
                
  5. <input id="drink" type="radio" name="tabItem">
    6. 
                
  6. <label class="tabItem" for="drink">ドリンク</label>
    7. 
                
  7. <div class="tabContent" id="lunchContent">
    8. 
                
  8. ～ここにランチの内容を記述します～
    9. 
                
  9. </div>
    10. 
                
  10. <div class="tabContent" id="dinnerContent">
    11. 
                
  11. ～ここにディナーの内容を記述します～
    12. 
                
  12. </div>
    13. 
                
  13. <div class="tabContent" id="drinkContent">
    14. 
                
  14. ～ここにドリンクの内容を記述します～
    15. 
                
  15. </div>
    16.

大事な箇所だけ抜き出すと上記のコードです。inputタグはラジオボタンとして設定しますが、デフォルトで生成される丸いチェックは表示したくないのでCSSで非表示にします。

タブのデザイン自体は「label」タグにおこないますので、inputタグとlabelタグは紐付けておきます。そして、その後ろにそれぞれの固有id名を付けたdivタグを設置すればOKです。

ご自身のホームページで使われる場合は、クラス名やid名を変える事になるかと思いますが、HTMLファイルとCSSファイルをともに変更しないといけないので注意してください。

はじめはどこを変えたら良いのかわからないかも知れませんが、まぁコレもコーディングの勉強だと思って頑張ってみてください。僕もコレを使いはじめた頃は迷ってました（笑）。

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

次にCSSの設定を見ていきますので、まずはコードをコピペしておいてください。

style.css

            
    
                
  1. @charset "utf-8";
    2. 
                
  2.  
    3. 
                
  3. * {
    4. 
                
  4.   margin: 0;
    5. 
                
  5.   padding: 0;
    6. 
                
  6.   box-sizing: border-box
    7. 
                
  7. }
    8. 
                
  8. html {
    9. 
                
  9.   font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
    10. 
                
  10.   font-size: 62.5%;
    11. 
                
  11.   font-feature-settings: "palt"
    12. 
                
  12. }
    13. 
                
  13. .menuWrap {
    14. 
                
  14.   width: 100%;
    15. 
                
  15.   max-width: 740px;
    16. 
                
  16.   text-align: center;
    17. 
                
  17.   margin: 100px auto 0
    18. 
                
  18. }
    19. 
                
  19. .menuWrap .tabItem {
    20. 
                
  20.   width: 200px;
    21. 
                
  21.   height: 50px;
    22. 
                
  22.   color: #fff;
    23. 
                
  23.   font-size: 1.6rem;
    24. 
                
  24.   letter-spacing: 0.09em;
    25. 
                
  25.   line-height: 50px;
    26. 
                
  26.   text-align: center;
    27. 
                
  27.   background: #c1c1c1;
    28. 
                
  28.   transition: all 0.3s ease-in-out;
    29. 
                
  29.   display: inline-block;
    30. 
                
  30.   cursor: pointer
    31. 
                
  31. }
    32. 
                
  32. .menuWrap .tabItem:hover { background: #000 }
    33. 
                
  33. .menuWrap input[name="tabItem"] { display: none }
    34. 
                
  34. .menuWrap .tabContent {
    35. 
                
  35.   width: 100%;
    36. 
                
  36.   max-width: 740px;
    37. 
                
  37.   text-align: left;
    38. 
                
  38.   margin-top: 60px;
    39. 
                
  39.   display: none;
    40. 
                
  40.   overflow: hidden
    41. 
                
  41. }
    42. 
                
  42. .menuWrap #dinner + label,
    43. 
                
  43. .menuWrap #drink + label {
    44. 
                
  44.   margin-left: 20px
    45. 
                
  45. }
    46. 
                
  46. .menuWrap #lunch:checked ~ #lunchContent,
    47. 
                
  47. .menuWrap #dinner:checked ~ #dinnerContent,
    48. 
                
  48. .menuWrap #drink:checked ~ #drinkContent {
    49. 
                
  49.   display: block
    50. 
                
  50. }
    51. 
                
  51. .menuWrap input:checked + .tabItem { background: #000 }
    52. 
                
  52. .menuWrap .tabContent p {
    53. 
                
  53.   font-size: 2.4rem;
    54. 
                
  54.   font-weight: 500;
    55. 
                
  55.   letter-spacing: 0.09em;
    56. 
                
  56.   padding-bottom: 10px;
    57. 
                
  57.   border-bottom: 1px solid #c1c1c1
    58. 
                
  58. }
    59. 
                
  59. .menuWrap .tabContent dl {
    60. 
                
  60.   font-size: 0;
    61. 
                
  61.   padding: 20px 10px;
    62. 
                
  62.   border-bottom: 1px dashed #c1c1c1
    63. 
                
  63. }
    64. 
                
  64. .menuWrap .tabContent dt {
    65. 
                
  65.   width: calc(100% - 140px);
    66. 
                
  66.   font-size: 1.6rem;
    67. 
                
  67.   letter-spacing: 0.09em;
    68. 
                
  68.   vertical-align: middle;
    69. 
                
  69.   display: inline-block
    70. 
                
  70. }
    71. 
                
  71. .menuWrap .tabContent dd {
    72. 
                
  72.   width: 140px;
    73. 
                
  73.   font-size: 1.6rem;
    74. 
                
  74.   letter-spacing: 0.09em;
    75. 
                
  75.   vertical-align: middle;
    76. 
                
  76.   text-align: right;
    77. 
                
  77.   display: inline-block
    78. 
                
  78. }
    79. 
                
  79. .menuWrap .tabContent dd span { font-size: 1.3rem }
    80. 
                
  80. @media screen and (max-width: 768px) {
    81. 
                
  81.   .menuWrap { padding: 2rem }
    82. 
                
  82.   .menuWrap .tabItem { width: 0 4% }
    83. 
                
  83.   .menuWrap #dinner + label,
    84. 
                
  84.   .menuWrap #drink + label {
    85. 
                
  85.     margin-left: 10px
    86. 
                
  86.   }
    87. 
                
  87.   .menuWrap .tabContent p { font-size: 2rem }
    88. 
                
  88.   .menuWrap .tabContent dl { padding: 20px 0 }
    89. 
                
  89.   .menuWrap .tabContent dd span { font-size: 1.2rem }
    90. 
                
  90. }
    91.

一応レスポンシブの設定も記述していますので、まるっとコピペしてもらったらファイルの階層も合わせておきましょう。下記のような階層にファイルを設置すればOKです。

タブメニューファイルの配置場所

お好み焼き屋さんのメニューを例にしてみたんですが、うまく表示されましたでしょうか。どうでも良いですが僕はお好み焼き屋さんでアルバイトしていた事もあるので、今でもお好み焼きをバリバリ焼けます（笑）。

今回は情報が少ないのでタブメニューを使う程でもないですが、サンプルが長過ぎても重要な部分がわかりづらいですしね。CSSの重要な部分も抜粋しておきますのでご確認ください。

            
    
                
  1. .menuWrap .tabItem {
    2. 
                
  2.   width: 200px;
    3. 
                
  3.   height: 50px;
    4. 
                
  4.   color: #fff;
    5. 
                
  5.   font-size: 1.6rem;
    6. 
                
  6.   letter-spacing: 0.09em;
    7. 
                
  7.   line-height: 50px;
    8. 
                
  8.   text-align: center;
    9. 
                
  9.   background: #c1c1c1;
    10. 
                
  10.   transition: all 0.3s ease-in-out;
    11. 
                
  11.   display: inline-block;
    12. 
                
  12.   cursor: pointer
    13. 
                
  13. }
    14. 
                
  14. .menuWrap .tabItem:hover { background: #000 }
    15. 
                
  15. .menuWrap input[name="tabItem"] { display: none }
    16. 
                
  16. .menuWrap .tabContent {
    17. 
                
  17.   width: 100%;
    18. 
                
  18.   max-width: 740px;
    19. 
                
  19.   text-align: left;
    20. 
                
  20.   margin-top: 60px;
    21. 
                
  21.   display: none;
    22. 
                
  22.   overflow: hidden
    23. 
                
  23. }
    24. 
                
  24. .menuWrap #dinner + label,
    25. 
                
  25. .menuWrap #drink + label {
    26. 
                
  26.   margin-left: 20px
    27. 
                
  27. }
    28. 
                
  28. .menuWrap #lunch:checked ~ #lunchContent,
    29. 
                
  29. .menuWrap #dinner:checked ~ #dinnerContent,
    30. 
                
  30. .menuWrap #drink:checked ~ #drinkContent {
    31. 
                
  31.   display: block
    32. 
                
  32. }
    33. 
                
  33. .menuWrap input:checked + .tabItem { background: #000 }
    34.

大事なのはinputタグの非表示、labelタグのデザイン、そして各inputタグが選択（checkedが付与された時）に紐付けられているdivタグを表示するという設定です。

じっくり見てもらえば設定の内容もわかると思いますので、カスタマイズもそんなに難しくないハズです。ちょっとずつで良いのでHTMLとCSSの仕組みに慣れていきましょう。

タブメニューのデモ

それでは実際にタブメニューがどんなものなのかも見てもらいましょう。

「ランチ」「ディナー」「ドリンク」のタブをそれぞれクリックして情報が切り替わるかをご確認ください。チェピレアで表示するために、若干、CSSのデザインは変更してますが、ほぼほぼ同じように表示されるハズです。

ランチ

お好み焼き定食
800円（税込）
モダン焼き定食
950円（税込）
ねぎ焼き定食
900円（税込）
焼きそば定食
800円（税込）

ディナー

ブタ玉
800円（税込）
ミックスモダン
1,000円（税込）
スジねぎ焼き
900円（税込）
焼きそば（豚・イカ）
800円（税込）

ドリンク

生ビール
500円（税込）
酎ハイ
350円（税込）
焼酎
400円（税込）
ソフトドリンク
300円（税込）

いかがでしょうか。お好み焼きと白ご飯はめちゃめちゃ合いますので、まだ食べた事がない方はぜひ試してみてください（笑）。僕も大阪に住みだしてから食べるようになりました。

今回のサンプルは内容も少なめですし、中身のデザインも至ってシンプルです。まぁ、ここではタブメニューの設置方法だけ押さえて頂いて、デザインはご自身のお好きな形にカスタマイズしていってください。

スマホでリンクをタップした時のハイライトを解消してチラつきのない動作へ CSSのtext-shadowで文字に影を付ける！おしゃれなサンプルと使い方をご紹介

よく読まれている記事

おすすめの記事

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

チェピレア日記