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