HTML JavaScript

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

2020年10月19日

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

プログラミングとWordPressに溺れた私立大学生。フリーランスのiOSエンジニアとしてアプリ開発しています。その傍らWeb集客のベンチャー企業で勤務。主にフロントエンドエンジニア・WebアプリケーションエンジニアとしてWebアプリケーション開発、SEOマーケティング、データビジュアライゼーションといった業務もしてます。好きな言語はSwiftとPythonとPHPとRuby。趣味はApex Legendsとゲーミングデバイス集め。

-HTML, JavaScript

Copyright © wagtechblog All Rights Reserved.