レスポンシブのセンタリングレイアウトはwidthではなくmax-width
今回は、レスポンシブWebデザインの基本技として、サイト全体のレイアウトをセンタリング（中央寄せ）する方法をご紹介します。
センタリング（中央寄せ）のレイアウト
今回ご紹介するのは、例えばこんなレイアウトです。
【国産・天然】 フルーツマカロン｜ま果ろん 公式通販サイト
こちらのサイトを開いて、ブラウザの幅を変化させてみてください。
960pxまでは余白があり、それ以下では消えてしまいますね。
つまり、
PCで開いたとき→画面の大きさが十分にあるので、左右に余白を作ってサイト全体を見やすくする
タブレット・スマホから開いたとき→画面が小さくなるのでコンテンツの可読性を保つために余白を消して画面いっぱいの幅に表示する
というような使い方ができます。
実際にコーディングをしてみる
前置きが長くなりましたが、コードは非常に簡単です。
元となるソースコードを準備
今回はヘッダーとメインコンテンツ、フッターがあるような構成のページを想定してみます。
html
<!DOCTYPE HTML>
<html>
<body>
<div class="all">
<div class="header">
ヘッダー<br>
ヘッダー
</div>
<div class="main">
メインコンテンツ<br>
<img src="centering.jpg"><br>
メインコンテンツ<br>
メインコンテンツ<br>
メインコンテンツ<br>
メインコンテンツ<br>
メインコンテンツ<br>
メインコンテンツ<br>
メインコンテンツ
</div>
<div class="footer">
フッター<br>
フッター<br>
フッター
</div>
</div>
</body>
</html>
css
/*↓わかりやすくするため色を付けています↓*/
.header {
background-color: orange;
}
.main {
background-color: yellow;
}
.footer {
background-color: green;
}
div {
font-size: 20px;
}
max-widthとmarginを設定
max-widthとmarginを設定します。今回はallというクラスに適用します。
このスタイルを適用する要素は場合によって異なってきます。例えば、margin部分の一部だけに背景色を設定したいなどという場合は、もう少し下位の要素に適用する必要があります。
追加するコード
.all {
max-width: 900px;
margin: auto;
}
するとこうなります。
各要素を親要素の100%に設定
各要素の幅を100%にします。
追加するコード
.header,.main,.footer,img {
width: 100%;
}
body {
margin: 0;
}
また、bodyに不要なmarginがついているので、消しておきます。
こちらで完成です。
※幅が100%に設定されていない要素があれば、以下のようになってしまいます。
ブラウザの幅を小さくすると、画像だけレスポンシブになっていないですね。うまくレスポンシブにならない！というときは、幅が100%より大きくなっていないか疑ってみてください
おわりに
いかがでしたでしょうか。
レスポンシブ対応ECカートシステム・aishipRでももちろん、センタリングレイアウトを自由に実装することが可能です。レスポンシブECサイトの導入事例もぜひご覧ください。
今後もサイト運営に有益な情報を発信できるよう努力します。
黒河
