タブシミュレーター

タブの見出し、内容、レイアウト、スタイルをカスタマイズして、オリジナルのタブコンポーネントを作成できます。作成したタブのHTML、CSS、JavaScriptコードをコピーして、あなたのプロジェクトで使用できます。

タブ管理

タブレイアウト

横並び縦並び

タブ設定

タブ見出し設定

タブ見出しテキスト

背景色

テキスト色

境界線を表示

角丸設定

左上 (4px)

右上 (4px)

左下 (0px)

右下 (0px)

タブサイズ

テキスト成り行き固定幅

タブコンテンツ設定

コンテンツテキスト

テキストアライン

左揃え中央揃え右揃え

タブ見出し

タブの内容をここに入力します。

コード

<div class="tabs-container horizontal">
  <div class="tab-headers">
<div class="tab-header active" data-tab="1">
  タブ見出し
</div>
<div class="tab-header" data-tab="2">
  タブ見出し
</div>
  </div>
  <div class="tab-contents">
<div class="tab-content active" id="tab-content-1">
  <div class="tab-content-inner">
    タブの内容をここに入力します。
  </div>
</div>
<div class="tab-content" id="tab-content-2">
  <div class="tab-content-inner">
    タブの内容をここに入力します。
  </div>
</div>
  </div>
</div>