Bootstrap の class="container" だけ使ってレスポンシブでちょっと楽する

まとめ

自分用メモ。
僕も昔は「とりあえず」な感じで入れてた Bootstrap だけど、Web アプリとかホームページに不用意に入れちゃうと思わぬ挙動をすることがあるので、そろそろ入れないことにする。
だけど、 class="container" だけはページ全体をラップする div に対してあてるとレスポンシブの幅を丁度良い感じにしてくれてたのでよく使ってた。
なのでこれだけ引っ張り出してきて適宜使おうと思った。

以下 styled-components によるそれ。必要になったら呼び出す。
React 使ってないとか styled-components 使ってないとかいう方は、これ SCSS の書き方になっているのでそこだけ良い感じにとっておくのがいいかも。

import { css } from "styled-components";

export const container = css`
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;

  @media (min-width: 576px) {
    max-width: 540px;
  }

  @media (min-width: 768px) {
    max-width: 720px;
  }

  @media (min-width: 992px) {
    max-width: 960px;
  }

  @media (min-width: 1200px) {
    max-width: 1140px;
  }
`;