何故モバイル向けに作ったCSSがはみ出るのか?

2019-08-17 / CSSレスポンシブデザイン

- ちょうど画面いっぱいにしようと思ったら、何故かはみ出ちゃうというCSSのあるある問題の原因と解決策を解説します。

記事の要約

  1. CSSの仕様が定められている「横幅」というのが、見た目で感じる「横幅」と違うのが原因
  2. 「width: 100%;」と記載した場合、「横幅(width)」には「枠線(border)」や、「余白(margin, padding)」の範囲は含まれない
  3. 「box-sizing」プロパティを使うことで、「枠線や余白も含んだ範囲」を「横幅」として使うことが可能になる

よくある問題

開発をしていると、このようなページを作成してしまうことがよくあります。 スマホで見たときにスクロールすると、すこし横にズレたりしてまっすぐいかないというページです。

CSSでプロパティ「width」を「width: 100%;」としているのに、何故かはみ出てしまう状態などは典型的な例だと思います。

なぜこのような問題が発生してしまうのでしょうか?

横幅(width)の仕様が直感的な感覚とズレていることが問題

殆どの方の直感とはズレると思いますが、実は、CSSのwidthで指定される横幅には、marginやpaddingなどの余白やborderで作成される枠線の太さは含まれません。つまりは、widthで100%を指定してもmarginやpaddingで作成される余白以外のコンテンツそのものの横幅のみが、親コンテンツの100%の横幅に当てはまるようになっています。

そのため、余白部分はwidth100%の場合、必ずはみ出てしまい、はみ出た余白が親コンテンツの幅を超えたり、画面全体の幅を超えてしまうと、ページが収まってないように見えてしまうのです。

"width: 100%;" としたときに、はみ出るのを防ぐ方法

まず、BootStrapなどのCSSデザインフレームワークを使っているか、そうでないかで解決方法は異なってきます。 原因は、「box-sizing」プロパティにあります。この、「box-sizing」プロパティを設定すると、padding・borderで作られる幅も含んだ幅を、「横幅」として解釈させることができるようになります。つまり直感的な横幅と、CSSで取り扱う横幅が一致するのです。 しかし、実はこの「box-sizing」プロパティ、BootStrapでは既に指定されています。また、自身で「box-sizing」プロパティを指定したとしても、はみ出すことがやっぱり多々あります。

その場合は、「margin」プロパティが問題の原因となります。「box-sizing」プロパティによって、padding(内側の余白)と、border(枠線)は横幅として含んでいるわけですがから、残るmarginが、はみ出す原因となるのです。 自身でCSSを書いている場合は、その「margin」プロパティを消すことで、枠からはみ出すのを防ぐことができます。非常にシンプルですね。もうはみ出さないとはずです!

一方、BootStrapの場合はどうしたらよいでしょうか? 単純にmarginを0にしても、なかなかCSSが反映されなかったりします。どうすればよいでしょうか?

BootStrapで"margin"を0にする方法

BootStrapでmarginが指定されている要素は、実はBootStrapのGridシステムの中で、列(row)と行(col)にあたるものです。これに、paddingやmarginが標準で指定されております。

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

つまり、これらのmarginを消すことができれば、marginは消すことができます。そして、あまりWebで紹介されないので、見逃しがちなのですが、BootStrapの4.3.1には、左右のmarginをなくしてくれる便利なクラスも用意されています。

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

※もし、自身の使っているBootStrapのバージョンに、このクラスがなければこのクラスを独自CSS(style.cssなど)に追加しましょう。

そして、これをrowやcol、はみ出していると思われる要素に指定することで、画面からはみ出してしまうのを防ぐことができるようになります!

以上です! それでは、よいエンジニアライフを!

この記事の関連記事

関連記事はありません。

コメント欄

記事にコメントする

まだコメントはありません。