CSSのみでタブの切替を実装する方法

15897 ワード
haml HTML 未経験 scss CSS HTML テキストリンク

CSSのみでタブの切替を実装する方法

本記事では、Webページでよく使われている、タブの実装について、実際に作っていった手順を記していきます。

なお、
・Ruby on Railsでメルカリのクローンアプリを作っている。
・表記はhaml,Scssです。
以上が前提条件となります。

そもそもなぜタブを作るのか？

１ページに含まれている情報量が多いときに、例えば２セクションに分けられる情報があれば、片方の情報を隠しておくことでページの見栄えがスッキリします。

実際に実装の手順を説明していきます。

まずは、簡単な型を作ります。

haml
.tabs
  %input#tab-1{:checked => "checked", :name => "tab-radio", :type => "radio"}/
  %label.tab-label{:for => "tab-1"} ページ1
  %input#tab-2{:name => "tab-radio", :type => "radio"}/
  %label.tab-label{:for => "tab-2"} ページ2
  .tab-content.tab-1-content
    ここはタブ１です。
  .tab-content.tab-2-content
    ここはタブ２です。
scss

.tabs {
  margin-top: 12px;
  width:700px;
  .tab-label {
    display: inline-block;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid #999;
    background-color: #f3f3f3;
    margin-left: 1px;
    margin-right: 1px;
    padding: 3px 6px;
    border-bottom: none;
    font-size: 0.9em;
    &:hover {
      opacity: 0.7;
    }
  }
  input[name="tab-radio"] {
    display: none;
  }
  .tab-content {
    display: none;
    border: 1px solid #999;
    padding: 10px;
    min-height: 200px;
  }
  #tab-1:checked ~ .tab-1-content, #tab-2:checked ~ .tab-2-content, #tab-3:checked ~ .tab-3-content, #tab-4:checked ~ .tab-4-content, #tab-5:checked ~ .tab-5-content {
    display: block;
  }
  input[name="tab-radio"]:checked + .tab-label {
    background-color: #fff;
  }
}

この時点で、以下のような表示をすることが出来ます。

コードの詳細を見ていきます。

haml
.tabs
  %input#tab-1{:checked => "checked", :name => "tab-radio", :type => "radio"}/
  %label.tab-label{:for => "tab-1"} ページ1
  %input#tab-2{:name => "tab-radio", :type => "radio"}/
  %label.tab-label{:for => "tab-2"} ページ2
  .tab-content.tab-1-content
    ここはタブ１です。
  .tab-content.tab-2-content
    ここはタブ２です。
haml
.tabs
  %input#tab-1{:checked => "checked", :name => "tab-radio", :type => "radio"}/
  %label.tab-label{:for => "tab-1"} ページ1

inputとlabelが肝となります。

inputに#tab-1というidをつけて、labelに同じtab-1という名前をforでつけてあげます。

これで、inputとrabelが相互対応するようにできます。
inputは:type => "radio"でラジオボタンの要素をもたせることでクリックが可能になります。
これをlabelと組み合わせることで、実際にtabが押せるようになっているということになります。

tab-content.tab-1-content
以下は、タブの内容が表示されるエリアになります。

次にCSSを見てみましょう。

scss

.tabs {
  margin-top: 12px;
  width:700px;
  .tab-label {
    display: inline-block;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid #999;
    background-color: #f3f3f3;
    margin-left: 1px;
    margin-right: 1px;
    padding: 3px 6px;
    border-bottom: none;
    font-size: 0.9em;
    &:hover {
      opacity: 0.7;
    }
  }
  input[name="tab-radio"] {
    display: none;
  }
  .tab-content {
    display: none;
    border: 1px solid #999;
    padding: 10px;
    min-height: 200px;
  }
  #tab-1:checked ~ .tab-1-content, #tab-2:checked ~ .tab-2-content, #tab-3:checked ~ .tab-3-content, #tab-4:checked ~ .tab-4-content, #tab-5:checked ~ .tab-5-content {
    display: block;
  }
  input[name="tab-radio"]:checked + .tab-label {
    background-color: #fff;
  }
}
scss
 input[name="tab-radio"] {
    display: none;

input[name= "tab-radio"]
にdisplay:none;
をつけてあげます。

このラジオボタンを消してくれる表記になります。

scss
#tab-1:checked ~ .tab-1-content, #tab-2:checked ~ .tab-2-content {
    display: block;
  }

次に重要なのが、この記述です。

id: tab-1にチェック（クリック）された場合に、.tab-1-content以下を表示する。
同じく、tab-2にチェック（クリック）された場合に、.tab-2-content以下を表示する。
という記述です。

最後に

scss
input[name="tab-radio"]:checked + .tab-label {
    background-color:red;
  }

以下の記述で、
選択されているタブの中身を変更する事ができます。

このような手順で、簡単なタブは作ることが出来ます。