サービスページフォーマット

サービスページフォーマット

		
見出しコード

<h1 class="page-title">見出し1見出し1見出し1</h1>
		
	

見出し1見出し1見出し1


基本コンテンツ

left = 左にフロート
right = 右にフロート
mb-0:下方向のマージンを0にする時に付与

<div class="page-contents">
	<h2>見出し2見出し2見出し2見出し2見出し2見出し2見出し2見出し2見出し2見出し2</h2>
	<div class="page-block">
		<img class="left mb-0" src="http://placehold.it/450x350" />
		<p>テキストが入ります。テキストが入ります</p>
	</div>
	<div class="page-block">
		<img class="right mb-0" src="http://placehold.it/350x150" />
		<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</div>
</div>

見出し2見出し2見出し2見出し2見出し2見出し2見出し2見出し2見出し2見出し2

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

見出し2見出し2見出し2見出し2見出し2見出し2見出し2見出し2見出し2見出し2

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

見出し2見出し2見出し2見出し2見出し2見出し2見出し2見出し2見出し2見出し2

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

		
QAコンテンツ

qaにアコーディオン機能を付与
dtに質問内容、ddに回答を記載する

<div class="page-contents">
	<h2>見出し2見出し2見出し2見出し2見出し2</h2>
	<dl class="qa">
		<dt>よくある質問テキストよくある質問テキストよくある質問</dt>
		<dd>回答テキスト回答テキスト回答テキスト回答テキスト</dd>
	</dl>
</div>
		
	

見出し2見出し2見出し2見出し2見出し2見出し2見出し2見出し2見出し2見出し2

よくある質問テキストよくある質問テキストよくある質問テキストよくある質問テキストよくある質問テキストよくある質問テキストよくある質問テキストよくある質問テキストよくある質問テキストよくある質問テキストよくある質問テキストよくある質問テキスト
回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト 回答テキスト回答テキスト回答テキスト
よくある質問テキストよくある質問テキストよくある質問テキストよくある質問テキスト
回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト 回答テキスト回答テキスト回答テキスト
よくある質問テキストよくある質問テキストよくある質問テキストよくある質問テキスト
回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト 回答テキスト回答テキスト回答テキスト
よくある質問テキストよくある質問テキストよくある質問テキストよくある質問テキスト
回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト 回答テキスト回答テキスト回答テキスト
よくある質問テキストよくある質問テキストよくある質問テキストよくある質問テキスト
回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト 回答テキスト回答テキスト回答テキスト
よくある質問テキストよくある質問テキストよくある質問テキストよくある質問テキスト
回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト 回答テキスト回答テキスト回答テキスト
よくある質問テキストよくある質問テキストよくある質問テキストよくある質問テキスト
回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト回答テキスト 回答テキスト回答テキスト回答テキスト
			
会話形式トークコンテンツ

talkで囲み、左側の場合 talk-l 、右側に talk-r を付与する
トーク内容は<p></p>で囲まないと綺麗に表示されない

<div class="page-contents">
	<h2>見出し2見出し2見出し2</h2>
	<div class="talk">
		<div class="talk-l">
			<div class="talk-thumb"><img src="http://placehold.it/100x100" /></div>
			<div class="talk-text"><p>対話形式のテキスト対話形式のテキスト対話形式のテキスト</p></div>
		</div>
		<div class="talk-r">
			<div class="talk-thumb"><img src="http://placehold.it/100x100" /></div>
			<div class="talk-text"><p>対話形式のテキスト対話形式</p></div>
		</div>
	</div>
</div>
			
		

見出し2見出し2見出し2見出し2見出し2見出し2見出し2見出し2見出し2見出し2

対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト

対話形式のテキスト対話形式のテキスト

対話形式のテキスト対話形式

対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト対話形式のテキスト

対話形式のテキスト対話形式対話形式のテキスト対話形式対話形式のテキスト対話形式対話形式のテキスト対話形式対話形式のテキスト対話形式対話形式のテキスト対話形式対話形式のテキスト対話形式対話形式のテキスト対話形式対話形式のテキスト対話形式対話形式のテキスト対話形式

			
ボックスコンテンツ(3分割)

box-3 で囲むと中のコンテンツが3分割される
※スマホでは2分割

<div class="page-contents">
	<div class="box-3">
		<div>
			<img src="http://placehold.it/350x250" />
			<p>テキストテキストテキストテキストテキスト</p>
		</div>
		<div>
			<img src="http://placehold.it/350x250" />
			<p>テキストテキストテキストテキストテキスト</p>
		</div>
		<div>
			<img src="http://placehold.it/350x250" />
			<p>テキストテキストテキストテキストテキスト</p>
		</div>
	</div>
</div>
			
		

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

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

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

			
ボックスコンテンツ(2分割)

box-2 で囲むと中のコンテンツが2分割される

<div class="page-contents">
	<div class="box-2">
		<div>
			<img src="http://placehold.it/350x250" />
			<p>テキストテキストテキストテキストテキスト</p>
		</div>
		<div>
			<img src="http://placehold.it/350x250" />
			<p>テキストテキストテキストテキストテキスト</p>
		</div>
		<div>
			<img src="http://placehold.it/350x250" />
			<p>テキストテキストテキストテキストテキスト</p>
		</div>
		<div>
			<img src="http://placehold.it/350x250" />
			<p>テキストテキストテキストテキストテキスト</p>
		</div>
	</div>
</div>
			
		

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

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

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

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

			
テーブル

<table>
	<tbody>
	<tr>
		<th>ヘッダー</th>
		<td>ヘッダー</td>
	</tr>
	<tr>
		<th>テキスト</th>
		<td>テキスト</td>
	</tr>
	<tr>
		<th>テキストテキスト</th>
		<td>テキストテキストテキストテキスト</td>
	</tr>
	</tbody>
</table>

			
		
ヘッダー ヘッダー
テキスト テキスト
テキストテキスト テキストテキストテキストテキスト
テキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト テキストテキストテキストテキストテキストテキステキストトテキストテキストテキストテキストテキストテキストテキストテキストテキストテキステキストトテキストテキストテキストテキスト
			
テーブル 背景グレイ

<table class="table-gray">
	<thead>
		<tr>
			<th>テキストテキスト</th>
			<th>テキストテキスト</th>
		</tr>
	</thead>
	<tbody>
	<tr>
		<th>ヘッダー</th>
		<td>ヘッダー</td>
	</tr>
	<tr>
		<th>テキスト</th>
		<td>テキスト</td>
	</tr>
	<tr>
		<th>テキストテキストテキストテキスト</th>
		<td>テキストテキストテキストテキストテキストテキステキストトテキストテキストテキストテキストテキストテキストテキストテキストテキストテキステキストトテキストテキストテキストテキスト</td>
	</tr>
	</tbody>
</table>

			
		
テキストテキスト テキストテキスト
ヘッダー ヘッダー
テキスト テキスト
テキストテキスト テキストテキストテキストテキスト
テキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト テキストテキストテキストテキストテキストテキステキストトテキストテキストテキストテキストテキストテキストテキストテキストテキストテキステキストトテキストテキストテキストテキスト
			
定義リスト

<dl>
	<dt>定義リスト</dt>
	<dd>リストの内容リストの内容リストの内容リストの内容</dd>
	<dt>定義リスト</dt>
	<dd>リストの内容リストの内容リストの内容リストの内容</dd>
	<dt>定義リスト</dt>
	<dd>リストの内容リストの内容リストの内容リストの内容</dd>
</dl>
			
		
定義リスト
リストの内容リストの内容リストの内容リストの内容
定義リスト
リストの内容リストの内容リストの内容リストの内容
定義リスト
リストの内容リストの内容リストの内容リストの内容
			
ボタン

btn page-btn の両方を付与する

<a class="btn page-btn" href="#">もっと見る</a>
			
		
もっと見る

webでお困りのことは
ランガレウェブにお任せください。

お問い合わせ