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

他言語サイト
us us
HTML5 CSS3 ロゴ

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

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

JavaScriptを使わずにタブを表示

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

  • ブラウザからタブを表示するページのhttpリクエストを送信する
  • レスポンスにすべてのタブコンテンツの情報を付ける
  • Webサーバからレスポンスを返す
  • 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
.tab-title {
    color: #fff;
    background: rgba(127, 194, 239, .5);
    border: 2px solid rgb(127, 194, 239);
    border-bottom: none;
    padding: .3em .5em;
    border-radius: .3em .3em 0 0;
    text-align: center;
    width: 10em;
    cursor: pinter; 
}
.tab-body {
    border-radius: 0 .3em .3em .3em;
    width: 100%;
    height: 200px;
    padding: 1em;
    border: 2px solid rgb(127, 194, 239);
}

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

body1 body1 body1
body2 body2 body2
body3 body3 body3

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

さらに、ラジオボタンが見えてしまっています。まだまだタグとしてできていません。

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

CSS
/* ラジオボタンを非表示 */
.container .radio {
    display: none;
}
/* タブの見栄え */
.container {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
.container::after {
    content: "";
    width: 100%;
}
.container .tab-title {
    position: relative;
    border-bottom: 3px solid #fff;
    top: 3px;
    left: 1px;
}
.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
/* タブコンテンツ本体の初期値 */
.add-control .tab-body > div {
    display: none;
}

/* 選択されたタブの背景色変更 */
.add-control .radio:checked + .tab-title {
    background: rgb(127, 194, 239);
}

/* タブのコントロール */
.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だけでタブができました。

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

HTML
<div class="sample">
<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>
CSS
.sample {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
.sample::after {
    content: "";
    width: 100%;
}

/* ラジオボタンを非表示 */
.sample .radio {
    display: none;
}

.sample .tab-title {
    position: relative;
    top: 3px;
    left: 1px;
    color: #fff;
    border: 2px solid rgb(127, 194, 239);
    border-bottom: 3px solid #fff;
    background: rgba(127, 194, 239, .5);
    padding: .3em .5em;
    border-radius: .3em .3em 0 0;
    text-align: center;
    display: table;
    cursor: pinter; 
}
.sample .tab-title:hover {
    cursor: pointer;
}
.sample .tab-body {
    order: 1;
    border-radius: 0 .3em; .3em .3em;
    width: 100%;
    height: 200px;
    padding: 1em;
    border: 2px solid rgb(127, 194, 239);
}

/* タブコンテンツ本体の初期値 */
.sample .tab-body > div {
    display: none;
}

/* 選択されたタブの背景色変更 */
.sample .radio:checked + .tab-title {
    background: rgb(127, 194, 239);
}

/* タブのコントロール */
.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のタブ切り替えのポイント(: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
/* タブコンテンツ本体の初期値 */
.sample .tab-body > div {
    display: none;
}

/* 選択されたタブの背景色変更 */
.sample .radio:checked + .tab-title {
    background: rgb(127, 194, 239);
}

/* タブのコントロール */
.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あたりを変えれば劇的に変わります。

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

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

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

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

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

tadtadya.com

_

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

*

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

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