そんな疑問にお答えします。
インナーの扱いってレイアウトの肝となる部分です。
でも初心者にとっては慣れるまでなかなか手こずるところです。
僕も理解したつもりがレスポンシブで表示が崩れてしまったり、思うようなサイズにならなかったりと最初だいぶ難儀しました。
この記事ではインナーの書き方とレイアウトの作り方の基礎を解説します。
インナーの基本はここでしっかり理解しておきましょう。
目次
中央寄せにするインナーの扱いを覚える
インナーとは何か？
Webサイトにはインナーという基準となる幅が決まっています。
当サイトでは以下の赤線の内側がインナーとなります。
まずここで理解しておくべきことは、なぜインナーを設ける必要があるのか？ということです。
そこでインナーの役割を知っておきましょう。
- 画面幅が広くなっても、コンテンツが広がりすぎないようにする
- コンテンツを中央に寄せる
- インナーの指定幅以下の画面幅のときは、コンテンツが画面端とくっつかないように余白をとる
動きとしてはこのような感じになります。
インナーの記述方法
次にインナーの記述方法です。
<section>
<div class="inner">
<h2>見出し</h2>
<!-- コンテンツ -->
</div>
</section>.inner {
width: 100%;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
padding-left: 40px;
padding-right: 40px;
}
@media screen and (max-width: 767px) {
.inner {
padding-left: 20px;
padding-right: 20px;
}
}※リセットCSSにて「box-sizing: border-box;」としています。
* {box-sizing: border-box;}
max-widthで最大幅指定
ここで最大のコンテンツ幅を決めます。
これを指定することによって、画面幅が大きく広がった場合にインナー内のコンテンツが無限に広がることを防ぎます。
今回の場合「max-width」は「コンテンツ幅 + padding幅」となります。（「box-sizing: border-box;」のため）
ですので上記の場合、コンテンツ幅（1000px）+ padding幅（左右各40px）にてmax-widthは1080pxとしています。
marginで中央寄せ
「margin-left: auto;」「margin-right: auto;」で中央寄せとなります。
「margin: 0 auto;」とまとめてもOKです。
paddingで左右の余白
これがないと画面端とインナー内のコンテンツがぴったりくっついてしまいます。
かなり見にくくなってしまうので、ここは余白を確保しておきましょう。
タブレット以下では確保する余白を少し小さくしています。
インナーの使い方例
では実際にHTMLの中ではどう配置されているのかを見てみましょう。
以下は一例です。
<div class="fv">
<div class="inner">
<h1>見出し</h1>
</div>
</div>
<section class="about">
<div class="inner">
<h2>見出し</h2>
</div>
</section>
<section class="service">
<div class="inner">
<h2>見出し</h2>
</div>
</section>
<section class="news">
<div class="inner">
<h2>見出し</h2>
</div>
</section>それぞれのブロックのかたまりごとにインナークラスを挟み込むような形となります。
レスポンシブ対応なら必ず入れておきましょう。
インナーを使わずにサイト制作をすることはほぼないと思いますので、今回の内容の理解は必須です。
この機会にインナーの基礎をしっかりおさえておきましょう。
以上です。
投稿者 トシ
コメントを残す