スクロールバーの有無でmarginが変化するためです。 対策追記 以下のcssを適用することでずれなくすることができます。 html { overflow-y:scroll; } このcssを適用することで常にスクロールバーが表示されるので、ずれません。 Bootstrap4でモーダル(Modal)画面を作成する方法。画面を背景クリックで閉じなくする、モーダル(Modal)画面にスクロールバーを表示する、モーダル(Modal)画面を中央に表示する、モーダル(Modal)画面のサイズを変更する また、見出しやタイトルを目立たせたいあまり、不快感を与えるような言葉を使用してはいけません。ユーザーが友人と共有したり情報源として引用したくなったりするようなコンテンツになるように意識しましょう。ただ、文字数だけ増やしても、ユーザーが求めていないコンテンツになる可能性があるので、ユーザーが求めている情報を適切に書かれているかチェックしましょう。. All Rights Reserved. 更新 2017/11/10. See the Pen Scrollable Modal Demo by wang (@yaquawa) on CodePen. Copyright ©PECOPLA Co.,Ltd. (adsbygoogle=window.adsbygoogle||[]).push({}); Hi, 中国四川出身の王です。2008年に日本に渡り、大学卒業後Web制作会社勤務を経て、現在はフリーランスとしてゆるりと働いています。サイト制作の全般を担当しています。好きな生き物はプーティ(マイCat)です。趣味はアニメ鑑賞です。画家になるのが夢だったりします!, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。, 「条件付き書式」で行全体の色を自動的に変える方法(Google スプレッドシート), LaravelベースのWordPressテーマフレームワーク「Laraish」のご紹介. モーダルウィンドウ表示の際にページのスクロールバーが非表示になるので、スクロールバーの幅の分だけ背景画像が拡大されているのが原因のようです。 調べてみたことろ、背景画像ではなくコンテンツの(内容)そのものが右にズレるという問題を発見。 モバイルのメニューとかposition: fixedでデザインしたけど、メニューが長かったりデバイス回転させたりしたらメニューが見切れるからfixedしたモーダル内でスクロールを表示させたい時の実装方法のメモ top, left, right, bottom と overflow を利用する .modalNav { p… (adsbygoogle = window.adsbygoogle || []).push({}); モーダル画面はdiv.modal > div.modal-dialog > div.modal-contentと階層を作り、その中に次の3つスタイルを設定する形です。, modal-headerにはモーダル画面のタイトル、modal-bodyには内容、そしてmodal-footerには各ボタンを配置します。,