レスポンシブCSS設計

レスポンシブデザインのサイトをマークアップする場合に、メディアクエリを記述する。
一般的にはベースのCSSを書いて、その後に@media でデバイス別のスタイルを上書きすることが多い。

CSSの記法3種

CSS自体を分ける
@media規則で1ファイル内にメディア特性単位に書く方法
@media規則で1ファイル内にパーツ単位で書く方法

CSS自体を分ける

css

<link rel="stylesheet" href="desktop.css" media="(min-width:769px)">
<link rel="stylesheet" href="tablet.css" media="(max-width:768px) and (min-width: 321px)">
<link rel="stylesheet" href="mobile.css" media="(max-width:320px)">

この方法ではスタイルの修正などにそれぞれのファイルを探す必要があり、可読性が低くなる。

@media規則で1ファイル内にメディア特性単位に書く方法

css


@media(min-width:769px){
    .pageHeader{/*...略...*/}
    .pageMain{/*...略...*/}
    .pageSub{/*...略...*/}
    .pageFooter{/*...略...*/}
}
@media(max-width:768px) and (min-width: 321px){
    .pageHeader{/*...略...*/}
    .pageMain{/*...略...*/}
    .pageSub{/*...略...*/}
    .pageFooter{/*...略...*/}
}

この方法も同様に、スタイルの修正などにそれぞれ対応する箇所を探す必要があり、可読性が低くなる。

@media規則で1ファイル内にパーツ単位で書く方法

css

.pageHeader{/*...略...*/}
@media(max-width:768px){
    .pageHeader{/*...略...*/}
}

同じ箇所にスタイルの記述があるので可読性が高い。
結果この方法で記述することが多い。
PCのスタイルを書き、その後ろにSP用のスタイルをmediaqueryで記述する。

ではどちらをベースとして設計するのが良いのか？

ベースをPCとして設計した場合

css

.entry-header {
  margin-bottom: 25px;
}
.entry-title {
  min-height: 76px;
  padding: 7px 92px 40px;
  background: url("../img/bg_heading.svg") no-repeat left bottom;
  background-size: 100% auto;
  font-size: 2.5rem;
  font-weight: bold;
}
/* ベースCSSを上書きするためのデバイス個別のメディアクエリCSS （スマホ向け）*/
@media (max-width: 767px) {
  .entry-header {
    margin-bottom: 20px;
  }
  .entry-title {
    min-height: auto;
    padding: 0 10.53333% 5.33333% 11.86667%;
    background-image: url("../img/bg_heading_sm.svg");
    font-size: 1.7rem;
  }

PCのスタイルを打ち消すCSSを必要があり、記述が冗長になる。

一方でSP画面をベースとしてCSSを設計した場合

css

.btn {
  text-decoration: underline;
}
.btn:hover {
  text-decoration: none;
  opacity: .7;
}
/* ベースCSSを上書きするためのデバイス個別のメディアクエリCSS （スマホ向け） */
@media (max-width: 767px) {
  /* スマホでは:hoverでボタンクリック（タップ）が遮られることがある */
  .btn:hover {
    opacity: 1;
  }
}

コード量がシンプルになる。
スマホをベースに考えたほうがパーツ単体を作ることに長けている。

つまりレスポンシブでCSS設計を行う場合、モバイルファーストの考えでいたほうがいい。