OK
HTMLCSSJS

将来設計

TITLE見出しデザイン

デザイン見出し1

デザイン見出し2

デザイン見出し3

デザイン見出し4

デザイン見出し5

デザイン見出し6

デザイン見出し7

COLUMNカラムレイアウト

2カラム


レフトカラムコンテンツ

ライトカラムコンテンツ

3カラム


レフトカラムコンテンツ

センターカラムコンテンツ

ライトカラムコンテンツ

4カラムリスト


  • 4カラムリスト
    SP2カラムリスト

  • 4カラムリスト
    SP2カラムリスト

  • 4カラムリスト
    SP2カラムリスト

  • 4カラムリスト
    SP2カラムリスト

5カラムリスト


  • 5カラムリスト
    SP2カラムリスト

  • 5カラムリスト
    SP2カラムリスト

  • 5カラムリスト
    SP2カラムリスト

  • 5カラムリスト
    SP2カラムリスト

  • 5カラムリスト
    SP2カラムリスト

6カラムリスト


  • 6カラムリスト
    SP2カラムリスト

  • 6カラムリスト
    SP2カラムリスト

  • 6カラムリスト
    SP2カラムリスト

  • 6カラムリスト
    SP2カラムリスト

  • 6カラムリスト
    SP2カラムリスト

  • 6カラムリスト
    SP2カラムリスト

TABLEテーブルレイアウト

横に見出しがあるテーブル

テーブル見出しth 内容td
テーブル見出しth 内容td

上に見出しがあるテーブル

テーブル見出しth テーブル見出しth
内容td 内容td

2カラムテーブル

内容td 内容td
内容td 内容td

3カラムテーブル

内容td 内容td 内容td
内容td 内容td 内容td

4カラムテーブル

内容td 内容td 内容td 内容td
内容td 内容td 内容td 内容td

ANIMATIONアニメーション

FADE IN UP

FADE IN DOWN

FADE IN LEFT

FADE IN RIGHT

1文字ずつのアニメーション

テキストが右から1文字ずつ出てきます

テキストが下から1文字ずつ出てきます

順番に出てくるアニメーション


  • 4カラムリスト
    SP2カラムリスト

  • 4カラムリスト
    SP2カラムリスト

  • 4カラムリスト
    SP2カラムリスト

  • 4カラムリスト
    SP2カラムリスト

  • 4カラムリスト
    SP2カラムリスト

  • 4カラムリスト
    SP2カラムリスト

  • 4カラムリスト
    SP2カラムリスト

  • 4カラムリスト
    SP2カラムリスト

タブコンテンツ

タブコンテンツを他のテーマで使用する場合のコピペコードはこちら

タブ①
タブ②
タブ③

タブ①

キャッチフレーズ

ここに説明文が表示されます。ここに説明文が表示されます。ここに説明文が表示されます。
ここに説明文が表示されます。ここに説明文が表示されます。

タブ②

キャッチフレーズ

ここに説明文が表示されます。ここに説明文が表示されます。ここに説明文が表示されます。
ここに説明文が表示されます。ここに説明文が表示されます。

タブ③

キャッチフレーズ

ここに説明文が表示されます。ここに説明文が表示されます。ここに説明文が表示されます。
ここに説明文が表示されます。ここに説明文が表示されます。

HOVERホバーエフェクト

横にスワイプ

斜めにスワイプ

サークルが広がる

上下2方向から斜めにスワイプ

上下2方向からスワイプ

左右2方向からスワイプ

上下4箇所からスワイプ

中央からスワイプ

zoomボタン

COMMON汎用デザイン

spanタグを使った表組み

味玉ラーメン750円
コーンラーメン750円

tableタグを使った表組み

味玉ラーメン 750円
ニンニクラーメン 750円

※メニュー数が少ない場合は「spanタグを使った表組み」がいい。

FORMコンタクトフォーム

フォームデザイン➀


レスポンシブ時

CUSTOMIZEカスタマイズ

コーダー向け高度なカスタマイズ

TOP