CSSフレームワークに用意されている様々なクラスを組み合わせることで、Webサイトやブログに印象的なデザインの要素を配置することができます。
今回は、レシピサイトで使えそうなスタイルをBulmaのクラスを使って作成してみます。
目次
使用するBulmaのクラス
本記事で使用するBulmaの主なクラスは以下になります。
| クラス | 説明 |
|---|---|
| icon | アイコンを配置するクラスです。 |
| box | ボックスを配置するクラスです。 |
| level | 水平に項目を整列させるクラスです。 |
| media | メディアオブジェクトを作成するクラスです。 |
| tag | タグラベル（バッジ）のクラスです。 |
| image | イメージ（画像）を配置するクラスです。 |
| columns | Flexboxを利用して列を配置するクラスです。 |
| card | カードコンポーネントを配置するクラスです。 |
料理レシピのページに配置する部品
料理のレシピサイトでは、調理に必要な材料の紹介や、調理方法を手順ごとに画像を付けて説明文を記載したりします。
本記事では、レシピによくあるデザインを部品を作成します。
画像付き材料リスト
ここでは、以下のイメージの部品を作成します。
HTML
HTMLのコードは下記になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<div class="mb-3"> <span class="icon-text is-size-4"> <span class="icon has-text-link"> <i class="fas fa-prescription-bottle"></i> </span> <span> <strong class="has-text-link">調味料</strong> </span> </span> </div> <div class="box"> <div class="level is-mobile"> <div class="level-left"> <div class="media"> <figure class="media-left"> <p class="image is-64x64"> <img src="image1.png"> </p> </figure> <div class="media-content"> <div class="is-size-5"> <strong>薄口しょうゆ</strong> </div> <div class="is-size-7 has-text-grey-light"> なければ、濃口しょうゆでもOK。 </div> </div> </div> </div> <div class="level-right"> <span class="tag is-danger">大さじ1</span> </div> </div> <hr> <div class="level is-mobile"> <div class="level-left"> <div class="media"> <figure class="media-left"> <p class="image is-64x64"> <img src="image2.png"> </p> </figure> <div class="media-content"> <div class="is-size-5"> <strong>塩</strong> </div> </div> </div> </div> <div class="level-right"> <span class="tag is-danger">小さじ2</span> </div> </div> <hr> <div class="level is-mobile"> <div class="level-left"> <div class="media"> <figure class="media-left"> <p class="image is-64x64"> <img src="image3.png"> </p> </figure> <div class="media-content"> <div class="is-size-5"> <strong>オリーブオイル</strong> </div> </div> </div> </div> <div class="level-right"> <span class="tag is-danger">20cc</span> </div> </div> <hr> <div class="level is-mobile"> <div class="level-left"> <div class="media"> <figure class="media-left"> <p class="image is-64x64"> <img src="image4.png"> </p> </figure> <div class="media-content"> <div class="is-size-5"> <strong>中濃ソース</strong> </div> <div class="is-size-7 has-text-grey-light"> ウスターソースでも代用できます。 </div> </div> </div> </div> <div class="level-right"> <span class="tag is-danger">大さじ1</span> </div> </div> </div> |
材料のリストには、ヘッダー部分と一覧部分を配置しています。
ヘッダー部分には、iconクラスを使用してFont Awesomeのアイコン付きのテキストを配置しています。
一覧のリスト部分はboxクラスでボックスを作成し、リストのアイテムにはlevelクラスを使用して材料の画像と名前を左側に配置、分量を右側に配置しています。
左側に配置している画像と名前の部分には、mediaクラスを使用しています。
levelクラスを指定している要素にはis-mobileクラスを指定して、画面のサイズ（横幅）が狭くなった時も要素が改行されないようにしています。
完成イメージ画像付きの材料リスト
ここでは、以下のイメージの部品を作成します。
HTML
HTMLのコードは下記になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
<div class="box"> <div class="mb-2"> <span class="icon-text is-size-4"> <span class="icon has-text-primary-dark"> <i class="fas fa-utensils"></i> </span> <span> <strong class="has-text-primary-dark">牛丼</strong> </span> </span> </div> <div class="columns"> <div class="column is-two-fifths"> <figure class="image is-3by4"> <img src="image5.png"> </figure> </div> <div class="column"> <p> 子供から大人まで大人気の牛丼。手間なく簡単に作れるので、休日のランチなどに最適です☆ </p> <div class="my-2"> <span class="is-size-5"> <strong class="has-text-info-dark">材料</strong> </span> <span class="is-size-7"> （並2人分） </span> </div> <ul> <li> <div class="level is-mobile"> <div class="level-left"> <div class="level-item">牛肉</div> </div> <div class="level-right"> <div class="level-item">300g</div> </div> </div> </li> <li> <div class="level is-mobile"> <div class="level-left"> <div class="level-item">玉ねぎ</div> </div> <div class="level-right"> <div class="level-item">1個</div> </div> </div> </li> <li> <div class="level is-mobile"> <div class="level-left"> <div class="level-item">水</div> </div> <div class="level-right"> <div class="level-item">300cc</div> </div> </div> </li> <li> <div class="level is-mobile"> <div class="level-left"> <div class="level-item">濃口しょうゆ</div> </div> <div class="level-right"> <div class="level-item">大さじ2</div> </div> </div> </li> <li> <div class="level is-mobile"> <div class="level-left"> <div class="level-item">酒</div> </div> <div class="level-right"> <div class="level-item">大さじ2</div> </div> </div> </li> <li> <div class="level is-mobile"> <div class="level-left"> <div class="level-item">砂糖</div> </div> <div class="level-right"> <div class="level-item">大さじ1と1/2</div> </div> </div> </li> <li> <div class="level is-mobile"> <div class="level-left"> <div class="level-item">みりん</div> </div> <div class="level-right"> <div class="level-item">大さじ1</div> </div> </div> </li> <li> <div class="level is-mobile"> <div class="level-left"> <div class="level-item">顆粒和風だし</div> </div> <div class="level-right"> <div class="level-item">大さじ1</div> </div> </div> </li> <li> <div class="level is-mobile"> <div class="level-left"> <div class="level-item">紅しょうが</div> </div> <div class="level-right"> <div class="level-item">お好み</div> </div> </div> </li> </ul> </div> </div> </div> </div> |
CSS
Bulmaにはないスタイルを設定するために、CSSのコードを追加します。
|
1 2 3 4 5 6 7 |
ul li { border-bottom: solid 1px #dfdfdf; } ul li:first-child { border-top: solid 1px #dfdfdf; } |
ヘッダーの料理名（牛丼）の部分には、前の例と同様にiconクラスを使用してFont Awesomeのアイコンとテキストを配置しています。
料理の画像と材料リストの部分は、columnsクラスとcolumnクラスを使用して左右に列を作成しています。
columnクラスを指定している要素にはis-two-fifthsクラスを追加して、左の列が40%、右の列が60%の比率になるようにしています。
左側の料理の完成イメージはimageクラスを使用して画像を配置しています。
右側のリスト部分は、ul～li要素を配置してリストを作成しています。
リストのアイテムはlevelクラスを使用して、左側に材料名、右側に分量を配置しています。
材料のリスト部分はボーダーを表示するために、CSSでli要素のborder-bottomとborder-topのスタイルを指定しています。
調理手順（ステップ）のカード
ここでは、以下のイメージの部品を作成します。
HTML
HTMLのコードは下記になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="mb-2"> <span class="tag is-medium is-success">STEP 5</span> </div> <div class="card"> <div class="card-image"> <figure class="image is-5by4"> <img src="image6.png" alt="春巻完成"> </figure> </div> <div class="card-content"> 包丁を斜めに入れて半分に切り、お皿に盛り付ければ完成です。 </div> </div> |
調理工程の1ステップを画像と説明文で表示します。
上部にはステップ数をtagクラスを使用して配置してます。（STEP5の部分）
ステップ数の下にはcardクラスを使用してカードを配置しています。
カードには、card-imageクラスを使用して画像を配置し、card-contentクラスを使用してテキストを配置しています。
上記のステップカードを行程順に並べることでレシピの手順が完成します。
参考記事
Bulmaのアイコン Icon [CSSフレームワーク]
Webページでは、アイコンを配置してデザインに変化を付けたり、ユーザーに分かりやすく内容を伝えたい場合があります。
Bulma...
johobase.com
Bulmaのボックス Box [CSSフレームワーク]
Webページをレイアウトしていると、いくつかの要素の集まりを1つのボックスにまとめて配置したい場合があります。
Bulmaには...
johobase.com
Bulmaのレベル Level [CSSフレームワーク]
Webページをデザインしていると、水平方向に項目を左側や右側に寄せて配置させたり、中央に配置させたり、均等割り付けで配置させたい場合...
johobase.com
Bulmaのメディアオブジェクト Media Object [CSSフレームワーク]
ソーシャルメディアのインターフェースで普及している「メディアオブジェクト」は、ウェブ上のいたるところで見られるデザインのパターンです...
johobase.com
Bulmaのタグラベル（バッジ）Tag [CSSフレームワーク]
Bulmaには、他のCSSフレームワークでバッジと呼ばれている小さな部品のタグラベルが用意されています。
タグラベル（バッジ）...
johobase.com
Bulmaのイメージ Image [CSSフレームワーク]
Webページにサイズの大きい画像を配置した際、画像の読み込みに時間がかかってしまう場合やまったく読み込まれない場合があります。
...
johobase.com
Bulmaのグリッドシステム（columns）の基礎 [CSSフレームワーク]
CSSフレームワークのBulmaにはBootstrapと同様に、要素をグリッドのように格子状に配置するための仕組みが用意されています...
johobase.com
Bulmaのカード Card [CSSフレームワーク]
Webサイトでは、商品紹介ページやダッシュボードのアイテムなど、いろいろな場面でカード型のUIを使用することがあります。
Bu...
johobase.com
