・PC版コーディングはなんとかやり遂げたけど、レスポンシブ化で時間がかかる。
・もっと早くコーディングできるようになりたい。
など悩んでいる方向けの記事です。
私は2020.4月よりプログラミングの勉強を始め、
PCデザインからのコーディング案件をいくつかこなしましたが、
いつもレスポンシブ化にかなり時間がかかっていました。
今回はレスポンシブ化に関して、
実案件をこなしながら学んだ私が、
・トラブルとその解決方法
・レスポンシブを少しでも早くする方法
を共有します。
私はこれらのことが完璧にできるようになるまで、
何度もここに戻ってきて確認しています。
■レスポンシブコーディングのトラブル３選とその解決方法
レスポンシブコーディング時によくあるトラブルと
その解決方法をまとめました。
＜トラブル1＞タブレット版、スマホ版で画面右側に変な余白ができる
私がはじめてこの写真のようになっているのを見たとき、
勝手に余白が設定されているのかと思いましたが、
これは設定された余白ではありませんでした。
下の方へスクロールすると分かりますが、
bodyからはみ出ている大きすぎる要素があるのです。
その大きすぎる要素をbody内に収まるように設定しなおせば、
右側の白い部分はなくなります。
下記、はみ出した要素を設定し直す方法です。
解決方法① 画像サイズの変更
上の写真のようにbodyから画像がはみ出ている時、
・width指定を％にする。(100％以内に)
・body内に収まるサイズの横幅にする。
などの方法があります。
デザインにもよりますが、
はじめから下記のコードを書いておく
img{max-width:100%;}または、
imgの横幅は、pxではなく％で指定しておけば、
はみ出すことは少ないはずです。
解決方法② 横幅の指定を見直す
この場合は、送信ボタンに横幅を設定していたので
ボタンがはみ出ていました。
はみ出さないようにするためには、
画像の時と同じく、
・width指定を％にする。
・body内に収まるサイズの横幅にする。
などの方法があります。
また、hight指定をしてしまうと、
レスポンシブ時にレイアウトが崩れてしまうことが多いので
hightは指定しないようにしています。
解決方法③ ボックスの定義を変更
上記解決方法①②を試しても
まだ少し空白ができることがあります。
下記コードを指定で解決するかもしれません。
*,
*::before,
*::after {
box-sizing: border-box;
}
なぜならば、下記の図のように横幅(width)の初期設定は
paddingとborderは含まれていないからです。
width＝ウィンドウ幅と設定しても、borderがはみ出てしまう可能性があります。
上記コードでborderまで含んだ横幅での指定へと変更されます。
解決方法④ 文字サイズを変更
文字サイズをpxで設定している場合は、
これもはみ出る原因となるので小さくする必要があります。
文字サイズをrem指定すると、
親要素に対する相対的な文字サイズ指定となるので、
レスポンシブ時の文字サイズ変更が簡単です。
スマホ時には親要素となるhtmlの文字サイズを変更するだけで
remで指定していた全ての文字サイズを簡単に小さくすることもできます。
解決方法⑤ 疑似要素の設定を見直す
疑似要素の位置をpxで指定している場合は、
PC/スマホ毎に設定する必要が出てきます。
％で指定すれば、サイズ変化にも対応しやすくなります。
【NEW！】 どこがはみ出ている要素かわからないとき
これ、結構あります。
そんな時は下記ツイートを参考にさせてもらって、
はみ出ている要素を探し出します。
なんか変な横スクロールでてるなあと思ったら
— いちくん (@tips__web) January 1, 2021
* {
outline: 2px solid red;
}
などと書いてあげると、はみ出ている場所が一瞬でわかるので便利です。#デイトラ pic.twitter.com/3xLb5mmjCp
＜トラブル２＞レスポンシブ化ブレークポイントの決め方がわからない
レスポンシブ時に悩むのが、ブレークポイントです。
コーディング案件をいくつか受注してきましたが、
発注者の方が、レスポンシブについて細かな指定をしてくれることはほぼありませんでした。
下記が私の解決方法です。
解決方法 自分なりのルールを作る
下記ブログ記事を参考にさせてもらい、ブレークポイントを決めています。
レスポンシブのブレークポイントの決め方！PCデザインカンプから再現する際のベスト
ブレークポイントはサイトデザインによって異なりますが、
上記記事のようにルールを作っておけばどのデザインでも応用できます。
＜トラブル３＞PC版とスマホ(タブレット)版でレイアウトが異なる
下記を確認していなかったために、
時間がさらにかかってしまいました。
PC版/タブレット版/スマホ版のデザインレイアウトをコーディング前にチェックしておく
PC版のコーディング完了後、いざレスポンシブ化を始めてみると
HTMLの書き直しが必要になることがあります。
（ボタンの配置がスマホ版では異なるなど）
その場合、せっかく指定したCSSも修正が必要に・・・
スマホ(タブレット)版のレイアウトを考えずにコーディングを始めてしまうと、
後で変更が大変になります。
よって先にレスポンシブ化まで考えたHTMLを書いておくことで
戻って修正する必要がなくなります。
■スピードアップのコツ
①コーディング開始前にPC版、スマホ版のレイアウトの違いを確認しておく。
レイアウトを確認してからコーディングを始めましょう。
コーディング前の準備に時間をかけるのが、
結果的にはコーディングをスピードアップさせるコツです。
②上記トラブルの解決方法を念頭におきながら、コーディングを進める。
上記トラブルを経験してから、
本当にpxで設定する必要があるのかどうか、
％で指定しておけば小さなウィンドウにも対応できるのではないか、等
考えながらコーディングするようになりました。
失敗例と対策を頭に入れて、
CSSを設定していけば後の手戻りが少なくなるはずです。
③たくさん模写して経験する。
本を読んだり、ブログを読んだりして勉強もできますが、
結局は自分の経験から学ぶことが多いです。
たくさん模写のがおすすめです。
