ゆきのふ

WordPressのカスタムHTMLにコピペでOK。モーダルの開き方5種（Fade/Slide/Zoom/Flip/Rotate）をデモ付きで解説。HTML/CSS/JS全文＆コピー機能、背景クリック・ESC対応のアクセシブル実装です。

上にスライドアウトして閉じるモーダルウインドウの作り方 上にスライドアウトして閉じるモーダルウインドウの作り方を紹介します。ボタンをクリックすると画面中央へモーダルウインドウが表示され、閉じるボタンをクリックするとモーダル本体が上方向へスラ...

下にスライドアウトして閉じるモーダルウインドウの作り方 下にスライドアウトして閉じるモーダルウインドウの作り方を紹介します。ボタンをクリックすると画面中央へモーダルウインドウが表示され、閉じるボタンをクリックするとモーダル本体が下方向へスラ...

右にスライドアウトして閉じるモーダルウインドウの作り方 右にスライドアウトして閉じるモーダルウインドウの作り方を紹介します。ボタンをクリックすると画面中央へモーダルウインドウが表示され、閉じるボタンをクリックするとモーダル本体が右方向へスラ...

左にスライドアウトして閉じるモーダルウインドウの作り方 左にスライドアウトして閉じるモーダルウインドウの作り方を紹介します。ボタンをクリックすると画面中央にモーダルウインドウが表示され、閉じるボタンをクリックするとモーダル本体が左方向へ移動...

画面上からスライドインするモーダルウインドウの作り方 画面上からスライドインするモーダルウインドウの作り方を紹介します。モーダルウインドウを表示すると、画面上部から滑らかにスライドしながら表示されるアニメーションを実装するサンプルです。フェ...

画面左からスライドインするモーダルウインドウの作り方 画面左からスライドインするモーダルウインドウの作り方を紹介します。モーダルウインドウを表示すると、画面左側から中央へ向かって滑らかにスライドしながら表示されるサンプルです。通常の中央表示...

画面右からスライドインするモーダルウインドウの作り方 画面右からスライドインするモーダルウインドウの作り方を紹介します。モーダルウインドウを表示すると、画面右側から中央へ向かって滑らかにスライドしながら表示されるサンプルです。通常の中央表示...

画面下からスライドインするボトムシート型モーダルの実装方法を、HTML・CSS・JavaScriptのサンプルコード付きで解説。開閉ボタンや背景クリック、Escキー対応、フォーカス制御まで含め、コピペでそのまま使える実用コードを紹介します。

モーダルウインドウ内のみキー操作可能にする方法 モーダルウインドウ内のみキー操作可能にする方法を紹介します。モーダルウインドウを表示している間は、TabキーやShift+Tabキーで移動できる範囲をモーダル内だけに制限し、背景ページにある入...