デザインテンプレート
見出し
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
アコーディオン1中身
アコーディオン2
アコーディオン2中身
アコーディオン3
アコーディオン3中身
flex
.flex-(justify-content)-(align-items)
.flex-around-center(全幅).gap16
2
.flex-pc-around-center(PC時のみ).gap16
2
grid
SPの時全体表示
SPの時半分表示
デザインサンプル
ボタン
ボタン(btn + 動き)
背景が流れる(左から右) 背景が流れる(右から左) 背景が流れる(上から下) 背景が流れる(下から上) 背景が流れる(中央から横全体) 背景が流れる(中央から外) 背景が流れる(中央から縦全体) 背景が流れる(斜め)ボタン(btn02 + 動き)
くるっと回転(手前に)回転後(手前に) くるっと回転(奥に)回転後(奥に)ボタン(btnripple)
クリックしたら波紋が広がる波紋がふわっと広がる
押し込まれる
ボタン(btn03 + 動き)
下に押し込まれる(立体が平面に) 右下に押し込まれる(立体が平面に) 左下に押し込まれる(立体が平面に)ボタン(float)
影がついて浮き上がる 影が拡がって浮き上がる 上に移動し影がついて浮き上がるボタン(btn04 + 動き)
線から塗に変化(上から下) 線から塗に変化(下から上) 線から塗に変化(左から右) 線から塗に変化(右から左) 線から塗に変化(中央から外)ボタン(btn05 + 動き)
左上と右下から枠線が伸びて塗に 左下⇒右下⇒右上⇒左上⇒左下に枠線が伸びて塗りに 左上と右下から枠線が伸びて塗りにボタン(グラデーション)
グラデーションが流れる グラデーションが縮小する グラデーションが拡大する グラデーション線から塗に変化するボタン(外の線)
外の線が伸びる 少し出ていた線が伸びる 下線が伸びて背景に変わる 線の上を別の線が伸びる 矢印の線がループして伸縮ボタン(変化)
塗りから線に変わる 角丸に変わるきらっと光る
リンクテキストが入る
About私たちについて
ボタン(btn06 + 動き)
矢印が右に移動 矢印が右に移動して現在地に戻る 矢印が回転ボタン(矢印の移動)
矢印が右に移動する矢印が右に移動して背景がつく
矢印が縮む
テキストアニメーション
1文字ずつ表示します1文字ずつ表示します1文字ずつ表示します1文字ずつ表示します1文字ずつ表示します1文字ずつ表示します1文字ずつ表示します1文字ずつ表示します
縦書き
ホバーアニメーション
スクロールアニメーション
上下左右から
ふわっと
動く
スライドショー
3枚表示1枚ずつスライド
央に1枚、左右にちょっとずつ見えるスライドショー、タブレットサイズでは1枚だけ
無限ループスライド・逆向きdir="rtl"