HTML JavaScript

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

更新日 :

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

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

【迷ったらココ!】HTMLやJavaScriptが学べるプログラミングスクール3選

テックアカデミー
テックアカデミー
デイトラ
デイトラ
侍エンジニア
侍エンジニア(SAMURAI ENGINEER)
講師は全員現役エンジニア
週2回のマンツーマンメンタリング
無料の転職サポートあり
課題レビュー&チャット質問し放題
1年間のエンジニアサポート
カリキュラムは無期限閲覧可能
専用チャットコミュニティ参加
Webセミナー勉強会に参加

累計指導45,000人&転職成功率98%
オーダーメイドカリキュラム対応
無料の転職サポートあり
専属マンツーマンレッスン方式

当サイトではプログラミング学習やエンジニア転職に関する情報を発信しています。他の記事も合わせてご覧ください。

HTML/CSSが学べるプログラミングスクールおすすめ10選【2024年最新版】

HTML/CSSを学習して挫折したからプログラミングスクールに入塾したい!でもどのスクールが良いんだろう... HTML/CSSを学びたいけどまず何から始めたら良いのか分からない...プログラミングス ...

更新日:2024年1月29日

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がごちゃごちゃしていて分かりにくいという方は、それぞれファイルを分けることをオススメします。

プログラミングスクールの口コミ投稿フォーム
  • この記事を書いた人(著者情報)
wagtechblog

wagtechblog

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

-HTML, JavaScript

Copyright © wagtechblog All Rights Reserved.