シンプルなペライチページを作成するにあたり、使ったことのないCSSフレームワークbulmaを触ってみました。bulmaとは、

Bulmaの最大の特徴は、Flexboxをベースとしたグリッドシステムです。このグリッドシステムにより、簡単にレスポンシブデザインを実装したでモバイルファーストなWebサイトを作成できます。Flexboxは、旧来のfloatを使ったグリッドシステムよりもシンプルで、レスポンシブデザインには欠かせない技術となっています。Bulmaのグリッドシステムは、様々なデバイスに対応し、非常に使いやすいです。

https://speever.jp/useful/dictionary/bulma/#:~:text=Bulma%E3%81%AE%E6%9C%80%E5%A4%A7%E3%81%AE%E7%89%B9%E5%BE%B4,%E6%8A%80%E8%A1%93%E3%81%A8%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82

とありますが、軽量かつCSSファイルのみで構成されていて余分なjsファイルなど一切含まれていません。そのため、今回はモバイル用の開閉するバーガーメニューを実装するにあたり、少しだけjsを書く必要があったので、そのメモ。

jsは以下

</body>
  <script>
    $(document).ready(function () {
      // Check for click events on the navbar burger icon
      $(".navbar-burger").click(function () {
        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
        $(".navbar-burger").toggleClass("is-active");
        $(".navbar-menu").toggleClass("is-active");
      });
    });
  </script>
</html>

メニュー部分は以下の感じ

<nav
      class="navbar is-fixed-top"
      role="navigation"
      aria-label="main navigation"
    >
      <div class="navbar-brand">
        <a class="navbar-item" href="index.html">
          <span class="ttl">タイトル</span>
        </a>

        <a
          role="button"
          class="navbar-burger"
          aria-label="menu"
          aria-expanded="false"
          data-target="navbarBasicExample"
        >
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div id="navbarBasicExample" class="navbar-menu">
        <div class="navbar-end">
          <div class="navbar-item">
            <a class="navbar-item" href="index.html#hiyo"> 費用について </a>
            <a class="navbar-item" href="index.html#nagare"> ご依頼の流れ </a>
            <a class="navbar-item" href="estimate.html"> お見積り </a>
            <a class="navbar-item" href="contact.html"> お問い合わせ </a>
          </div>
        </div>
      </div>
    </nav>

この様にシンプルに実現することが出来ました。提供されている機能は最低限のものだけですが、それはすでに稼働中のウェブサイトに組み込む際に、競合する要素が無いという利点をもたらします。今回のbluma導入はよい発見でした。