ダウンロード

ここから始める

特徴

Sassツール

カスタマイズ

CSSライブラリ

CSSヘルパー

スポンサー

Password.link

タブ

シンプルでレスポンシブな水平ナビゲーションタブ、異なるスタイル

Bulmaのtabsは、さまざまなバージョンがあるシンプルなナビゲーションコンポーネントです。次の構造のみが必要です。

  • tabsコンテナ
  • <ul> HTML要素
  • <li> HTML要素のリスト
  • 各リンクの<a> HTMLアンカー要素

デフォルトのタブスタイルは、下に単一の境界線があります。

例

HTML 

<div class="tabs">
  <ul>
    <li class="is-active"><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
  </ul>
</div>

配置 #

タブリストを配置するには、.tabsコンテナにis-centeredまたはis-right修飾子を使用します。

例

HTML 

<div class="tabs is-centered">
  <ul>
    <li class="is-active"><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
  </ul>
</div>

例

HTML 

<div class="tabs is-right">
  <ul>
    <li class="is-active"><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
  </ul>
</div>

アイコン #

Font Awesomeのアイコンをどれでも使用できます。

例

HTML 

<div class="tabs is-centered">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"
          ><i class="fas fa-image" aria-hidden="true"></i
        ></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-music" aria-hidden="true"></i
        ></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-film" aria-hidden="true"></i
        ></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="far fa-file-alt" aria-hidden="true"></i
        ></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>

サイズ #

is-small is-mediumおよびis-largeの3つの追加サイズから選択できます。

例

HTML 

<div class="tabs is-small">
  <ul>
    <li class="is-active"><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
  </ul>
</div>

例

HTML 

<div class="tabs is-medium">
  <ul>
    <li class="is-active"><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
  </ul>
</div>

例

HTML 

<div class="tabs is-large">
  <ul>
    <li class="is-active"><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
  </ul>
</div>

スタイル #

境界線のあるよりクラシックなスタイルが必要な場合は、is-boxed修飾子を追加するだけです。

例

HTML 

<div class="tabs is-boxed">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"
          ><i class="fas fa-image" aria-hidden="true"></i
        ></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-music" aria-hidden="true"></i
        ></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-film" aria-hidden="true"></i
        ></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="far fa-file-alt" aria-hidden="true"></i
        ></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>

（1つをクリックすると他のすべての選択が解除されるラジオボタンのように）相互に排他的なタブが必要な場合は、is-toggle修飾子を使用します。

例

HTML 

<div class="tabs is-toggle">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"
          ><i class="fas fa-image" aria-hidden="true"></i
        ></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-music" aria-hidden="true"></i
        ></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-film" aria-hidden="true"></i
        ></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="far fa-file-alt" aria-hidden="true"></i
        ></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>

is-toggleとis-toggle-roundedの両方を使用すると、最初と最後のアイテムが丸くなります。

例

HTML 

<div class="tabs is-toggle is-toggle-rounded">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"><i class="fas fa-image"></i></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-music"></i></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-film"></i></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>

タブが利用可能な幅全体を占めるようにするには、is-fullwidthを使用します。

例

HTML 

<div class="tabs is-fullwidth">
  <ul>
    <li>
      <a>
        <span class="icon"
          ><i class="fas fa-angle-left" aria-hidden="true"></i
        ></span>
        <span>Left</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon"
          ><i class="fas fa-angle-up" aria-hidden="true"></i
        ></span>
        <span>Up</span>
      </a>
    </li>
    <li>
      <a>
        <span>Right</span>
        <span class="icon"
          ><i class="fas fa-angle-right" aria-hidden="true"></i
        ></span>
      </a>
    </li>
  </ul>
</div>

組み合わせ #

異なる修飾子を組み合わせることができます。たとえば、中央揃えのボックス化されたタブ、または全幅のトグルタブを使用できます。

例

HTML 

<div class="tabs is-centered is-boxed">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"
          ><i class="fas fa-image" aria-hidden="true"></i
        ></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-music" aria-hidden="true"></i
        ></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-film" aria-hidden="true"></i
        ></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="far fa-file-alt" aria-hidden="true"></i
        ></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>

例

HTML 

<div class="tabs is-toggle is-fullwidth">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"
          ><i class="fas fa-image" aria-hidden="true"></i
        ></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-music" aria-hidden="true"></i
        ></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-film" aria-hidden="true"></i
        ></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="far fa-file-alt" aria-hidden="true"></i
        ></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>

例

HTML 

<div class="tabs is-centered is-boxed is-medium">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"
          ><i class="fas fa-image" aria-hidden="true"></i
        ></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-music" aria-hidden="true"></i
        ></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-film" aria-hidden="true"></i
        ></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="far fa-file-alt" aria-hidden="true"></i
        ></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>

例

HTML 

<div class="tabs is-toggle is-fullwidth is-large">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon"
          ><i class="fas fa-image" aria-hidden="true"></i
        ></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon"
          ><i class="fas fa-music" aria-hidden="true"></i
        ></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon"><i class="fas fa-film" aria-hidden="true"></i></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon"
          ><i class="far fa-file-alt" aria-hidden="true"></i
        ></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>
Sass変数
CSS変数
値
 
$tabs-border-bottom-color
 
var(--bulma-tabs-border-bottom-color)
 
var(--bulma-border)
 
$tabs-border-bottom-style
 
var(--bulma-tabs-border-bottom-style)
 
solid
 
$tabs-border-bottom-width
 
var(--bulma-tabs-border-bottom-width)
 
1px
 
$tabs-link-color
 
var(--bulma-tabs-link-color)
 
var(--bulma-text)
 
$tabs-link-hover-border-bottom-color
 
var(--bulma-tabs-link-hover-border-bottom-color)
 
var(--bulma-text-strong)
 
$tabs-link-hover-color
 
var(--bulma-tabs-link-hover-color)
 
var(--bulma-text-strong)
 
$tabs-link-active-border-bottom-color
 
var(--bulma-tabs-link-active-border-bottom-color)
 
var(--bulma-link-text)
 
$tabs-link-active-color
 
var(--bulma-tabs-link-active-color)
 
var(--bulma-link-text)
 
$tabs-link-padding
 
var(--bulma-tabs-link-padding)
 
0.5em 1em
 
$tabs-boxed-link-radius
 
var(--bulma-tabs-boxed-link-radius)
 
var(--bulma-radius)
 
$tabs-boxed-link-hover-background-color
 
var(--bulma-tabs-boxed-link-hover-background-color)
 
var(--bulma-background)
 
$tabs-boxed-link-hover-border-bottom-color
 
var(--bulma-tabs-boxed-link-hover-border-bottom-color)
 
var(--bulma-border)
 
$tabs-boxed-link-active-background-color
 
var(--bulma-tabs-boxed-link-active-background-color)
 
var(--bulma-scheme-main)
 
$tabs-boxed-link-active-border-color
 
var(--bulma-tabs-boxed-link-active-border-color)
 
var(--bulma-border)
 
$tabs-boxed-link-active-border-bottom-color
 
var(--bulma-tabs-boxed-link-active-border-bottom-color)
 
transparent
 
$tabs-toggle-link-border-color
 
var(--bulma-tabs-toggle-link-border-color)
 
var(--bulma-border)
 
$tabs-toggle-link-border-style
 
var(--bulma-tabs-toggle-link-border-style)
 
solid
 
$tabs-toggle-link-border-width
 
var(--bulma-tabs-toggle-link-border-width)
 
1px
 
$tabs-toggle-link-hover-background-color
 
var(--bulma-tabs-toggle-link-hover-background-color)
 
var(--bulma-background)
 
$tabs-toggle-link-hover-border-color
 
var(--bulma-tabs-toggle-link-hover-border-color)
 
var(--bulma-border-hover)
 
$tabs-toggle-link-radius
 
var(--bulma-tabs-toggle-link-radius)
 
var(--bulma-radius)
 
$tabs-toggle-link-active-background-color
 
var(--bulma-tabs-toggle-link-active-background-color)
 
var(--bulma-link)
 
$tabs-toggle-link-active-border-color
 
var(--bulma-tabs-toggle-link-active-border-color)
 
var(--bulma-link)
 
$tabs-toggle-link-active-color
 
var(--bulma-tabs-toggle-link-active-color)
 
var(--bulma-link-invert)

SassとCSS変数 #

Sass変数
CSS変数
値
 
$tabs-border-bottom-color
 
var(--bulma-tabs-border-bottom-color)
 
var(--bulma-border)
 
$tabs-border-bottom-style
 
var(--bulma-tabs-border-bottom-style)
 
solid
 
$tabs-border-bottom-width
 
var(--bulma-tabs-border-bottom-width)
 
1px
 
$tabs-link-color
 
var(--bulma-tabs-link-color)
 
var(--bulma-text)
 
$tabs-link-hover-border-bottom-color
 
var(--bulma-tabs-link-hover-border-bottom-color)
 
var(--bulma-text-strong)
 
$tabs-link-hover-color
 
var(--bulma-tabs-link-hover-color)
 
var(--bulma-text-strong)
 
$tabs-link-active-border-bottom-color
 
var(--bulma-tabs-link-active-border-bottom-color)
 
var(--bulma-link-text)
 
$tabs-link-active-color
 
var(--bulma-tabs-link-active-color)
 
var(--bulma-link-text)
 
$tabs-link-padding
 
var(--bulma-tabs-link-padding)
 
0.5em 1em
 
$tabs-boxed-link-radius
 
var(--bulma-tabs-boxed-link-radius)
 
var(--bulma-radius)
 
$tabs-boxed-link-hover-background-color
 
var(--bulma-tabs-boxed-link-hover-background-color)
 
var(--bulma-background)
 
$tabs-boxed-link-hover-border-bottom-color
 
var(--bulma-tabs-boxed-link-hover-border-bottom-color)
 
var(--bulma-border)
 
$tabs-boxed-link-active-background-color
 
var(--bulma-tabs-boxed-link-active-background-color)
 
var(--bulma-scheme-main)
 
$tabs-boxed-link-active-border-color
 
var(--bulma-tabs-boxed-link-active-border-color)
 
var(--bulma-border)
 
$tabs-boxed-link-active-border-bottom-color
 
var(--bulma-tabs-boxed-link-active-border-bottom-color)
 
transparent
 
$tabs-toggle-link-border-color
 
var(--bulma-tabs-toggle-link-border-color)
 
var(--bulma-border)
 
$tabs-toggle-link-border-style
 
var(--bulma-tabs-toggle-link-border-style)
 
solid
 
$tabs-toggle-link-border-width
 
var(--bulma-tabs-toggle-link-border-width)
 
1px
 
$tabs-toggle-link-hover-background-color
 
var(--bulma-tabs-toggle-link-hover-background-color)
 
var(--bulma-background)
 
$tabs-toggle-link-hover-border-color
 
var(--bulma-tabs-toggle-link-hover-border-color)
 
var(--bulma-border-hover)
 
$tabs-toggle-link-radius
 
var(--bulma-tabs-toggle-link-radius)
 
var(--bulma-radius)
 
$tabs-toggle-link-active-background-color
 
var(--bulma-tabs-toggle-link-active-background-color)
 
var(--bulma-link)
 
$tabs-toggle-link-active-border-color
 
var(--bulma-tabs-toggle-link-active-border-color)
 
var(--bulma-link)
 
$tabs-toggle-link-active-color
 
var(--bulma-tabs-toggle-link-active-color)
 
var(--bulma-link-invert)

Bulmaをサポートする方法

1回限りの寄付

スポンサーにアクセス

毎月の寄付

スポンサーになる
#native_company# #native_desc#
#native_cta#