くまだどうも、くまだ です。
2021年にも書いているのですが、だいぶ日が空いたので今はこんな感じでレスポンシブをやっているよ～という話。（とはいえ、ほとんど内容はいっしょかも）
Web制作で、自分がやっているレスポンシブ実装の方法2024
あくまでも私のスタイルで書きます。
基本的に下請けなので、ディレクターさんなりWebデザイナーさんなり、制作会社様からなり、なにかしらのコーディング依頼が来てそれを請けると、デザインカンプがきます。
デザインカンプの形式は以下の4つのどれかが想定されます。
- Illustrator（イラストレーター）
- Adobe Xd
- PhotoShop
- Figma
のいずれかになると思われます。
2024年時点の自分の体感ではFigmaが圧倒的に多く、次いでXdです。ただし、これは依頼者の状況によって変わります。人によっては、Illustratorが多かったり、PhotoShopのデザインカンプが多いことがあります。（例外として、スプレッドシート、エクセル、ワード、PDFなどの形式で極々稀にデザインが来ることもあります）
基本的にコーダーがデザインをすることはないので、全てのデザインツールの細かい操作まで使いこなせる必要はありません。しかし、コーディングで必要な情報の取り方ぐらいは使えたほうがいいかなと思います。
コーディングで必要な情報とは例えば、
- 画像の書き出し方法
- 要素の大きさ・高さ
- 要素間の余白
- 文字色、文字の大きさ、行間の高さ、レタースペーシング、フォントの種類…etc
これらの値の取り方ぐらいは各種デザインツールで使えるようにはなっておく必要があります。
ブレイクポイントの設定
ブレイクポイントの数字は、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 |
ブレイクポイントが多いとコーディングのほうは大変ですが、細かくやればレイアウト崩れのリスクは大幅に回避することはできます。
上の数字を参考にすると、用意するブレイクポイントの数字は以下のようになります（自分の場合は以下の数値を採用してます）。
- min-width: 576px
- min-width: 768px
- min-width: 992px
- min-width: 1200px
- min-width: 1400px
コーディングする際は、デザインカンプがきたらそのデザインカンプの数字でまずはコーディングします。つまり375px幅のデザインカンプだったら、検証ツールで375px幅に合わせてからコーディングしていきます。
コーディングする順番は、モバイルファーストならSP→PC→タブレット、という感じになります。
モバイルファーストでコーディング
今はモバイルファーストで作成するのが流れになっているので、モバイルサイトからコーディングすることになります。（モバイルサイズからコーディング=モバイルファーストというわけではない）
モバイルファーストで作成する場合、モバイル→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ファーストから書く場合
//PCサイズのコードを書いていく
@media screen and (max-width: ○○px) {
//タブレットサイズのコードを書いていく
}
@media screen and (max-width: ○○px) {
//モバイルサイズのコードを書いていく
}モバイルサイズのレスポンシブ・コーディング
ブレイクポイントの設定は人によってやり方は違いますが、上記の参考サイトを例にすると、以下のようになります。
〇前提：ブレイクポイントをブートストラップの数値を参考にした場合（モバイルから書く場合）
- モバイルサイズは0ピクセルから 767ピクセルまで
- タブレットサイズは768pxから991px
- PCサイズは992px～
ということになります。
上記のブレイクポイント設定を前提に話を進めていきます。
デザインカンプの数字通りにコーディングするのですが、検証ツールで確認するのはデザインカンプの数字以外も見ます。
例えば、デザインカンプが375pxだったら、検証ツールで375px幅に合わせてコーディングします。
PCサイズのレスポンシブ・コーディング
モバイルサイズが終わったら今度はPCサイズで同じことをやります。
PCサイズの場合でもデザインカンプの幅と検証ツールで合わせてコーディングしていきます。仮に1366pxのデザインカンプだったら、1366px幅に検証ツールを合わせてコーディングしていきます。このとき使用するのは、1200pxのブレイクポイントです。
//モバイルサイズのコードを書いていく
@media screen and (min-width: 1200px) {
//PCサイズのコードを書いていく
}1366px幅でコーディングできたら、一旦1200px幅、992px幅、768px幅、576px幅までそれぞれ縮めてみます。
表示崩れがあったら、それぞれ調整していきます。
//モバイルサイズのコードを書いていく
@media screen and (min-width: 576px) {
モバイル・タブレットサイズのコードを書いていく
}
@media screen and (min-width: 768px) {
//タブレットサイズのコーディングをここに書く
}
@media screen and (min-width: 992px) {
//PCサイズのコードを書いていく
}
@media screen and (min-width: 1200px) {
//PCサイズのコードを書いていく
}ブレイクポイントの数字と、境目の数字も見ていきます。768px幅だったら、768px幅と767px幅を確認する感じです。
まとめると、デザインカンプの数字以外に、設定したブレイクポイント間の最小値と最大値を確認しながらコーディングする、という方法でやっています。
上記以外では、360px幅、2000px幅以上も確認していきます。
順番としては（1366pxと375pxのデザインが来たとして）、
- （PCのレイアウトを意識しながら）SPサイズ(検証ツールは375px幅)をコーディング
- PCサイズ(検証ツールは1366px幅)でコーディング
- 576px幅、575px幅、768px幅、767px幅、992px幅、991px幅でそれぞれ画面幅を縮めたり広げたり確認しつつ必要ならコーディング・調整
- 1200px幅、1199px幅、1400px幅、2000px幅でそれぞれ確認しつつ必要ならコーディング・調整
- 360px幅も一応確認、必要なら調整
という感じです。
ブラウザ幅を狭くしたり広くしたりして、実際に中のコンテンツがどのような動きになっているのか確認するのが一番です。デザインカンプ上の数字だけ見ていると、思わぬところでレイアウトが崩れている可能性があります。なので、ブラウザ幅を縮めたり広げたりしてみて確認するのは重要です。
例えば767px幅の端末はないから確認する必要はないのでは、と思うかもですが、基本的に特定の端末幅だけしか確認しないのはNGだと思っています。というのも、将来的にはその端末幅のものが出る可能性もなくはないからです。
将来どの端末幅が登場してもいいように、「現状その端末幅ないpx幅も確認したほうがいい」と考えています。
まとめ
コーディングできたら後は、テストサーバーに上げて実機テストです。検証ツールで見るのとサーバー上にあげて見るのでは、結構違うのでその辺は実際にやってみて違いを確認します。必ずサーバーにあげて実機テストをして、それで問題なければ納品、という形です。
ここまで読んでくださりありがとうございました。