左にスライドアウトして閉じるモーダルウインドウの作り方
左にスライドアウトして閉じるモーダルウインドウの作り方を紹介します。ボタンをクリックすると画面中央にモーダルウインドウが表示され、閉じるボタンをクリックするとモーダル本体が左方向へ移動しながら非表示になります。HTML・CSS・JavaScriptだけで実装できるため、外部ライブラリを使わずに動きのあるモーダルUIを作りたい場合に利用できます。
このサンプルでは、モーダルを開く処理、閉じる処理、閉じるときだけ左へスライドさせる処理をJavaScriptで切り替えています。CSSでは表示時の位置や背景オーバーレイ、スライドアウト時の移動量、透明度、アニメーション時間を指定しています。閉じる動作に少し変化を付けられるため、お知らせ画面や確認画面、管理画面の通知表示などにも使いやすい構成です。
お問い合わせ画面、会員サイト、ECサイトの確認メッセージ、管理画面の案内表示など、ユーザーに一時的な情報を見せたい場面で活用できます。モーダル内のタイトルや本文、ボタンの文言はHTMLから変更でき、背景色・余白・角丸・影・スライド速度などはCSSで調整できます。基本的なモーダルに閉じるアニメーションを加えたい初心者にも導入しやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「モーダルを開く」をクリックするとモーダルが表示されます。「閉じる」をクリックすると左へスライドアウトして閉じます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>左にスライドアウトして閉じるモーダルウインドウ</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- モーダル表示エリア -->
<div class="left-slide-out-modal-window_wrap">
<!-- タイトル -->
<h1 class="left-slide-out-modal-window_title">
左にスライドアウトするモーダル
</h1>
<!-- 説明文 -->
<p class="left-slide-out-modal-window_text">
閉じるボタンをクリックすると、モーダルが左方向へスライドしながら閉じます。
</p>
<!-- モーダルを開くボタン -->
<button
class="left-slide-out-modal-window_open"
type="button"
data-left-slide-out-modal-window-open>
モーダルを開く
</button>
</div>
<!-- モーダル背景 -->
<div
class="left-slide-out-modal-window_overlay"
data-left-slide-out-modal-window-overlay>
<!-- モーダル本体 -->
<div
class="left-slide-out-modal-window_modal"
role="dialog"
aria-modal="true"
aria-labelledby="left-slide-out-modal-window-title"
data-left-slide-out-modal-window-modal>
<!-- モーダルタイトル -->
<h2
id="left-slide-out-modal-window-title"
class="left-slide-out-modal-window_modal-title">
モーダルタイトル
</h2>
<!-- モーダル本文 -->
<p class="left-slide-out-modal-window_modal-text">
これは左にスライドアウトして閉じるモーダルウインドウです。閉じるボタンをクリックすると、左方向へ移動しながら非表示になります。
</p>
<!-- モーダルを閉じるボタン -->
<button
class="left-slide-out-modal-window_close"
type="button"
data-left-slide-out-modal-window-close>
閉じる
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。 HTMLでモーダルウインドウの画面構成を作成し、CSSでレイアウトやスライドアウトアニメーションを設定、JavaScriptでモーダルの表示・左へスライドしながら閉じる動作を実装しています。 ファイルごとに役割を分けているため、デザインや動きを個別に編集しやすく、初心者でも構成を理解しながらカスタマイズしやすいサンプルです。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
・index.html：モーダルウインドウ本体、タイトル、説明文、開くボタン、閉じるボタンなど、画面に表示するHTMLを記述します。
・style.css：画面レイアウト、背景色、文字サイズ、余白、ボタン、モーダルのデザイン、左へスライドアウトするアニメーションを設定します。
・script.js：モーダルを開く処理、閉じる処理、左へスライドアウトした後にモーダルを非表示へ切り替える処理を実装しています。
設置方法・使い方
① sampleフォルダを作成します。
② index.html・style.css・script.jsの3ファイルを配置します。
③ sample/index.htmlをブラウザで開きます。
④ 「モーダルを開く」をクリックするとモーダルが表示され、「閉じる」をクリックすると左へスライドしながら閉じる動作を確認できます。
カスタマイズできる内容
・index.htmlでは、タイトル、説明文、ボタンの文字などの表示内容を自由に変更できます。
・style.cssでは、モーダルの色、サイズ、余白、角丸、影、背景オーバーレイの色などを変更できます。
・style.cssの「transform:translateX(-120px);」を変更すると、閉じる時の移動距離を調整できます。
・script.jsでは、開閉処理やアニメーション終了後の処理を変更できます。
数値調整
・style.cssの「transition:transform .35s ease, opacity .35s ease;」の「.35」は0.35秒を表します。値を大きくするとゆっくり閉じ、小さくすると速く閉じます。
・style.cssの「transform:translateX(-120px);」の「120」は左へ移動する距離です。値を大きくするとより遠くまでスライドします。
・script.jsの「setTimeout(…,350);」の「350」は350ミリ秒（0.35秒）を表します。CSSのアニメーション時間と同じ値に設定してください。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssで「width:100%;」「max-width:420px;」「padding:20px;」を設定しているため、画面サイズに応じてモーダルの幅や余白が自動調整されます。また、640px以下では余白を変更するメディアクエリを用意しているため、スマートフォン・タブレット・PCでもレイアウトが崩れにくく利用できます。
コメント