ダウンロード

ここから始める

機能

Sassツール

カスタマイズ

CSSライブラリ

CSSヘルパー

スポンサー

Password.link

ヒーロー

何かを目立たせるための印象的なヒーローバナー

ヒーローコンポーネントを使用すると、Webページに全幅バナーを追加できます。オプションで、ページの全高をカバーすることもできます。

このコンポーネントの基本的な要件は次のとおりです。

  • メインコンテナとしてhero
    • 直接の子要素としてhero-body。すべてのコンテンツを配置できます。

全高ヒーローを機能させるには、hero-headとhero-footも必要です。

例

ヒーロータイトル

ヒーローサブタイトル

HTML 

<section class="hero">
  <div class="hero-body">
    <p class="title">Hero title</p>
    <p class="subtitle">Hero subtitle</p>
  </div>
</section>

色 #

ボタンと同様に、8色のいずれかを選択できます。

例

リンクヒーロー

リンクサブタイトル

HTML 

<section class="hero is-link">
  <div class="hero-body">
    <p class="title">Link hero</p>
    <p class="subtitle">Link subtitle</p>
  </div>
</section>

例

プライマリヒーロー

プライマリサブタイトル

HTML 

<section class="hero is-primary">
  <div class="hero-body">
    <p class="title">Primary hero</p>
    <p class="subtitle">Primary subtitle</p>
  </div>
</section>

例

インフォヒーロー

インフォサブタイトル

HTML 

<section class="hero is-info">
  <div class="hero-body">
    <p class="title">Info hero</p>
    <p class="subtitle">Info subtitle</p>
  </div>
</section>

例

サクセスヒーロー

サクセスサブタイトル

HTML 

<section class="hero is-success">
  <div class="hero-body">
    <p class="title">Success hero</p>
    <p class="subtitle">Success subtitle</p>
  </div>
</section>

例

ワーニングヒーロー

ワーニングサブタイトル

HTML 

<section class="hero is-warning">
  <div class="hero-body">
    <p class="title">Warning hero</p>
    <p class="subtitle">Warning subtitle</p>
  </div>
</section>

例

デンジャーヒーロー

デンジャーサブタイトル

HTML 

<section class="hero is-danger">
  <div class="hero-body">
    <p class="title">Danger hero</p>
    <p class="subtitle">Danger subtitle</p>
  </div>
</section>

サイズ #

5種類のサイズのいずれかを使用して、さらに印象的なバナーを作成できます。

  • 小
  • 中
  • 大
  • 半分の高さ
  • 全高

例

小ヒーロー

小サブタイトル

HTML 

<section class="hero is-small is-primary">
  <div class="hero-body">
    <p class="title">Small hero</p>
    <p class="subtitle">Small subtitle</p>
  </div>
</section>

例

中ヒーロー

中サブタイトル

HTML 

<section class="hero is-medium is-link">
  <div class="hero-body">
    <p class="title">Medium hero</p>
    <p class="subtitle">Medium subtitle</p>
  </div>
</section>

例

大ヒーロー

大サブタイトル

HTML 

<section class="hero is-large is-info">
  <div class="hero-body">
    <p class="title">Large hero</p>
    <p class="subtitle">Large subtitle</p>
  </div>
</section>

例

半分の高さのヒーロー

半分の高さのサブタイトル

HTML 

<section class="hero is-success is-halfheight">
  <div class="hero-body">
    <div class="">
      <p class="title">Half height hero</p>
      <p class="subtitle">Half height subtitle</p>
    </div>
  </div>
</section>

例

全高ヒーロー

全高サブタイトル

HTML 

<section class="hero is-danger is-fullheight">
  <div class="hero-body">
    <div class="">
      <p class="title">Fullheight hero</p>
      <p class="subtitle">Fullheight subtitle</p>
    </div>
  </div>
</section>

ナビゲーションバー付き全高 #

固定ナビゲーションバーを使用している場合、ヒーローにis-fullheight-with-navbar修飾子を使用すると、ナビゲーションバーの高さを差し引いたビューポートの高さを占めることができます。

例

ナビゲーションバー付き全高ヒーロー

HTML 

 <nav class="navbar">
  <div class="container">
    <div id="navMenu" class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item">
          Home
        </a>
        <a class="navbar-item">
          Documentation
        </a>
      </div>

      <div class="navbar-end">
        <div class="navbar-item">
          <div class="buttons">
            <a class="button is-dark">Github</a>
            <a class="button is-link">Download</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

<section class="hero is-link is-fullheight-with-navbar">
  <div class="hero-body">
    <p class="title">Fullheight hero with navbar</p>
  </div>
</section>

3つの部分に分かれた全高ヒーロー #

ビューポートの全高をカバーするヒーローを取得するには、3つの垂直部分に分割できます。

  • ヒーロー
    • hero-head (常に上部)
    • hero-body (常に垂直方向に中央揃え)
    • hero-foot (常に下部)

例

タイトル

サブタイトル

HTML 

<section class="hero is-primary is-medium">
  <!-- Hero head: will stick at the top -->
  <div class="hero-head">
    <nav class="navbar">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item">
            <img src="https://bulma.dokyumento.jp/assets/images/bulma-type-white.png" alt="Logo" />
          </a>
          <span class="navbar-burger" data-target="navbarMenuHeroA">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </span>
        </div>
        <div id="navbarMenuHeroA" class="navbar-menu">
          <div class="navbar-end">
            <a class="navbar-item is-active"> Home </a>
            <a class="navbar-item"> Examples </a>
            <a class="navbar-item"> Documentation </a>
            <span class="navbar-item">
              <a class="button is-primary is-inverted">
                <span class="icon">
                  <i class="fab fa-github"></i>
                </span>
                <span>Download</span>
              </a>
            </span>
          </div>
        </div>
      </div>
    </nav>
  </div>

  <!-- Hero content: will be in the middle -->
  <div class="hero-body">
    <div class="container has-text-centered">
      <p class="title">Title</p>
      <p class="subtitle">Subtitle</p>
    </div>
  </div>

  <!-- Hero footer: will stick at the bottom -->
  <div class="hero-foot">
    <nav class="tabs">
      <div class="container">
        <ul>
          <li class="is-active"><a>Overview</a></li>
          <li><a>Modifiers</a></li>
          <li><a>Grid</a></li>
          <li><a>Elements</a></li>
          <li><a>Components</a></li>
          <li><a>Layout</a></li>
        </ul>
      </div>
    </nav>
  </div>
</section>

例

タイトル

サブタイトル

HTML 

<section class="hero is-info is-large">
  <div class="hero-head">
    <nav class="navbar">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item">
            <img src="https://bulma.dokyumento.jp/assets/images/bulma-type-white.png" alt="Logo" />
          </a>
          <span class="navbar-burger" data-target="navbarMenuHeroB">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </span>
        </div>
        <div id="navbarMenuHeroB" class="navbar-menu">
          <div class="navbar-end">
            <a class="navbar-item is-active"> Home </a>
            <a class="navbar-item"> Examples </a>
            <a class="navbar-item"> Documentation </a>
            <span class="navbar-item">
              <a class="button is-info is-inverted">
                <span class="icon">
                  <i class="fab fa-github"></i>
                </span>
                <span>Download</span>
              </a>
            </span>
          </div>
        </div>
      </div>
    </nav>
  </div>

  <div class="hero-body">
    <div class="container has-text-centered">
      <p class="title">Title</p>
      <p class="subtitle">Subtitle</p>
    </div>
  </div>

  <div class="hero-foot">
    <nav class="tabs is-boxed is-fullwidth">
      <div class="container">
        <ul>
          <li class="is-active">
            <a>Overview</a>
          </li>
          <li>
            <a>Modifiers</a>
          </li>
          <li>
            <a>Grid</a>
          </li>
          <li>
            <a>Elements</a>
          </li>
          <li>
            <a>Components</a>
          </li>
          <li>
            <a>Layout</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</section>

例

Logo

タイトル

サブタイトル

HTML 

<section class="hero is-success is-fullheight">
  <!-- Hero head: will stick at the top -->
  <div class="hero-head">
    <header class="navbar">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item">
            <img src="https://bulma.dokyumento.jp/assets/images/bulma-type-white.png" alt="Logo" />
          </a>
          <span class="navbar-burger" data-target="navbarMenuHeroC">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </span>
        </div>
        <div id="navbarMenuHeroC" class="navbar-menu">
          <div class="navbar-end">
            <a class="navbar-item is-active"> Home </a>
            <a class="navbar-item"> Examples </a>
            <a class="navbar-item"> Documentation </a>
            <span class="navbar-item">
              <a class="button is-success is-inverted">
                <span class="icon">
                  <i class="fab fa-github"></i>
                </span>
                <span>Download</span>
              </a>
            </span>
          </div>
        </div>
      </div>
    </header>
  </div>

  <!-- Hero content: will be in the middle -->
  <div class="hero-body">
    <div class="container has-text-centered">
      <p class="title">Title</p>
      <p class="subtitle">Subtitle</p>
    </div>
  </div>

  <!-- Hero footer: will stick at the bottom -->
  <div class="hero-foot">
    <nav class="tabs is-boxed is-fullwidth">
      <div class="container">
        <ul>
          <li class="is-active"><a>Overview</a></li>
          <li><a>Modifiers</a></li>
          <li><a>Grid</a></li>
          <li><a>Elements</a></li>
          <li><a>Components</a></li>
          <li><a>Layout</a></li>
        </ul>
      </div>
    </nav>
  </div>
</section>

SassとCSS変数 #

Sass変数
CSS変数
値
 
$hero-body-padding
 
var(--bulma-hero-body-padding)
 
3rem 1.5rem
 
$hero-body-padding-tablet
 
var(--bulma-hero-body-padding-tablet)
 
3rem 3rem
 
$hero-body-padding-small
 
var(--bulma-hero-body-padding-small)
 
1.5rem
 
$hero-body-padding-medium
 
var(--bulma-hero-body-padding-medium)
 
9rem 4.5rem
 
$hero-body-padding-large
 
var(--bulma-hero-body-padding-large)
 
18rem 6rem

Bulmaをサポートする方法

1回限りの寄付

スポンサーをご覧ください

毎月の寄付

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