左から表示・右へ閉じるモーダルウインドウの作り方
左から表示・右へ閉じるモーダルウインドウをHTML・CSS・JavaScriptで作る方法を紹介します。モーダルを開くと画面左側から中央へスライドしながら表示され、閉じると右方向へ移動しながら非表示になるサンプルです。表示時と閉じる時で異なる移動方向を設定できるため、画面遷移や操作の流れを意識したUIを簡単に実装できます。
このサンプルでは、HTMLでモーダルの構造を作成し、CSSで左右へ移動するアニメーションを設定、JavaScriptで開閉処理を行っています。モーダルのタイトルや本文、ボタンの文字、移動距離、アニメーション時間、背景の濃さなどはコードを書き換えるだけで自由にカスタマイズできます。お問い合わせ画面や管理画面、設定画面、会員サイトなど、さまざまなWebサイトで利用できます。
レスポンシブにも対応しているため、スマートフォン・タブレット・PCでもレイアウトが崩れにくく、そのまま動作確認できます。左右へスライドする開閉アニメーションを実装したい方や、コピペですぐ使えるモーダルウインドウを探している方におすすめのサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「モーダルを開く」をクリックすると左から表示され、「閉じる」をクリックすると右へスライドしながら閉じます。
コードをコピーして使おう！
<!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="modal-slide-left-close_wrap">
<!-- タイトル -->
<div class="modal-slide-left-close_title">
左から表示・右へ閉じるモーダル
</div>
<!-- 説明文 -->
<p class="modal-slide-left-close_text">
モーダルは左からスライドして表示され、閉じると右へスライドして閉じます。
</p>
<!-- モーダルを開くボタン -->
<button
class="modal-slide-left-close_open"
type="button"
data-modal-slide-left-close-open>
モーダルを開く
</button>
</div>
<!-- モーダル背景 -->
<div
class="modal-slide-left-close_overlay"
data-modal-slide-left-close-overlay>
<!-- モーダル本体 -->
<div
class="modal-slide-left-close_modal"
role="dialog"
aria-modal="true"
aria-labelledby="modal-slide-left-close-title"
data-modal-slide-left-close-modal>
<!-- モーダルタイトル -->
<div
class="modal-slide-left-close_modal-title"
id="modal-slide-left-close-title">
モーダルタイトル
</div>
<!-- モーダル本文 -->
<p class="modal-slide-left-close_modal-text">
左から表示され、右へスライドして閉じるアニメーションを確認できます。
</p>
<!-- モーダルを閉じるボタン -->
<button
class="modal-slide-left-close_close"
type="button"
data-modal-slide-left-close-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フォルダへ配置します。
③ sample/index.htmlをブラウザで開きます。
④ 「モーダルを開く」をクリックすると、モーダルが左から表示されます。
⑤ 「閉じる」をクリックすると、モーダルが右へスライドしながら閉じます。
カスタマイズできる内容
・index.htmlでは、ページタイトル、説明文、モーダルタイトル、本文、ボタンの文字を自由に変更できます。
・style.cssでは、モーダルの横幅、背景色、文字色、余白、角丸、影、ボタンの色、背景オーバーレイの濃さを変更できます。
・style.cssの「translateX(-120px)」を変更すると、左から表示される移動距離を調整できます。
・style.cssの「translateX(120px)」を変更すると、右へ閉じる移動距離を調整できます。
・style.cssの「max-width:420px;」を変更すると、モーダル本体の最大横幅を調整できます。
数値調整
・style.cssの「animation:modal-slide-left-close_open .45s ease forwards;」の「.45s」は0.45秒を表します。値を大きくすると表示がゆっくりになり、小さくすると速く表示されます。
・style.cssの「animation:modal-slide-left-close_close .45s ease forwards;」の「.45s」は0.45秒を表します。値を大きくするとゆっくり閉じ、小さくすると速く閉じます。
・script.jsの「setTimeout(…,450);」の「450」は450ミリ秒（0.45秒）を表します。CSSのアニメーション時間と同じ値に設定してください。
・style.cssの「translateX(-120px)」「translateX(120px)」の「120px」を変更すると、モーダルの移動距離が変わります。
・style.cssの「background:rgba(15,23,42,.55);」の「.55」を変更すると、背景オーバーレイの濃さが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssで「width:100%;」「max-width:420px;」を設定しているため、画面幅に合わせてモーダルのサイズが自動調整されます。また、画面幅640px以下ではメディアクエリによって表示エリアの余白を調整しているため、スマートフォン・タブレット・PCでも快適に利用できます。
コメント