料理のレシピサイトで使えそうなスタイル [CSSフレームワーク Bulma]

Bulma ロゴ トップ バナー

CSSフレームワークに用意されている様々なクラスを組み合わせることで、Webサイトやブログに印象的なデザインの要素を配置することができます。

今回は、レシピサイトで使えそうなスタイルをBulmaのクラスを使って作成してみます。

使用するBulmaのクラス

本記事で使用するBulmaの主なクラスは以下になります。

クラス 説明
icon アイコンを配置するクラスです。
box ボックスを配置するクラスです。
level 水平に項目を整列させるクラスです。
media メディアオブジェクトを作成するクラスです。
tag タグラベル(バッジ)のクラスです。
image イメージ(画像)を配置するクラスです。
columns Flexboxを利用して列を配置するクラスです。
card カードコンポーネントを配置するクラスです。

料理レシピのページに配置する部品

料理のレシピサイトでは、調理に必要な材料の紹介や、調理方法を手順ごとに画像を付けて説明文を記載したりします。

本記事では、レシピによくあるデザインを部品を作成します。

画像付き材料リスト

ここでは、以下のイメージの部品を作成します。

Bulmaの実装サンプルのブラウザーでの実行結果

HTML

HTMLのコードは下記になります。

材料のリストには、ヘッダー部分と一覧部分を配置しています。
ヘッダー部分には、iconクラスを使用してFont Awesomeのアイコン付きのテキストを配置しています。
一覧のリスト部分はboxクラスでボックスを作成し、リストのアイテムにはlevelクラスを使用して材料の画像と名前を左側に配置、分量を右側に配置しています。
左側に配置している画像と名前の部分には、mediaクラスを使用しています。
levelクラスを指定している要素にはis-mobileクラスを指定して、画面のサイズ(横幅)が狭くなった時も要素が改行されないようにしています。

完成イメージ画像付きの材料リスト

ここでは、以下のイメージの部品を作成します。

Bulmaの実装サンプルのブラウザーでの実行結果

HTML

HTMLのコードは下記になります。

CSS

Bulmaにはないスタイルを設定するために、CSSのコードを追加します。

ヘッダーの料理名(牛丼)の部分には、前の例と同様にiconクラスを使用してFont Awesomeのアイコンとテキストを配置しています。
料理の画像と材料リストの部分は、columnsクラスとcolumnクラスを使用して左右に列を作成しています。
columnクラスを指定している要素にはis-two-fifthsクラスを追加して、左の列が40%、右の列が60%の比率になるようにしています。
左側の料理の完成イメージはimageクラスを使用して画像を配置しています。
右側のリスト部分は、ul~li要素を配置してリストを作成しています。
リストのアイテムはlevelクラスを使用して、左側に材料名、右側に分量を配置しています。

材料のリスト部分はボーダーを表示するために、CSSでli要素のborder-bottomとborder-topのスタイルを指定しています。

調理手順(ステップ)のカード

ここでは、以下のイメージの部品を作成します。

Bulmaの実装サンプルのブラウザーでの実行結果

HTML

HTMLのコードは下記になります。

調理工程の1ステップを画像と説明文で表示します。
上部にはステップ数をtagクラスを使用して配置してます。(STEP5の部分)
ステップ数の下にはcardクラスを使用してカードを配置しています。
カードには、card-imageクラスを使用して画像を配置し、card-contentクラスを使用してテキストを配置しています。

上記のステップカードを行程順に並べることでレシピの手順が完成します。

参考記事

Bulmaのアイコン Icon [CSSフレームワーク]
Webページでは、アイコンを配置してデザインに変化を付けたり、ユーザーに分かりやすく内容を伝えたい場合があります。 Bulma...
Bulmaのボックス Box [CSSフレームワーク]
Webページをレイアウトしていると、いくつかの要素の集まりを1つのボックスにまとめて配置したい場合があります。 Bulmaには...
Bulmaのレベル Level [CSSフレームワーク]
Webページをデザインしていると、水平方向に項目を左側や右側に寄せて配置させたり、中央に配置させたり、均等割り付けで配置させたい場合...
Bulmaのメディアオブジェクト Media Object [CSSフレームワーク]
ソーシャルメディアのインターフェースで普及している「メディアオブジェクト」は、ウェブ上のいたるところで見られるデザインのパターンです...
Bulmaのタグラベル(バッジ)Tag [CSSフレームワーク]
Bulmaには、他のCSSフレームワークでバッジと呼ばれている小さな部品のタグラベルが用意されています。 タグラベル(バッジ)...
Bulmaのイメージ Image [CSSフレームワーク]
Webページにサイズの大きい画像を配置した際、画像の読み込みに時間がかかってしまう場合やまったく読み込まれない場合があります。 ...
Bulmaのグリッドシステム(columns)の基礎 [CSSフレームワーク]
CSSフレームワークのBulmaにはBootstrapと同様に、要素をグリッドのように格子状に配置するための仕組みが用意されています...
Bulmaのカード Card [CSSフレームワーク]
Webサイトでは、商品紹介ページやダッシュボードのアイテムなど、いろいろな場面でカード型のUIを使用することがあります。 Bu...

Bulma 入門 Tips 一覧