サンプルページSample

サンプルページ Sample

（H1）ページタイトル

キャッチ文。このテキストは青文字です。class=”text-catch color-blue”

このテキストはダミーテキストです。どの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。この部分は段落、つまり paragraph です。

このテキストはダミーテキストです。どの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。この部分は段落、つまり paragraph です。このテキストはダミーテキストです。どの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。この部分は段落、つまり paragraph です。

H2小見出しです。

キャッチ文です。このテキストはダミーテキストです。class=”text-catch”

H3小見出しです。

リード文です。このテキストはダミーテキストです。class=”text-lead”

H4小見出しです。

リード文です。このテキストはダミーテキストです。class=”text-lead”

H5小見出しです。

画像の右寄せ/左寄せ

右寄せサンプル

（256*160px）このテキストはダミーテキストです。どの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。この部分は段落、つまり paragraph です。このテキストはダミーテキストです。どの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。この部分は段落、つまり paragraph です。

左寄せサンプル

画像の右寄せ/左寄せ

右寄せサンプル

左寄せサンプル

画像の右寄せ/左寄せ（キャプションあり）

右寄せサンプル（キャプションあり）

左寄せサンプル（キャプションあり）

画像の右寄せ/左寄せ（キャプションあり）

右寄せサンプル（キャプションあり）

左寄せサンプル（キャプションあり）

画像の横並びスタイル

2ブロック : class=”cover” → class=”x2 cap_block”

3ブロック : class=”cover” → class=”x3″

画像は256*160pxです。このテキストはダミーです。

3ブロック : class=”cover” → class=”x3 cap_block”（キャプションあり）

基本設定

タイトルスタイル小見出しです。div class=”headline-h2C”です。

小見出しです。div class=”headline-h3″です。

小見出しです。div class=”headline-h4″です。

基本的なスタイル

強調文字

このテキストはダミーテキストです。強調表示 strongどの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。
この部分は強調表示 strong、つまり b.color-darkblue です。強調表示 emこのテキストはダミーテキストです。

このテキストはダミーテキストです。強調表示 strongどの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。
この部分は装飾表示 span、つまり span.color-rouge です。強調表示 emこのテキストはダミーテキストです。

このテキストはダミーテキストです。強調表示 strongどの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。
この部分は段落、つまり paragraph です。強調表示 emこのテキストはダミーテキストです。

テーブル設定

見出し	見出し	見出し中央寄せ class=”text-center”	見出し右寄せ class=”text-right”
見出し1-1	左寄せ class指定なし	中央寄せ class=”text-center”	右寄せ class=”text-right”
見出し1-1	左寄せ class指定なし	中央寄せ class=”text-center”	右寄せ class=”text-right”
見出し1-1	左寄せ class指定なし	中央寄せ class=”text-center”	右寄せ class=”text-right”

2カラムのテーブル（table class=”table2col”）

見出し class=”th01″	このテキストはダミーテキストです。どの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。このテキストはダミーテキストです。どの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。
見出し class指定なし	このテキストはダミーテキストです。どの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。

横長のテーブル（table class=”tablewide”）

見出し	見出し	見出し	見出し	見出し	見出し	見出し
見出し1-1	内容	内容	内容	内容	内容	内容
見出し1-1	内容	内容	内容	内容	内容	内容
見出し1-1	内容	内容	内容	内容	内容	内容
見出し1-1	内容	内容	内容	内容	内容	内容
見出し1-1	内容	内容	内容	内容	内容	内容

リスト風のテーブル（table class=”tablelist”）

見出し class=”th01″	内容	内容	内容	内容
見出し class指定なし	内容	内容	内容	内容

リスト設定

class=”nums”順序が付いているリスト、つまり ol要素です。
順序が付いているリストです。
順序が付いているリストです。
順序が付いているリストです。

class=”arrows”ここは並列列挙リストです。つまり ul要素です。
ここは並列列挙リストです。ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ここは並列列挙リストです。
ここは並列列挙リストです。
ここは並列列挙リストです。

定義リストのタイトル: 内容ないようナイヨウ。内容ないようナイヨウ。内容ないようナイヨウ。内容ないようナイヨウ。内容ないようナイヨウ。
定義リストのタイトル: 内容ないようナイヨウ。内容ないようナイヨウ。内容ないようナイヨウ。内容ないようナイヨウ。内容ないようナイヨウ。

テキストリンク

このテキストはダミーテキストです。どの要素にスタイルが当たっているか等が一通りチェック出来るような感じになっています。この部分は段落、つまり paragraph です。テキストにリンクを張った場合はこんな感じ。こっちは外部リンクです。

ボタンスタイル

左寄せボタンスタイル：class=”btn”

ボタンスタイル

右寄せボタンスタイル：class=”btn primary”

ボタンスタイル

ボタンスタイル：class=”btn secondary”

ボタンスタイル

アコーディオン

サンプル

ダミーテキスト

ああああああああああああああああああああああああああああああああ

ダミーテキスト

見出し	見出し	見出し中央寄せ【class=”text-center”】	見出し右寄せ【class=”text-right”】
見出し1-1	左寄せ（class指定なし）	中央寄せ【class=”text-center”】	右寄せ【class=”text-right”】
見出し1-1	左寄せ（class指定なし）	中央寄せ【class=”text-center”】	右寄せ【class=”text-right”】
見出し1-1	左寄せ（class指定なし）	中央寄せ【class=”text-center”】	右寄せ【class=”text-right”】

ダミーテキスト

ここは並列列挙リストです。【class=”arrows”】
ここは並列列挙リストです。ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ここは並列列挙リストです。
ここは並列列挙リストです。
ここは並列列挙リストです。

（H1）ページタイトル

H2小見出しです。

H3小見出しです。

H4小見出しです。

H5小見出しです。

画像の右寄せ/左寄せ

右寄せサンプル

左寄せサンプル

画像の右寄せ/左寄せ

右寄せサンプル

左寄せサンプル

画像の右寄せ/左寄せ（キャプションあり）

画像の右寄せ/左寄せ（キャプションあり）

画像の横並びスタイル

CONTACT