LoginSignup
0
3

More than 3 years have passed since last update.

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

Posted at

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

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

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

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

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

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

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

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
    ここはタブ1です。
  .tab-content.tab-2-content
    ここはタブ2です。
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;
  }
}

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

tab2.gif

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

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
    ここはタブ1です。
  .tab-content.tab-2-content
    ここはタブ2です。
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;
をつけてあげます。

スクリーンショット 2019-06-29 19.49.47.png

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

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;
  }

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

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

0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
3