htmlやcssを勉強していたり、パソコンについて学んでいたりするとモーダルウィンドウという文字を見かけると思います。そんなあなたに今回はとてもわかりやすくモーダルウィンドウについて解説していきます。
モーダルウィンドウとは
モーダルウィンドウとは、Webサイトやアプリで重要な情報やエラーメッセージを表示するための特別な画面です。表示されると、ユーザーはその指示に従うか閉じるまで他の操作ができなくなるため、確実に伝えたい内容を知らせるのに適しています。
ぱっと見邪魔だなとか思うかも知れませんがUIとしてとても優れた働きを持っています。
コードを見てどんなものか解説
↓
モーダルウィンドウは上のように背景が暗くなったり操作できなくなったりして、中央の伝えたいメッセージを前に持ってきて主張します。
今回はボタンなどを使って動きをわかりやすくするためにJavascriptを使いました。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
<script src="js/index.js" defer></script>
<title>monmontraining</title>
</head>
<body>
<h1>こんにちは！monmonです</h1>
<p>ブログの他の記事やX（旧Twitter）も見ていってね～</p>
<button id="openModal">モーダルを開く</button>
<div class="modal-overlay" id="modalOverlay">
<div class="modal">
<h2>モーダルウィンドウ</h2>
<p>この内容はモーダル内に表示されます。</p>
<button class="close-btn" id="closeModal">閉じる</button>
</div>
</div>
</body>
</html>css
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: none;
justify-content: center;
align-items: center;
}
.modal {
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 20px;
border-radius: 5px;
opacity: 0.9;
width: 300px;
text-align: center;
}
.close-btn {
margin-top: 10px;
padding: 5px 10px;
background: white;
color: black;
border: none;
cursor: pointer;
}javascript
const openModal = document.getElementById("openModal");
const closeModal = document.getElementById("closeModal");
const modalOverlay = document.getElementById("modalOverlay");
openModal.addEventListener("click", () => {
modalOverlay.style.display = "flex";
});
closeModal.addEventListener("click", () => {
modalOverlay.style.display = "none";
});
modalOverlay.addEventListener("click", (event) => {
if (event.target === modalOverlay) {
modalOverlay.style.display = "none";
}
});今回はコードの解説を省きますが、このコードを入れてみると先ほどのモーダルウィンドウを開くという操作ができるようになります。
モーダルウィンドウのデメリット
メッセージの強調としてとても優れたものですが、使いどころを気をつけましょう。以下の4つのデメリットが存在します。
- ユーザー体験の阻害
- モーダルが突然表示されると、閲覧の流れが中断され、ストレスを感じることがあります。
- モバイル端末での操作性
- 画面が小さいスマホでは、モーダルが邪魔になり、閉じるボタンが押しにくいことがあります。
- アクセシビリティの問題
- スクリーンリーダーやキーボード操作に対応していないと、視覚障害者やキーボード操作のみのユーザーが使いにくくなります。
- パフォーマンスの影響
- モーダル表示時に背景をぼかしたりアニメーションを加えると、ページの動作が重くなることがあります。
適切に設計しないと、ユーザーに不快な印象を与えるため、使いどころを慎重に考えることが重要です。
まとめ
今回はモーダルウィンドウについて解説していきました。使い方によってはユーザがとても使いやすいものになるのでぜひ取り入れていってください。
コメント