iPentec.com  /  Doc  /  CSS  /  HTML  /  CSS メディアクエリー

目次

レスポンシブページで、DIV枠などのブロック要素が中心で折り返されるようにしたい - CSS

レスポンシブページで、複数のDIV枠などのブロック要素を中心で折り返すコードを紹介します。

動作の確認 (通常のfloat:left)

下記のコードを記述します。

ResponsiveFrameLeft.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
	<meta charset="utf-8" />
  <link rel="stylesheet" href="ResponsiveFrameLeft.css">
</head>
<body>
  <div class="Item">a</div>
  <div class="Item">b</div>
  <div class="Item">c</div>
  <div class="Item">d</div>
  <div class="Item">e</div>
  <div class="Item">f</div>
  <div class="Item">g</div>
  <div class="Item">h</div>

  <div style="clear:left"></div>
</body>
</html>

ResponsiveFrameLeft.css

.Item {
    margin-left:0.1%;
    margin-right:0.1%;
    margin-top:2px;
    margin-bottom:2px;
    float: left;
    width: 12%;
    min-width:120px;
    background-color: #c8dd93;
}
HTMLファイルをWebブラウザで開きます。下図の画面が表示されます。


Webブラウザのウィンドウ幅を縮めると、あふれた枠が折り返され、下に表示されます。




ウィンドウの幅を狭めるごとに1枠分折り返されていきます。





レスポンシブページでは、1枠ずつ折り返される動作ではなく、半分ずつ折り返される動作にしたいことがあります。以下では、2等分になるように折り返すコードを紹介します。

半分ずつ折り返される枠 (div の場合)

コード

以下のコードを作成します。

ResponsiveFrame8.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
	<meta charset="utf-8" />
  <link rel="stylesheet" href="ResponsiveFrame8.css">
</head>
<body>
  <div class="Item8">a</div>
  <div class="Item8">b</div>
  <div class="Item8">c</div>
  <div class="Item8">d</div>
  <div class="Item8">e</div>
  <div class="Item8">f</div>
  <div class="Item8">g</div>
  <div class="Item8">h</div>

  <div style="clear:left"></div>
</body>
</html>

ResponsiveFrame8.css

.Item8 {
    margin-left:0.1%;
    margin-right:0.1%;
    margin-top:2px;
    margin-bottom:2px;
    float: left;
    width: 12%;
    background-color: #c8dd93;
}
    
@media screen and (max-width: 800px) {
    .Item8 {
        margin-left:0.1%;
        margin-right:0.1%;
        margin-top:2px;
        margin-bottom:2px;
        float: left;
        width: 24%;
        background-color: #c8dd93;
    }
}
@media screen and (max-width: 400px) {
    .Item8 {
        margin-left:0.1%;
        margin-right:0.1%;
        margin-top:2px;
        margin-bottom:2px;
        float: left;
        width: 48%;
        background-color: #c8dd93;
    }
}

@media screen and (max-width: 300px) {
    .Item8 {
        margin-left:0.1%;
        margin-right:0.1%;
        margin-top:2px;
        margin-bottom:2px;
        float: left;
        width: 98%;
        background-color: #c8dd93;
    }
}

解説

今回の動作を実装するにあたり、CSSのメディアクエリーを利用しています。
メディアクエリーは下記の記述になります。
@media screen and (max-width: 800px) {
 (スタイル)
}
上記のコードの場合、Webブラウザの横幅が800ピクセル以下であれば、{}内のスタイルが適用されます。
今回のコードでは、800ピクセル以上の場合は、12%で1列表示、800ピクセル以下の場合は、25%で2列表示、400ピクセル以下の場合は、50%で4列表示、300ピクセル以下であれば、100%で8列表示としています。

実行結果

上記のHTMLファイルを表示します。下図の画面が表示されます。


Webブラウザのウィンドウ幅を縮めると、枠のサイズが均等に縮まります。


Webブラウザの幅が、800ピクセル以下になると、2段になります。


さらに幅を縮めると、2段のまま各枠のサイズが均等に縮まります。


Webブラウザの幅が、400ピクセル以下になると4段になります。




Webブラウザの幅が、300ピクセル以下になると8段になります。

フレームが4つの場合

フレームが4つの場合の例です。

コード

ResponsiveFrame4.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
	<meta charset="utf-8" />
  <link rel="stylesheet" href="ResponsiveFrame4.css">
</head>
<body>
  <div class="Item4">a</div>
  <div class="Item4">b</div>
  <div class="Item4">c</div>
  <div class="Item4">d</div>


  <div style="clear:left"></div>
</body>
</html>

ResponsiveFrame4.css

.Item4 {
    margin-left:0.2%;
    margin-right:0.2%;
    margin-top:2px;
    margin-bottom:2px;
    float: left;
    width: 24%;
    height:240px;
    background-color: #c8dd93;
}
    
@media screen and (max-width: 600px) {
    .Item4 {
        margin-left:0.2%;
        margin-right:0.2%;
        margin-top:2px;
        margin-bottom:2px;
        float: left;
        width: 48%;
        height:240px;
        background-color: #c8dd93;
    }
}

@media screen and (max-width: 400px) {
    .Item4 {
        margin-left:0.2%;
        margin-right:0.2%;
        margin-top:2px;
        margin-bottom:2px;
        float: left;
        width: 98%;
        height:240px;
        background-color: #c8dd93;
    }
}

解説

フレームが4つの場合は、1列、2列、4列表示の3パターンになるため、CSSのメディアクエリを2パターン用意し、3パターンを切り替えられるようにします。

実行結果

上記のHTMLファイルを表示します。




幅を縮めると2段になります。


さらに縮め、横幅が400ピクセル以下になると1段表示になります。

Aタグでの例

コード

Aタグで同様の動作をするコードです。

ResponsiveLink8.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
	<meta charset="utf-8" />
  <link rel="stylesheet" href="ResponsiveLink8.css">
</head>
<body>
  <a href="http://www.google.co.jp" class="Item8">MENU a</a>
  <a href="http://www.google.co.jp" class="Item8">MENU b</a>
  <a href="http://www.google.co.jp" class="Item8">MENU c</a>
  <a href="http://www.google.co.jp" class="Item8">MENU d</a>
  <a href="http://www.google.co.jp" class="Item8">MENU e</a>
  <a href="http://www.google.co.jp" class="Item8">MENU f</a>
  <a href="http://www.google.co.jp" class="Item8">MENU g</a>
  <a href="http://www.google.co.jp" class="Item8">MENU h</a>

  <div style="clear:left"></div>
</body>
</html>

ResponsiveLink8.css

.Item8 {
    display:block;
    margin-left:0.1%;
    margin-right:0.1%;
    float: left;
    width: 11.5%;
    min-width: 11.5%;
    background-color: #d1ffff;
    border: solid 1px #0096c7;
    text-align:center;
    padding-top:4px;
    padding-bottom:4px;
}
    
@media screen and (max-width: 800px) {
    .Item8 {
        display:block;
        margin-left:0.1%;
        margin-right:0.1%;
        float: left;
        width: 23%;
        min-width: 23%;
        background-color: #d1ffff;
        border: solid 1px #0096c7;
        text-align:center;
        padding-top:4px;
        padding-bottom:4px;
    }
}
@media screen and (max-width: 400px) {
    .Item8 {
        display:block;
        margin-left:0.1%;
        margin-right:0.1%;
        float: left;
        width: 48%;
        min-width: 48%;
        background-color: #d1ffff;
        border: solid 1px #0096c7;
        text-align:center;
        padding-top:4px;
        padding-bottom:4px;
    }
}

@media screen and (max-width: 300px) {
    .Item8 {
        display:block;
        margin-left:0.1%;
        margin-right:0.1%;
        float: left;
        width: 100%;
        min-width: 100%;
        background-color: #d1ffff;
        border: solid 1px #0096c7;
        text-align:center;
        padding-top:4px;
        padding-bottom:4px;
    }
}

解説

Aタグの場合は、通常ではインライン要素のため、スタイルシートのdisplayプロパティでブロック要素に変更する必要があります。それ以外はdivの場合と同じです。

実行結果

上記のHTMLファイルを表示します。以下の画面が表示されます。






UL LIタグ(リスト)の場合

コード

UL LIタグを利用した場合に同様の動作をするコードは以下になります。

ResponsiveList8.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
	<meta charset="utf-8" />
  <link rel="stylesheet" href="ResponsiveList8.css">
</head>
<body>
    <ul class="List">
      <li class="Item8">MENU a</li>
      <li class="Item8">MENU b</li>
      <li class="Item8">MENU c</li>
      <li class="Item8">MENU d</li>
      <li class="Item8">MENU f</li>
      <li class="Item8">MENU g</li>
      <li class="Item8">MENU h</li>
      <li class="Item8">MENU i</li>
    </ul>
</body>
</html>

ResponsiveList8.css

.List {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0px;
  padding-right: 0px;
  list-style: none;

}

.Item8 {
  display: block;
  margin-left: 0.1%;
  margin-right: 0.1%;
  float: left;
  width: 12.0%;
  min-width: 12.0%;
  background-color: #ffdf85;
  border: solid 1px #ff6a00;
  text-align: center;
  padding-top: 4px;
  padding-bottom: 4px;
}

@media screen and (max-width: 800px) {
  .Item8 {
    display: block;
    margin-left: 0.1%;
    margin-right: 0.1%;
    float: left;
    width: 23%;
    min-width: 23%;
    background-color: #ffdf85;
    border: solid 1px #ff6a00;
    text-align: center;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

@media screen and (max-width: 400px) {
  .Item8 {
    display: block;
    margin-left: 0.1%;
    margin-right: 0.1%;
    float: left;
    width: 48%;
    min-width: 48%;
    background-color: #ffdf85;
    border: solid 1px #ff6a00;
    text-align: center;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

@media screen and (max-width: 300px) {
  .Item8 {
    display: block;
    margin-left: 0.1%;
    margin-right: 0.1%;
    float: left;
    width: 100%;
    min-width: 100%;
    background-color: #ffdf85;
    border: solid 1px #ff6a00;
    text-align: center;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

解説

リストの場合もAタグと同様に、表示要素をブロック要素に設定する必要があります。また、見出しのマージンがあるため、リストのスタイルでパディングを設定しなおす必要があります。(今回のコードではpadding-left, padding-right を0に設定しています。)

実行結果

上記のHTMLファイルを表示します。以下の画面が表示されます。






著者
とりっち
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

関連するページ

掲載日: 2015-10-13
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.