HTML/CSSで要素を中央寄せするために、インナー要素は必ず押さえておかなくてはなりません。
私は毎週、コーディング練習課題やデイトラWeb制作コースのメンターをする中で20件ほど駆け出しさんのコーディングを確認しているのですが、
皆さんスマホやタブレットの対応はかなり洗練されてきた印象です。
しかし、「インナー要素」への理解がいまいちな場合が見受けられ、これによって大画面PC表示(1920pxなど)に違和感がある場合が多いため解説します。
この記事を書いたのは
しょーご（@samurabrass）
このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
インナー要素とは
動きとしては以下のような感じです。
- 画面幅が広がってもコンテンツが広がりすぎないようにする
- インナー要素は中央に寄せる
- インナー要素以下のサイズのときはコンテンツ（テキストなど）が画面端につかないように余白を取る
コードとしては以下の感じです。
<section class="box">
<div class="inner">
<!-- ここにコンテンツ -->
</div>
</section>.inner {
width: 100%;
height: 100%;
max-width: 1022px;
padding-right: 20px;
padding-left: 20px;
margin-right: auto;
margin-left: auto;
}
@media screen and (max-width: 767px) {
.inner {
padding-right: 15px;
padding-left: 15px;
}
}max-widthで最大幅を決める
これを使うことで大画面時に無限にインナー要素が広がることを防ぎます。
marginで中央寄せ
margin-right: auto; margin-left: auto;
これでインナー要素を中央揃えにしています。
paddingはインナー要素の余白
padding-right: 20px; padding-left: 20px;
というのはインナー要素の余白で、コンテンツが画面端につかないようにします。
よくタブレットあたりでテキストが画面端に来てしまっていることがありますが、視認性が下がるため余白を確保しておきます。
@media screen and (max-width: 767px) {
.inner {
padding-right: 15px;
padding-left: 15px;
}
}タブレット以下ではコンテンツ幅を確保するために、余白を少し小さくすることが多いです。
インナー要素で中央寄せの具体例
私が出している【中級】XDデザインからのコーディング実践演習を例に見てみましょう。
このようなデザインがあります。
ダメな例
ちゃんとインナー要素を設定しないと以下のように無限に横に広がって、ハチャメチャになります。
良い例
ヘッダーのような場合は、このようになるかと思います。
ファーストビューはこんな感じですね。
スマホのときもコンテンツが画面端につかないようにします。
インナー要素で中央寄せにしよう！
最近はスマホ・タブレット以上に大画面PC幅（1920pxなど）での崩れを指摘することが多いので、インナー要素を記事にしました。
暗黙の了解的に自分も過去覚えましたが、これから使いこなしていってほしいです。
Chromeデベロッパーツールを使えば容易に大画面幅での確認ができるので、こちらもご確認下さいませ。
他の差をつけられる記事たち
初学者が知っていることで、コーディング速度と品質で差をつけられる知識をまとめています。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
