HTMLタブの作り方!基本構造からレスポンシブ対応のタブ切り替え

HTMLタブの作り方!基本構造からレスポンシブ対応のタブ切り替え

公開: 更新:


HTMLタブの基本的な実装方法

HTMLタブの作り方について、以下2つを簡単に解説していきます。

  1. HTMLとCSSを使用したタブの基本構造
  2. JavaScriptを活用したタブの動的制御

Python基礎・実践(Django)

企業・法人向けのPython研修では、基礎から応用まで体系的に学べます。

Python研修の詳細

DX社員研修

企業・法人向けのDX研修では、実務に繋がるリスキリングでITレベルを向上させます。

DX研修の詳細

Javaエンジニア育成研修

企業・法人向けのJavaエンジニア育成研修では、Javaの基礎から応用まで確実に習得できます。

Java研修の詳細

新卒・新入社員向け研修

企業・法人に新入社員・新卒社員に向けたプログラミング研修を提供しています。

新入社員研修の詳細

コードキャンプのIT研修を全て見る

CSSの角丸テクニックを使ったサンプルコードを紹介

今回は、CSSborder-radiusプロパティを使用して角を丸くする方法を紹介します。シンプルな四隅を丸めたボックスから、複雑な楕円形の角を持つデザインまで、さまざまなデザインに応用できるテクニックを学びましょう。

上記のサンプルで2つの異なるborder-radiusの使い方を紹介しています。1つ目は四隅を均一に丸くする方法で、ボックスのデザインを柔らかくします。2つ目は各角に異なる半径を設定し、より複雑なデザインを作成する方法です。詳細な解説は、以下の記事で確認できるので、サンプルコードとともに理解を深めてください。

HTMLとCSSを使用したタブの基本構造

HTMLタブの基本構造は、タブメニューとコンテンツエリアから構成されます。タブメニューには<ul>タグを使用し、各タブは<li>タグで表現します。コンテンツエリアは<div>タグで分割し、それぞれのタブに対応するコンテンツを格納します。

<div class="tab-container">
  <ul class="tab-menu">
    <li>タブ1</li>
    <li>タブ2</li>
    <li>タブ3</li>
  </ul>
  <div class="tab-content">
    <div>タブ1のコンテンツ</div>
    <div>タブ2のコンテンツ</div>
    <div>タブ3のコンテンツ</div>
  </div>
</div>

CSSを使用してタブの見た目を整えることが重要です。タブメニューにdisplay: flex;を適用し、横並びに配置することができます。また、cursor: pointer;を設定することで、クリック可能な要素であることをユーザーに示すことができるでしょう。

コンテンツエリアのスタイリングも忘れずに行います。初期状態では1つ目のタブコンテンツのみを表示し、他はdisplay: none;で非表示にします。これにより、タブ切り替え時のスムーズな遷移が可能になります。

おすすめのPython研修一覧

Python研修を提供しているおすすめの企業・法人を一覧で掲載しております。

Python研修の一覧を見る

おすすめのDX研修一覧

DX研修を提供しているおすすめの企業・法人を一覧で掲載しております。

DX研修の一覧を見る

おすすめのJava研修一覧

Java研修を提供しているおすすめの企業・法人を一覧で掲載しております。

Java研修の一覧を見る

おすすめのJavaScript研修一覧

JavaScript研修を提供しているおすすめの企業・法人を一覧で掲載しております。

JavaScript研修の一覧を見る

JavaScriptを活用したタブの動的制御

タブの動的な切り替えには、JavaScriptが不可欠です。クリックイベントを利用して、選択されたタブに応じてコンテンツを表示・非表示にする処理を実装します。イベントリスナーを使用して、タブメニューのクリックを検知することから始めましょう。

const tabs = document.querySelectorAll('.tab-menu li');
const contents = document.querySelectorAll('.tab-content div');

tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    tabs.forEach(t => t.classList.remove('active'));
    tab.classList.add('active');
    contents.forEach(c => c.style.display = 'none');
    contents[index].style.display = 'block';
  });
});

このJavaScriptコードは、クリックされたタブに'active'クラスを付与し、対応するコンテンツを表示します。他のタブからは'active'クラスを除去し、コンテンツを非表示にすることで、タブ切り替えを実現しています。

さらに、タブの初期状態を設定することも重要です。ページ読み込み時に最初のタブをアクティブにし、対応するコンテンツを表示するよう実装することで、ユーザーにとって分かりやすいインターフェースを提供できるでしょう。

HTMLタブのレスポンシブデザイン対応

HTMLタブのレスポンシブデザイン対応について、以下2つを簡単に解説していきます。

  1. メディアクエリを使用したタブレイアウトの調整
  2. モバイル向けアコーディオン形式への変換

メディアクエリを使用したタブレイアウトの調整

レスポンシブデザインでは、画面サイズに応じてタブのレイアウトを調整することが重要です。メディアクエリを使用することで、異なる画面幅に合わせたスタイリングが可能になります。小さな画面では、タブメニューを縦並びにすることで視認性を向上させることができるでしょう。

@media screen and (max-width: 768px) {
  .tab-menu {
    flex-direction: column;
  }
  .tab-menu li {
    width: 100%;
    text-align: center;
  }
}

このCSSコードは、画面幅が768px以下になった時にタブメニューを縦並びに変更します。各タブの幅を100%に設定し、テキストを中央揃えにすることで、モバイル画面でも見やすいデザインを実現しています。

さらに、タブコンテンツ内のフォントサイズやパディングも調整することが大切です。小さな画面でも読みやすさを維持するため、適切なサイズ調整を行うことをお勧めします。

モバイル向けアコーディオン形式への変換

モバイル端末では、タブ形式よりもアコーディオン形式の方が使いやすいケースがあります。JavaScriptを使用して、画面サイズに応じてタブをアコーディオンに変換する実装が可能です。この方法は、限られた画面スペースを効果的に活用できるメリットがあります。

function convertToAccordion() {
  if (window.innerWidth <= 768) {
    tabs.forEach((tab, index) => {
      tab.addEventListener('click', () => {
        contents[index].style.display = 
          contents[index].style.display === 'none' ? 'block' : 'none';
      });
    });
  }
}

window.addEventListener('resize', convertToAccordion);
convertToAccordion();

このJavaScriptコードは、画面幅が768px以下の場合にタブをアコーディオン形式に変換します。クリックイベントを変更し、タブをクリックするとコンテンツの表示・非表示が切り替わる仕組みになっています。

アコーディオン形式に変換する際は、視覚的なフィードバックも重要です。タブメニューに矢印アイコンを追加したり、アニメーション効果を付けたりすることで、ユーザーの操作感を向上させることができるでしょう。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。

ITやプログラミングに関するコラム


ITやプログラミングに関するニュース

ブログに戻る

コメントを残す

コメントは公開前に承認される必要があることにご注意ください。

コードキャンプDX人材育成研修 - IT・プログラミングを知って学べるコネクトメディア コードキャンプDX人材育成研修 - IT・プログラミングを知って学べるコネクトメディア xコードキャンプIT・プログラミング研修事例/【IT新入社員研修】オンラインとオフラインの最適バランスを実現したFutureOneの導入事例 - IT・プログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/【新入社員研修】柔軟なハイブリッド型Java研修で実現した新卒20名の成長と成果|サークレイス株式会社 - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/現場により近いところにデジタルを根付かせるDX基礎講座研修|株式会社ブリヂストン - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/業務の効率化・DX推進に向けたIT人材育成への第一歩|株式会社カナエ - ITやプログラミングを知って学べるコネクトメディア 企業・法人向けのIT・プログラミング研修 - ITやプログラミングを知って学べるコネクトメディア

新着記事

対象者別で探す

子供(小学生・中学生・高校生)向け
プログラミング教室検索する

子供(小学生・中学生・高校生)がロボットやプログラミング言語を学ぶことができるオフラインからオンラインスクールを検索、比較することが可能です。

子供(小学生・中学生・高校生)
プログラミング教室検索する

ITやプログラムなどの
最新情報を検索する

日々、新しいITやプログラミング言語の情報が流れていきますが、特定の情報を時系列でニュースやコラムを確認することができます。

ITやプログラムなどの
最新情報を検索する