スマホ対応　〜レスポンシブWebデザイン実現に向けて〜 #CSS

経緯

初めてのWebサイト作成に向けてある目標を掲げていました。

　目標：レスポンシブWebデザインを実現する！

この目標を達成するためにぶつかった壁について語りたいです。(涙)

アジェンダ

　・そもそもレスポンシブWebデザインって何？
　・私たちが心がけたこと
　・ぶつかった壁(SA●●KEのそり立つ壁みたい..)
　・壁をどう乗り越えたか？
　・まとめ
　・最後に

そもそもレスポンシブWebデザインって何？

レスポンシブデザインとは、デバイスの画面サイズに依存しないwebサイトを構築する手法です。
言い換えると、デバイスのウィンドウ幅に「responsive(良く反応)」して、
見やすい表示に自動で切り替える仕組みを持つデザインのことです。

要はPC用サイトのHTML・CSS、モバイル用サイトのHTML・CSSを別々に作らずに
1つのHTML・CSSで上手いことやりましょうってことだと思ってます　(´∀｀)

レスポンシブWebデザインを適用すると以下のようなメリットがあります。
・レスポンシブWebデザインのメリット
　URL・HTML・CSSがワンソースなので更新やメンテナンスがしやすい、
　スマホなどの画面が小さな端末で、見やすさ・使いやすさが向上する

一方でレスポンシブWebデザインにもデメリットは存在します。
　・レスポンシブWebデザインのデメリット
　　どのデバイスにも適したサイトを構築するには熟考が必要で、初期設計に時間がかかる、
　　ある程度の知識や技術(デザイン、コーディング)がないと、デバイスによって表示が崩れるリスクがある

1度作ってしまえば管理が楽、スマホ対応も可能！　などメリットも多いですが、
最初の設計・実装でのマルチデバイス対応が難しいといったデメリットもあります。
(実際私たちも苦しめられました…)

私たちが心がけたこと

レスポンシブWebデザイン実現に向けて、当初から心がけていたことは以下の点です。
①widthやheightの指定にpxを使用しないこと
②画像のwidthやheightは設定せずに画像本来の幅と高さを使用すること

①についてはpxではなく%やvh、vwを使用することを心がけていました。

実際のソースの一部

main.css

.character img {
  width: 30vw;
  margin-left: 20vw;
}

.character p {
  margin-left: 5vw;
  width: 50vw;
  color: #5d1669;
}

#cnav {
  width: 80%;
  margin: 0 auto;
}

②については以下のサイトにて画像の幅・高さなどを調整し、css内ではwidthやheightを設定しないことを心がけていました。(下手にwidthやheightを指定すると画像本来の縦横比が崩れてしまうので…)
　https://pixlr.com
　→画像の拡大・縮小、サイズ変更　etc
　　画像編集は全てこちらのサイトにお助けいただきました！

ぶつかった壁

色々問題はありましたが、約2週間で一通りHTML・CSS・Javascript(jQuery)の実装が完了！
Safariのレスポンシブ・デザイン・モードでもPC・スマホ画面での検証も問題なく終わったところで

AWSのS3に公開！！

ようやく一息ついたところで実際にPC・スマホで確認することに　o(^o^)o ﾜｸﾜｸ

PC画面では特に問題が起きませんでしたが、自分のiphone7でサイトにつなげると…

・画像は重なって表示されている
・文字の大きさがおかしい　
・そもそも背景画像が表示されない　など様々な問題がありました　ヽ(;´Д`)ノﾅﾝｼﾞｬｺﾘｬｰ

問題点を調べているうちにある共通点に気づきました。
問題①：PCとスマホで同じ画像を使用しているが、スマホ画面にうまく表示されていない
問題②：メディアクエリやvw・vhの設定が無視されている
　　　　（スマホ画面で表示しているけど、cssは軒並みPCの設定が適用されている）

・問題②について
実際のソース

main.css

@media (max-width: 480px) {
  #mainMessage1 {
    top: 26vh;
    left: 75vw;
  }
  #mainMessage2 {
    top: 26vh;
    left: 25vw;
  }
}

@media (min-width: 481px) {
  #mainMessage1 {
    top: 40vh;
    left: 75vw;
  }
  #mainMessage2 {
    top: 40vh;
    left: 25vw;
  }
}

本来はPC画面は@media (min-width: 481px) の設定、スマホ画面は@media (max-width: 480px) の
設定が適用されるはず…

しかし、現実は非情也
スマホ画面でも@media (min-width: 481px) の設定が適用されていました　(TдT) ｶﾅｼｲ

壁をどう乗り越えたか？

問題①についてはiphoneのRetina対応が未実施だったことが原因だった。
→メディアクエリでスマホ画面の場合はスマホ用(iphone用)に調整した画像を使用することにより解決

問題②はなかなか解決策が見つからなかったが、あることに気付く
・スマホ表示の時の画面サイズが980pxになっている

詳しく調べた結果、そもそもメディアクエリを適用するためにはviewportの設定が必要みたいですが、
私たちは設定していませんでした。

設定方法はHTMLのhead要素内に以下の一文を追加するだけ

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

これを適用した結果、見事問題②も解決しました！！

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>Man In The Mirror</title>
  <meta name="discription" content="Man In The Mirror">
  <meta name="keywords" content="Man In The Mirror,ゲーム,青春,高校生">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  …
</head>

また、vwやvhもviewportの設定が必要だったみたいです。
(画像が重なっていたりしたのはこれが原因)

まとめ

今回、レスポンシブWebデザイン対応に苦戦したのは
「資格を取得できるくらいの知識はあったが、開発経験がなかった」
ことが大きいと考えています。

ただ、今回の失敗は私たちにとって貴重な経験となりました。
今後も失敗を重ねるとは思いますが、こうして記事として残し、
少しでも私たちの成長、同じような壁に当たった方の力になれると幸いです！

最後に

今回の問題解決においてはQiitaの下記の記事をかなり参考とさせていただきました。
【CSS】スマホで Media Queries が効かないときの対処法

この場をお借りしてお礼申し上げます。

スマホ対応 〜レスポンシブWebデザイン実現に向けて〜

経緯

アジェンダ

そもそもレスポンシブWebデザインって何？

私たちが心がけたこと

ぶつかった壁

壁をどう乗り越えたか？

まとめ

最後に

スマホ対応　〜レスポンシブWebデザイン実現に向けて〜