【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

レスポンシブWEBデザインの基本 max-widthで中央揃えレイアウト

レスポンシブWEBデザインの基本 max-widthで中央揃えレイアウト

レスポンシブのセンタリングレイアウトは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サイトの導入事例もぜひご覧ください。

レスポンシブECサイト事例

今後もサイト運営に有益な情報を発信できるよう努力します。

黒河

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+