【HTML/CSS】レスポンシブコーディングの数値指定は、相対/絶対を使い分けると楽

150812_001

相対指定を厳守せねばならぬコーディングルールがない限りは、数値を指定するCSSプロパティで、絶対指定を取り入れると一気に楽になります。
スマホ等の実機で表示確認するとわかりますが、無理をしてまで相対指定にする必要はありません。

目次

確認済みディスプレイ(ブラウザサイズ)

  • iPod touch 第5世代(320×568)
  • HTC J butterfly HTL21(360x?)
  • Google Nexus 7 / 2013(600×960)
  • iPad mini 2(768×1024)
  • ASUS 液晶ディスプレイ(1280×1024)
  • ASUS 液晶ディスプレイ(1600×900)

 

% による相対指定を使うプロパティ

% を指定しなければ、タッチデバイスでまともに表示できないもの。

  • width
  • height
  • background-position の 縦位置

× background: url() no-repeat left (n)px; Androidで大幅にズレる
○ background: url() no-repeat left (n)%; iOS / Android ほぼ同一になる

 

px による絶対指定で問題ないプロパティ

% を使わなくても違和感がないもの。

  • 300px以下のwidth(iPod touch 第5世代 を考慮)
  • absolute ※場合による
  • background-size ※場合による
  • border
  • border-radius
  • box-shadow
  • text-shadow
  • margin
  • padding

 

相対/絶対、どちらの指定でも使えるプロパティ

どちらを使っても違和感がないもの。

  • font-size ※できれば rem を使いたい。

 

明らかな違和感がない限りは

150812_002

「あれ、絶対指定だと表示がおかしい…」という違和感を覚えない限りは、px 指定でコーディングすると凄く楽です。また、% 指定にした方が異様に崩れる場合もあります。

柔軟に使い分けて効率的なコーディングを。

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)
菊池崇
アスキー・メディアワークス
売り上げランキング: 48,574
    • このエントリーをはてなブックマークに追加