HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

  1. ホーム
  2. レスポンシブサイト制作
  3. 8章. 2カラムレイアウトのレスポンシブ化

8章. 2カラムレイアウトのレスポンシブ化

  1. 公開日:2017年02月10日
  2. 最終更新日:2022年08月10日

レスポンシブサイト制作

この記事をシェアする:

2カラムレイアウトからのレスポンシブ

PCサイトで、floatを使った2カラムレイアウトを1カラムに変更する場合は、スマホでのレイアウトの順番が重要です。
まず、スマホでのレイアウトの順番を決めます。
次にPCサイトでfloatを使い、2カラムレイアウトにします。
PCサイトでの左右のカラムの入れ替えは、floatを使うことでコントロールが可能です。
今回は、左右どちらかがメニューになっていても対応できる方法を紹介します。

サンプルは、HTMLは共通とし「5章. レスポンシブサイトの設計方法」で紹介したパターンをそれぞれ紹介していきます。
レイアウトを分かりやすくするために、mainレイアウトにheightを指定しています。

右メニューのレイアウトの場合

pcサイトは、mainにfloat: left; side-menuにfloat: right; を指定し、スマホサイトはfloat指定をせず、カラムダウンさせています。

右メニューの2カラムレイアウト

下記は、共通のHTMLです。


<div class="wrap">
  <div class="main">レイアウト1</div>
  <ul class="side-menu">
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
  </ul>
</div>

pc → スマホ(pcを継承)の場合

下記は、PCサイトからCSSを指定。スマホサイトはメディアクエリを使いPCサイトのCSSを継承して指定しています。
pc側で設定したfloatをスマホ側で float: none;で解除しています。


/* pc 768px以上 */
.wrap{
  overflow: hidden;
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.main{
  float: left;
  width: 630px;
  height: 300px;
  background-color: #ddd;
}
.side-menu{
  float: right;
  width: 300px;
  border-top: 1px solid #333;
}
.side-menu li a{
  display: block;
  height: 44px;
  line-height: 44px;
  border-bottom: 1px solid #333;
  text-decoration: none;
  color: #333;
}

/* スマホ 767px以下 */
@media only screen and (max-width: 767px) {
  .wrap{
    width: 100%;
  }
  .main{
    float: none;
    width: 90%;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
  }
  .side-menu{
    /* floatを解除 */
    float: none;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

スマホ → pc(スマホを継承)の場合

下記は、スマホサイトからCSSを指定。PCサイトはメディアクエリを使いスマホサイトのCSSを継承しています。
pc側でfloatの設定とカラムのwidthの上書き指定をしています。


/* スマホ 767px以下 */
.main{
  width: 90%;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  background-color: #ddd;
}
.side-menu{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid #333;
}
.side-menu li a{
  display: block;
  height: 44px;
  line-height: 44px;
  border-bottom: 1px solid #333;
  text-decoration: none;
  color: #333;
}

/* pc 768px以上 */
@media only screen and (min-width: 768px), print {
  .wrap{
    overflow: hidden;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
  .main{
    float: left;
    width: 630px;
    height: 300px;
  }
  .side-menu{
    float: right;
    width: 300px;
  }
}

pc、スマホを別々に指定

pcサイトとスマホサイトのCSSを別々にメディアクエリで指定した場合です。


/* スマホ 767px以下 */
@media only screen and (max-width: 767px) {
  .main{
    width: 90%;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    background-color: #ddd;
  }
  .side-menu{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    border-top: 1px solid #333;
  }
  .side-menu li a{
    display: block;
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #333;
    text-decoration: none;
    color: #333;
  }
}

/* pc 768px以上 */
@media only screen and (min-width: 768px), print {
  .wrap{
    overflow: hidden;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
  .main{
    float: left;
    width: 630px;
    height: 300px;
    background-color: #ddd;
  }
  .side-menu{
    float: right;
    width: 300px;
    border-top: 1px solid #333;
  }
  .side-menu li a{
    display: block;
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #333;
    text-decoration: none;
    color: #333;
  }
}

左メニューのレイアウトの場合

右メニューとの違いは、mainとside-menuのfloatの指定です。
mainにfloat: right; side-manuにfloat: left; にすることで、pcサイトでカラムの左右を入れ替えられます。
サンプルでは、pcサイト, スマホサイトを別々に指定した場合の例で紹介します。

左メニューの2カラムレイアウト


/* スマホ 767px以下 */
@media only screen and (max-width: 767px) {
  .main{
    width: 90%;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    background-color: #ddd;
  }
  .side-menu{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    border-top: 1px solid #333;
  }
  .side-menu li a{
    display: block;
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #333;
    text-decoration: none;
    color: #333;
  }
}

/* pc 768px以上 */
@media only screen and (min-width: 768px), print {
  .wrap{
    overflow: hidden;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
  .main{
    /* float: right;に変更 */
    float: right;
    width: 630px;
    height: 300px;
    background-color: #ddd;
  }
  .side-menu{
    /* float: left;に変更 */
    float: left;
    width: 300px;
    border-top: 1px solid #333;
  }
  .side-menu li a{
    display: block;
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #333;
    text-decoration: none;
    color: #333;
  }
}