HTMLとCSSだけで簡単に作る。軽量なタブで表示内容を切り替え

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
html5 css3 image
イラストACの画像をもとに加工しています。

HTMLとCSSだけでタブのメニューを簡単に作る方法をご紹介します。このタブメニューは、画面を遷移しないで表示内容のコンテンツを切り替えます。JavaScriptは使いません。

これは、タブを切り替えるときに、Webサーバーにリクエストを送信しないので、Webページのパフォーマンスを上げることができます。

『Run Pen』を押すと、今回のソースコードサンプルが表示されます。これを、HTMLとCSSだけでつくります。

少しづつ実装するので、とてもかんたんで分かりやすいと思います。

JavaScriptを使わずにタブを表示

サンプルをつくっていく前に、JavaScriptを使わないメリットを説明します。

HTMLとCSSだけでタブ機能をつくるメリットは、Webサーバにリクエストする回数を最小限にすることです。そのしくみは、

  • ブラウザからタブを表示するページをhttpリクエスト
  • Webサーバーから、すべてのタブコンテンツの情報を付けたHTMLをレスポンス
  • CSSで、初期表示するタブコンテンツを表示し、その他のタブコンテンツは非表示にする
  • タブの切り替えをCSSで制御する

です。これは、タブの切り替えを画面を遷移しないで行います。

JavaScriptを使わないので、ブラウザの負荷を軽くできます。結果的にWebページのパフォーマンスを向上させることができます。

CSSだけでタブの動作を行なうかんたんな作り方

少しだけHTMLも関係していますが、タブの動作のほぼすべてはCSSだけで行ないます。

CSSの記述は簡単です。ソースコードのサンプルを少しづつ実装しながら見ていきましょう。

ソースコードサンプルのボックスをタップすると(またはボックスにマウスを合わせると)、右上にコピーボタンが出てコードのコピーができます。

慣れないうちは、とりあえずコピー&ペーストで、自分で動かすところから始めると良いです。

タブのコンテンツ切り替えのソースコードサンプル

まずは、HTMLから。

HTML
<div>
<input type="radio" id="tab1" class="radio" name="tab" checked="checked" ><label class="tab-title title1" for="tab1">tab1</label>
<input type="radio" id="tab2" class="radio" name="tab" ><label class="tab-title title2" for="tab2">tab2</label>
<input type="radio" id="tab3" class="radio" name="tab" ><label class="tab-title title3" for="tab3">tab3</label>
<div class="tab-body">
<div class="body1">body1 body1 body1</div>
<div class="body2">body2 body2 body2</div>
<div class="body3">body3 body3 body3</div>
</div>
</div>

HTMLはこれだけです。タブは、ラジオボタンとラベルで作りました。くわしいことはあとで解説します。そして、表示するコンテンツ本体です。

まだタブの機能はありません。次はCSSです。

CSS
.title1, .body1 {
    border: 2px solid rgb(127, 194, 239);
}
.title2, .body2 {
    border: 2px solid rgb(214, 133, 176);
}
.title3, .body3 {
    border: 2px solid rgb(219, 225, 89);
}
.tab-title {
    border-bottom: none;
    padding: .3em .5em;
    border-radius: .3em .3em 0 0;
    text-align: center;
    display: table; 
}
.tab-body > div {
    width: 100%;
    height: 200px;
    border-radius: 0 .3em .3em .3em;
    padding: 1em;
}

ラジオボタンのラベルにタグっぽい見た目をつくりました。また、コンテンツ本体の枠を付けています。HTMLの結果です。

body1 body1 body1
body2 body2 body2
body3 body3 body3

すべての要素が表示されています。そして、タグラベルの配置ができていません。また、タグを押してもラジオボタンのチェックが動くだけで何も起きません。

ラジオボタンが見えてしまっているのもダメです。まだまだタグとしてできていません。

ここでCSSにさらに処理を加えて、タグの配置を完成させます。

CSS
/* radio non-display */
.container .radio {
    display: none;
}
/* tabs position */
.container {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
.container::after {
    content: "";
    width: 100%;
}
.container .tab-title {
    position: relative;
    border-bottom: 2px solid transparent;
    top: 2px;
    left: 2px;
}
.container .tab-title:hover {
    cursor: pointer;
}
.container .tab-body {
    order: 1;
}

タグの配置を完成させるクラス(container)を作成しました。書いてある内容は、

  • ラジオボタンはいらないので非表示。
  • flexを使ってタブラベルを横並びにする。
  • flexのコンテナの疑似要素(::after)を作って、折り返し用ボックスを作成。(必ず折り返し前の最後のflexボックスになる)
  • flexボックス(タブコンテンツ本体)にorder: 1を指定して、折り返しのあとにボックスが来るようにする。(タブラベルの下に来る)
  • タブラベルの下の枠線を透明にする。
  • タブラベルの位置を、透明枠線でコンテンツ本体の枠線にかぶせるようにする。(くわしくは後で説明)
  • タブラベルにマウスを合わせたとき、マウスをポインターの形状にする

です。これを、HTMLのサンプルの一番上の親のdivのクラスに追加します。

HTML文はかんたんなので省略して、HTMLの結果です。

body1 body1 body1
body2 body2 body2
body3 body3 body3

タブらしくなりました。でも、まだタブの動きはできません。次にタブに切り替え機能を追加します。

処理はすべてCSSに実装します。

CSS
/* tab's body init */
.add-control .tab-body > div {
    display: none;
}

/* selected tab's color change */
.add-control .radio:checked + .tab-title {
    color: #fff;
    border-bottom-color: #fff;
}
.add-control #tab1:checked ~ .title1 {
    background: rgba(127, 194, 239, .5);
}
.add-control #tab2:checked ~ .title2 {
    background: rgba(214, 133, 176, .5);
}
.add-control #tab3:checked ~ .title3 {
    background: rgba(219, 225, 89, .5);
}

/* tabs control */
.add-control #tab1:checked ~ .tab-body > .body1 {
    display: block;
}
.add-control #tab2:checked ~ .tab-body > .body2 {
    display: block;
}
.add-control #tab3:checked ~ .tab-body > .body3 {
    display: block;
}

タブをコントロールするクラス(add-control)を作りました。その処理は、

  • タブのコンテンツ本体の初期値は『表示しない』。
  • 選択されたタブラベルの背景色・文字色変更。
  • 選択されたタブラベルの下枠線を白色に、コンテンツ本体の枠線をタブの枠線と同じにすることで、タブラベルとコンテンツ本体を一体化させる。
  • 選択されたタブに対応したコンテンツ本体の内容を表示。

です。これを、HTMLに追加します。HTML文の一番親のクラスにadd-controlを追加します。

HTML文はかんたんなので省略して、HTMLの結果です。

body1 body1 body1
body2 body2 body2
body3 body3 body3

HTMLとCSSだけでタブができました。

これまで順を追ってサンプルコードを作ってきました。それを整理すると、最初にみたCodePenのHTMLとCSSになります。

【解説】CSSのタブ切り替えのポイント(:checked 疑似クラス)

タブの切り替えにはCSSの:checked疑似クラスを使う

:checked疑似クラスは、HTMLのinput要素のchecked属性と連動しています。HTMLのchecked属性は、input要素が選択済みになると、checked属性が付けられるというものです。

サンプルコードでは、タブ1のinput要素に初期値としてchecked属性が付いています。

<input type="radio" id="tab1" class="radio" name="tab" checked="checked" ><label class="tab-title title1" for="tab1">tab1</label>

【解説】HTML文のタブ切り替えのポイント(radioボタンを使用)

HTMLは、radioボタンをカスタマイズしてタブに使う

radioボタンを使う理由は、タブは常に1つしか選択できないので、radioボタンの機能がタブの切り替えと同じだからです。

radioボタンをクリックすると、input要素のchecked属性が自動的に切り替わるので、この動作をそのままタブの切り替えに使います。

radioボタンは内部の切り替え機能だけが必要なので、CSSのdisplay:noneで非表示にします。そして、タブの表示はradioボタンに隣接するテキスト部分(label要素)で表現します。

【解説】タブ切り替えのCSS記述

タブの切り替えの制御はCSSで行う

HTMLのradioボタンのchecked属性だけで、タブの切り替え動作を行なっているので、JavaScriptは必要ありません。

HTMLとCSSだけでタブの切り替えができるのは、その制御の根幹をHTMLにある機能だけで実現しているからです。CSSはそれを見た目の面でカバーしているだけです。

CSSでのタブの切り替えの記述はサンプルコードの後半部分で、たったこれだけです。

CSS
/* tab's body init */
.sample .tab-body > div {
    display: none;
}

/* selected tab's color change */
.sample .radio:checked + .tab-title {
    color: #fff;
    border-bottom-color: #fff;
}
.sample #tab1:checked ~ .title1 {
    background: rgba(127, 194, 239, .5);
}
.sample #tab2:checked ~ .title2 {
    background: rgba(214, 133, 176, .5);
}
.sample #tab3:checked ~ .title3 {
    background: rgba(219, 225, 89, .5);
}

/* tabs control */
.sample #tab1:checked ~ .tab-body > .body1 {
    display: block;
}
.sample #tab2:checked ~ .tab-body > .body2 {
    display: block;
}
.sample #tab3:checked ~ .tab-body > .body3 {
    display: block;
}

CSSでは次の動作を制御しています。

  • タブのすべてのコンテンツ本体をdisplay: noneで非表示で初期化
  • checked属性が付いたタブラベルの色をアクティブな色に変える
  • 各タブで、checked属性が付いてアクティブになるときは、連動するコンテンツ本体をdisplay: blockで表示

display: noneですべてのコンテンツ本体を初期化しますが、Webページ表示時にtab1にchecked属性が付くので、最初はタブ1が表示されます。

まとめ

  • HTMLはradioボタンのchecked属性を利用する
  • CSSは:checked疑似クラスを使う

HTMLとCSSだけでタブを表示・操作することは、見た目と動きで難しく感じますが、作り方はかんたんですね?

サンプルコードでは、デザインはシンプルにしています。もっとオシャレにしたい場合は、ラベルとコンテンツエリアのborder, color, backgroundあたりを変えれば劇的に変わります。

:checked疑似クラスはCSS3から実装された機能です。現在のブラウザは、ほぼ対応しているので気にすることはないですが、どうしても動かない場合の知識として押さえておきましょう。

今回ご紹介したタグ機能と同じ作り方で、JavaScriptを使わないその他の機能も実装できます。

最近Webカテゴリでよく読まれている記事です。
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事を気に入ったらぜひシェアも!!