HTML5
CSS3

CSSフレームワーク BULMA チュートリアル②

More than 1 year has passed since last update.


はじめに

 

前回の記事では、BULMAの基本的な使い方を書きましたが、第2回目のこの記事では、BULMAを使って、下のスクリーンショットのようなWebページを作っていきたいと思います。

5e88d5a2-a891-d14f-81a6-50dd767677d9 (1).png


開始地点のHTML

チュートリアルの開始地点として下記のようなHTMLを用意してください。


tutorial.html

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>一言SNS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.1.2/css/bulma.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- 記述場所⑤ -->
</head>
<body>
<!-- 記述場所② -->
<!-- 記述場所③ -->
<!-- 記述場所① -->
<!-- 記述場所④ -->
</body>
</html>


メインコンテンツのレイアウト

まずはメインコンテツ部分のレイアウト(段組)を行っておきます。columnsクラスを親要素に、columnクラスを子要素にそれぞれ付与すると、子要素が横方向に並びます。一番最初のdiv要素はサブメニューとして使いますので、グリッド幅3つ分の幅としておきます。記述場所①に下記のHTMLを記述してください。


tutorial.html(抜粋)

<main class="columns">

<div class="submenu column is-3">
<aside>
カサレアルは、XXXXXXXXを実現する△△△△△△△△です。
</aside>
</div>
<div class="column">
本文
</div>
</main>


ヘッダー

次にヘッダーを作ります。ヘッダーは下記の三つ部分で構成されていますので順番に作っていきます

1. 最上部(Webサービス名表示+検索/ログイン機能)

2. 中段部(アカウント名表示)

3. 下段部(タブ+フォローボタン)


最上部(Webサービス名表示+検索/ログイン機能)

ここではBULMAで用意されているNavコンポーネントを使用します。NavコンポーネントはWebページのナビゲージョン(メニュー)を作成するために用意されています。レスポンシブデザイン対応もされていたりしますが、今回は単純にサービス名や検索条件入力欄、検索ボタン/ログインボタンなどを配置する目的でのみ使用しています。

Navコンポーネントを利用するには"nav"クラスをHTML要素に付与します。Navコンポーネント内では、ナビゲーションとして表示したいHTML要素を内包した要素(親要素)に、"nav-left","nav-center","nav-right"の三つのクラスを付与することで表示位置を指定します。そして実際に表示したい要素には"nav-item"クラスを付与します。これにより要素内のテキストがNavコンポーネント内で垂直方向にセンタリングして表示されるようになります。記述場所②に下記のHTMLを記述してください。


tutorial.html(抜粋)

<header class="nav">

<div class="nav-left">
<span class="nav-item">
<span class="fa fa-language"></span>一言SNS
</span>
</div>
<div class="nav-right">
<span class="nav-item">
<div class="control has-addons">
<input class="input" type="search" name="search" placeholder="キーワード検索">
<a class="button is-info"><i class="fa fa-search"></i>検索</a>
</div>
</span>
<span class="nav-item">
<a href="#" class="fa fa-user">ログイン</a>
</span>
</div>
<!-- 記述場所③ -->
</header>

 "fa fa-〜"クラスはFont Awesomeのアイコンを表示するための記述で、Font Awesomeで定義されているものです。どういったクラスがどういったアイコンと紐づけられて定義されているかはFont Awesomeの公式ページをみてください。(http://fontawesome.io/icons/)

"control"クラスは入力フォームのスタイルを調整するためのBULMAで用意されているクラスです。今回の場合、このクラスがあることで、"has-addons"モディファイアーが有効になり、内包している子要素のテキスト入力ボックスとボタン風の表記になっているリンクが一体となっているかのように表示されるようになります。


中段部(アカウント名表示)

SNSのアカウント名がトップで大きく表示されるように、Heroレイアウトを使用します。Heroレイアウトはヒーローエリア・ヒーローバナーとも呼ばれる手法で、Webページの閲覧者に印象深く最初に見せたい大きな商品画像やキャッチフレーズが書かれたエリアを指します。有名なところではアップルの公式ページがHeroレイアウトを使ってiPhoneなど自社の新製品を印象付けています。

記述場所③に下記のHTMLを記述してください。


tutorial.html(抜粋)

<div class="hero is-info is-bold">

<div class="hero-body">
<div class="container">
<h1 class="title">CASAREAL</h1>
<h2 class="subtitle">@casareal-ls</h2>
</div>
</div>
</div>

Heroレイアウトに内包できる要素として、"hero-head"、"hero-body"、"hero-foot"があります。"hero-head"はヒーローエリアのトップに、"hero-foot"はヒーローエリアの底部に、表示されるエリアで、ナビゲーションやタブなどを表示するために利用します。"hero-body"はヒーローエリアの主コンテンツを表示するエリアで、主コンテンツは垂直方向にセンタリングされます。

その他の細かな部分の説明です。"is-bold"モディファイアーはヒーローエリアの背景色をグラデーションにします。"container"モディファイアーは内包するコンテンツを水平方向にセンタリングします。


下段部(タブ+フォローボタン)

ヘッダーの最下段にタブとボタンを配置するエリアを設けます。

そのために、ここではボタンや入力ボックス等の他要素を水平に並べるために使う汎用的なコンポーネント"Level"を使います。

"Level"コンポーネントは下記のクラスを利用することで構築します。


level

"Level"コンポーネントの大元の要素(親要素)用のクラス

level-left

"Level"コンポーネントの左側に配置する要素用のクラス

level-right

"Level"コンポーネントの右側に配置する要素用のクラス

level-item

"Level"コンポーネントに内包する要素用のクラス。垂直方向にセンタリングされて表示される

それでは、ヒーローエリアの下に続けて下記のHTMLを追記してください。


tutorial.html(抜粋)

<section class="level">

<div class="level-left"></div>
<div class="level-right">
<div class="level-item tabs">
<ul>
<li class="is-active"><a>最近の一言</a></li>
<li><a>古い一言</a></li>
<li><a>コメント付き</a></li>
</ul>
</div>
</div>
<div class="level-right">
<div class="level-item">
<a class="button is-greylight">フォロー</a>
</div>
</div>
</section>

"Level"コンポーネントで、"Tabs"コンポーネントを使っています。"tabs"クラスが付与された要素に、内包された<ul>リストがタブとして表示されます。"is-active"クラスは現在、選択中のタブを表すためのクラス(モディファイアー)です。

ただしBULMAはJavaScriptが含まれない軽量なCSSフレームワークなので、タブを押すことで表示内容が切り替わったり、"is-active"クラスの付与状態が変わって選択中のタブが変わったり、することはできません。それらの処理は私たちがJavaScriptを使って作成する必要があります。


ここまでのまとめ

ここまでの出来上がりをWebブラウザで確認してみると下記のようになります。

51a03d29-8bf5-6f12-2f52-57ec294122b6.png

ヘッダー部分はこれで完成しましたので、次回はメインコンテンツ部分を完成させます。

つづく。


 リンク

CSSフレームワーク BULMA チュートリアル①

CSSフレームワーク BULMA チュートリアル②

CSSフレームワーク BULMA チュートリアル③