くまだどうも、くまだ です。
私がやっているやり方は、もしかしたら効率的じゃない方法なのかもしれません。効率的なやり方は熟練のプロの方なら知っていると思いますので、もっと効率的なやり方があればご教授いただきたいところです。
今回はあくまでも、自分のアウトプット的な感じの記事です。
Web制作で、自分がやっているレスポンシブ実装の方法
案件を受けたら、（色々省略をしますが）クライアント様なり制作会社様からなり、デザインカンプが来ると思います。自分でワイヤーフレーム→デザインカンプを作成するパターンもありますが、そのデザインカンプを使って作成していきます。
デザインカンプの形式が
- Illustrator（イラストレーター）
- Adobe Xd
- PhotoShop
- Figma
のいずれかになると思われます。
基本的にはAdobeXdを使ってやるのがいいと思います。もしXd以外のデザインカンプがきたとしても、Illustrator→Xd、もしくはPhotoShop→Xdに変換する方法もありますで、そちらを利用するといいでしょう。
SP（いわゆるモバイルサイズ）、Tab（タブレットサイズ） PC などデザインカンプがあると想定します。（SPとPCだけという場合パターンもあります）
自分たちで作成する場合は基本的に360pxと768px、1280pxもしくは1920pxで作成します。
デザインカンプの数字は、作成する人・案件によって違うので一概に正解といったものはないです。コーディングするさいは、デザインカンプがきたらそのデザインカンプの数字でまずはコーディングします。（375px幅のデザインカンプだったら、検証ツールで375px幅に合わせてつくる）
使用するブラウザは Chrome です。
Chrome の検証ツールが優秀なので、コーディングをする際にいつも使っています。検証ツールを使うと、特定の端末幅に合わせてコーディングすることが可能です。
モバイルファーストでコーディング
今はモバイルファーストで作成するのが流れになっているので、モバイルサイトからコーディングすることになります。（モバイルサイズからコーディング=モバイルファーストというわけではない）
モバイルファーストで作成する場合、モバイル→タブレット⇀PCという感じで作成していきます。メディアクエリはmin-widthで書くことになります。PCファーストで書く場合はmax-widthという形で書くことになります。
〇min-width:widthの取ることができる最小値。要するに、これ以上小さくならない幅。
〇max-width:widthの取ることができる最大値。要するに、これ以上は大きくならない幅。
例えば、こんな感じです。
〇モバイルファーストから書く場合
//モバイルサイズのコーディングをここに書く
@media screen and (min-width: ○○px) {
//タブレットサイズのコーディングをここに書く
}
@media screen and (min-width: ○○px) {
//PCサイズのコーディングをここに書く
}これをセレクタの直下に書いていくのか、メディアクエリごとにまとめて書いてしまうのかは人それぞれです。
ちなみに私はセレクタの直下にメディアクエリを書く派です。なぜなら、上下にスクロールするのがめんどうだからです笑
〇PCファーストから書く場合
//PCサイズのコーディングをここに書く
@media screen and (max-width: ○○px) {
//タブレットサイズのコーディングをここに書く
}
@media screen and (max-width: ○○px) {
//モバイルサイズのコーディングをここに書く
}特定のメディアクエリを適用させる場合は、以下のような記述です。
〇特定幅のメディアクエリ適用
@media screen and (min-width: ○○px) and (max-width: ○○px) {
}
ブレイクポイントの設定
私がよくやるブレイクポイントの数字設定ですが、520pxと960pxに設定しておきます。この数字の根拠は、以下の参考サイトになります。
むろん、これが正解というわけではなく、ひとつの方法です。
Bootstrapで採用されているブレイクポイントを使ってコーディングしたこともあります。
個人的に参考になるかなと思ったのは、Bootstrap で使われるブレイクポイントの数字なんかは参考になると思います。
ブレイクポイントとは、
ブレイクポイントは、デバイスやビューポートのサイズによってレイアウトがどのようにレスポンシブに変化するかを示すトリガーです。
Bootstrap公式
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| X-Small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
ブレイクポイントが多いとコーディングのほうは大変ですが、細かくやればレイアウト崩れのリスクは大幅に回避することはできます。
モバイルサイズのレスポンシブ・コーディング
ブレイクポイントの設定は人によってやり方は違いますが、上記の参考サイトを例にすると、以下のようになります。
〇前提：ブレイクポイントを520pxと960pxに設定にした場合（モバイルから書く場合）
- モバイルサイズは0ピクセルから 519ピクセルまで
- タブレットサイズは520pxから959px
- PCサイズは960px～
ということになります。
上記のブレイクポイント設定を前提に話を進めていきます。
デザインカンプの数字通りにコーディングするのですが、検証ツールで確認するのはデザインカンプの数字以外も見なければなりません。
例えば、デザインカンプが375pxできたら、検証ツールで375px幅に合わせてコーディングします。それ以外にも私がチェックするのは320px、519pxです。この320pxと519pxという数字は、320pxは幅の狭い端末を想定したものです。
519pxは次のブレイクポイントの境目です。（モバイルサイズの最大値）
そのサイズの狭い幅（上記の例だと320px）と大きい幅（上記の例だと519px）をチェックして、大きなレイアウト崩れがなければ、321px～518px間はだいじょうぶであろう、という感じです。
ブラウザ幅を狭くしたり広くしたりして、実際に中のコンテンツがどのような動きになっているのか確認するのが一番です。デザインカンプ上の数字だけ見ていると、思わぬところでレイアウトが崩れている可能性があります。なので、ブラウザ幅を縮めたり広げたりしてみて確認するのは重要です。
これを怠ると、ムダにメディアクエリをはやしまくり、気がついたらメディアクエリの数が膨大になっている、みたいな事態も想定されます。
これと同様の作業を、タブレット、PC、という感じでやっていきます。
〇個人的にやっている、モバイルサイズコーディングの手順
- デザインカンプの幅でコーディング
- 320px幅を確認・修正
- 519px幅を確認・修正
- （検証ツール上で）ブラウザ幅320~519px間全体を広げたり縮めたりしてレイアウト崩れをチェック
519px幅の端末はないから確認する必要はないのでは、と思うかもですが、基本的に特定の端末幅だけしか確認しないのはNGだと思っています。というのも、将来的にはその端末幅のものが出る可能性もなくはないからです。
将来どの端末幅が登場してもいいように、「現状その端末幅ないpx幅のレスポンシブも確認したほうがいい」と考えています。（といってもこれがなかなか難しいんですが、、）
タブレットサイズのレスポンシブ・コーディング
タブレットサイズのデザインカンプが、仮に768pxできたら、検証ツールで768pxに合わせてコーディングをしていきます。先ほどのブレイクポイント設定では、520px~959px間がタブレットサイズということになるので、768pxのコーディングが終わったら、520pxと959pxもチェックします。
〇個人的にやっている、タブレットサイズコーディングの手順
- デザインカンプの幅でコーディング
- 520px幅を確認・修正
- 959px幅を確認・修正
- （検証ツール上で）ブラウザ幅520～959px間全体を広げたり縮めたりしてレイアウト崩れをチェック
PCサイズのレスポンシブ・コーディング
タブレットサイズが終わったら今度はPCサイズで同じことをやります。
〇個人的にやっている、PCサイズコーディングの手順
- デザインカンプの幅でコーディング
- 960px幅を確認・修正
- 2000px以上を確認・修正
- （検証ツール上で）ブラウザ幅全体を広げたり縮めたりしてレイアウト崩れをチェック
まとめると、デザインカンプの数字以外に、設定したブレイクポイント間の最小値と最大値を確認しながらコーディングする、という方法でやっています。
レスポンシブ・コーディングその他
全てピクセル指定だと、ブラウザ幅を狭くしたり広くしたりするとブレイクポイントの切り替え時きたときに、カクッという感じでコンテンツが可変します。
横幅に当たる部分を、%指定などにして同様の操作を行うと中のコンテンツはブラウザ幅に合わせて可変します。
ピクセル指定するのは、基本的に要素を可変させたくないものに指定すべきです。（例えばボタンなど）幅を動かすのと同時に、中のコンテンツを可変させたいならば横幅は%指定などがいいかなと思います。
可変させたいけど、これ以上は、、、という場合にはmax-widthやmin-widthなども併用するといいでしょう。
モバイルファーストから書く場合もPCから書く場合も、次のブレイクポイントのレイアウトを考えながらコーディングしていきます。モバイルの場合は、基本的にコンテンツは縦並びのシンプルな構造になります。それがPCになると横並びになることもあります。なので、それを意識してHTML,CSSを書いていきます。
コンテンツ幅が狭くなったときに、テキスト系がブラウザ幅の両端に被らないように少しpaddingを当てたりなど調整が必要になります。
レスポンシブコーディングのやり方は人それぞれ。
レスポンシブコーディングのやり方は人それぞれです。
例えば、HTMLを全部書いてからCSSを書いていく人もいるだろうし、1セクションを書いたら そのセクションのCSSを書く人もいるので、これは人によってやり方が違うので自分のやりやすい方法を取るといいでしょう。
私もその時の気分によって変わります笑。強いていうならHTMLを全部書いてから、セクションごとにCSSをブレイクポイントごとに書いていく、という感じが多いような気がします。
ここまでコーディングできたら後は、テストサーバーに上げて実機テストです。検証ツールで見るのとサーバー上にあげて見るのでは、結構違うのでその辺は実際にやってみて違いを確認します。
検証ツールで見たものを、そのまま納品するのは絶対厳禁です。必ずサーバーにあげて実機テストをして、それで問題なければ納品、という形です。
もちろん、納品前に必ずクライアントに確認してもらうのは必須となります。
というわけで、自分の知見を自分なりにまとめました。（まとまってない）
ぶっちゃけこのぐらいの知見なら、熟練の方の有益な記事を読んだほうが参考になります。それは間違いない。私はまだまだ修行が足りないので、（未来の自分があとで読み返すかもしれないので）アウトプット代わりの記事として残しておきます。
ここまで読んでくださりありがとうございました。