HTML JavaScript

HTML&CSS&JavaScriptで3つのタブを作る方法を解説

最終更新日 :

HTML&CSS&JavaScriptで3つのタブを作る方法

今回はHTMLとCSSとJavaScriptを使って3つのタブを作っていくコードを解説します。

サンプルコードは以下の通りです。

HTMLのサンプルコード

HTMLでは3つのタブと、タブの中に表示する3タイプの文字を設定しています。

タブの中の中身を追加したい時はidがtabpageのdiv要素の中にコンテンツを書き足してあげましょう。

CSSのサンプルコード

CSSではタブごとのカラーやサイズなどのレイアウト設定をメインに設定しています。

ここではタブ切り替えに関するコードは特に記述していません。

JavaScriptのサンプルコード

JavaScriptではタブの切り替え操作をメインに記述しています。

関数changeTabでクリックされたタブを取得したら、zIndex(重なり順)を上にして表に表示されるようにしています。

zIndezは数字が大きいほど表側になります。

HTML&CSS&JavaScriptで3つのタブを作る方法のまとめ

HTML&CSS&JavaScriptで3つのタブを作る方法のまとめ

最後にHTML&CSS&JavaScriptをあわせた全体のコードはこちらになります。

CSSとJavaScriptがごちゃごちゃしていて分かりにくいという方は、それぞれファイルを分けることをオススメします。

WordPressのプラグインの都合上インデントがずれているところがありますがご勘弁ください笑

わからない部分がある方はお問合せフォームで質問して貰えばすぐに返信します。

今サイトではこれからもSEOに関する有益な情報をたくさん発信していきたいと思っていますので応援よろしくお願いします!

  • この記事を書いた人(著者情報)
wagtechblog

wagtechblog

本サイトの運営者・管理人。慶應義塾大学環境情報学部生兼フリーランスとしてiOSアプリ開発、Web開発、Webメディア運営、SEOマーケティング等を行う。IT人材系のベンチャー企業でiOSエンジニア、Web系メガベンチャー企業でWebアプリケーションエンジニア、士業のスタートアップ企業でフロントエンドエンジニア、Web系メガベンチャー企業でプロダクトマネージャー兼SEOディレクター、ゲーム系のスタートアップ企業で技術責任者(CTO)、学生向けプログラミングスクールで講師の勤務経験あり(インターンを含む)。好きなプログラミング言語はSwiftとPythonとPHPとRubyとJavaScript。侍エンジニア塾元受講生。趣味はApex Legendsとゲーミングデバイス集め。
保有資格:ITパスポート / 基本情報技術者試験 / TOEIC730点 / 日商簿記3級

-HTML, JavaScript

Copyright © wagtechblog All Rights Reserved.