2枚の画像（Before と After）を入れると、左右にスライダーで比べられる HTML / CSS / JavaScript のコードを出力するツールです。 画像をコードの中に埋め込む形（Data URI）と、画像を別ファイルで置く形（ファイル参照）を選べます。 ブラウザで開くだけで動き、読み込んだ画像は外部に送られません。 ━━━━━━━━━━━━━━━━━━━━ ご注意 ━━━━━━━━━━━━━━━━━━━━ 出力したコードは、貼り付け先のサービスやテーマの仕様（scriptタグが使えるかなど）によって、動かないことがあります。 公開する前に、実際のページで表示と操作をご確認ください。 ━━━━━━━━━━━━━━━━━━━━ この無料版で得られるもの ━━━━━━━━━━━━━━━━━━━━ ◆ 1組（Before と After）のスライダーのコード ◆ 画像の入れ方を選べる（Data URIで埋め込む ／ ファイル参照） ◆ ファイル参照のときの、画像の置き場所の指定（例 images/） ◆ 画面上のプレビュー（ドラッグ・クリック・矢印キーの動きを確認できます） ◆ 「HTMLファイルとして保存」で、そのまま開けるHTMLの保存 ◆ 画像は1枚あたり1MBまで ━━━━━━━━━━━━━━━━━━━━ 有料版（500円）で増えるもの ━━━━━━━━━━━━━━━━━━━━ ◆ 複数組のスライダーを、ひとつのコードにまとめて出力 ◆ 縦型（上下で比べる）のスライダー（組ごとに選べます） ◆ Before / After のラベル表示（名前も変えられます） ◆ 線とつまみの色、線の太さ、表示幅の上限、最初の位置の調整 ◆ 画像のサイズ制限なし 有料版はこちらです。https://mall-aibou.booth.pm/items/8927513 ━━━━━━━━━━━━━━━━━━━━ 使い方（3ステップ） ━━━━━━━━━━━━━━━━━━━━ 1. before-after-slider.html をダブルクリックして、ブラウザで開く 2. 「Beforeを選ぶ」「Afterを選ぶ」で画像を選ぶ（画面にドラッグでも選べます） 3. 画像の入れ方を選び、「コードをコピー」を押して、使いたい場所に貼り付ける ━━━━━━━━━━━━━━━━━━━━ 動作環境 ━━━━━━━━━━━━━━━━━━━━ ・Chrome / Edge / Safari の最新版 ・ネット接続は不要です ・外部のサーバーと通信しません。広告もトラッキングもありません ━━━━━━━━━━━━━━━━━━━━ できないこと ━━━━━━━━━━━━━━━━━━━━ ・画像の編集、リサイズ、圧縮はできません。元の画像がそのままコードに入ります ・WordPressなど、各サービスへの組み込みを自動で行うことはできません ・貼り付け先のサービスやテーマで動くことを保証するものではありません ■ 使ってよい範囲 　業務・制作にお使いいただけます。出力したコードは、ご自身のサイトや納品物にお使いいただけます。クレジット表記は不要です。 　ツールのファイルそのものの再配布・販売はご遠慮ください。 ■ 同梱物 　before-after-slider.html ／ README.txt TOOL BOX