>コーディング作業時にカンプに無い画面幅のデザインについて教えてください。 どのレベルの課題なのか分からないので、推測で答えます。 >Photoshopのカンプ（PC用・SP用の2種）を元にコーディングを行っています。 >ブレークポイントについては以下の指定がありました。 > >・ブレークポイントは横768px未満をSP表示、768px以上をPC表示としてください。 >・PC表示：1366 × 768以上の画面サイズ、SP表示：375 × 667（デベロッパーツールのiPhonSE）で確認した際に表示崩れが起きないように作成してください。 まず、「PC表示：1366 × 768以上の画面サイズ」とは「2k、4k」解像度も想定していると考えられます(プロだと6k解像度を使っている場合も有りますが、一般的には4k解像度まで対応しておけば良いです)。 >添付はPC用カンプの一部ですが、ヘッダー部分で悩んでおります。 >例えば、画面幅を769px(SP用ブレークポイント手前)にした場合、4つのボタンはどうがんばっても横並びでは入らないのですが、どうするのがベストなのでしょうか。 ザックリと言うとpxをvwに変換して下さい。 100vwは「bodyタグのデフォルトmargin、スクロールバーの幅」は一切 考慮されてないので、横幅が はみ出ます(つまり「bodyのデフォルトmargin、スクロールバーの幅」のサイズを引いて計算しなければなりません)。 ちなみにプロの場合はbodyのデフォルトmarginをゼロに設定するようです(その場合はスクロールバーの幅のサイズだけを引いて計算すれば良い)。 >ちなみに以下の手段はいかがでしょうか。 > >・min-widthを設定し、崩れないwidth幅で固定する。 >→画面幅を縮めると横スクロールになってしまいますが、お題を読む限りではPC画面とiPhoneSE画面で崩れていなければOKと読み取れたので。。 普通、ダメに決まってるでしょ。 >・オリジナルで画面幅に応じたデザインを実装する。 >→画面幅によってボタンが2段に流れる、又はタイトルとボタンを2段に分ける等、、こちらのほうが良いと思っておりますが、カンプにないデザインを勝手に実装するのはアリなのか悩んでいます。 普通、ダメに決まってるでしょ。 参考 Webページ作成の注意点 http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000295&tsn+00000295&bts+2022/01/05%2018%3A04%3A56&