デザインテンプレート

見出し

H2見出し

H3見出し

H4見出し

テキスト

p文字中央

fz-1テキストテキストテキスト

fz-2テキストテキストテキスト

fz-3テキストテキストテキスト

fz-4テキストテキストテキスト

fz-5テキストテキストテキスト

■テキストインデント1文字 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テーブル

テーブル1

体験レッスン ¥6,500
単発レッスン ¥8,000
通常レッスン ¥7,000
入会金 ¥10,000

テーブル2(線なし)

ADDRESS


〒730-0802
広島県広島市中区本川町2丁目6-3
本川リバーサイドビル2F
TEL 082-xxx-xxx
OPEN 11:00~19:00
CLOSED 木曜定休

ボタン

タブ

タブ1
タブ2
タブ3
タブ4
タブ5
タブ1の中身です
タブ2の中身です
タブ3の中身です
タブ4の中身です
タブ5の中身です

アコーディオン

アコーディオン1

アコーディオン1中身

アコーディオン2

アコーディオン2中身

アコーディオン3

アコーディオン3中身

flex

.flex-(justify-content)-(align-items)

.flex-around-center(全幅).gap16

1
2
2

.flex-pc-around-center(PC時のみ).gap16

1
2
2

grid

SPの時全体表示

col2
col6
col4
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1

SPの時半分表示

col-sp2
col-sp6
col-sp4

デザインサンプル

ボタン

ボタン(btn + 動き)

背景が流れる(左から右) 背景が流れる(右から左) 背景が流れる(上から下) 背景が流れる(下から上) 背景が流れる(中央から横全体) 背景が流れる(中央から外) 背景が流れる(中央から縦全体) 背景が流れる(斜め)

ボタン(btn02 + 動き)

くるっと回転(手前に)回転後(手前に) くるっと回転(奥に)回転後(奥に)

ボタン(btnripple)

クリックしたら波紋が広がる





波紋がふわっと広がる


押し込まれる

ボタン(btn03 + 動き)

下に押し込まれる(立体が平面に) 右下に押し込まれる(立体が平面に) 左下に押し込まれる(立体が平面に)

ボタン(float)

影がついて浮き上がる 影が拡がって浮き上がる 上に移動し影がついて浮き上がる

ボタン(btn04 + 動き)

線から塗に変化(上から下) 線から塗に変化(下から上) 線から塗に変化(左から右) 線から塗に変化(右から左) 線から塗に変化(中央から外)


ボタン(btn05 + 動き)

左上と右下から枠線が伸びて塗に 左下⇒右下⇒右上⇒左上⇒左下に枠線が伸びて塗りに 左上と右下から枠線が伸びて塗りに

ボタン(グラデーション)

グラデーションが流れる グラデーションが縮小する グラデーションが拡大する グラデーション線から塗に変化する

ボタン(外の線)

外の線が伸びる 少し出ていた線が伸びる 下線が伸びて背景に変わる 線の上を別の線が伸びる 矢印の線がループして伸縮

ボタン(変化)

塗りから線に変わる 角丸に変わる
きらっと光る
リンクテキストが入る
About私たちについて

ボタン(btn06 + 動き)

矢印が右に移動 矢印が右に移動して現在地に戻る 矢印が回転

ボタン(矢印の移動)

矢印が右に移動する

矢印が右に移動して背景がつく

矢印が縮む

テキストアニメーション

スクロールアニメーション

上下左右から

上から
右から
下から
左から

ふわっと

上から
右から
下から
左から

動く

バウンド
上下にゆらゆら
左右にゆらゆら
左右にふりふり
くるくる
ズーム

スライドショー

3枚表示1枚ずつスライド

央に1枚、左右にちょっとずつ見えるスライドショー、タブレットサイズでは1枚だけ

無限ループスライド・逆向きdir="rtl"