UI・レイアウトパーツ
htmlボタンはDLしたフレームの html の main 内に、cssボタンは css/parts.css に、jsボタンは js/parts.js にペーストして下さい。
絞り込み検索
UI・レイアウトパーツ一覧
選択中のフレーム：エステサロンイメージ（frame1-esthe1-movie）
1日のスケジュール用（list-schedule1）
デモでは幼稚園を想定した説明文になっていますが、内容は自由に書き換えて下さい。アイコンはFont Awesomeで入れ替えできます。
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-counter1）
数字カウンター・実績掲載向けパーツ。
html
css
2カラム（ui-tools-c2-1）
section内で使う2カラムボックス。
html
css
CTAセクション（ui-tools-cta1）
CTA・ボタン誘導セクション用パーツ。
html
css
Google Map・YouTube読み込み用（ui-tools-iframe1）
アスペクト比固定でGoogle MapをiFrameで埋め込む。YouTube動画にも。
html
css
SNSアイコンセット（ui-tools-sns1）
Font Awesomeを使用したSNSアイコンです。
html
css
お知らせアラート用（ui-tools-alert1）
お知らせ向けのアラートボックス。
html
css
イメージマップ（ui-tools-imagemap1）
マップ画像を先にDLし、demo-images-ui-tools-imagemap1フォルダごとフレームフォルダ直下（imagesフォルダと同じ階層）に入れて下さい。地図の上の任意の場所にアイコンを重ねたタイプ。
html
css
カレンダー（ui-tools-calender1）
カレンダーです。カレンダーの設定はjsで、レイアウトはcssで調整。
html
css
js
サムネイルギャラリー（ui-tools-thumbnail-changer1）
複数のサムネイルが並んでいて、クリックすると、メイン画像が入れ替わります。静止画・動画に対応。
html
css
js
サムネイルギャラリー（ui-tools-thumbnail-changer2）
複数のサムネイルが並んでいて、クリックすると、メイン画像が入れ替わります。静止画・動画に対応。
html
css
js
サムネイルギャラリー（ui-tools-thumbnail-changer3）
複数のサムネイルが並んでいて、クリックすると、メイン画像が入れ替わります。静止画・動画に対応。
html
css
js
ステップ案内（ui-tools-step1）
ステップ案内ブロック用。
html
css
ステップ案内（ui-tools-step2）
ステップ案内ブロック用。
html
css
ステップ案内（ui-tools-step3）
ステップ案内ブロック用。
html
css
タブ切り替え（ui-tools-tab1）
タブ切り替えブロック。
html
css
js
日本地図（ui-tools-map1）
日本地図。
html
css
沿革（ui-tools-timeline1）
タイムライン・沿革用パーツ。
html
css
簡易検索（ui-tools-search1）
javascriptを使った簡易検索。
html
css
js
開閉ブロック（ui-tools-openclose1）
FAQ用などに使える汎用的な開閉ブロック。
html
css
js
開閉ブロック（ui-tools-openclose2）
FAQ用などに使える汎用的な開閉ブロック。開閉でアイコンが入れ替わるタイプ。
html
css
js
開閉ブロック（ui-tools-openclose3）
FAQ専用の開閉ブロック。
html
css
js
