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

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

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

レスポンシブデザインのまとめ

これまでの授業でモバイルサイトから作っていくモバイルファーストや、既存の企業サイトをモデルにした物など数種類のレスポンシブデザインのサイトを制作してきましたが、大事なポイントをまとめると、


- メディアクエリー

メディアクエリーの使い方には、1つのCSSファイルに複数のブレイクポイントを設定する方法と、ブレイクポイント毎に複数CSSファイルを設定する、の2種類の方法があります。注意が必要なのは

1つのCSSファイルにまとめる場合は各ブレイクポイントで上書きしないと上部に指定したスタイルが継続される。

複数CSSファイルを用意する場合は各ブレイクポイントでスタイルを指定しないとブラウザーのデフォルトのスタイルが適用される

という事です。ここがメディアクエリーを使う際に一番大事なポイントなので必ず覚えましょう。



例 1つのCSSファイルにまとめるバージョン

@charset "utf-8";
body {
 
  }
@media screen and (min-width:641px){
body {
  
  }
}
@media screen and (min-width:960px){ 
 body {
 
  }
}


ブレイクポイント毎に複数CSSファイルを設定するバージョン

<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/style-l.css" media="only screen and (min-width:960px)">
<link rel="stylesheet" href="css/style-m.css" media="only screen and (min-width:641px) and (max-width:959px)">
<link href="css/style-s.css" rel="stylesheet" media="only screen and (max-width:640px)">
- ブレイクポイント

ブレイクポイントとは、メディアクエリーによってCSSを切り替える条件となるポイントのことで、ブラウザーのウィンドウ幅(px)で考えます。ユーザーが使うであろうデバイスを念頭にブレイクポイントを決めます。ブレイクポイントは必ずしも決まっている訳では無く、その都度変わる可能性もあります。

ブレイクポイントの例
スマートフォン用のポイント 640px以下
タブレット用のポイント   641px~959px
パソコン用のポイント    960px以上

- フルードデザイン(Fluid Design)

ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズが拡大・縮小していくデザイン。「可変レイアウト」ともいう。今まではwidthなどにpx単位で固定値をしていましたが、フルードデザインの場合はパーセント指定が必須。

- フルードイメージ

フルードイメージは、レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法で、CSSのみで実装できます。

img {
  max-width: 100%;
}