HTML/CSS

【CSS】ブレイクポイントについてのまとめ【レスポンシブ対応】

 

デザインカンプからレスポンシブデザインのWebサイトを作るとき、ほとんどの場合はレスポンシブのデザインカンプは無い そうで、「いい感じでお願いします」というパターンもあるみたいです。

ということは、PCデザインを見たら、どんなデザインにするのかをイメージしつつコーディングしなければいけません。

 

→レスポンシブデザインの作り方

  • ブレイクポイントを決める
  • メディアクエリで書く

 

一つずつ解説していきます。

ブレイクポイントの決め方

何度かやっていくうちに、なんとなくレスポンシブのブレイクポイントについてわかってきました。

 

→ブレイクポイントの決め方

  • PC → インナーの幅
  • タブレット → iPad(768px)まで
  • スマホ →(767px)から(320px)まで

 

PCは、サイトの中で指定している横幅をブレイクポイントにします。

ウィンドウサイズを狭めていくと、文字がはみ出しそうになるラインですね。これを覚えておくと、PC→タブレットのブレイクポイントは簡単に作れました。

 

タブレット、スマホのサイズ

タブレットは768px、スマホは767pxから320pxにしますが、これはデバイスによってサイズが異なるからです。

 

デバイスviewportサイズ(width)
iPhone5,5S320
Android端末360
iPhone 6375
iPhone 6 plus414
iPad / iPad Mini768

768pxがブレイクポイントになっているのはこの数字が根拠になっています。

 

ブレイクポイントを図で表すと以下のようになります。(ここでは仮に、インナーの幅は1180pxとしています)

 

この画像を意識しておけば、レスポンシブデザインのコーディングもイメージしやすいです。ノートなど紙にイメージを書き出してからコーディングするといいかもしれませんね。

 

メディアクエリの書き方

メディアクエリの書き方ですが、通常通りCSSで書けば以下のようになります。

@media screen and (max-width: 1179px) {}

@media screen and (max-width: 767px) {}

 

この記述をすることで、以下の図のようなブレイクポイント通りのレスポンシブデザインを作ることができます。

 

これでも十分OKですが、メディアクエリをSassで書くと、見やすく簡単にコーディングが可能になります。

まだまだ僕も練習中ですが、実践していきます。

参考

 

まとめ:スマホ→縦並び、タブレットは発想が大事

ブレイクポイントを決めてメディアクエリを書いたら、いざコーディングをしていく訳ですが、スマホデザインはとにかく「縦並び」にしておけばおっけーと思っています。

でも、タブレットは結構難しく、どのようにコーディングするかはコーダーの腕にかかっています。

 

一番勉強になるのは、

 

「同じデザインのサイトをたくさん見て研究する」

 

ということだと思いました。

他のサイトがどんなレスポンシブデザインになっているのかを見ることで、自分の引き出しも増えます。

 

あとは、「このデザインはこうする」とテンプレートを作っておくと、レスポンシブ化するときにも迷わずに済みそうですね。