ボックススタイル

class=”radius”

ボックスを角丸にする。角丸のRは6px。
通常はほかのボックスのオプションとして使用。※背景のピンクは付きません。

class=”bnr”

画像を入れる箱。画像は中央寄せになります。
padding-top:16pxが入っています。※背景のピンクは付きません。

使用例


<div class="bnr"><img src="/image/material/img01.webp" alt=""></div>

class=”inwidth”

ボックス幅を94%にする。
通常はほかのボックスのオプションとして使用。
margin:0 auto;が入っています。※背景のピンクは付きません。

class=”img-left/img-right”

画像に文章を回り込ませる。
画像サイズはmax-width:40%
モバイルサイズになると、文章の後に画像が中央寄せで入ります。
inwidthがscssで指定されているため幅は94%、margin:24px auto 0。

class=”img-left”

画像を左に文章を回り込ませる。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

使用例


<div class="img-left">
	<img src="/image/material/img01.webp" alt="">
	<p>
		ここにテキストが入ります。
	</p>
</div>

imgタグを最初に書く。

class=”img-right”

こんにちわ
こんにちわこんにちわこんにちわこ
こんにちわこんにちわ
こんにちわこんにちわこんにちわ

画像を右に文章を回り込ませる。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

divタグで囲んだクラスdiscとpタグ×2です。

このテキストはimg-rightの外のpタグです。このテキストはimg-rightの外のpタグです。このテキストはimg-rightの外のpタグです。

使用例


<div class="img-right">
	<img src="/image/material/img01.webp" alt="">
	<p>
		ここにテキストが入ります。
	</p>
</div>

imgタグを最初に書く。

pタグやulタグを複数入れたい場合は、divタグなどで囲む。
imgbox直下にはimgタグと、ひとつのpタグかdivタグだけにする。


<div class="img-right">
	<div>
		<p>
			テキストを入れるときはpタグを使用する。
		</p>
		<ul class="disc">
			<li>リストタグを使用する。</li>
			<li>リストタグを使用する。</li>
			<li>リストタグを使用する。</li>
		</ul>
		<p>
			テキストを入れるときはpタグを使用する。
		</p>
	</div>
	<img src="/image/material/img01.webp" alt="">
</div>

class=”img-left/img-right reverse”

オプションのreverseを付けると、モバイルサイズで画像が上になる。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

使用例


<div class="img-right reverse">
	<img src="/image/material/img01.webp" alt="">
	<p>
		ここにテキストが入ります。
	</p>
</div>

imgタグを最初に書く。

class=”imgbox”

画像と文章の縦方向の中央揃えができる箱。
imgタグを前に書くか後に書くかで画像の位置を変える。
モバイルサイズになると、書いたとおりの順番に縦に並びます。
inwidthがscssで指定されているため幅は94%、margin:24px auto 0。

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

このテキストはimgboxの外のpタグです。このテキストはimg-rightの外のpタグです。このテキストはimg-rightの外のpタグです。

短い文章の場合短い文章の場合短い文章の場合短い文章の場合短い文章の場合短い文章の場合

段落が必要な場合は、pタグなどをdivタグで囲む

こんにちわ
こんにちわこんにちわこんにちわこ
こんにちわこんにちわ
こんにちわこんにちわこんにちわ

短い文章の場合短い文章の場合短い文章の場合短い文章の場合短い文章の場合短い文章の場合

使用例


<div class="imgbox">
	<img src="/image/material/img01.webp" alt="">
	<p>
		テキストを入れるときはpタグを使用する。
	</p>
</div>

pタグを複数入れたい場合は、divタグなどで囲む。
imgbox直下にはimgタグと、ひとつのpタグかdivタグだけにする。


<div class="imgbox">
	<div>
		<p>
			テキストを入れるときはpタグを使用する。
		</p>
		<p>
			テキストを入れるときはpタグを使用する。
		</p>
	</div>
	<img src="/image/material/img01.webp" alt="">
</div>

class=”flex”

ulなどのリストタグに付けてリストアイテムを横並びにする。
デフォルトは中央寄せ。
inwidthがscssで指定されているため幅は94%、margin:24px auto 0。

使用例


<ul class="flex">
	<li><img src="/image/material/img01.webp" alt=""></li>
	<li><img src="/image/material/img01.webp" alt=""></li>
	<li><img src="/image/material/img01.webp" alt=""></li>
	<li><img src="/image/material/img01.webp" alt=""></li>
	<li><img src="/image/material/img01.webp" alt=""></li>
</ul>

class=”flex half”

flexにhalfのオプションを付けると、リストアイテムの幅が50%になる。

class=”flex start”

flexにstartのオプションを付けると、左寄せになる。

class=”flex half start”

flexにhalfにもオプションで左寄せに。

class=”dotbox-●●”

ドットのボーダーの付いた箱。
色は[dotbox-cream][dotbox-pink][dotbox-blue]がある。
inwidthがscssで指定されているため幅は94%、margin:24px auto 0。

dotbox-blue
Bye-byeありがとうさようなら愛しい恋人よあんたちょっといい女だったよその分ズルい女だね

ズルい女
シャ乱Q
作詞：つんく
作曲：つんく

dotbox-pink
今夜会えなかったね寂しかったよ会いたかったよ僕のバースディ今夜バースディ会いたかったよ

ズルい女
シャ乱Q
作詞：つんく
作曲：つんく

dotbox-blue
気持ちいいこともそう真珠もそうあんたのため高級レストランもそう花束もそうあんたのため

使用例


<div class="dotbox-pink">
	<p>
		テキストを入れるときはpタグを使用する。
	</p>
</div>

class=”bg-●●”

背景色が付いた箱。
色は[bg-yellow][bg-white][bg-pink][bg-green][bg-blue]がある。
inwidthがscssで指定されているため幅は94%、margin:24px auto 0。

負けないで
ZARD
作詞：坂井泉水
作曲：織田哲郎

bg-yellow
ふとした瞬間に視線がぶつかる幸福のときめき覚えているでしょパステルカラーの季節に恋したあの日のように輝いてる

bg-white
何が起きたってヘッチャラな顔してどうにかなるサとおどけてみせるの今宵は私と一緒に踊りましょ今もそんなあなたが好きよ

bg-pink
夏が忍び足で近づくよきらめく波が砂浜潤してこだわってたまわりをすべて捨てて今あなたに決めたの

bg-green
好きと合図送る瞳の奥覗いてみるふりしてキスをしたすべてをみせるのが怖いから優しさから逃げてたの

bg-blue
運命の出逢い確かねこんなに自分が変わってくなんて

揺れる想い
ZARD
作詞：坂井泉水
作曲：織田哲郎

使用例


<div class="bg-green">
	<p>
		テキストを入れるときはpタグを使用する。
	</p>
</div>

class=”titlebox-●●”

タイトルが付いた箱。
色は[titlebox-brown][titlebox-pink][titlebox-green][titlebox-blue]がある。
inwidthがscssで指定されているため幅は94%、margin:24px auto 0。

titlebox-pink

ちょこっとLOVE
プッチモニ
作詞：つんく
作曲：つんく

ねぇねぇもっと楽しいことから始めませんか？ほらほらGood！素敵な恋愛いたしましょ

titlebox-brown: おやおやもっとシゲキの強いのがお望みですね？そいつはこまった（ですね）

titlebox-brown: ねぇねぇもっと簡単な言葉でOKですぞほらほらもっと素直な思いを伝えましょ

titlebox-blue

おやおやなんとシゲキが少ない方をお選びですか？謙虚なあなたが（スキ）

ちょこっとLOVE
プッチモニ
作詞：つんく
作曲：つんく

使用例


<dl class="titlebox-blue">
	<dt>タイトル部分の文章</dt>
	<dd>
		<p>
			テキストを入れるときはpタグを使用する。
		</p>
	</dd>
</dl>

class=”balloon”

画像から吹き出しが出ている箱
画像が横にあるときはmax-width:26%になる。
inwidthがscssで指定されているため幅は94%、margin:24px auto 0。

画像の人が何か話しているような錯覚に。
それでは聞いていただきましょう。河島英五で【酒と泪と男と女】

pタグを複数入れたい場合は、divタグなどで囲む。

balloon直下にはimgタグと、ひとつのpタグかdivタグだけにする。

酒と泪と男と女
河島英五
作詞：河島英五
作曲：河島英五

使用例


<div class="balloon">
	<img src="/image/material/img01.webp" alt="">
	<p>
		テキストを入れるときはpタグを使用する。
	</p>
</div>

pタグを複数入れたい場合は、divタグなどで囲む。
balloon直下にはimgタグと、ひとつのpタグかdivタグだけにする。


<div class="balloon">
	<img src="/image/material/img01.webp" alt="">
	<div>
		<p>
			テキストを入れるときはpタグを使用する。
		</p>
		<p>
			テキストを入れるときはpタグを使用する。
		</p>
	</div>
</div>

class=”balloon ●●side”

オプションを入れることで、画像の位置を変更することができる。デフォルトは画像が右。
[leftside][upside][downside]がある。

leftside
忘れてしまいたい事やどうしようもない寂しさに包まれたときに男は酒を飲むのでしょう

upside
忘れてしまいたい事やどうしようもない悲しさに包まれたときに女は泪みせるのでしょう

downside
またひとつ女の方が偉く思えてきたまたひとつ男のずるさが見えてきた

class=”balloon sp●●”

オプションを入れることで、モバイル表示の画像の位置を変更することができる。デフォルトは●●sideで指定した位置（指定が無い場合は右）。
[spup][spdown]がある。

class=”balloon ●●box”

オプションを入れることで、枠の色を変更することができる。デフォルトは$orange-light。
[yellowbox][pinkbox][bluebox][greenbox]がある。

yellowbox
一日二杯の酒を飲みさかなはとくにこだわらずマイクが来たなら微笑んで十八番をひとつ歌うだけ

pinkbox
妻には涙を見せないで子供に愚痴を聞かせずに男の嘆きはほろ酔いで酒場の隅に置いて行く

bluebox
不器用だけれどしらけずに純粋だけど野暮じゃなく上手にお酒を飲みながら一年一度酔っぱらう

greenbox
昔の友には優しくて変わらぬ友と信じ込みあれこれ仕事もあるくせに自分のことは後にする

時代おくれ
河島英五
作詞：河島英五
作曲：河島英五

class=”balloon ●●box ●●side sp●●”

オプションを組み合わせることで、様々な見せ方ができるようになるよ。

class=”arrow_d”

動く矢印の画像をまとめる箱

使用例


<div class="arrow_d">
	<img src="/image/common/arrow_d.gif" alt="">
	<img src="/image/common/arrow_d.gif" alt="">
	<img src="/image/common/arrow_d.gif" alt="">
	<img src="/image/common/arrow_d.gif" alt="">
	<img src="/image/common/arrow_d.gif" alt="">
</div>