シンプルなペライチページを作成するにあたり、使ったことのない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導入はよい発見でした。