株式会社ワールド・アメニティー株式会社
ワールド・アメニティー

非公開

見出しタイトル(H2)

<div class="h2TitleBlock">
	<h2>見出しタイトル(H2)</h2>
</div>

見出しタイトル(h3-1)

<h3 class="h3TitleUnderLine">見出しタイトル(h3-1)</h3>

見出しタイトル(h3-2)

<h3 class="h3TitleBorderLeft">見出しタイトル(h3-2)</h3>

見出しタイトル(h4-1)

<h4 class="h4TitleUnderLine">見出しタイトル(h4-1)</h4>

見出しタイトル(h4-2)

<h4 class="h4TitlePurpleText">見出しタイトル(h4-2)</h4>
<div class="headingNavBlock">
	<div class="headingNav">
		<ul class="headingNav-list">
			<li><a href="#AAA">アンカーメニュー</a></li>
			<li><a href="#BBB">アンカーメニュー</a></li>
			<li><a href="#CCC">アンカーメニュー</a></li>
			<li><a href="#DDD">アンカーメニュー</a></li>
			<li><a href="#EEE">アンカーメニュー</a></li>
			<li><a href="#FFF">アンカーメニュー</a></li>
			<li><a href="#GGG">アンカーメニュー</a></li>
		</ul>
	</div>
</div>

↓それぞれのジャンプ先に置くもの
<a id="AAA" class="anchor"></a>
<a id="BBB" class="anchor"></a>
<a id="CCC" class="anchor"></a>
<a id="DDD" class="anchor"></a>
<a id="EEE" class="anchor"></a>
<a id="FFF" class="anchor"></a>
<a id="GGG" class="anchor"></a>

リストタグ(h3-1)

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
<ul class="checkIconList">
	<li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ</li>
	<li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ</li>
	<li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ</li>
</ul>	

リストタグ(h3-1)

  1. テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
  2. テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
  3. テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
<ol class="numberingList">
	<li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ</li>
	<li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ</li>
	<li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ</li>
</ol>	

テキストリンク(h3-1)

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
<a href="リンク先" class="textLink">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ</a>

テキストテキストテキスト(h3-1)

画像回り込み例

*画像回り込みテキスト*テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

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

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

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

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

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

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

画像回り込み例

*画像回り込みテキスト*テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

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

<div class="imageAndText">
	<div class="image-float">
		<img src="画像ファイルのパス" alt="画像の説明文">
	</div>
	<p>*画像回り込みテキスト*テキストテキストテキストテキストテキスト<span class="blue-underLine">テキストテキストテキスト</span>テキストテキストテキストテキストテキストテキストテキストテキスト<span class="purple-underLine">テキストテキストテキスト</span>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	<p>テキストテキスト<span class="blue-marker">テキストテキストテキストテキスト</span>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<span class="purple-marker">テキストテキストテキストテキスト</span>テキストテキストテキストテキストテキスト</p>
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="imageAndText clear-left">
	<div class="image-float">
		<img src="画像ファイルのパス" alt="画像の説明文">
	</div>
	<p>*画像回り込みテキスト*テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

タイトルタイトルタイトル

背景にテキストを乗せるスタイル。ページ概要を軽く説明する場合など。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="textOverImage" style="background-image:url('背景画像ファイルのパス');">
	<div class="text-area">
		<p class="title">タイトルタイトルタイトル</p>
		<p class="description">背景にテキストを乗せるスタイル。ページ概要を軽く説明する場合など。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</div>						
</div>
●中央に配置
<div class="buttonCenter">
	<a class="regularButton waves" href="リンク先URL">
		<span>別ページへのリンクボタン</span>
	</a>
</div>

●左に配置
<div class="buttonLeft">
	<a class="regularButton waves" href="リンク先URL">
		<span>別ページへのリンクボタン</span>
	</a>
</div>

●右に配置
<div class="buttonRight">
	<a class="regularButton waves" href="リンク先URL">
		<span>別ページへのリンクボタン</span>
	</a>
</div>

●左に配置(大きめボタン)
<div class="buttonLeft">
	<a class="bigButton waves" href="リンク先URL">
		<span>大きめのボタン</span>
	</a>
</div>						

●右に配置(大きめボタン)
<div class="buttonRight">
	<a class="bigButton waves" href="リンク先URL">
		<span>大きめのボタン</span>
	</a>
</div>

2カラム

  • タイトルタイトルタイトル

    画像とタイトルを埋め込んでしまうスタイルの2カラムです。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • タイトルタイトルタイトル

    画像とタイトルを埋め込んでしまうスタイルの2カラムです。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<ul class="titleOverImage-col2">
	<li>
		<div class="title-area" style="background-image:url('背景画像ファイルのパス');">
			<span>タイトルタイトルタイトル</span>
		</div>
		<div class="text-area">
			<p>画像とタイトルを埋め込んでしまうスタイルの2カラムです。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</li>
	<li>
		<div class="title-area" style="background-image:url('背景画像ファイルのパス');">
			<span>タイトルタイトルタイトル</span>
		</div>
		<div class="text-area">
			<p>画像とタイトルを埋め込んでしまうスタイルの2カラムです。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</li>					
</ul>
  • 画像とタイトルは別にするスタイルのサンプル

    タイトルタイトルタイトル

    画像とタイトルは別にするスタイル。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • 画像とタイトルは別にするスタイルのサンプル

    タイトルタイトルタイトル

    画像とタイトルは別にするスタイル。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<ul class="titleUnderImage-col2">
	<li>
		<div class="image-area">
			<img src="画像ファイルのパス" alt="画像の説明文">
		</div>
		<div class="text-area">
			<p class="title">タイトルタイトルタイトル</p>
			<p>画像とタイトルは別にするスタイル。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</li>
	<li>
		<div class="image-area">
			<img src="画像ファイルのパス" alt="画像の説明文">
		</div>
		<div class="text-area">
			<p class="title">タイトルタイトルタイトル</p>
			<p>画像とタイトルは別にするスタイル。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</li>
</ul>

3カラム

  • タイトルタイトルタイトル

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

  • タイトルタイトルタイトル

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

  • タイトルタイトルタイトル

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

<ul class="titleOverImage-col3">
	<li>
		<div class="title-area" style="background-image:url('背景画像ファイルのパス');">
			<span>タイトルタイトルタイトル</span>
		</div>
		<div class="text-area">
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</li>
	<li>
		<div class="title-area" style="background-image:url('背景画像ファイルのパス');">
			<span>タイトルタイトルタイトル</span>
		</div>
		<div class="text-area">
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</li>
	<li>
		<div class="title-area" style="background-image:url('背景画像ファイルのパス');">
			<span>タイトルタイトルタイトル</span>
		</div>
		<div class="text-area">
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</li>
</ul>	
  • 画像とタイトルは別にするスタイルのサンプル

    タイトルタイトルタイトル

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

  • 画像とタイトルは別にするスタイルのサンプル

    タイトルタイトルタイトル

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

  • 画像とタイトルは別にするスタイルのサンプル

    タイトルタイトルタイトル

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

<ul class="titleUnderImage-col3">
	<li>
		<div class="image-area">
			<img src="背景画像ファイルのパス" alt="画像の説明文">
		</div>
		<div class="text-area">
			<p class="title">タイトルタイトルタイトル</p>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</li>
	<li>
		<div class="image-area">
			<img src="背景画像ファイルのパス" alt="画像の説明文">
		</div>
		<div class="text-area">
			<p class="title">タイトルタイトルタイトル</p>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</li>
	<li>
		<div class="image-area">
			<img src="背景画像ファイルのパス" alt="画像の説明文">
		</div>
		<div class="text-area">
			<p class="title">タイトルタイトルタイトル</p>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</li>
</ul>

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

<div class="whiteBox">
	<p><span class="dashedUnderLine">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</span></p>
</div>
th 見出しセル th 見出しセル th 見出しセル
td テキストテキストテキスト td テキストテキストテキスト td テキストテキストテキスト
td テキストテキストテキスト td テキストテキストテキスト td テキストテキストテキスト
td テキストテキストテキスト td テキストテキストテキスト td テキストテキストテキスト
td テキストテキストテキスト td テキストテキストテキスト td テキストテキストテキスト
<table class="purpleTitleTable">
	<tr>
		<th>th 見出しセル</th>
		<th>th 見出しセル</th>
		<th>th 見出しセル</th>						
	</tr>
	<tr>
		<td>td テキストテキストテキスト</td>
		<td>td テキストテキストテキスト</td>
		<td>td テキストテキストテキスト</td>
	</tr>
	<tr>
		<td>td テキストテキストテキスト</td>
		<td>td テキストテキストテキスト</td>
		<td>td テキストテキストテキスト</td>
	</tr>
	<tr>
		<td>td テキストテキストテキスト</td>
		<td>td テキストテキストテキスト</td>
		<td>td テキストテキストテキスト</td>
	</tr>
	<tr>
		<td>td テキストテキストテキスト</td>
		<td>td テキストテキストテキスト</td>
		<td>td テキストテキストテキスト</td>
	</tr>
</table>

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

引用元:http://xxxxx.xx.xx/xxxxxxxxx
<blockquote cite="http://xxxxx.xx.xx/xxxxxxxxx">
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	<cite><a href="http://xxxxx.xx.xx/xxxxxxxxx">引用元:http://xxxxx.xx.xx/xxxxxxxxx</a></cite>
</blockquote>

CONTACT

お問い合わせ

ご質問、ご意見など、
下記お問い合わせフォームより
お気軽にお問い合わせください。

  お問い合わせフォームはこちら

24時間受付

ページの先頭へ移動