レイアウトサンプル（ボーダー付き）｜ラトックシステム公式サイト

大外枠のclassにr_colum2とr_borderを指定することで枠のある2列横並びのレイアウトになります。

テキストが入ります。

<div class="r_rayoutbox r_colum2 r_border">
	<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とr_borderを指定することで枠のある2列横並びのレイアウトになります。</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_colum3とr_borderを指定することで枠のある3列横並びのレイアウトになります。

テキストが入ります。

<div class="r_rayoutbox r_colum3 r_border">
	<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とr_borderを指定することで枠のある3列横並びのレイアウトになります。</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_colum4とr_borderを指定することで枠のある4列横並びのレイアウトになります。

テキストが入ります。

<div class="r_rayoutbox r_colum4 r_border">
	<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とr_borderを指定することで枠のある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とr_borderで540pxの画像が横にある枠付きのレイアウト。
SP版は縦積みで画像上下はソース順です。

<div class="r_rayoutbox r_sideimg540 r_sideimg-left r_border">
	<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
	<div class="rp_term">
		<p class="mid_txt">classにr_sideimg540とr_borderで540pxの画像が横にある枠付きのレイアウト。<br>
			SP版は縦積みで画像上下はソース順です。</p>
	</div>
</div>

classにr_sideimg400とr_borderで400pxの画像が横にある枠付きのレイアウト。

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

classにr_sideimg280とr_borderで280pxの画像が横にある枠付きのレイアウト。

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

classにr_sideimg200とr_borderで200pxの画像が横にある枠付きのレイアウト。

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

classにr_sideimg100とr_borderで100pxの画像が横にある枠付きのレイアウト。

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

classにr_sideimg270_by2とr_borderを設定することで1行に枠付きの「270pxの画像が横にあるレイアウト」を2つ並べたレイアウトです。

テキストが入ります。

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

テキストが入ります。

<div class="r_rayoutbox r_sideimg270_by2 r_sideimg-left r_border">
	<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とr_borderを設定することで1行に枠付きの「270pxの画像が横にあるレイアウト」を2つ並べたレイアウトです。</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とr_borderを設定することで1行に枠付きの「100pxの画像が横にあるレイアウト」を2つ並べたレイアウトです。

テキストが入ります。

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

テキストが入ります。

<div class="r_rayoutbox r_sideimg100_by2 r_sideimg-left r_border">
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">classにr_sideimg100_by2とr_borderを設定することで1行に枠付きの「100pxの画像が横にあるレイアウト」を2つ並べたレイアウトです。</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_sideimg120_by3とr_borderを設定することで1行に枠付きの「120pxの画像が横にあるレイアウト」を3つ並べたレイアウトです。

テキストが入ります。

<div class="r_rayoutbox r_sideimg120_by3 r_sideimg-left r_border">
	<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とr_borderを設定することで1行に枠付きの「120pxの画像が横にあるレイアウト」を3つ並べたレイアウトです。</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とr_borderを設定することで1行に枠付きの「80pxの画像が横にあるレイアウト」を3つ並べたレイアウトです。

テキストが入ります。

<div class="r_rayoutbox r_sideimg80_by3 r_sideimg-left r_border">
	<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とr_borderを設定することで1行に枠付きの「80pxの画像が横にあるレイアウト」を3つ並べたレイアウトです。</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とr_borderで540pxの画像が横にある枠付きのレイアウト。SP版は縦積みで画像上下はソース順です。
class=”r_sideimg-right”で画像が右側に来るレイアウト。

<div class="r_rayoutbox r_sideimg540 r_sideimg-right r_border">
	<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
	<div class="rp_term">
		<p class="mid_txt">classにr_sideimg540とr_borderで540pxの画像が横にある枠付きのレイアウト。SP版は縦積みで画像上下はソース順です。<br>
			class="r_sideimg-right"で画像が右側に来るレイアウト。</p>
	</div>
</div>

classにr_sideimg400とr_borderで400pxの画像が横にある枠付きのレイアウト。SP版は縦積みで画像上下はソース順です。
class=”r_sideimg-right”で画像が右側に来るレイアウト。

<div class="r_rayoutbox r_sideimg400 r_sideimg-right r_border">
	<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
	<div class="rp_term">
		<p class="mid_txt">classにr_sideimg400とr_borderで400pxの画像が横にある枠付きのレイアウト。SP版は縦積みで画像上下はソース順です。<br>
			class="r_sideimg-right"で画像が右側に来るレイアウト。</p>
	</div>
</div>

classにr_sideimg280とr_borderで280pxの画像が横にある枠付きのレイアウト。SP版は縦積みで画像上下はソース順です。
class=”r_sideimg-right”で画像が右側に来るレイアウト。

<div class="r_rayoutbox r_sideimg280 r_sideimg-right r_border">
	<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
	<div class="rp_term">
		<p class="mid_txt">classにr_sideimg280とr_borderで280pxの画像が横にある枠付きのレイアウト。SP版は縦積みで画像上下はソース順です。<br>
			class="r_sideimg-right"で画像が右側に来るレイアウト。</p>
	</div>
</div>

classにr_sideimg200とr_borderで200pxの画像が横にある枠付きのレイアウト。SP版は縦積みで画像上下はソース順です。
class=”r_sideimg-right”で画像が右側に来るレイアウト。

<div class="r_rayoutbox r_sideimg200 r_sideimg-right r_border">
	<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
	<div class="rp_term">
		<p class="mid_txt">classにr_sideimg200とr_borderで200pxの画像が横にある枠付きのレイアウト。SP版は縦積みで画像上下はソース順です。<br>
			class="r_sideimg-right"で画像が右側に来るレイアウト。</p>
	</div>
</div>

classにr_sideimg100とr_borderで100pxの画像が横にある枠付きのレイアウト。SP版は縦積みで画像上下はソース順です。
class=”r_sideimg-right”で画像が右側に来るレイアウト。

<div class="r_rayoutbox r_sideimg100 r_sideimg-right r_border">
	<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
	<div class="rp_term">
		<p class="mid_txt">classにr_sideimg100とr_borderで100pxの画像が横にある枠付きのレイアウト。SP版は縦積みで画像上下はソース順です。<br>
			class="r_sideimg-right"で画像が右側に来るレイアウト。</p>
	</div>
</div>

classにr_sideimg270_by2とr_borderで1行に枠付きの「270pxの画像が横にあるレイアウト」を2つ並べたレイアウトです。 r_sideimg-rightで画像が右側に来るレイアウト。

テキストが入ります。

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

テキストが入ります。

<div class="r_rayoutbox r_sideimg270_by2 r_sideimg-right r_border">
	<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とr_borderで1行に枠付きの「270pxの画像が横にあるレイアウト」を2つ並べたレイアウトです。
			r_sideimg-rightで画像が右側に来るレイアウト。</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とr_borderで1行に枠付きの「100pxの画像が横にあるレイアウト」を2つ並べたレイアウトです。 r_sideimg-rightで画像が右側に来るレイアウト。

テキストが入ります。

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

テキストが入ります。

<div class="r_rayoutbox r_sideimg100_by2 r_sideimg-right r_border">
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">classにr_sideimg100_by2とr_borderで1行に枠付きの「100pxの画像が横にあるレイアウト」を2つ並べたレイアウトです。
			r_sideimg-rightで画像が右側に来るレイアウト。</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_sideimg120_by3とr_borderで1行に枠付きの「120pxの画像が横にあるレイアウト」を3つ並べたレイアウトです。 r_sideimg-rightで画像が右側に来るレイアウト。

テキストが入ります。

<div class="r_rayoutbox r_sideimg120_by3 r_sideimg-right r_border">
	<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とr_borderで1行に枠付きの「120pxの画像が横にあるレイアウト」を3つ並べたレイアウトです。
			r_sideimg-rightで画像が右側に来るレイアウト。</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とr_borderで1行に枠付きの「80pxの画像が横にあるレイアウト」を3つ並べたレイアウトです。 r_sideimg-rightで画像が右側に来るレイアウト。

テキストが入ります。

<div class="r_rayoutbox r_sideimg80_by3 r_sideimg-right r_border">
	<div class="rp_inner">
		<p class="imagebox"><img src="../images/dummy01.jpg" alt=""></p>
		<div class="rp_term">
			<p class="mid_txt">classにr_sideimg80_by3とr_borderで1行に枠付きの「80pxの画像が横にあるレイアウト」を3つ並べたレイアウトです。
			r_sideimg-rightで画像が右側に来るレイアウト。</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>