サンプルマークアップ｜株式会社SOW 社名変更キャンペーン

見出し2

heading02

キャッチ

見出し3

見出し4

TEXTTEXTTEXT

オリジナル
ペーパーリングメモ

SPECIAL PRICE

見出し4

TEXTTEXTTEXT

セクション区切り

通常wrapper

TEXTTEXTTEXT

.box.full.narrow_pc

TEXTTEXTTEXT

.box.narrow_pc

.part.wrapper_break_sp_tb

.cont.wrapper

タブレット以下でブレイクアウト

親要素の幅を無視して画面いっぱい

共通パーツ

0120-58-4567

10:00～18:30
土・日曜日

一般テキスト・画像

見出し3

見出し4

だみーぶんしょうですだみーぶんしょうですだみーぶんしょうです
だみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうです

だみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうです

見出し4

見出し5

だみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうです

見出し5

だみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうです

リスト
リスト

リスト
リスト

リスト
リスト
1. ネスト
2. ネスト
- ネスト

リスト

リスト

リスト
リスト

リスト
リスト

リスト
リスト

タイトルリストリストリストリストリストリストリストリストリストリストリストリスト
タイトルタイリストリストリストリストリストリストリストリストリストリストリストリスト
リストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリストリスト

余白調整rowgap_XXpx（5～20px）
余白調整余白調整clmgap_XXpx（5～20px）

リストメイ

リスト
リストメイリストメイ

リストリストリストリストリストリストリストリスト
- 子リスト
- 子リスト
- 子リスト

リストメイ: リスト
リストメイリストメイ: タブレット以上で横に並ぶリスト

キャッチ

だみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうです

ちいさなもじちいさなもじちいさなもじちいさなもじちいさなもじちいさなもじちいさなもじちいさなもじちいさなもじ

だみーぶんしょうですだみーぶんしょうですょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうです

センターテキスト

ライトテキスト

ビッグテキスト

スモールテキスト

だみーぶんしょうですボールドだみーぶんしょうですアクセントだみーぶんしょうですマーカーだみーぶんしょうですだみーぶんしょうですツールチップだみーぶんしょうですツールチップ右表示だみーぶんしょうですビッグテキストだみーぶんしょうですスモールテキスト

エントリーラップ

だみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうです

エントリーラップ

だみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうです

エントリーラップ

だみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうです

リスト
リスト

リスト
リスト

TH	TD
TH	TD

ブロッククオート内テキストブロッククオート内テキスト

ブロッククオート内テキストブロッククオート内テキスト

価格日付電話

価格関連

1,650yen (税込)

1,650.00yen (税込)

日付関連

2100.01.01

電話関連

リンクテキスト

リンク

外部サイトリンク

ページ内リンク

PDFPDF

プルダウンリンク

マーク

p.mark

p > a.mark

p > span.mark

ul.mark_list > li > a
ul.mark_list > li
リンクなし

画像

画像一般

画像CMS自動リサイズ・トリミング

画像レスポンシブ自動変換

SVGインライン

画像カスタム

.max100px（50px刻みで650pxまで対応）

.radius

.border

object_fit　比率

.golden_ratio（黄金比）

.silver_ratio（白銀比）

.wide_ratio（16:9 ワイド）

ボタン

ボタンDEF ボタン幅AUTO ボタン横いっぱいボタンスモール btn_small btn_ss btn_more

ボタンスマホだけ

icon-arrow icon-tel icon-tel_inline ボタンカラー bc_theme ボタンカラー bc_strong ホバー時のカラー逆転ボタンカラー bc_light ボタンカラー bc_reverse

ページャー

SPグループメニュー

MENU MENU MENU

テーブル

一般テーブル

.table


	TH	TH	TH
TH	TD	TD	TD
TH	TD	TD	TD
TH	TD	TD	TD

.table_line

表:名称
TH	TD	TD	TD
TH	TD	TD	TD
TH	TD	TD	TD

block_sp

.table_block_sp

表:名称
TH	TD	TD	TD
TH	TD	TD	TD
TH	TD	TD	TD

.table_block_sp .add_thead

表:名称
	TH_C01	TH_C02	TH_C03
TH_R01	TD01	TD02	TD03
TH_R02	TD01	TD02	TD03

SP横スクロール

表:名称
TH	TD	TD	TD
TH	TD	TD	TD
TH	TD	TD	TD

scroll_horizon

表:名称
TH	TD	TD	TD
TH	TD	TD	TD
TH	TD	TD	TD

table_grid

レイアウト

見出し3

みだし5

だみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうです

Modal_BOX

モーダル

モーダル表示コンテンツ（幅広）

だみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうですだみーぶんしょうです

動画モーダル

モーダル表示コンテンツ1

同一の data-group が複数存在する場合はページ送りを付与

モーダル表示コンテンツ2

同一の data-group が複数存在する場合はページ送りを付与

モーダル表示コンテンツ3

同一の data-group が複数存在する場合はページ送りを付与

モーダル表示コンテンツ4

同一の data-group が複数存在する場合はページ送りを付与

Openclose_BOX

[data-openclose="handle"]に.is-plusでDEF CLOSE

Open_contents

[data-openclose="handle"]に.is-minusでDEF OPEN

data-target指定のない場合は [data-openclose="handle"].nextElementSibling

OPENCLOSE_BUTTON_SP

id="***"を指定すればnext()でなくても動作

テキストが可変

MENU MENU MENU

Tab_BOX

TAB

CONTENTS01

CONTENTS02

CONTENTS03
CONTENTS03

たぶいちたぶいちたぶいちたぶいちたぶいちたぶいちたぶいちたぶいち

たぶにたぶにたぶにたぶにたぶに

たぶさんたぶさんたぶさんたぶさん

CONTENTS01

CONTENTS02

CONTENTS03
CONTENTS03

PCイメージテキストTBイメージテキストSP縦積み

キャプション

見出し4

PCてきすといめーじTBてきすといめーじSPふろーとらいと

キャプション

みだし5

PCいめーじてきすとグリッドTBいめーじてきすとグリッドSPふろーとらいと

キャプション

みだし5

.align_center

キャプション

みだし5

だみーぶんしょうです

イメージギャラリー

簡易版

TEXTTEXTTEXT

機能追加版

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

TEXTTEXTTEXT

サンプルマークアップ

見出し2

見出し3

見出し4

見出し4

セクション区切り

通常wrapper

.box.full.narrow_pc

.box.narrow_pc

.part.wrapper_break_sp_tb

.cont.wrapper

共通パーツ

一般テキスト・画像

見出し3

見出し4

見出し4

見出し5

見出し5

エントリーラップ

エントリーラップ

エントリーラップ

価格日付電話

価格関連

日付関連

電話関連

リンクテキスト

マーク

画像

画像一般

画像CMS自動リサイズ・トリミング

画像レスポンシブ自動変換

SVGインライン

画像カスタム

object_fit 比率

ボタン

ボタン

ページャー

SPグループメニュー

テーブル

一般テーブル

.table

.table_line

block_sp

.table_block_sp

.table_block_sp .add_thead

SP横スクロール

SP横スクロール

scroll_horizon

table_grid

レイアウト

見出し3

みだし5

Modal_BOX

モーダル表示コンテンツ（幅広）

モーダル表示コンテンツ1

モーダル表示コンテンツ2

モーダル表示コンテンツ3

モーダル表示コンテンツ4

Openclose_BOX

Tab_BOX

PCイメージテキストTBイメージテキストSP縦積み

見出し4

PCてきすといめーじTBてきすといめーじSPふろーとらいと

みだし5

みだし5

PCいめーじてきすとグリッドTBいめーじてきすとグリッドSPふろーとらいと

みだし5

みだし5

みだし5

.align_center

みだし5

PCカラム3・TBカラム2・SPスナップwithドット

スライド01

スライド02

スライド03

イメージギャラリー

簡易版

機能追加版

ピンチズーム

スライダー

object_fit　比率