## 商品一覧

#### 商品名
1,800円

説明文は短めに入力して下さい。沢山詰め込むと表示が途中で切れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

PICK UP

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

SOLD OUT

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

### 商品一覧用サムネイルについて

写真の縦横の比率はある程度揃えて下さい。縦長や横長などランダムに入れると下の文字情報の量によっては情報が途中で切れてしまいます。

各ボックスの高さを変更したい場合はcssフォルダのstyle.cssの、
#main .list a {
のheightの数字を変更して下さい。

## transform指定なしの場合（アニメーション効果なし）

<div class="list">のみの出力例です。

#### 商品名
1,800円

説明文は短めに入力して下さい。沢山詰め込むと表示が途中で切れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

PICK UP

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

SOLD OUT

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

## upスタイル

<div class="list up">とするとこのアニメーション効果になります。

#### 商品名
1,800円

説明文は短めに入力して下さい。沢山詰め込むと表示が途中で切れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

PICK UP

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

SOLD OUT

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

## transform1スタイル

<div class="list transform1">とするとこのアニメーション効果になります。

#### 商品名
1,800円

説明文は短めに入力して下さい。沢山詰め込むと表示が途中で切れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

PICK UP

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

SOLD OUT

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

## leftスタイル

<div class="list left">とするとこのアニメーション効果になります。

#### 商品名
1,800円

説明文は短めに入力して下さい。沢山詰め込むと表示が途中で切れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

PICK UP

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

SOLD OUT

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

## rightスタイル

<div class="list right">とするとこのアニメーション効果になります。

#### 商品名
1,800円

説明文は短めに入力して下さい。沢山詰め込むと表示が途中で切れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

PICK UP

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

SOLD OUT

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

## divタグでなく、中の画像だけに指定してもOKです。

#### 商品名
1,800円

説明文は短めに入力して下さい。沢山詰め込むと表示が途中で切れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

PICK UP

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

SOLD OUT

## オリジナルのアニメーションを作りたい場合は

cssフォルダのinview.cssに、cssで動くアニメーションタグを追加します。
css冒頭の「共通設定」の２箇所にも追加するのを忘れないようご注意下さい。

スタイルを追加したら、jsフォルダのjquery.invie_set.jsにタグを追加して下さい。
既存のタグをコピペして、スタイル名を２箇所入れ替えればOKです。

## transformのアニメーションが動作しない場合

htmlの下部に、
<!--パララックス用ファイル読み込み-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<script src="js/jquery.inview_set.js"></script>
のタグがあるか確認して下さい。

httpsから始まるurlは将来リンク切れを起こす可能性もあります。その際は改めて「jQuery CDN」などでネット検索し、新しいurlに置き換えて下さい。

## おすすめ商品

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

PICK UP

#### 商品名
1,800円

商品の簡単な説明をここに入れます。

SOLD OUT

## Access

TEL:00-0000-0000
受付：00:00〜00:00
定休日：水曜日

↑