<< パーツトップに戻る
パーツ選択
お客様の声ブロック（list-voice1）
幼稚園向けの保護者の声で設定していますが、その他の用途にも使えます。
2色グラデーション背景（bg2）
２色グラデーション。cssで色変更できます。
3色グラデーション背景（bg3）
３色グラデーション。cssで色変更できます。
Gridレイアウト（list-grid1）
3列のGridレイアウト。
gifアニメーション再生（effects-cracker1）
クラッカー画像を先にDLし、demo-images-effects-cracker1フォルダごとフレームフォルダ直下（imagesフォルダと同じ階層）に入れて下さい。動画を準備すれば入れ替えも。
phpフォーム・３項目（form-simple）
お名前、メールアドレス、メッセージのみのシンプルフォーム。ご利用の際はこちらをお読み下さい。
phpフォーム（form-full）
phpフォーム。ご利用の際はこちらをお読み下さい。
お知らせブロック（news1）
アイコン入りのお知らせ用パーツ。
お知らせブロック（news2）
日付とお知らせテキストのみのシンプルなお知らせ用パーツ。
お知らせブロック（news3）
色が交互に切り替わっているお知らせ。
ななめの背景（bg6）
ななめになった背景です。
ふきだしつきボタン（btn4）
ふきだしつきのボタン。
アニメーションボタン（btn5）
マウスオンで横から背景色がスライドで変化。
アニメーションボタン（btn6）
マウスオンで背景の円形が拡大して背景色に。
ウェーブアニメーション背景（bg-wave1-animation）
波(ウェーブ)が動く背景用アニメーション。
ウェーブ背景（bg-wave1）
波(ウェーブ)の背景。
オーバーレイスライド（effects-overlay1）
マウスオンで黒のオーバーレイが上スライドして消えるタイプ。
オーバーレイスライド（effects-overlay2）
マウスオンで黒のオーバーレイが横スライドして消えるタイプ。
オーバーレイスライド（effects-overlay3）
マウスオンでテキストブロックのすりガラス風オーバーレイが横スライドして消えるタイプ。
グラデーションボタン（btn-grad1）
グラデーションのボタン。
グラデーションボタン（btn2）
シンプルなグラデーションボタン。
サムネイル横スライド（effects-slideimg1）
サンプル画像を先にDLし、demo-images-effects-slideimg1フォルダごとフレームフォルダ直下（imagesフォルダと同じ階層）に入れて下さい。deco-slideimg2をテキスト画像にしたタイプ。
サムネイル横スライド（effects-slideimg2-circle）
deco-slideimg2の円形タイプです。
サムネイル横スライド（effects-slideimg2）
サムネイルが横スライドするタイプのスライドショーです。
サムネイル横スライド（effects-slideimg3-circle）
effects-slideimg3の円形タイプです。
サムネイル横スライド（effects-slideimg3）
deco-slideimg2の段違いレイアウトです。
パララックス背景（effects-bg-slideup-movie1）
スクロール量と少しずれて背景動画が動きます。
パララックス背景（effects-bg-slideup1）
スクロール量と少しずれて背景画像が動きます。
フッターブロック（footer1）
フッターメニューの他、ロゴやSNSアイコン入り。
フッターブロック（footer2）
Google Mapと週間tableとSNSアイコン入り。病院、ショップ、飲食店などに。
フッターブロック（footer3）
SNSアイコンと少なめフッターメニュー。
フッターブロック（footer4）
フッターメニュー。メニュー数が多いサイト向け。
ボタン（btn1）
汎用的に使えるボタンパーツです。
光沢ボタン（btn3）
ツヤっとした光沢のあるボタン。
回転アニメーション（effects-spin1）
svg画像を先にDLし、demo-images-effects-spin1フォルダごとフレームフォルダ直下（imagesフォルダと同じ階層）に入れて下さい。円形にテキスト(svg)が回転する装飾用のアニメーション。
枠アニメーション（btn-animation1）
マウスオンで枠線がアニメーションされるボタン。
横スライドテキスト（effects-slidetext1）
テキストを直接htmlに置いたものを横スライドさせたタイプ。
縦書きのサイド設置ボタン（btn-side1）
縦書きのボタン。親要素にrelativeがあるとそちらに対して絶対配置されるので注意して下さい。
背景パターン背景（bg5）
背景パターンを使ったタイプです。
背景画像（bg7）
背景画像を読み込むタイプ。
背景（bg1）
シンプルな単色。※当cssは、デフォルトに入っているので、使う場合はhtmlのコピペだけでOKです。
複雑なグラデーション背景（bg4）
複雑なグラデーション。MESHERを使用して簡単にcssを書き出しています。
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列に。
2列テーブル（ta1）
ストライプ型（ta-stripe1）
テーブル（ta-card1）
価格プラン向け（ta-pricing1）
1週間用テーブル（ta-week1）
クリニックなどの1週間の診療日のお知らせ向けテーブル。
1週間用テーブル（ta-week2）
クリニックなどの1週間の診療日のお知らせ向けテーブル。
2カラム（ui-tools-c2-1）
section内で使う2カラムボックス。
2列テーブル（ta2）
2列テーブル（ta3）
CTAセクション（ui-tools-cta1）
CTA・ボタン誘導セクション用パーツ。
CTAセクション（ui-tools-cta2）
CTA・ボタン誘導セクション用パーツ。マウスオンで小さな円が拡大して背景色に。
Google Map・YouTube読み込み用（ui-tools-iframe1）
アスペクト比固定でGoogle MapをiFrameで埋め込む。YouTube動画にも。
SNSアイコンセット（ui-tools-sns1）
Font Awesomeを使用したSNSアイコンです。
masonry（ui-tools-masonary1）
サムネイルがレンガ状に隙間なく積み重なるレイアウト。特別な設定が必要なので、ご利用の際はこちらをお読み下さい。
sticky風・画像固定（ui-tools-fixed1）
セクションが終わるまで左側の画像ブロックが固定表示されます。ステップ案内などにも。
sticky風・画像固定（ui-tools-fixed2）
スクロール中、画像ブロックがフェードで入れ替わります。ステップ案内などにも。
sticky（ui-tools-sticky1）
セクションが終わるまで左側の見出しが固定表示されます。ステップ案内などに。
お知らせアラート用（ui-tools-alert1）
お知らせ向けのアラートボックス。
イメージマップ（ui-tools-imagemap1）
マップ画像を先にDLし、demo-images-ui-tools-imagemap1フォルダごとフレームフォルダ直下（imagesフォルダと同じ階層）に入れて下さい。地図の上の任意の場所にアイコンを重ねたタイプ。
カレンダー（ui-tools-calender1）
カレンダーです。カレンダーの設定はjsで、レイアウトはcssで調整。
グラデーション見出し・本文セット（title12）
グラデーションの見出し。theme.cssによってはダサい色になってしまうのでその場合は直接カラーコードを設定しなおして下さい。
サムネイルギャラリー（ui-tools-thumbnail-changer1）
複数のサムネイルが並んでいて、クリックすると、メイン画像が入れ替わります。静止画・動画に対応。
サムネイルギャラリー（ui-tools-thumbnail-changer2）
複数のサムネイルが並んでいて、クリックすると、メイン画像が入れ替わります。静止画・動画に対応。
サムネイルギャラリー（ui-tools-thumbnail-changer3）
複数のサムネイルが並んでいて、クリックすると、メイン画像が入れ替わります。静止画・動画に対応。
ステップ案内（ui-tools-step1）
ステップ案内ブロック用。
ステップ案内（ui-tools-step2）
ステップ案内ブロック用。
ステップ案内（ui-tools-step3）
ステップ案内ブロック用。
タイプライターアニメーション見出し・本文セット（title13）
タイプライターアニメーションで出現する見出し。
タブ切り替え（ui-tools-tab1）
タブ切り替えブロック。
告知用ポップアップ（ui-tools-popup1）
3秒後にポップアップ表示します。表示させるまでの秒数はjsで、レイアウトはcssで調整できます。
告知用ポップアップ（ui-tools-popup2）
3秒後にポップアップ表示します。表示させるまでの秒数はjsで、レイアウトはcssで調整できます。
告知用ポップアップ（ui-tools-popup3）
3秒後にポップアップ表示します。表示させるまでの秒数はjsで、レイアウトはcssで調整できます。
日本地図（ui-tools-map1）
日本地図。
横スクロールバー対応テーブル（ta-yoko1）
おすすめプラン紹介などに向いたtable。画面幅が狭くなると横スクロールバーが出ます。
横スクロールバー対応テーブル（ta-yoko2）
列が多いtable用。画面幅が狭くなると横スクロールバーが出ます。
横スクロールバー対応テーブル（ta-yoko3）
プラン比較など。画面幅が狭くなると横スクロールバーが出ます。
汎用レイアウトセット（ui-tools-free1）
使いたいレイアウトだけ残して下さい。
沿革（ui-tools-timeline1）
タイムライン・沿革用パーツ。
簡易検索（ui-tools-search1）
javascriptを使った簡易検索。
縦書き見出し・本文セット（title11）
見出し・本文セット（title10）
見出し・本文セット（title1）
見出し・本文セット（title2）
見出し・本文セット（title3）
見出し・本文セット（title4）
見出し・本文セット（title5）
見出し・本文セット（title6）
見出し・本文セット（title7）
見出し・本文セット（title8）
見出し・本文セット（title9）
開閉ブロック（ui-tools-openclose1）
FAQ用などに使える汎用的な開閉ブロック。
開閉ブロック（ui-tools-openclose2）
FAQ用などに使える汎用的な開閉ブロック。開閉でアイコンが入れ替わるタイプ。
開閉ブロック（ui-tools-openclose3）
FAQ専用の開閉ブロック。
プログレスバーアニメーション（ui-tools-progress1）
0%〜100%（または任意の%）までアニメーションでバーが伸びるタイプのプログレスバー。