Webデザインラボ当サイトはJavaScriptが有効に設定されていないと正しく表示されません。【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。2019/08/17こんにちは(・∀・)昨年【2018年度決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️という内容の記事を投稿しました。基本的な考えは変わってません。細かな指定で表示したい場合は前回ご紹介した通りの設定が良いと思っています。管理することを考えると前回ご紹介したブレークポイントの数では手間が掛かってしまうのも事実。今回、ちょっと多かったブレークポイントを少し減らしてみることにしました。ブレークポイント前回投稿した記事では作ったブレークポイントの数は10個。10個と言っても考え方としてはメジャーブレークポイントはモバイルとPCの境目の835pxの1つです。10個あるのに変わりはなく、また管理の手間を考えるとやはりブレークポイントは少ない方が良い。いうことで今回、ブレークポイントは415pxと960pxに決定しました。〜*/}以上の3スタイルのビューになります。今回2つのブレークポイントを用意して3つのビューを作りましたが、最初は835pxの1つのブレークポイントだけでも良いかなと思ってました。モバイル用が834pxまで、835px以上をPC用として使用する考えです。モバイル端末で834pxまであるのは広すぎるかなというのと、PC用で835pxは狭いかなという思いもあって、415pxと960pxのブレークポイントを用意しました。414pxまでをスマホ縦画面用、415px〜959pxをスマホ横画面及びタブレット縦画面用、960px以上をタブレット横画面とPC用として使用します。sampleそれではサンプルをご覧ください。ブラウザサイズを変えるか、開発者モードでブラウザサイズを変更してみてください。見出しの後ろにCSSで指定してある画面サイズが表示されます。demoモバイルファーストでCSSの記述していきますので@mediaで囲われていない部分に書いたCSSがデザインの基本形になります。最初のブレークポイントは@mediaがmin-width:415pxなので、@mediaで囲われていない部分は0〜414pxまでとなります。向けのデザインになります。"0〜414px";}414pxまでの画面サイズのデザインはここで指定します。1つ目のブレークポイントです。向けのデザインになります。"415px〜959px";}/*415px〜959px*/}min-widthが415pxなので415px以上の画面サイズのデザインはここで指定します。2つ目のブレークポイントです。タブレット横画面とPC向けの画面サイズ960px〜です。横画面、がここの範囲に入ります。"960px〜";}/*960px〜*/}min-widthが960pxなので960px以上の画面サイズのデザインはここで指定します。CSSピクセルサイズ最後に現在市販されている代表的な端末のCSSピクセルサイズの一覧をご紹介します。基本的にこれらの端末のCSSピクセルサイズはなるべくカバーするということを前提としました。1024上記の表はChromeとSafariの開発者モードで出てくるCSSピクセルのサイズ一覧です。ブレークポイントを少なくして管理の手間を省きたいという場合、今回ご紹介するブレークポイントが良いのではないかと思います。今回のサンプルのようにPC用のデザインを可変にするのであれば必要ありませんが、固定のデザインにする場合、PC用のブレークポイントをもう一つ位追加しても良いと思います、それでも全部で3つです。いえいえ、メジャーブレークポイント1つとマイナーブレークポイントを分けて細かく設定したい、という方は前回の投稿【決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️を参考になさってください。Webデザインラボ中の人NYのデザイン学校でグラフィックデザインを学んだ後、同じくNYにあるWeb制作会社にてインターンからWebデザイナーへ。同時期に米国永住権(グリーンカード)を取得。その後某旅行会社系のWebクリエーター兼社内インフラ担として働いた後、結婚を機に約12年に渡るアメリカ生活を終え日本に帰国。日本では某携帯キャリアの社内Webクリエーターとして勤務。Web系に携わる前はホノルル空港でGreeterとして働いていた経験や、アメリカ国内の衣料品を中心としたアパレル系のバイヤー経験もあり。趣味はお酒を飲みながらの家でまったり音楽鑑賞とアウトドア系全般。最近は自転車にもハマってます。更新情報はTwitterかFacebookで配信してるのでフォローして確認してみて。