タブ

HTML・CSS・JavaScriptで作ったタブのデザイン集です。コピペで簡単にご利用頂けます。タブはコンテンツを区切って表示するUIパーツで、複数の情報を同一画面内で切り替えて見せることができます。装飾やアニメーションを加えることで、より直感的で魅力的なインターフェースを実現できます。

全件

  • Content 1
    Content 2

    ベーシックタブ

    シンプルで使いやすい基本形

  • Big A content
    Big B content

    ビッグボタンタブ

    見やすい大きなボタン

  • Bold tab A
    Bold tab B

    太字テキストタブ

    選択中のタブ文字が太くなる

  • Border tab A
    Border tab B

    ボーダータブ

    選択中のボタンに太い枠線を追加

  • Box Content A
    Box Content B

    枠付きタブ

    枠で囲まれたタイル風

  • Center 1 content
    Center 2 content

    中央寄せタブ

    中央揃えで整然と配置

  • Red Panel
    Green Panel

    カラフルタブ

    各タブに異なる背景色を設定

  • Dark Panel A
    Dark Panel B

    ダークモード風タブ

    黒系ベースで落ち着いた雰囲気

  • Edge Content A
    Edge Content B

    エッジタブ

    タブに角張ったスタイルを適用

  • Gradient A
    Gradient B

    グラデーションタブ

    背景がグラデーションに変化

  • Inset Content A
    Inset Content B

    フレームインタブ

    ボタンがコンテンツの内側に配置されたデザイン

  • Soft tab A
    Soft tab B

    ライトカラータブ

    薄い色で構成された柔らかいデザイン

  • Rounded content A
    Rounded content B

    ラウンドタブ

    丸みのあるデザイン

  • Separator A
    Separator B

    セパレータ付きタブ

    ボタンの間に線を追加して視認性アップ

  • Shadow Tab 1
    Shadow Tab 2

    影付きタブ

    ボタンに軽いシャドウを追加

  • Shadow Line A
    Shadow Line B

    影ラインタブ

    アクティブなタブ下に影線を表示

  • Topline A
    Topline B

    上部境界線タブ

    選択中タブに上側のラインを追加

  • Underline 1
    Underline 2

    下線タブ

    下線で選択を表現

  • Vertical A
    Vertical B

    縦型タブ

    左側に並ぶ縦型スタイル

ソースコード
このページのトップへ戻る