【CSS】レスポンシブが楽になるインナー幅の指定方法
今回は、「レスポンシブが楽になるインナー幅の指定方法」について紹介します。
レスポンシブコーディングをする際の参考になれば嬉しいです！
【CSS】レスポンシブが楽になるインナー幅の指定方法
コードはこちらです。
.inner {
max-width: 1040px;
margin: 0 auto;
padding: 0 20px;
}
まずは、「max-width: 1040px;」をインナー幅とします。
そして、インナー幅の左右にpaddingで余白を開けることがポイントです。（実質インナー幅は1000pxになります。）
paddingの数値はレスポンシブの際に左右に持たせておきたい余白の数値を指定してください。
そうすることで、タブレットやスマホのサイズにブラウザを変更しても左右の余白が担保されるので、レスポンシブコーディングが楽になります！
□確認済みのブラウザ
PC（Mac）→Google Chrome、Firefox、Safari
SP(iPhone)→Safari
大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。
