レイアウト
基本レイアウト
2列 均等
ランチメニュー01
テキストテキストテキストテキストテキストテキストテキスト
ランチメニュー01
テキストテキストテキストテキストテキストテキストテキスト
<div class="column">
<div class="col col2">画像やテキスト等</div>
<div class="col col2">画像やテキスト等</div>
</div>
どちらかを広く
広くしたいdivのclassを「col2W」に、狭い方を「col2N」。
| 小エビとイタリア産空豆とトマトのスープスパゲッティ | 000円 |
|---|---|
| チョリソーとキャベツのクリームスパゲッティ | 000円 |
| ツナと温野菜のクリームスパゲッティ | 000円 |
テキストテキストテキストテキストテキストテキストテキストテキスト
<div class="column">
<div class="col col2W">画像やテキスト等</div>
<div class="col col2N">画像やテキスト等</div>
</div>
3列
ランチメニュー01
テキストテキストテキストテキストテキストテキストテキストテキスト
ランチメニュー01
テキストテキストテキストテキストテキストテキストテキストテキスト
ランチメニュー01
テキストテキストテキストテキストテキストテキストテキストテキスト
<div class="column">
<div class="col col3">画像やテキスト等</div>
<div class="col col3">画像やテキスト等</div>
<div class="col col3">画像やテキスト等</div>
</div>
4列
4列
ランチメニュー01
テキストテキストテキストテキストテキストテキストテキストテキスト
ランチメニュー01
テキストテキストテキストテキストテキストテキストテキストテキスト
ランチメニュー01
テキストテキストテキストテキストテキストテキストテキストテキスト
ランチメニュー01
テキストテキストテキストテキストテキストテキストテキストテキスト
<div class="column">
<div class="col col4">画像やテキスト等</div>
<div class="col col4">画像やテキスト等</div>
<div class="col col4">画像やテキスト等</div>
<div class="col col4">画像やテキスト等</div>
</div>
※columnクラスに「smp」のクラスを追加するとスマホ表示時にfloatを解除した1カラムで表示できます。
<div class="column smp">
また、文章横の画像「alignright」のfloat解除には「smp-full」を加えます。
<img src="○○○○.jpg" alt="" width="270" height="180" class="alignright smp-full" />