Bulmaのフッター Footer [CSSフレームワーク]

Webページでは、ヘッダーと共にフッターを設けるのが一般的です。

Bulmaにはフッターを配置するためのクラスが用意されています。

今回は、フッターのスタイルを設定するfooterクラスを紹介します。

1 シンプルなフッターを作成するfooterクラス
- 1.1 フッターの背景色
- 1.2 フッターを下部に固定して常に表示

シンプルなフッターを作成するfooterクラス

Bulmaのフッターは、リスト、見出し、列、アイコン、ボタンなど、何でも含めることができるシンプルなレスポンシブフッターです。
footerクラスはシンプルなコンテナです。
フッターの下部には適切なパディング（余白）が設けられており、Webページの最後に配置するの要素として最適化されています。

HTML

<footer class="footer">
  <div class="content has-text-centered">
    <nav class="level">
      <div class="level-item has-text-centered">
        <a href="#">
          プライバシー
        </a>
      </div>
      <div class="level-item has-text-centered">
        <a href="#">
          利用規約
        </a>
      </div>
      <div class="level-item has-text-centered">
        <a href="#">
          免責事項
        </a>
      </div>
      <div class="level-item has-text-centered">
        <a href="#">
          採用情報
        </a>
      </div>
      <div class="level-item has-text-centered">
        <a href="#">
          お問い合わせ・ヘルプ
        </a>
      </div>
      <div class="level-item has-text-centered">
        <a href="#">
          ご意見・ご要望
        </a>
      </div>
    </nav>
    <div>
      © JOHOBASE
    </div>
  </div>
</footer>

プライバシー

</a>

</div>

利用規約

</a>

</div>

免責事項

</a>

</div>

採用情報

</a>

</div>

お問い合わせ・ヘルプ

</a>

</div>

ご意見・ご要望

</a>

</div>

</nav>

<div>

</div>

</footer>

フッターの背景色

footerクラスにはheroクラスのように、色（テーマカラー）の指定が実装されていません。

footerクラスを指定したフッター要素の背景色を変更する場合は、Bulmaに定義されているカラーヘルパーを使用します。

以下に背景色の設定例をいくつか示します。

Primary

HTML

<footer class="footer has-background-primary">
  <div class="content has-text-centered">
    <p class="has-text-white">
      Primary
    </p>
  </div>
</footer>

Primary

</p>

</div>

</footer>

Link

HTML

<footer class="footer has-background-link">
  <div class="content has-text-centered">
    <p class="has-text-white">
      Link
    </p>
  </div>
</footer>

Link

</p>

</div>

</footer>

Info

HTML

<footer class="footer has-background-info">
  <div class="content has-text-centered">
    <p class="has-text-white">
      Info
    </p>
  </div>
</footer>

Info

</p>

</div>

</footer>

Success

HTML

<footer class="footer has-background-success">
  <div class="content has-text-centered">
    <p class="has-text-white">
      Success
    </p>
  </div>
</footer>

Success

</p>

</div>

</footer>

Warning

HTML

<footer class="footer has-background-warning">
  <div class="content has-text-centered">
    <p class="has-text-dark">
      Warning
    </p>
  </div>
</footer>

Warning

</p>

</div>

</footer>

Danger

HTML

<footer class="footer has-background-danger">
  <div class="content has-text-centered">
    <p class="has-text-white">
      Danger
    </p>
  </div>
</footer>

Danger

</p>

</div>

</footer>

参考記事

フッターを下部に固定して常に表示

footerクラスを指定したBulmaのフッターでは、ページの下部に固定するために指定できるクラスは用意されていません。
フッターを下部に固定したい場合は、以下のスタイル（CSS）を適用します。

CSS

.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  /* 必要に応じてz-indexプロパティを指定します。 */
  /* z-index: 99999; */
}

.footer {

position: fixed;

right: 0;

bottom: 0;

left: 0;

/* 必要に応じてz-indexプロパティを指定します。 */

/* z-index: 99999; */

}

上記のCSSを適用すると、footerクラスを指定した要素は、ページの下部に固定されて常に表示されます。

Bulma 入門 Tips 一覧