レイアウトサンプル｜ラトックシステム公式サイト

大外枠にclass=”r_colum2″を指定することで2列横並びのレイアウトになります。
class=”rp_inner”で各ブロックを区切っています。
テキストは左寄せ”txt_l”、右寄せ”txt_r”、中央寄せ”txt_c”をテキスト毎、あるいは表示エリアごとに指定できます。

外枠のdivにtxt_rで右寄せにしています。

個別にtxt_cで中央寄せにしています。

<div class="r_rayoutbox r_colum2">
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">大外枠にclass="r_colum2"を指定することで2列横並びのレイアウトになります。<br>
			テキストは左寄せ"txt_l"、右寄せ"txt_r"、中央寄せ"txt_c"をテキスト毎、あるいは表示エリアごとに指定できます。</p>
		</div>
	</div>
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term txt_r">
			<p class="mid_txt">外枠のdivにtxt_rで右寄せにしています。</p>
			<p class="mid_txt mt20 txt_c">個別にtxt_cで中央寄せにしています。</p>
		</div>
	</div>
</div>

大外枠にclass=”r_colum3″を指定することで3列横並びのレイアウトになります。

外枠のdivにtxt_rで右寄せにしています。

個別にtxt_cで中央寄せにしています。

<div class="r_rayoutbox r_colum3">
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">大外枠にclass="r_colum3"を指定することで3列横並びのレイアウトになります。</p>
		</div>
	</div>
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term txt_r">
			<p class="mid_txt">外枠のdivにtxt_rで右寄せにしています。</p>
		</div>
	</div>
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt txt_c">個別にtxt_cで中央寄せにしています。</p>
		</div>
	</div>
</div>

大外枠にclass=”r_colum4″を指定することで4列横並びのレイアウトになります。

テキストが入ります。

<div class="r_rayoutbox r_colum4">
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">大外枠にclass="r_colum4"を指定することで4列横並びのレイアウトになります。</p>
		</div>
	</div>
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">テキストが入ります。</p>
		</div>
	</div>
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">テキストが入ります。</p>
		</div>
	</div>
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">テキストが入ります。</p>
		</div>
	</div>
</div>

class=”r_sideimg540″で540pxの画像が横にあるレイアウト。
“r_sideimg-left”で画像を左に、”r_sideimg-right”で右にレイアウトします。
SP版は縦積みで画像上下はソース順です。

<div class="r_rayoutbox r_sideimg540 r_sideimg-left">
	<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
	<div class="rp_term">
		<p class="mid_txt">class="r_sideimg540"で540pxの画像が横にあるレイアウト。</p>
	</div>
</div>

class=”r_sideimg400″で400pxの画像が横にあるレイアウト。

<div class="r_rayoutbox r_sideimg400 r_sideimg-left">
	<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
	<div class="rp_term">
		<p class="mid_txt">class="r_sideimg400"で400pxの画像が横にあるレイアウト。</p>
	</div>
</div>

class=”r_sideimg280″で280pxの画像が横にあるレイアウト。

<div class="r_rayoutbox r_sideimg280 r_sideimg-left">
	<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
	<div class="rp_term">
		<p class="mid_txt">class="r_sideimg280"で280pxの画像が横にあるレイアウト。</p>
	</div>
</div>

class=”r_sideimg200″で200pxの画像が横にあるレイアウト。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

<div class="r_rayoutbox r_sideimg200 r_sideimg-left">
	<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
	<div class="rp_term">
		<p class="mid_txt">class="r_sideimg200"で200pxの画像が横にあるレイアウト。</p>
	</div>
</div>

class=”r_sideimg160″で160pxの画像が横にあるレイアウト。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

<div class="r_rayoutbox r_sideimg160 r_sideimg-left">
	<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
	<div class="rp_term">
		<p class="mid_txt">class="r_sideimg160"で160pxの画像が横にあるレイアウト。</p>
	</div>
</div>

class=”r_sideimg100″で100pxの画像が横にあるレイアウト。

<div class="r_rayoutbox r_sideimg100 r_sideimg-left">
	<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
	<div class="rp_term">
		<p class="mid_txt">class="r_sideimg100"で100pxの画像が横にあるレイアウト。</p>
	</div>
</div>

class=”r_sideimg270_by2″で1行に2つ「270pxの画像が横にあるレイアウト」を並べたレイアウトです。

テキストが入ります。

class=”rp_inner”を増やすと、レイアウトの行を増やせます。

テキストが入ります。

<div class="r_rayoutbox r_sideimg270_by2 r_sideimg-left">
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">class="r_sideimg270_by2"で1行に2つ「270pxの画像が横にあるレイアウト」を並べたレイアウトです。</p>
		</div>
	</div>
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">テキストが入ります。</p>
		</div>
	</div>
</div>

class=”r_sideimg100_by2″で1行に2つ「100pxの画像が横にあるレイアウト」を並べたレイアウトです。

テキストが入ります。

class=”rp_inner”を増やすと、レイアウトの行を増やせます。

テキストが入ります。

<div class="r_rayoutbox r_sideimg100_by2 r_sideimg-left">
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy02.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">class="r_sideimg100_by2"で1行に2つ「100pxの画像が横にあるレイアウト」を並べたレイアウトです。</p>
		</div>
	</div>
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy02.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
		</div>
</div>

class=”r_sideimg120_by3″で1行に3つ「120pxの画像が横にあるレイアウト」を並べたレイアウトです。

テキストが入ります。

class=”rp_inner”を増やすと、レイアウトの行を増やせます。

テキストが入ります。

<div class="r_rayoutbox r_sideimg120_by3 r_sideimg-left">
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">class="r_sideimg120_by3"で1行に3つ「120pxの画像が横にあるレイアウト」を並べたレイアウトです。</p>
		</div>
	</div>
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">テキストが入ります。</p>
		</div>
	</div>
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">テキストが入ります。</p>
		</div>
	</div>
</div>

class=”r_sideimg80_by3″で1行に3つ「80pxの画像が横にあるレイアウト」を並べたレイアウトです。

テキストが入ります。

class=”rp_inner”を増やすと、レイアウトの行を増やせます。

テキストが入ります。

<div class="r_rayoutbox r_sideimg80_by3 r_sideimg-left">
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy02.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">class="r_sideimg80_by3"で1行に3つ「80pxの画像が横にあるレイアウト」を並べたレイアウトです。</p>
		</div>
	</div>
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy02.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">テキストが入ります。</p>
		</div>
	</div>
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy02.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">テキストが入ります。</p>
		</div>
	</div>
</div>

画像が右側のレイアウト

class=”r_sideimg540″で540pxの画像が横にあるレイアウト。
class=”r_sideimg-right”で画像が右側に来るレイアウト。

<div class="r_rayoutbox r_sideimg540 r_sideimg-right">
	<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
	<div class="rp_term">
		<p class="mid_txt">class="r_sideimg540"で540pxの画像が横にあるレイアウト。<br>
			class="r_sideimg-right"で画像が右側に来るレイアウト。</p>
	</div>
</div>

class=”r_sideimg400″で400pxの画像が横にあるレイアウト。
class=”r_sideimg-right”で画像が右側に来るレイアウト。

<div class="r_rayoutbox r_sideimg400 r_sideimg-right">
	<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
	<div class="rp_term">
		<p class="mid_txt">class="r_sideimg400"で400pxの画像が横にあるレイアウト。<br>
			class="r_sideimg-right"で画像が右側に来るレイアウト。</p>
	</div>
</div>

class=”r_sideimg280″で280pxの画像が横にあるレイアウト。
class=”r_sideimg-right”で画像が右側に来るレイアウト。

<div class="r_rayoutbox r_sideimg280 r_sideimg-right">
	<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
	<div class="rp_term">
		<p class="mid_txt">class="r_sideimg280"で280pxの画像が横にあるレイアウト。<br>
			class="r_sideimg-right"で画像が右側に来るレイアウト。</p>
	</div>
</div>

class=”r_sideimg200″で200pxの画像が横にあるレイアウト。
class=”r_sideimg-right”で画像が右側に来るレイアウト。

<div class="r_rayoutbox r_sideimg200 r_sideimg-right">
	<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
	<div class="rp_term">
		<p class="mid_txt">class="r_sideimg200"で200pxの画像が横にあるレイアウト。<br>
			class="r_sideimg-right"で画像が右側に来るレイアウト。</p>
	</div>
</div>

class=”r_sideimg100″で100pxの画像が横にあるレイアウト。
r_sideimg-right”で画像が右側に来るレイアウト。

<div class="r_rayoutbox r_sideimg100 r_sideimg-right">
	<p class="imagebox"><img src="../images/dummy02.jpg" alt=""></p>
	<div class="rp_term">
		<p class="mid_txt">class="r_sideimg100"で100pxの画像が横にあるレイアウト。<br>
			class="r_sideimg-right"で画像が右側に来るレイアウト。</p>
	</div>
</div>

class=”r_sideimg270_by2″で1行に2つ「270pxの画像が横にあるレイアウト」を並べたレイアウトです。

テキストが入ります。

<div class="r_rayoutbox r_sideimg270_by2 r_sideimg-right">
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">class="r_sideimg270_by2"で1行に2つ「270pxの画像が横にあるレイアウト」を並べたレイアウトです。</p>
		</div>
	</div>
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">テキストが入ります。</p>
		</div>
	</div>
</div>

class=”r_sideimg100_by2″で1行に2つ「100pxの画像が横にあるレイアウト」を並べたレイアウトです。

テキストが入ります。

<div class="r_rayoutbox r_sideimg100_by2 r_sideimg-right">
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy02.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">class="r_sideimg270_by2"で1行に2つ「270pxの画像が横にあるレイアウト」を並べたレイアウトです。</p>
		</div>
	</div>
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy02.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">テキストが入ります。</p>
		</div>
	</div>
</div>

class=”r_sideimg120_by3″で1行に3つ「120pxの画像が横にあるレイアウト」を並べたレイアウトです。

テキストが入ります。

<div class="r_rayoutbox r_sideimg120_by3 r_sideimg-right">
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">class="r_sideimg120_by3"で1行に3つ「120pxの画像が横にあるレイアウト」を並べたレイアウトです。</p>
		</div>
	</div>
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">テキストが入ります。</p>
		</div>
	</div>
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">テキストが入ります。</p>
		</div>
	</div>
</div>

class=”r_sideimg80_by3″で1行に3つ「80pxの画像が横にあるレイアウト」を並べたレイアウトです。

テキストが入ります。

<div class="r_rayoutbox r_sideimg80_by3 r_sideimg-right">
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy02.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">class="r_sideimg80_by3"で1行に3つ「80pxの画像が横にあるレイアウト」を並べたレイアウトです。</p>
		</div>
	</div>
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy02.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">テキストが入ります。</p>
		</div>
	</div>
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy02.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">テキストが入ります。</p>
		</div>
	</div>
</div>