問題

5
HTML/CSS

モーダルを作成しよう

モーダルとはモーダルウィンドウのことで、元画面の上に別のウィンドウを表示し、ユーザーに情報を伝える画面のことです。特定の操作を行わないと他の操作ができないため、ユーザーに警告のメッセージやエラーを通知することに適しています。

HTML/CSSの問題に挑戦しよう!

問題

モーダルを作成しよう

モーダルを作成してみましょう。

ここで実装するモーダルでは、
ボタンを押下したら表示、非表示などの機能は実装しません。

画面の真ん中にコンテンツを置き、それ以外はグレーエリアで覆いましょう。

またimgにつきましては、https://ninjacode.work/assets/img/kv.pngをお使いください。

見本を参考に作成してください。

期待する画面

解答の画像

解答と解説(モーダルを作成しよう)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

ブラウザで上手く表示する為にCSSの解答ソースにリセットCSS読み込んでおります。

モーダル実装時に大事なのは、最上の親に対してposition: fixed;を付与する事です。
こうすることで背景を固定させることができます。
次に、背景のグレーエリアはオーバーレイと呼びます。
このオーバーレイは縦横画面いっぱいに広げて黒に透過0.9などしてあげればOKです。

最後にコンテンツ部分に関しては、position: absolute;で真ん中に持ってきて普段のようにタイトル、画像、説明文をつければ出来上がりです。

補足

実際の現場でモーダルを実装する際は、プラグインを用いられることが多いですが、場合によってプラグインに頼らず実装しなければいけないケースもあるので覚えておくといいでしょう。

さらにスキルアップしたい方は公式LINEから「HTML/CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
あなたに合った学習プランは? 適正コース診断