フロート画像を使う

お風呂

左寄せ画像を含む段落です。imgタグをclass=img-leftとします。テキストの回り込みを解除して段落を書くときは、<p class=clear>とします。<p class="clear right">だと回り込みを解除して右詰め段落になります。

その他の要素が続くとき、テキストの回り込み解除がうまくいかないときは、続く要素にclass=clearを追加してみてください。

<p class=clear>で回り込みを解除しました。

お部屋

右寄せ画像を含む段落です。imgタグをclass=img-rightとします。

テーブルを使う

枠線のあるテーブル

項目 項目
説明 説明

枠線のないテーブル

項目
説明
table,th,tdなどをclass=transparentとすると枠線が透明になります。

boxを使う

<div class=boxframe>
	<div class="box-1-3"></div>
	<div class="box-2-3 solid"></div>
</div>

とすると1/3と2/3幅のボックスが横並びになります。1/3幅を３つ並べたり、1/2幅を２つ並べたりすることもできます。
solidは実線枠のboxになります。dottedで点線枠のboxにすることもできます。

class="box-1-3"

透明枠

class="box-1-3 solid"

実線枠 p class=center

class="box-1-3 dotted"

点線枠 p class=righ

box-1-3のようなboxの中ではpタグでも段落間が空きません。段落間を空けたいときは<br>を挿入してください。
class名が複数の場合は必ずクオーテーションで括ります。

boxを使った時、box内の上下に思いがけず大きな余白ができることがあります。ボックス内の最初の要素または最後の要素にmargin-top0またはmargin-bottom0クラスを追加してみてください。

新着情報

2012/00/00
ホームページリニューアル
2012/00/00
ホームページリニューアル
<dl class="news">
	<dt>2012/00/00</dt><dd>ホームページリニューアル</dd>
	<dt>2012/00/00</dt><dd>ホームページリニューアル</dd>
</dl>

新着情報の内容がある程度になると、カスタムスクロールバーが表示されます。

価格表

品名
500
説明文〜〜〜〜〜〜〜〜〜〜〜
品名
1,000
品名
1,000
<dl class=price>
	<dt>品名</dt><dd>500</dd>
	<dt class=description>説明文〜〜〜〜〜〜〜〜〜〜〜</dt>
	<dt>品名</dt><dd>1,000</dd>
	<dt>品名</dt><dd>1,000</dd>
</dl>

lightbox

<a href="images/kaki.jpg" data-featherlight="image">
	<img src="images/kaki.jpg" width="194" height="146">
</a>

イメージを開くリンクに data-featherlight="image" を加えます。

イメージギャラリ

カキ 鶏鍋 ナス田楽
<div>
  <img id=area1 src="images/kaki.jpg" width="400" height=300>
</div>
<a href="images/kaki.jpg" gallery-area="#area1">カキ</a>
<a href="images/torinabe.jpg" gallery-area="#area1">鶏鍋</a>
<a href="images/nasu_dengaku.jpg" gallery-area="#area1">ナス田楽</a><br>

画像を１つ表示し、idを付けておきます（id="area1"）。画像を開くリンクにそのidを gallery-area="#area1" のように指定します。

idを付けた画像にはwidth,height属性を必ず付けておきます（画面がちらつくことがある）。

イメージギャラリがページの最後の方にあると、画面切り替え時に勝手に少しスクロールすることがあります。 画像をdiv要素で括り画像サイズと同じwidthとheightを記述しておくとこの現象はなくなります。（上のサンプルではdiv要素のwidthとheightを指定する） 

<div style="width:400px;height:300px;"><img id=area1 src="images/kaki.jpg" width="400" height=300></div>

営業時間

平日　　　00：00〜00:00
土日祝日　00：00〜00:00
定休日　　月曜日

お店情報

神戸市中央区北長狭通1-1-1
電話 078-078-0788

Yahoo地図を見る

本日のおすすめメニュー