複数のタブ切り替え機能は、HTML+CSSだけで作成可能 ページを移動せずにボックスの表示内容を切り替えられる下図のようなタブ機能(タブボックス)は、多くのウェブサイトで使われています。タブの切り替え処理にはJavaScriptが使われることもありますが、実はHTML+CSSだけで作れます。スクリプトが不要なら、記述量が少なくて済むため手軽で簡単です。 ■タブの切り替え操作に合わせて、選択中のタブの色も変更できる 本記事で作り方をご紹介するタブ機能のサンプルでは、複数並ぶタブのうち非選択状態のタブは灰色で表示しています。タブにマウスポインタを載せるとタブの色が緑色に変化し、クリックして選択状態にすると黄色に変わります。タブの選択状態に合わせて、タブの下にある本体ボックスの表示内容も切り替わります。 これらの処理はすべてHTML+CSSで実現しており、JavaScriptは使っていません。実
![HTML+CSSだけでタブの切り替えを作る方法とサンプル [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/4a7feb8d62f06f406dd1c767d34830f4bed5fcd1/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F4%2F0%2F0%2F1%2F201704101624%2Ftopimg_original.png)