ISARAのレスポンシブデザイン(スマホ画面)の模写を始めました。
スマホからの見た目を確認するには、デベロッパーツールを開き左下のアイコンをクリックします。
機種を選択できたり、「Responsive」で横幅を伸び縮みできます↓
スマホ画面だとposition:fixedが効かない。
まずヘッダーを作っていくと、いきなり固定ヘッダーの挙動がおかしいです。
固定なのに動いてしまいます。
なぜだ？しっかりposition:fixedになっているのに…。
調べてみると、ありました↓
スマートフォンとposition:fixedのバグ – to-R
どうやらAndroidやiPhoneだと、そのままではposition:fixedがうまく効かないみたいですね。
ということでviewportの部分のcontent属性にuser-scalable=noを追加しました↓
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no“>
すると、うまくいきました！
しっかりヘッダーが固定されてます。
ちなみにヘッダー右の「資料請求」の部分は新しく作りました。
レスポンシブデザイン難しい。
レスポンシブデザイン、難しいです。
pc画面を作る際にレスポンシブデザインのことまで考えて作ってないのでそもそもコードがぐちゃぐちゃ…。
最初は心が折れそうになります。
ただコードはぐちゃぐちゃでもいいから
とりあえず一回作ってみることが大事だと思いました。
そこから色々学びとることができる。
要領やコツは後から付いてきます。
一度やり直してる。
そして、実は一度途中までやってやり直してます。
なぜかというと、スマホからの見た目を確認するのに、単純にウィンドウの幅を狭めて確認していましたが、これだと本来の見た目と少し違うんですよね。
正しいのはちゃんとデベロッパーツールで見ること(先程書いた通り)。
ということで、途中までやったのに泣く泣く最初からやり直しました。
その他、難しかった点。
こういう↓横幅が伸びると中身が伸び縮みして左右の余白が一定のやつ。これが意外と難しかった。
本来ならwidthを指定しないで左右のmarginだけ指定すれば自動的にこのようになってくれるのですが、
pc版ですでにwidthを指定してしまっている。
width90%とかやると、横幅にあわせてmarginも微妙に変わってしまう。
width100%にして左右のmarginを○○pxとすると、横幅がはみ出てしまう。
ではどうやるかと言うと、width:autoにします。
そして左右のmarginを○○pxとすると、左右の余白は一定に保ちながら中の要素は伸び縮みしてくれます。
モバイルファースト。
プロゲートだとpc画面から作って後からタブレット、スマホ画面を作っていましたが、
今って「モバイルファースト」と言ってスマホ画面から先に作って、後からタブレット、pc画面を作るのが主流みたいです。
なぜなら、最初にスマホ画面から作った方がスマホ画面に読み込むCSSファイルは一つで済みます。
対して後から作るpc画面には、CSSファイルとレスポンシブのCSSファイルの二つを読み込まなくてはなりません。
ということでスマホ画面から作った方がスマホにやさしい作りになっているんですね。
対してpc画面から作ることを「デスクトップファースト」と呼びます。
よほど特別な理由がない限り「モバイルファースト」をおすすめします。
イサラはpc画面から作りましたが、次回からはスマホ画面から作ってみようと思います。
ココナラでも模写コーディングのサポートしてます↓
コメント