スタイルガイド

h2の見出し

h2の見出しです

h3の見出し

h3の見出しです

h4の見出し

h4の見出しです

ボックスデザイン

ボックス1(シンプル

ボックス2(影あり

ボックス3(陰のある

ボックス4(ドット線

ボックス5(繊細二重線

ボックス6(左側ライン

ボックス7(立体枠

ボックス8(白抜き

ボックス9(ビジネス

ランキング用テーブル

同名のボタンあり

ランキング1~3位

ランキング1位

同名のボタンあり

ランキング1位
(ここにパッケージ画像)
  • ポイント1
  • ポイント2
  • ポイント3
  • ポイント4
  • ポイント5
総合評価









項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。


ランキング2位

同名のボタンあり

ランキング2位
(ここにパッケージ画像)
  • ポイント1
  • ポイント2
  • ポイント3
  • ポイント4
  • ポイント5
総合評価









項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。


ランキング3位

同名のボタンあり

ランキング3位
(ここにパッケージ画像)
  • ポイント1
  • ポイント2
  • ポイント3
  • ポイント4
  • ポイント5
総合評価









項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。

画像

画像に影をつける

imgのclassに『sdw1』を追加すると画像に影が付きます。
影の大きさ影の色なども変更可能なので変更したい時はご連絡ください。

【CSS】box-shadowで影をつける方法とサンプル集
https://saruwakakun.com/html-css/basic/box-shadow

※影なし

※影あり

ボタン

表用ボタン

同名のボタンあり

公式ページ >

メイン訴求ボタン(ブルー)

同名のボタンあり

メイン訴求ボタン(オレンジ)

同名のボタンあり

メイン訴求ボタン(グリーン)

同名のボタンあり

メイン訴求ボタン(ピンク)

同名のボタンあり

ボタンや画像にアニメーション効果をつける

【CSS】ぷるぷる動くボタンなど、コピペで使えるアニメーションボタン10種類

↑こちらの記事内にあるアニメーションは全て追加しました

ぷるぷる動く①

classに『purupuru』を追加するとアニメーションします

ぷるぷる動く②

classに『purupuru2』を追加するとアニメーションします

上下に揺れる

classに『yureru-j』を追加するとアニメーションします

左右に揺れる

classに『yureru-s』を追加するとアニメーションします

上下左右に揺れる

classに『yureru-js』を追加するとアニメーションします

もっちり動く

classに『mocchiri』を追加するとアニメーションします

ぺこぺこ凹む

classに『pekopeko』を追加するとアニメーションします

ぱつんと跳ねる

classに『patsun』を追加するとアニメーションします

ぶるりと震える

classに『bururi』を追加するとアニメーションします

ドキドキしてる

classに『dokidoki』を追加するとアニメーションします

◎○△画像

画像:◎

同名のボタンあり

※ランキング用テーブル内で使用時は50px×50pxに変化する
※それ以外だと300px×300px

画像:○

同名のボタンあり

※ランキング用テーブル内で使用時は50px×50pxに変化する
※それ以外だと300px×300px

画像:△

同名のボタンあり

※ランキング用テーブル内で使用時は50px×50pxに変化する
※それ以外だと300px×300px

口コミ

男性の口コミ1~3

同名のボタンあり

男性の口コミ1
男性の口コミ

●テキスト●

男性の口コミ2
男性の口コミ

●テキスト●

男性の口コミ3
男性の口コミ

●テキスト●

女性の口コミ1~3

同名のボタンあり

女性の口コミ1
女性の口コミ

●テキスト●

女性の口コミ2
女性の口コミ

●テキスト●

女性の口コミ3
女性の口コミ

●テキスト●

中央寄せ

中央寄せ

段落余白

1~10まで用意しています

段落余白1 この下


段落余白1 この上


2・3もあります

段落余白4 この下


段落余白4 この上


5・6もあります

段落余白7 この下


段落余白7 この上


8・9もあります

段落余白10 この下


段落余白10 この上

フォント装飾

[F18px]~[F24px]ボタンあり

フォントサイズ18px

フォントサイズ20px

フォントサイズ22px

フォントサイズ24px

マーカー

同名のボタンあり
黄色マーカー

下半分黄色マーカー

下半分ピンクマーカー

色替え:赤

色替え:赤大

色替え:青

色替え:青大

色替え:緑

色替え:緑大

色替え:紫

色替え:紫大

色替え:オレンジ

色替え:オレンジ大