【レスポンシブデザイン】書き方

レスポンシブデザインを実装する方法

cssのメディアクエリを利用する。

メディアクエリとは？

サイトを表示している画面環境を判定して条件を指定できるCSS機能。

実装コード例

HTMLファイル

headタグに以下のmetaタグを追加する。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

※emmetを利用していれば「!」で自動的に挿入される。

CSSファイル

@media screen and (min-width:768px){
  body {
    background-color:red;
  }
}

@media screenとは？

メディア種別。
all, print, screen, speechがある。
スマホやpc向けのサイトであればscreenになるので基本的にscreenを指定すればOK。
スマホ、PCのみを想定していてscreen以外の選択肢がない場合は、screenの部分を省略できる。

@media (min-width:768px){
  body {
    background-color:red;
  }
}

(min-width:768px)とは？

768px以上の場合という条件指定。

メディアクエリ以外のレスポンシブテクニック

%指定

要素の幅や高さを親要素基準にする。
すべての要素の幅を%指定すると画面サイズのwidthが親要素になるためレスポンシブなページを作ることができる。
例えば画面いっぱいに表示したい場合はwidth:100%は頻出。

rem指定

相対的にフォントの大きさを決める記法。
rというのはrootという意味でルートのフォントを基準に値が決定する。
したがってremを利用する際は必ずhtmlタグにfont-sizeを指定する必要がある。

.html {
  font-size:16px;
}

このとき1remは16pxになり、1.5remで16px + 8pxで24pxになる。

remの使い方

/* モバイルファースト */
.html {
  font-size: 16px;
}

/* タブレット */
@media (min-width: 768px) {
  font-size: 20px;
}

このように画面毎にルートのfont-sizeを変更するだけで、htmlの子要素ではremを利用しているので文字サイズが変更される。

.pc_onlyクラスの使い方

.pc_onlyクラスや.sp_onlyなどのクラスを付与することで表示非表示を操作する。
※spはsmartPhoneのこと

@media (min-width: 768px) {
  .sp_only{
    display: none;
  }
}

flex

pictureタグ

emプロパティ