一覧ページ用パーツ
htmlボタンはDLしたフレームの html の main 内に、cssボタンは css/parts.css に、jsボタンは js/parts.js にペーストして下さい。
絞り込み検索
一覧ページ用パーツ一覧
選択中のフレーム：エステサロンイメージ（frame1-esthe1-movie）
お客様の声ブロック（list-voice1）
幼稚園向けの保護者の声で設定していますが、その他の用途にも使えます。
html
css
1日のスケジュール用（list-schedule1）
デモでは幼稚園を想定した説明文になっていますが、内容は自由に書き換えて下さい。アイコンはFont Awesomeで入れ替えできます。
html
css
かわいい形のカラムレイアウト（list-mask1-auto）
かわいい形のカラムレイアウト。各ボックスの最大幅250pxの間で自動調整。（画面幅を変更していくと意味がわかります）
html
css
かわいい形のカラムレイアウト（list-mask1）
かわいい形の3カラムレイアウト。mainの幅が900px未満で2列に。
html
css
カラムレイアウト（list1-auto-border）
list1-autoの枠線入りタイプ。
html
css
カラムレイアウト（list1-auto）
カラムレイアウト。各ボックスの最大幅250pxの間で自動調整。（画面幅を変更していくと意味がわかります）
html
css
カラムレイアウト（list1-border）
list1の枠線入りタイプ。
html
css
カラムレイアウト（list1-shadow）
list1の影入りタイプ。
html
css
カラムレイアウト（list1）
3カラムレイアウト。mainの幅が900px未満で2列に。
html
css
カラムレイアウト（list2-auto）
アイコン画像にも向いた3カラムレイアウト。各ボックスの最大幅250pxの間で自動調整。（画面幅を変更していくと意味がわかります）
html
css
カラムレイアウト（list2）
アイコン画像にも向いた3カラムレイアウト。mainの幅が900px未満で2列に。
html
css
コース一覧用（list-cource1）
ボックス１個あたりの最低幅が280pxで自動調整。（画面幅を変更していくと意味がわかります）600px以下では1カラム（画像左・テキスト右）。
html
css
コース一覧用（list-cource2）
ボックス１個あたりの最低幅が260pxで自動調整。（画面幅を変更していくと意味がわかります）600px以下では1カラム。
html
css
スタッフ紹介向け（list-staff1）
ボックス１個あたりの最低幅が220pxで自動調整。（画面幅を変更していくと意味がわかります）600px以下では2カラム。
html
css
ビフォーアフター用（list-before-after1）
アイコン画像を先にDLし、demo-images-list-before-after1フォルダごとフレームフォルダ直下（imagesフォルダと同じ階層）に入れて下さい。
html
css
ビフォーアフター用（list-before-after2）
横並びのビフォーアフターの比較パーツです。
html
css
ビフォーアフター用（list-before-after3）
画像を主役にした横並びのビフォーアフターの比較パーツです。
html
css
ビフォーアフター用（list-before-after4）
吹き出しタイプのビフォーアフターパーツです。お客様の声やFaqに。
html
css
メニューなどのタイトルと価格向け（list-yoko2）
タイトルと価格をセット表示するレイアウト。画面幅900px未満で１列になります。
html
css
ランキング用（list-ranking1）
ランキングアイコンがついた3カラムレイアウト。mainの幅が900px未満で2列に。
html
css
円形のカラムレイアウト（list-circle1-auto）
円形のカラムレイアウト。各ボックスの最大幅250pxの間で自動調整。（画面幅を変更していくと意味がわかります）
html
css
円形のカラムレイアウト（list-circle1）
円形の3カラムレイアウト。mainの幅が900px未満で2列に。
html
css
商品カタログ用（list-catalog1）
サンプル画像を先にDLし、demo-images-list-catalog1フォルダごとフレームフォルダ直下（imagesフォルダと同じ階層）に入れて下さい。おすすめは商品の輪郭にそって切り抜いたpngやwebp画像ですが、jpgなどの通常画像をおいてももちろんOK。
html
css
手動で横スクロール（list-yoko-scroll1）
手動で横スクロールするタイプのボックスです。お客様の声セクションなどにも。
html
css
数字カウンター（list-counter1）
数字カウンター・実績掲載向けパーツ。
html
css
枠アニメーション（list-mask2-auto）
枠がうねうね動くレイアウト。各ボックスの最大幅250pxの間で自動調整。（画面幅を変更していくと意味がわかります）
html
css
枠アニメーション（list-mask2）
枠がうねうね動くレイアウト。mainの幅が900px未満で2列に。
html
css
横長floatレイアウト（list-yoko4-float-border）
list-yoko4-floatの枠線入りタイプ。
html
css
横長floatレイアウト（list-yoko4-float）
テキスト量が多い場合に、画像の下に回り込むfloat版。
html
css
横長レイアウト（list-yoko3-border）
list-yoko3の枠線入りタイプ。
html
css
横長レイアウト（list-yoko3）
画像とテキストが左右に分かれたレイアウト。
html
css
画像左・テキスト右の横長ブロック（list-yoko1-border）
list-yoko1の枠線入りタイプ。
html
css
画像左・テキスト右の横長ブロック（list-yoko1）
画像とテキストの2カラムのレイアウトが2列になっています。画面幅900px未満で１列になります。
html
css
角丸のカラムレイアウト（list-kadomaru1-auto）
角丸のカラムレイアウト。各ボックスの最大幅250pxの間で自動調整。（画面幅を変更していくと意味がわかります）
html
css
角丸のカラムレイアウト（list-kadomaru1）
角丸の3カラムレイアウト。mainの幅が900px未満で2列に。
html
css
価格プラン向け（ta-pricing1）
html
css
ステップ案内（ui-tools-step3）
ステップ案内ブロック用。
html
css
簡易検索（ui-tools-search1）
javascriptを使った簡易検索。
html
css
js
