読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

レスポンシブデザインにおけるブレイクポイントの値

レスポンシブデザインサイトを制作するうえで、ブレイクポイントの設定は必須です。しかし授業でも述べているように、ブレイクポイントの値は今の所これといった決まった値があるわけでは無く、その時々の主要デバイスの大きさによって変化していきます。また、そのページのデザインやレイアウトによってブレイクポイントの値を決める場合もあります。


授業では主に


の3つの値にブレイクポイントを作成してきましたが、デバイスの多様化やスマートフォンの大型化を加味し、最近では

といったブレイクポイントも良く目にします。


また、代表的なフレームワークであるBootstrap(Ver.3)では、

の4箇所にブレイクポイントが設けられています。このような既存のフレームワークの設定値を参考にしても良いでしょう。


大事なのはメディアクエリーの書き方も含め、単に数字を暗記するのでは無く、その都度適度なブレイクポイントの値とポイントの数を決め、それに応じたメディアクエリーの記述を出来るようにしましょう。


ここで出て来ているpxの値は「CSSピクセル(csspx)」での値です。ブレイクポイントの値と共に「CSSピクセル(csspx)」と「デバイピクセル(dpx)」の概念も復習し、しっかりと理解しておきましょう。

yachin29.hatenablog.com



参考URLallabout.co.jp