レスポンシブデザインのコーディング

前書き

レスポンシブデザインのコーディングの一つの考え方として、ご参考になれば幸いです。

目次

1. 大枠
2. 切り替え
3. 調整
4. その他

大枠

どの横幅にどう対応させるか

案1

• ブレイクポイントは1か所（767/768px）
• SPサイズは、横幅が375pxの時に、デザイン通りに見えるようにする。
  その他の横幅では、デザイン通りに見せることにはこだわらない。
• PCサイズは、デザインのコンテンツの横幅（例えば1100px）以上の幅のみを想定してコーディング。
  bodyタグにmin-width（例えば1100px）を指定する。

一番重要な横幅ではデザイン通りに見せて、それ以外の横幅では、デザイン通りにこだわらない。
そもそも、全ての横幅でデザイン通り見せることは難しい。
レスポンシブを想定していないデザインもある。
また、ブレイクポイントが多いほど、確認に時間がかかる。

フォントサイズ

案1

フォントサイズはpxを使う。
（システムに組み込むことを考えて、そのエディタのフォントサイズの単位に合わせておく。）
em、%、vw、rem、は用途に応じて使う。

その他

ページの表示が遅くならないように、外部ファイルの読み込み方法を工夫したり、出来るだけ画像を使わずにテキストでコーディングをする。

WEBページの表示を速くする（ PageSpeed Insights）

切り替え

メディアクエリ

SCSSで下記の様なmixinを作っておくと管理しやすい。

@mixin mq($screen) {
  //767px以下
  @if $screen == sp {
    @media screen and (max-width: 767px) {
      @content;
    }
  }
  //768px以上
  @if $screen == pc {
    @media print, screen and (min-width: 768px) {
      @content;
    }
  }
}

//このような使い方も出来る
h1{
font-size:20px;
  @include mq(pc) {
    font-size:30px;
  }
}

表示非表示

htmlの部品を、SPサイズとPCサイズで分ける必要がある時に使う。

.sp{

}
.pc,
.pc_inline,
.pc_inlineblock{
  display:none;
}

@media print, screen and (min-width: 768px){
  .sp{
    display:none;
  }
  .pc{
    display:block;
  }
  .pc_inline{
    display:inline;
  }
  .pc_inlineblock{
    display:inline-block;
  }
}

画像

pictureタグで切り替える

<picture>
  <source media="(min-width:768px)" srcset="img_pc.png">
  <img src="img_sp.png" alt="">
</picture>

調整

改行

改行する位置を調整して、文章を読みやすくるする。

display:inline-blockを使った改行

文章の折り返し箇所で、タグで囲んだ文節をまとめて改行させる。
前述のクラスを改行タグに付ければ、SP・PCサイズのどちらでも、指定した箇所で改行が出来る。

※HTMLソースに改行があると、隙間が出来る。

<p><span>文節</span><span>文節</span><span>文節</span></p>
<p><span>文節</span><br class="sp"><span>文節</span><br class="pc_inline"><span>文節</span></p>

span{
  display:inline-block; vertical-align:top;
}

表（テーブル）

SPサイズでは、表の横幅を画面の横幅より広くして、スクロール出来るようにする。

<div>
  <table>
    <tr>
      <th>項目</th><th>項目</th><th>項目</th>
    </tr>
    <tr>
      <td>値</td><td>値</td><td>値</td>
    </tr>
  </table>
</div>

div{
  overflow-x: auto;
}
table{
  width: 200%;
}
@media print, screen and (min-width: 768px){
  table{
    width: 100%;
  }
}

10px未満の文字

scale

scaleで小さくして、marginで要素の範囲を調整する。

p{
  font-size:10px;
  transform: scale(0.9);
  margin:-1% -1%;
}

svg

svgのtext要素に文字を入れて、大きさを調整する。

その他

コードを減らす

部品にemを使う

要素のフォントサイズ = 1em となる。
見出しの余白等の調整にemを使えば、フォントサイズが変わってもデザインは崩れない。

WEBページの部品作り

見た目を良くする

svg画像を使う

アイコンやシンプルなロゴはsvgにする。拡大や縮小をしてもぼやけない。

Webフォントを使う

画像はぼやけることがあるが、Webフォントはそれがない。
ファイル容量に注意する。

Webフォントを使う（エックスサーバー）