[CSSフレームワーク]BulmaWebアプリケーションやWebシステムでは、ページの上部や下部にナビゲーションバーを配置して、ユーザーの操作性を向上させます。ブログなどのWebサイトでも、ヘッダーにナビゲーションバーに配置して、メインメニューとして使用できます。Bulmaには、水平のナビゲーションバーを簡単に設置するためのクラスが用意されています。今回は、ナビゲーションバーのスタイルを設定するnavbarクラスについて紹介します。ナビゲーションバーの作成例(実装例)水平ナビゲーションバーを作成するnavbarクラスBulmaのnavbarクラスは、画像、リンク、ボタン、ドロップダウンなどをサポートできるレスポンシブな水平のナビゲーションバーをスタイリングすることができるクラスです。navbarクラスは、ナビゲーションバーのメインコンテナクラスとなり、様々なアイテムを含むことができます。navbarクラスとサブクラスnavbarクラスを使用したコンポーネントでは、メインクラスのnavbarといくつかのサブクラスで構成されます。メインコンテナのクラスです。ブランドを設置するクラスです。このクラスは、常に左側(左端)に表示されます。ロゴやリンク、アイコンなどを配置できます。ハンバーガーメニューを設置するクラスです。モバイル表示など、横幅が狭くナビゲーションバーのメニューアイテムが表示できない状態の時に使用できます。ナビゲーションバーに配置するメニューのコンテナとなるクラスです。ブランドの横から表示されるナビゲーションバーの開始を示すクラスです。最後に表示されるナビゲーションバーの終了を示すクラスです。ナビゲーションバーの(メニュー)アイテムのクラスです。このクラスは主にa要素またはdiv要素に指定されます。ドロップダウンのリンクと矢印(ボタン)のクラスです。ドロップダウンメニューのコンテナクラスです。アイテム(navbar-item)と区切り線(navbar-divider)を含みます。ドロップダウンメニューのアイテムの区切りを表す水平線のクラスです。画面の横幅が狭い場合(モバイル表示時)画面の幅が狭くなると、ナビゲーションバーガーが表示されます。ナビゲーションバーガーを展開した状態ブランドの配置navbarクラスを指定した要素の配下には、navbar-brandクラスを指定してブランドが配置できます。src="navbar/logo2.png"></a></div></nav>ナビゲーションバーガーの配置navbarクラスを指定した要素の配下には、画面のサイズ(横幅)が縮小された際に表示されるナビゲーションバーガーを配置しておきます。ナビゲーションバーガーには、navbar-burgerクラスを使用します。aria-hidden="true"></span></a></div></nav>navbar-burgerクラスを指定したa要素の子要素に配置しているspan要素は、ナビゲーションバーガーの三本線になります。メニューの配置navbarクラスを指定した要素の配下にnavbar-menuクラスを使用してナビゲーションメニューを配置します。class="navbar-menu"></div></nav>メニューの開始と終了ナビゲーションメニューには、ナビゲーションバーの開始と終了を配置します。開始ブロックにはnavbar-startクラスを指定し、終了ブロックにはnavbar-endクラスを指定します。class="navbar-item">終了</a></div></div></nav>ナビゲーションの開始ブロックは左寄せで配置され、終了ブロックは右寄せで配置されます。アイテムの配置ブランドやメニュー内には、navbar-itemクラスを使用してアイテムを配置します。class="button">ボタン</a></div></div></div></nav>ドロップダウンメニューのアイテムには、ドロップダウンを配置することができます。ドロップダウンは、has-dropdownクラスを指定することで配置できます。class="button">ボタン</a></div></div></div></nav>has-dropdownクラスを指定したドロップダウンのアイテムには、is-hoverableクラスを指定することで、マウスホバー時にドロップダウンリストのアイテムを表示することができます。ドロップダウンのアイテムは、navbar-itemクラスを指定して配置します。アイテムの区切り線が必要な場合は、navbar-dividerクラスを指定したhr要素を配置します。ナビゲーションバーの作成例(実装例)ここでは、Bulmaのnavbarクラスを使用したナビゲーションバーの作成例として簡単なUIを作成し、ナビゲーションバーガーがクリックされた時にメニューが表示されるようにする処理を実装します。ナビゲーションバーガー(navbar-burgerクラスを持つすべての要素)を取得します。ナビゲーションバーガーがあるかどうかを確認します。すべてのナビゲーションバーガーをループします。ナビゲーションバーガーにクリックイベントを追加します。ナビゲーションバーガーのdata-target属性の値を取得します。メニュー(data-target属性の値をIDとして持つ要素)を取得します。ナビゲーションバーガーでis-activeクラスを切り替えます。メニューでis-activeクラスを切り替えます。ナビゲーションバーガー(navbar-burgerクラスを持つすべての要素)を取得します。ナビゲーションバーガーがあるかどうかを確認します。すべてのナビゲーションバーガーをループします。ナビゲーションバーガーにクリックイベントを追加します。ナビゲーションバーガーのdata-target属性の値を取得します。メニュー(data-target属性の値をIDとして持つ要素)を取得します。ナビゲーションバーガーでis-activeクラスを切り替えます。メニューでis-activeクラスを切り替えます。$target.classList.toggle('is-active');});});}});上記のサンプルコードをブラウザーで実行すると以下のように表示されます。ブラウザーのサイズ(横幅)を狭くすると、ナビゲーションバーガーが表示されます。ナビゲーションバーガーをクリックすると、JavaScriptで記述した処理によってメニューが展開され、アイテムが表示されます。Bulmaのnavbarクラスとそのサブクラスを使用することで、簡単にナビゲーションメニューが実装できます。ナビゲーションメニューの実装は、スタイルの設定やJavaScriptでの制御など、いちから作成しようとすると結構手間がかかります。Bulmaに用意されているクラスを使用することで実装がかなり楽になりますので、ぜひ活用してみてください。[CSSフレームワーク]テーブル(table)を使用したリストは、WebサイトやWebシステムのあらゆる場面で活躍します。[CSSフレームワーク]Webの入力フォームでは、ユーザーに選択式の項目を配置することがよくあります。[CSSフレームワーク]前回の記事では、テキストボックス(input要素)のスタイルを設定するinputクラスをご紹介しました。[CSSフレームワーク]Webアプリケーションでは、ナビゲーションにタブを配置してページを切り替えるデザインのものを作成する場合があります。[CSSフレームワーク]Webページをデザインしていると、水平方向に項目を左側や右側に寄せて配置させたり、中央に配置させたり、均等割り付けで配置させたい場合...記事を読むBulmaのクラス(部品)を組み合わせてWebページを作成する今回は、Bulmaが提供してくれている様々なクラスを使用して一般的なWebページを作成したいと思います。[CSSフレームワーク]Webサイトでは、現在表示されているページがどの階層にいるのかを示す「パンくずリスト」がよく利用されます。[CSSフレームワーク]Webページをレイアウトしていると、適度なスペース(マージン)を確保した領域を配置したい場合があります。