_開発ページ

  1. 1. マージンの設定
  2. 2. キャッチコピー
    1. ・キャッチコピー
    2. ・サブキャッチコピー
  3. 3. 見出し
    1. ・h3
    2. ・h4
    3. ・h5
    4. ・h6
  4. 4. テキスト
    1. ・文字寄せ
      1. ・左寄せ
      2. ・中央寄せ
      3. ・右寄せ
    2. ・テキストリンク
    3. ・注意書き
  5. 5. 基本カラム
    1. ・2カラム
      1. ・本文
      2. ・見出し＋本文
      3. ・見出し＋画像＋本文
      4. ・画像＋本文
    2. ・3カラム
      1. ・本文
      2. ・見出し＋本文
      3. ・見出し＋画像＋本文
      4. ・画像＋本文
  1. 6. 画像
    1. ・1カラム
    2. ・2カラム
    3. ・3カラム
  2. 7. 画像＋本文
    1. ・画像：左寄せ
      1. ・画像サイズ：小
      2. ・画像サイズ：中
      3. ・画像サイズ：大
    2. ・画像：右寄せ
      1. ・画像サイズ：小
      2. ・画像サイズ：中
      3. ・画像サイズ：大
  3. 8. メニュー＋画像＋本文＋下層リンク
    1. ・2カラム
    2. ・3カラム
  4. 9. リンク
    1. ・箇条書きリンク
    2. ・関連リンク
    3. ・背景付きボタン
    4. ・アンカーリンク
    5. ・ページ間リンク
    6. ・リンクボタン
  1. 10. 装飾
    1. ・囲み枠
      1. ・タイプ1
      2. ・タイプ2
      3. ・タイプ3
      4. ・タイプ4
      5. ・タイプ5
    2. ・区切り線
      1. ・点線
      2. ・実線
    3. ・引用
    4. ・目次
  2. 11. テーブル
    1. ・通常テーブル
    2. ・段組み変更テーブル
    3. ・下線のみテーブル
    4. ・テーブル挿入用グーグルマップ（レスポンシブ対応）

マージンの設定

マージンの設定は下記のクラスを付与すること。
（例）<p class=”p-catch margin_20“>

マージン0 → margin_0
マージン5 → margin_5
マージン10 → margin_10
マージン15 → margin_15
マージン20 → margin_20
マージン25 → margin_25
マージン30 → margin_30
マージン35 → margin_35
マージン40 → margin_40
マージン45 → margin_45
マージン50 → margin_50
マージン55 → margin_55
マージン60 → margin_60
マージン65 → margin_65
マージン70 → margin_70
マージン75 → margin_75
マージン80 → margin_80
マージン85 → margin_85
マージン90 → margin_90
マージン95 → margin_95
マージン100 → margin_100
マージン150 → margin_150
マージン200 → margin_200
マージン250 → margin_250
マージン300 → margin_300
マージン350 → margin_350
マージン400 → margin_400
マージン450 → margin_450
マージン500 → margin_500

キャッチコピー

キャッチコピーキャッチコピーキャッチコピーキャッチコピーキャッチコピー 

<p class="p-catch margin_20">
	キャッチコピーキャッチコピーキャッチコピーキャッチコピーキャッチコピー
</p>

サブキャッチコピーサブキャッチコピーサブキャッチコピーサブキャッチコピー 

<p class="p-sub-catch margin_20">
	サブキャッチコピーサブキャッチコピーサブキャッチコピーサブキャッチコピー
</p>

見出し

H3大見出し 

<h3 class="style_h3 margin_20">
	H3大見出し
</h3>

H4中身出し 

<h4 class="style_h4 margin_20">
	H4中身出し
</h4>
H5小見出し 
<h5 class="style_h5 margin_20">
	H5小見出し
</h5>
H6最小見出し 
<h6 class="style_h6 margin_20">
	H6最小見出し
</h6>

テキスト

※pタグにマージンを指定しない場合、pタグのデフォルトのマージンは2em（フォントサイズ×2倍のピクセル数）になります。

文字寄せ

テキスト左寄せ。テキスト左寄せ。テキスト左寄せ。テキスト左寄せ。 

<p class="text_left margin_20">
	テキスト左寄せ。テキスト左寄せ。テキスト左寄せ。テキスト左寄せ。
</p>

テキスト中央寄せ。テキスト中央寄せ。テキスト中央寄せ。テキスト中央寄せ。 

<p class="text_center margin_20">
	テキスト中央寄せ。テキスト中央寄せ。テキスト中央寄せ。テキスト中央寄せ。
</p>

テキスト右寄せ。テキスト右寄せ。テキスト右寄せ。テキスト右寄せ。 

<p class="text_right margin_20">
	テキスト右寄せ。テキスト右寄せ。テキスト右寄せ。テキスト右寄せ。
</p>

テキストリンク

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

<p class="margin_20">
	<a href="#">テキストが入ります。テキストが入ります。</a>
</p>

注意書き

※注意書きが入ります。注意書きが入ります。注意書きが入ります。注意書きが入ります。注意書きが入ります。注意書きが入ります。注意書きが入ります。注意書きが入ります。注意書きが入ります。 

<p class="notice margin_20">
	※注意書きが入ります。注意書きが入ります。注意書きが入ります。注意書きが入ります。注意書きが入ります。注意書きが入ります。注意書きが入ります。注意書きが入ります。注意書きが入ります。
</p>

基本カラム

2カラム

★ 本文
ここに左カラムに表示させたい任意のテキストや画像タグを入力します。
ここに右カラムに表示させたい任意のテキストや画像タグを入力します。 
<div class="post_row margin_0">
	<div class="post_col post_col-2 margin_20">
		ここに左カラムに表示させたい任意のテキストや画像タグを入力します。
	</div>
	<div class="post_col post_col-2 margin_20">
		ここに右カラムに表示させたい任意のテキストや画像タグを入力します。
	</div>
</div>
★ 見出し＋本文

H3大見出し

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

H3大見出し

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="post_row margin_0">
	<div class="post_col post_col-2 margin_20">
		<h3 class="style_h3 margin_20">H3大見出し</h3>
		<p class="margin_20">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
	<div class="post_col post_col-2 margin_20">
		<h3 class="style_h3 margin_20">H3大見出し</h3>
		<p class="margin_20">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
</div>
★ 見出し＋画像＋本文

H3大見出し

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

H3大見出し

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="post_row margin_0">
	<div class="post_col post_col-2 margin_20">
		<h3 class="style_h3 margin_20">H3大見出し</h3>
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<p class="margin_20">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
	<div class="post_col post_col-2 margin_20">
		<h3 class="style_h3 margin_20">H3大見出し</h3>
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<p class="margin_20">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
</div>
★ 画像＋本文

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="post_row margin_0">
	<div class="post_col post_col-2 margin_20">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<p class="margin_20">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
	<div class="post_col post_col-2 margin_20">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<p class="margin_20">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
</div>

3カラム

★ 本文
ここに左カラムに表示させたい任意のテキストや画像タグを入力します。
ここに中央カラムに表示させたい任意のテキストや画像タグを入力します。
ここに右カラムに表示させたい任意のテキストや画像タグを入力してください。 
<div class="post_row margin_0">
	<div class="post_col post_col-3 margin_20">
		ここに左カラムに表示させたい任意のテキストや画像タグを入力します。
	</div>

	<div class="post_col post_col-3 margin_20">
		ここに中央カラムに表示させたい任意のテキストや画像タグを入力します。
	</div>

	<div class="post_col post_col-3 margin_20">
		ここに右カラムに表示させたい任意のテキストや画像タグを入力してください。
	</div>
</div>
★ 見出し＋本文

H3大見出し

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

H3大見出し

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

H3大見出し

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="post_row margin_0">
	<div class="post_col post_col-3 margin_20">
		<h3 class="style_h3 margin_20">H3大見出し</h3>
		<p class="margin_20">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>

	<div class="post_col post_col-3 margin_20">
		<h3 class="style_h3 margin_20">H3大見出し</h3>
		<p class="margin_20">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>

	<div class="post_col post_col-3 margin_20">
		<h3 class="style_h3 margin_20">H3大見出し</h3>
		<p class="margin_20">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
</div>
★ 見出し＋画像＋本文

H3大見出し

ダミーテキストダミーテキストダミーテキストダミーテキスト

H3大見出し

ダミーテキストダミーテキストダミーテキストダミーテキスト

H3大見出し

ダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="post_row margin_0">
	<div class="post_col post_col-3 margin_20">
		<h3 class="style_h3 margin_20">H3大見出し</h3>
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<p class="margin_20">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>

	<div class="post_col post_col-3 margin_20">
		<h3 class="style_h3 margin_20">H3大見出し</h3>
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<p class="margin_20">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>

	<div class="post_col post_col-3 margin_20">
		<h3 class="style_h3 margin_20">H3大見出し</h3>
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<p class="margin_20">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
</div>
★ 画像＋本文

ダミーテキストダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="post_row margin_0">
	<div class="post_col post_col-3 margin_20">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<p class="margin_20">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>

	<div class="post_col post_col-3 margin_20">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<p class="margin_20">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>

	<div class="post_col post_col-3 margin_20">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<p class="margin_20">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
</div>

画像

1カラム

画像のキャプション
<div class="post_col-1 margin_20">
	<img src="/wp-content/uploads/2019/12/800x450.png" alt="">
	<div class="post_col_caption text_center">画像のキャプション</div>
</div>

2カラム

画像のキャプション
画像のキャプション
<div class="post_row margin_0">
	<div class="post_col post_col-2 margin_20">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<div class="post_col_caption text_left">画像のキャプション</div>
	</div>
	<div class="post_col post_col-2 margin_20">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<div class="post_col_caption text_right">画像のキャプション</div>
	</div>
</div>

3カラム

画像のキャプション
画像のキャプション
画像のキャプション
<div class="post_row margin_0">
	<div class="post_col post_col-3 margin_20">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<div class="post_col_caption text_left">画像のキャプション</div>
	</div>

	<div class="post_col post_col-3 margin_20">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<div class="post_col_caption text_center">画像のキャプション</div>
	</div>

	<div class="post_col post_col-3 margin_20">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<div class="post_col_caption text_right">画像のキャプション</div>
	</div>
</div>

画像＋本文

画像：左寄せ

★ 画像サイズ：小
【本文回り込み：あり】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト

<div class="c-image c-image--left c-image--small margin_20">
	<div class="c-image__pct">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<div class="c-image__pct__caption text_left">画像のキャプション</div>
	</div>
	<div class="c-image__txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト</p>
	</div>
</div>
【本文回り込み：なし】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト

<div class="c-image c-image--left c-image--small c-image--nowrap margin_20">
	<div class="c-image__pct">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<div class="c-image__pct__caption text_left">画像のキャプション</div>
	</div>
	<div class="c-image__txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト</p>
	</div>
</div>
★ 画像サイズ：中
【本文回り込み：あり】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト

<div class="c-image c-image--left c-image--middle margin_20">
	<div class="c-image__pct">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<div class="c-image__pct__caption text_center">画像のキャプション</div>
	</div>
	<div class="c-image__txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト</p>
	</div>
</div>
【本文回り込み：なし】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト

<div class="c-image c-image--left c-image--middle c-image--nowrap margin_20">
	<div class="c-image__pct">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<div class="c-image__pct__caption text_center">画像のキャプション</div>
	</div>
	<div class="c-image__txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト</p>
	</div>
</div>
★ 画像サイズ：大
【本文回り込み：あり】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="c-image c-image--left c-image--large margin_20">
	<div class="c-image__pct">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<div class="c-image__pct__caption text_right">画像のキャプション</div>
	</div>
	<div class="c-image__txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
</div>
【本文回り込み：なし】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="c-image c-image--left c-image--large c-image--nowrap margin_20">
	<div class="c-image__pct">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<div class="c-image__pct__caption text_right">画像のキャプション</div>
	</div>
	<div class="c-image__txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
</div>

画像：右寄せ

★ 画像サイズ：小
【本文回り込み：あり】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト

<div class="c-image c-image--right c-image--small margin_20">
	<div class="c-image__pct">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<div class="c-image__pct__caption text_left">画像のキャプション</div>
	</div>
	<div class="c-image__txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト</p>
	</div>
</div>
【本文回り込み：なし】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト

<div class="c-image c-image--right c-image--small c-image--nowrap margin_20">
	<div class="c-image__pct">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<div class="c-image__pct__caption text_left">画像のキャプション</div>
	</div>
	<div class="c-image__txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト</p>
	</div>
</div>
★ 画像サイズ：中
【本文回り込み：あり】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト

<div class="c-image c-image--right c-image--middle margin_20">
	<div class="c-image__pct">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<div class="c-image__pct__caption text_center">画像のキャプション</div>
	</div>
	<div class="c-image__txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト</p>
	</div>
</div>
【本文回り込み：なし】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト

<div class="c-image c-image--right c-image--middle c-image--nowrap margin_20">
	<div class="c-image__pct">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<div class="c-image__pct__caption text_center">画像のキャプション</div>
	</div>
	<div class="c-image__txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキストミーテキストダミーテキスト</p>
	</div>
</div>
★ 画像サイズ：大
【本文回り込み：あり】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="c-image c-image--right c-image--large margin_20">
	<div class="c-image__pct">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<div class="c-image__pct__caption text_right">画像のキャプション</div>
	</div>
	<div class="c-image__txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
</div>
【本文回り込み：なし】
画像のキャプション

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="c-image c-image--right c-image--large c-image--nowrap margin_20">
	<div class="c-image__pct">
		<img src="/wp-content/uploads/2019/11/780x440.png" alt="">
		<div class="c-image__pct__caption text_right">画像のキャプション</div>
	</div>
	<div class="c-image__txt">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
</div>
リンクなし
画像

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー

リンク付き
画像

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー

<div class="post_row margin_0">
	<div class="post_col post_col-2 margin_20">
		<div class="p-grid__item">
			<div class="c-menu">
				<span class="c-menu__header"><span>リンクなし</span></span>
				<div class="c-menu__body">
					<div class="c-menu__body__pct">
						<img alt="画像" src="/wp-content/uploads/2019/11/780x440.png">
					</div>
					<div class="c-menu__body__txt">
						<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="post_col post_col-2 margin_20">
		<div class="p-grid__item">
			<div class="c-menu">
				<a href="#" rel="noopener noreferrer" target="_self"><span class="c-menu__header"><span>リンク付き</span></span></a>
				<div class="c-menu__body">
					<div class="c-menu__body__pct">
						<img alt="画像" src="/wp-content/uploads/2019/11/780x440.png">
					</div>
					<div class="c-menu__body__txt">
						<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー</p>
					</div>
				</div>
				<ul class="c-menu__children">
					<li><a href="#" rel="noopener noreferrer" target="_self"><span>下層ページリンク</span></a></li>
					<li><a href="#" rel="noopener noreferrer" target="_self"><span>下層ページリンク下層ページリンク下層ページリンク下層ページリンク</span></a></li>
				</ul>
			</div>
		</div>
	</div>
</div>
リンクなしリンクなしリンクなしリンクなし
画像

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー

リンク付きリンク付きリンク付きリンク付き
画像

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー

リンク付き
画像

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー

<div class="post_row margin_0">
	<div class="post_col post_col-3 margin_20">
		<div class="p-grid__item">
			<div class="c-menu">
				<span class="c-menu__header"><span>リンクなしリンクなしリンクなしリンクなし</span></span>
				<div class="c-menu__body">
					<div class="c-menu__body__pct">
						<img alt="画像" src="/wp-content/uploads/2019/11/780x440.png">
					</div>
					<div class="c-menu__body__txt">
						<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="post_col post_col-3 margin_20">
		<div class="p-grid__item">
			<div class="c-menu">
				<a href="#" target="_self" rel="noopener noreferrer"><span class="c-menu__header"><span>リンク付きリンク付きリンク付きリンク付き</span></span></a>
				<div class="c-menu__body">
					<div class="c-menu__body__pct">
						<img alt="画像" src="/wp-content/uploads/2019/11/780x440.png">
					</div>
					<div class="c-menu__body__txt">
						<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー</p>
					</div>
				</div>
				<ul class="c-menu__children">
					<li><a href="#" target="_self" rel="noopener noreferrer"><span>下層ページリンク</span></a></li>
					<li><a href="#" target="_self" rel="noopener noreferrer"><span>下層ページリンク下層ページリンク下層ページリンク下層ページリンク</span></a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="post_col post_col-3 margin_20">
		<div class="p-grid__item">
			<div class="c-menu">
				<a href="#" target="_self" rel="noopener noreferrer"><span class="c-menu__header"><span>リンク付き</span></span></a>
				<div class="c-menu__body">
					<div class="c-menu__body__pct">
						<img alt="画像" src="/wp-content/uploads/2019/11/780x440.png">
					</div>
					<div class="c-menu__body__txt">
						<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー</p>
					</div>
				</div>
				<ul class="c-menu__children">
					<li><a href="#" target="_self" rel="noopener noreferrer"><span>下層ページリンク</span></a></li>
					<li><a href="#" target="_self" rel="noopener noreferrer"><span>下層ページリンク下層ページリンク下層ページリンク下層ページリンク</span></a></li>
				</ul>
			</div>
		</div>
	</div>
</div>
<div class="c-menu margin_20">
	<ul class="c-menu__children">
		<li><a href="#" target="_self" rel="noopener noreferrer"><span>下層ページリンク</span></a></li>
		<li><a href="#" target="_self" rel="noopener noreferrer"><span>下層ページリンク下層ページリンク下層ページリンク下層ページリンク</span></a></li>
	</ul>
</div>

関連リンク

<div class="relatedLink margin_20" style="padding-bottom: 10px !important;">
	<p class="ttl">関連リンク</p>
	<ul class="linkList01 triangle">
		<li class="not_icon"><a href="#http://www.yahoo.co.jp" rel="noopener noreferrer" target="_blank">三角:Yahoo別窓：アイコン無し</a></li>
		<li class="elink"><a href="#http://www.yahoo.co.jp" rel="noopener noreferrer" target="_blank">三角:Yahoo別窓</a></li>
		<li class="elink"><a href="http://www.yahoo.co.jp" rel="noopener noreferrer" target="_self">三角:Yahoo同窓</a></li>
		<li><a href="/" rel="noopener noreferrer" target="_blank">三角:CMS内別窓</a></li>
		<li><a href="/" rel="noopener noreferrer" target="_self">三角：CMS内同窓</a></li>
		<li class="elink_pdf"><a href="/uploads/files/test.pdf" rel="noopener noreferrer" target="_blank">三角:PDF書類（PDF:223.0 B）</a></li>
		<li class="elink_doc"><a href="/uploads/files/test.docx" rel="noopener noreferrer" target="_blank">三角:Word書類（WORD:224.0 B）</a></li>
		<li class="elink_xls"><a href="/uploads/files/test.xlsx" rel="noopener noreferrer" target="_blank">三角:Excel書類（EXCEL:224.0 B）</a></li>
		<li class="elink_ppt"><a href="/uploads/files/test.pptx" rel="noopener noreferrer" target="_blank">三角:PowerPoint書類（Power Point:224.0 B）</a></li>
	</ul>
</div>
ダミーテキストダミーテキスト 
<div class="btnWrap01-2 margin_20">
	<a class="btnTxt01-2" href="#">ダミーテキストダミーテキスト</a>
</div>
ダミーテキストダミーテキスト 
<div class="btnWrap01-3 margin_20">
	<a class="btnTxt01-3" href="#">ダミーテキストダミーテキスト</a>
</div>
<div class="well margin_20">
	<ul class="pageLinkList pageLinkList02">
		<li><a href="#">テキスト</a></li>
		<li><a href="#">テキスト</a></li>
		<li><a href="#">テキスト</a></li>
		<li><a href="#">テキスト</a></li>
	</ul>
</div>

ページ間リンク 

<div class="well margin_20">
	<ul class="pageLinkList pageLinkList03">
		<li><a href="#">テキスト</a></li>
		<li><a href="#">テキスト</a></li>
		<li><a href="#">テキスト</a></li>
		<li><a href="#">テキスト</a></li>
	</ul>
</div>

フラットボタン

<p class="button margin_20"><a class="q_button" href="#">フラットボタン</a></p>

フラットボタン-L

<p class="button margin_20"><a class="q_button sz_l" href="#">フラットボタン-L</a></p>

フラットボタン-S

<p class="button margin_20"><a class="q_button sz_s" href="#">フラットボタン-S</a></p>

フラットボタン-blue

<p class="button margin_20"><a class="q_button bt_blue" href="#">フラットボタン-blue</a></p>

フラットボタン-green

<p class="button margin_20"><a class="q_button bt_green" href="#">フラットボタン-green</a></p>

フラットボタン-red

<p class="button margin_20"><a class="q_button bt_red" href="#">フラットボタン-red</a></p>

フラットボタン-yellow

<p class="button margin_20"><a class="q_button bt_yellow" href="#">フラットボタン-yellow</a></p>

角丸ボタン

<p class="button margin_20"><a class="q_button rounded" href="#">角丸ボタン</a></p>

角丸ボタン-L

<p class="button margin_20"><a class="q_button rounded sz_l" href="#">角丸ボタン-L</a></p>

角丸ボタン-S

<p class="button margin_20"><a class="q_button rounded sz_s" href="#">角丸ボタン-S</a></p>

ラウンドボタン

<p class="button margin_20"><a class="q_button pill" href="#">ラウンドボタン</a></p>

ラウンドボタン-L

<p class="button margin_20"><a class="q_button pill sz_l" href="#">ラウンドボタン-L</a></p>

ラウンドボタン-S

<p class="button margin_20"><a class="q_button pill sz_s" href="#">ラウンドボタン-S</a></p>

装飾

囲み枠

タイプ1
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 

<p class="well margin_20">
	<span>タイプ1</span><br>
	テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
</p>

タイプ2
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 

<p class="well2 margin_20">
	<span>タイプ2</span><br>
	テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
</p>

タイプ3
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 

<p class="well3 margin_20">
	<span>タイプ3</span><br>
	テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
</p>

タイプ4
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 

<p class="well4 margin_20">
	<span>タイプ4</span><br>
	テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
</p>

タイプ5
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 

<p class="well5 margin_20">
	<span>タイプ5</span><br>
	テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
</p>

区切り線

★ 点線
<hr class="hr dotted margin_20">
★ 実線
<hr class="hr solid margin_20">

引用

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 
<blockquote class="quote margin_20">
	テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
</blockquote>

目次

目次

  1. 1. 目次が入ります目次が入ります
  2. 2. 目次が入ります目次が入ります
    1. ・目次が入ります目次が入ります目次が入ります
    2. ・目次が入ります目次が入ります
  3. 3. 目次が入ります目次が入ります
  4. 4. 目次が入ります目次が入ります
  5. 5. 目次が入ります目次が入ります
<div class="toc margin_20">
	<p>目次</p>
	<ol>
		<li><a href="#anchor6">1. 目次が入ります目次が入ります</a></li>
		<li><a href="#anchor10">2. 目次が入ります目次が入ります</a>
			<ol>
				<li><a href="#anchor38">・目次が入ります目次が入ります</a></li>
				<li><a href="#anchor40">・目次が入ります目次が入ります</a></li>
			</ol>
		</li>
		<li><a href="#anchor19">3. 目次が入ります目次が入ります</a></li>
		<li><a href="#anchor22">4. 目次が入ります目次が入ります</a></li>
		<li><a href="#anchor27">5. 目次が入ります目次が入ります</a></li>
	</ol>
</div>

テーブル

通常テーブル

ヘッダー項目(列1) ヘッダー項目(列2) ヘッダー項目(列3)
ヘッダー項目(行1) 内容が入ります 内容が入ります
ヘッダー項目(行2) 内容が入ります 内容が入ります 
<table class="n-table margin_20">
	<thead>
		<tr>
			<th scope="row">
				ヘッダー項目(列1)
			</th>
			<th scope="col">
				ヘッダー項目(列2)
			</th>
			<th scope="col">
				ヘッダー項目(列3)
			</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">
				ヘッダー項目(行1)
			</th>
			<td>
				内容が入ります
			</td>
			<td>
				内容が入ります
			</td>
		</tr>
		<tr>
			<th scope="row">
				ヘッダー項目(行2)
			</th>
			<td>
				内容が入ります
			</td>
			<td>
				内容が入ります
			</td>
		</tr>
	</tbody>
</table>

段組み変更テーブル

ヘッダー項目(1) 内容が入ります。内容がはいります。内容がはいります。
ヘッダー項目(2) 内容が入ります。内容がはいります。内容がはいります。
ヘッダー項目(3) 内容が入ります。内容がはいります。内容がはいります。 
<div class="c-table margin_20">
	<table class="u-resp-table">
		<tbody>
			<tr>
				<th>
					ヘッダー項目(1)
				</th>
				<td>
					内容が入ります。内容がはいります。内容がはいります。
				</td>
			</tr>
			<tr>
				<th>
					ヘッダー項目(2)
				</th>
				<td>
					内容が入ります。内容がはいります。内容がはいります。
				</td>
			</tr>
			<tr>
				<th>
					ヘッダー項目(3)
				</th>
				<td>
					内容が入ります。内容がはいります。内容がはいります。
				</td>
			</tr>
		</tbody>
	</table>
</div>

下線のみテーブル

メニューが入ります 1,000円
メニューが入ります 2,000円
メニューが入ります 3,000円
メニューが入ります 4,000円 
<table class="l-table margin_20">
	<tbody>
		<tr>
			<td style="width: 70%;>
				メニューが入ります
			</td>
			<td style="width: 30%;>
				1,000円
			</td>
		</tr>
		<tr>
			<td style="width: 70%;>
				メニューが入ります
			</td>
			<td style="width: 30%;>
				2,000円
			</td>
		</tr>
		<tr>
			<td style="width: 70%;>
				メニューが入ります
			</td>
			<td style="width: 30%;>
				3,000円
			</td>
		</tr>
		<tr>
			<td style="width: 70%;>
				メニューが入ります
			</td>
			<td style="width: 30%;>
				4,000円
			</td>
		</tr>
	</tbody>
</table>

テーブル挿入用グーグルマップ（レスポンシブ対応）

住所 〒104-0061 東京都中央区銀座1-8-14 銀座大新ビル５F 
<table class="n-table margin_20">
	<tbody>
		<tr>
			<th style="width: 30%; vertical-align: middle; text-align: center;">
				住所
			</th>
			<td style="width: 70%; vertical-align: middle;">
				〒<span class="LrzXr">104-0061 東京都中央区銀座1-8-14 銀座大新ビル５F</span>
				<div class="ggmap">
					<iframe allowfullscreen="allowfullscreen" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12964.508447545564!2d139.768084!3d35.673872!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x8970a634d744feec!2z5p2x5Lqs6YqA5bqn44K344Oz44K_44OL5q2v56eR5Y-j6IWU5aSW56eR44Kv44Oq44OL44OD44Kv77yP5aSn5a2m5pWZ5o6I44GM6Ki644KL44Kk44Oz44OX44Op44Oz44OI44O76Kaq55-l44KJ44Ga5oqc5q2v44O76aGO6Zai56-A44O75q2v44GO44GX44KK44O76aOf44GE44GX44Gw44KK5rK755mC!5e0!3m2!1sja!2sjp!4v1543389904157" style="border: 0;" width="600" height="201" frameborder="0"></iframe>
				</div>
			</td>
		</tr>
	</tbody>
</table>