タイトル
ここに説明を書きます。サンプルテキスト。
news1-parts
- 2000/00/00その他
- サンプルテキスト。サンプルテキスト。サンプルテキスト。
- 2000/00/00重要
- サンプルテキスト。サンプルテキスト。サンプルテキスト。
- 2000/00/00サービス
- サンプルテキスト。サンプルテキスト。サンプルテキスト。
- 2000/00/00その他
- サンプルテキスト。サンプルテキスト。サンプルテキスト。
- 2000/00/00その他
- サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
news2-parts
- 2000/00/00
- サンプルテキスト。サンプルテキスト。サンプルテキスト。
- 2000/00/00
- サンプルテキスト。サンプルテキスト。サンプルテキスト。
- 2000/00/00
- サンプルテキスト。サンプルテキスト。サンプルテキスト。
- 2000/00/00
- サンプルテキスト。サンプルテキスト。サンプルテキスト。
- 2000/00/00
- サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
タイトル
ここに説明を書きます。サンプルテキスト。
タイトル
ここに説明を書きます。サンプルテキスト。
タイトル
ここに説明を書きます。サンプルテキスト。
タイトル
ここに説明を書きます。サンプルテキスト。
タイトル
ここに説明を書きます。サンプルテキスト。
タイトル
ここに説明を書きます。サンプルテキスト。
タイトル
ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。
通常画像の場合
ここに説明を書きます。サンプルテキスト。
通常画像の場合
ここに説明を書きます。サンプルテキスト。
カラムが余った際に、右ボックス（→）のように背景が真っ黒になってしまうのが嫌なら、ここのボックスのようにlistの外枠だけ残して下さい。
list-catalog1-parts
- サンプル画像を先にDLし、demo-images-list-catalog1フォルダごとフレームフォルダ直下（imagesフォルダと同じ階層）に入れて下さい。おすすめは商品の輪郭にそって切り抜いたpngやwebp画像ですが、jpgなどの通常画像をおいてももちろんOK。
sectionにbleed-x-partsを追加すると、幅いっぱいになります。
タイトル
ここに説明を書きます。サンプルテキスト。
タイトル
ここに説明を書きます。サンプルテキスト。
タイトル
ここに説明を書きます。サンプルテキスト。
タイトル
ここに説明を書きます。サンプルテキスト。
タイトル
ここに説明を書きます。サンプルテキスト。
タイトル
ここに説明を書きます。サンプルテキスト。
タイトル
ここに説明を書きます。サンプルテキスト。
タイトル
ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。
選ばれる理由Why Choose Us
上はh2見出し（title10-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。
理由その１Why Choose Us
上はh3見出し（title7-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。
選ばれる理由Why Choose Us
animationを追加すると下線アニメーションになります。
こに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。
理由その１Why Choose Us
animationを追加すると下線アニメーションになります。
ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。
選ばれる理由Why Choose Us
上はh2見出し（title6-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。
理由その１Why Choose Us
上はh3見出し（title6-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。
list-cource1-parts（コース一覧）
ボックス１個あたりの最低幅が280pxで自動改行。600px以下では1カラム（画像左、テキスト右）。
タイトル
60分
上の時刻アイコンはFont Awesomeで入れ替えができます。用途に応じて変更して下さい。不要なブロックは削除して下さい。
¥8,800（税込）
タイトル
90分
上の時刻アイコンはFont Awesomeで入れ替えができます。用途に応じて変更して下さい。不要なブロックは削除して下さい。
¥12,000（税込）
タイトル
45分
上の時刻アイコンはFont Awesomeで入れ替えができます。用途に応じて変更して下さい。不要なブロックは削除して下さい。
¥6,600（税込）
- ブロックの一番外にある「section」に背景色のclassを足すと、背景色つきタイプでも使えます。色が合わない場合は直接カラーコードを指定して下さい。
section class="bg-parts bg1-light-parts"
section class="bg-parts bg1-parts"
section class="bg-parts bg1-primary-parts"
section class="bg-parts bg1-accent-parts"
親のボックスに対して幅100%になるタイプ。
▼ btn4-parts
ご注文はこちらから今だけ10%OFF
▼ btn4-parts primary
ご注文はこちらから今だけ10%OFF
▼ btn4-parts light
ご注文はこちらから今だけ10%OFF
▼ btn4-parts accent
ご注文はこちらから今だけ10%OFF
テキスト量にあったサイズになるタイプ。fitを追加する。
※ふきだし内の文字数を少なくして下さい。多いと改行されて下のボタンテキストに重なってしまいます。
▼ btn4-parts fit
ご注文はこちらから10%OFF
▼ btn4-parts primary fit
ご注文はこちらから10%OFF
▼ btn4-parts light fit
ご注文はこちらから10%OFF
▼ btn4-parts accent fit
ご注文はこちらから10%OFF
テキスト量にあったサイズになり、左右中央に配置されるタイプ。fit cを追加する。
※ふきだし内の文字数を少なくして下さい。多いと改行されて下のボタンテキストに重なってしまいます。
▼ btn4-parts fit c
ご注文はこちらから10%OFF
▼ btn4-parts primary fit c
ご注文はこちらから10%OFF
▼ btn4-parts light fit c
ご注文はこちらから10%OFF
▼ btn4-parts accent fit c
ご注文はこちらから10%OFF
Font Awesomeのアイコンとセットで使ってもOK
他のアイコンを探したい場合は、Font Awesomeサイトをご覧下さい。
ui-tools-iframe1-parts
GoogleMapの地図を変更する方法はマニュアルをご覧下さい。
