CSS HTML Javascript

マスクとモーダルのスタイルを整える

マスクとモーダルウィンドウのスタイルを調整していきます。

  • 背景のスタイリング
  • モーダルウィンドウのスタイリング

背景のスタイリング

・では前回の続きをしていきましょう。

・今回は背景部分とモーダルウィンドウ本体のスタイリングをしていこうと思います。

・まず背景に関してはid属性を付けて名前を#maskとしていたのでCSSのスタイリングで#maskとセレクタを選択していきましょう。

・スタイリングは全体を透過させたいので黒の透明度0.4くらいにしていきます。また、背景は画面いっぱいにしたいのでポジションをfixdに指定してtop,

Bottom, right, leftをそれぞれ0にしましょう。

・背景のスタイリングはこんな感じです。

#mask {

  background: rgba(0, 0, 0, 0.4);

  position: fixed;

  top: 0;

  bottom: 0;

  right: 0;

  left: 0;

}

モーダルウィンドウのスタイリング

・まず完成形として白い背景に横幅300px、内側の余白を20pxつけて少し丸みを帯びたシルエットに中央揃えされた文章が収まるようにしていきたいです。またこのモーダルウィンドウを上から40pxの位置に絶対配置していきます。

・ではCSSでスタイリングしていきましょう。

・背景は白がいいのでbackgroundを#fffとして横幅もwidthを300pxにし、余白を20pxつけたいのでpaddingを20pxにし、丸みを付けたいのでborder-radiusを4pxつけてあげましょう。

・次に絶対配置を使いたいのでpositionをabsoluteにしてトップから40pxに配置したいのでtopのみ40pxとしてあげて、left, rightには0pxを指定します。最後に中央揃えのためにmargin: 0 auto;にしましょう。

・こんな感じになります。

#modal {

  background: #fff;

  width: 300px;

  padding: 20px;

  border-radius: 4px;

  position: absolute;

  top: 40px;

  left: 0;

  right: 0;

  margin: 0 auto;

}

・ついでに文章と閉じるボタンの間がつまりすぎているのでモーダルの文章のしたに20pxの余白を付けましょう。

・こんな感じですね

#modal > p {

  margin: 0 0 20px;

}

-CSS, HTML, Javascript