レスポンシブ【max-width】

今回はレスポンシブデザインの際に便利な『max-width』についてご紹介します。

max-widthで幅を指定することで、ブロック要素の最大値を指定することができます。

下記に例を書きますので、デザインの参考にしてみて下さい。

使用するhtmlはこちらです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <main>
      <div class="backgroundBox">
        <div class="Container">
          <ul class="Box">
            <li class="item">メニュー1</li>
            <li class="item">メニュー2</li>
            <li class="item">メニュー3</li>
            <li class="item">メニュー4</li>
            <li class="item">メニュー5</li>
          </ul>
        </div>
        <div class="textBox">
          <p class="text">sampleです。サンプルです。さんぷるです。sampleです。サンプルです。さんぷるです。sampleです。サンプルです。さんぷるです。sampleです。サンプルです。さんぷるです。sampleです。サンプルです。さんぷるです。sampleです。サンプルです。さんぷるです。</p>
        </div>
      </div>
    </main>
  </body>
</html>

<スマホ用のcss>

* {
  margin: 0;
  padding: 0; }
 
.backgroundBox {
  background-color: whitesmoke; }
 
.Container {
  margin: 0 10px 20px;
  padding-top: 10px;
  padding-bottom: 10px; }
 
.Box {
  display: block;
  max-width: 400px;
  list-style: none;
  margin: 0 auto; }
 
.item {
  background-color: orange;
  color: white;
  border: solid 1px white;
  text-align: center; }
 
.textBox {
  margin: 0 10px; }
 
.text {
  display: block;
  max-width: 500px;
  margin: 0 auto;
  padding-bottom: 10px; }

○ポイント

・ .boxにmax-widthを指定しているため、ブラウザ幅を400px以上にしても.boxのサイズは400px以上に広がることはありません。

(400px以下では、画面幅いっぱいに要素を広げることができます)

・ .textにmax-widthを指定いるため、ブラウザ幅を500px以上にしても.textのサイズは500px以上に広がることはありません。

ブラウザでのイメージ

メニュー1
メニュー2
メニュー3
メニュー4
メニュー5

sampleです。サンプルです。さんぷるです。sampleです。サンプルです。さんぷるです。sampleです。サンプルです。さんぷるです。sampleです。サンプルです。さんぷるです。sampleです。サンプルです。さんぷるです。sampleです。サンプルです。さんぷるです。

<PC用のcss>

* {
  margin: 0;
  padding: 0; }
 
.backgroundBox {
  background-color: whitesmoke; }
 
.Container {
  margin: 0 10px 20px;
  padding-top: 10px;
  padding-bottom: 10px; }
 
.Box {
  display: block;
  max-width: 400px;
  list-style: none;
  margin: 0 auto; }
  @media screen and (min-width: 768px) {
    .Box {
      max-width: 900px; } }
 
.item {
  background-color: orange;
  color: white;
  border: solid 1px white;
  text-align: center; }
  @media screen and (min-width: 768px) {
    .item {
      height: 50px;
      line-height: 50px; } }
 
.textBox {
  margin: 0 10px; }
 
.text {
  display: block;
  max-width: 500px;
  margin: 0 auto;
  padding-bottom: 10px; }

○ポイント

・メディアクエリを使用して、.boxのmax-widthを900pxに再定義しているため、.boxのサイズは900px以上に広がることはありません。

ブラウザでの表示イメージ

メニュー1
メニュー2
メニュー3
メニュー4
メニュー5

sampleです。サンプルです。さんぷるです。sampleです。サンプルです。さんぷるです。sampleです。サンプルです。さんぷるです。

ブラウザの横幅調整に応じて、メニューとテキストの幅が可変であり、かつスマートフォン表示のときメニュー幅の最大値は400px、PC表示のときメニュー幅の最大値は900pxであれば成功です。

以上です。