レイアウト:基本

基本レイアウト

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列

ランチメニュー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" />

ボーダー

ランチメニュー01

テキストテキストテキストテキストテキストテキストテキスト

ランチメニュー01

テキストテキストテキストテキストテキストテキストテキスト

<div class="column">
<div class="col col2 border heightLine-group1">画像やテキスト等</div>
<div class="col col2 border heightLine-group1">画像やテキスト等</div>
</div>

ボーダーで囲む

テキストテキストテキストテキスト。
<div class="borderBox">画像やテキスト等</div>
2017年3月9日