【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
DOWNLOAD
ブログ用WordPressテーマを無料配布中
実務で使える構成・設計をベースにしたテーマです。
すぐにブログ運用を始めたい方はこちらからダウンロードできます。
Webサイトの集客や導線設計でお悩みではありませんか？
当社では、データ分析（GA4・検索データ）をもとに、
成果につながるWeb制作・改善をご提案しています。
課題の整理からでも大丈夫ですので、まずはお気軽にご相談ください。
無料で相談する
Author：
Profile：
大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。
この著者の記事を見る
