See the Pen Scrollable Modal Demo by wang (@yaquawa) on CodePen. スクロールバーの有無でmarginが変化するためです。 対策追記 以下のcssを適用することでずれなくすることができます。 html { overflow-y:scroll; } このcssを適用することで常にスクロールバーが表示されるので、ずれません。 モーダルウィンドウ表示の際にページのスクロールバーが非表示になるので、スクロールバーの幅の分だけ背景画像が拡大されているのが原因のようです。 調べてみたことろ、背景画像ではなくコンテンツの(内容)そのものが右にズレるという問題を発見。 スクロールバー ... 投稿 2018/11/28 16:56. add ... テーブルでテーブル部のみスクロールさせる場合、inputの分だけ1pxずれる. ちょっとしたモーダルウィンド(Modal Window)とか、別レイヤーで画面いっぱいに表示する場面って多々あると思います。, fixedのほうが多用されているように思いますが、表示するコンテンツのサイズが大きい時にabsoluteを使う人も多いでしょう。おなじみの「LightBox」でもabsolute使っていますよね?, 「コンテンツが大きくて画面に収まらない時に、fiexedだとはみ出ている部分が見えないから… absoluteを使えば、スクロールして見ることができる。」, 実はちょっとした工夫でfiexedでもコンテンツが画面からはみ出す場合にスクロールすることは可能です。, 以下のデモで、「Open Modal」ボタンを押して、画面サイズをモーダルウィンドウよりも小さくしてみて下さい。. また、見出しやタイトルを目立たせたいあまり、不快感を与えるような言葉を使用してはいけません。ユーザーが友人と共有したり情報源として引用したくなったりするようなコンテンツになるように意識しましょう。ただ、文字数だけ増やしても、ユーザーが求めていないコンテンツになる可能性があるので、ユーザーが求めている情報を適切に書かれているかチェックしましょう。. (adsbygoogle = window.adsbygoogle || []).push({}); モーダル画面はdiv.modal > div.modal-dialog > div.modal-contentと階層を作り、その中に次の3つスタイルを設定する形です。, modal-headerにはモーダル画面のタイトル、modal-bodyには内容、そしてmodal-footerには各ボタンを配置します。,