画面のサイズをスマホサイズにしてみよう

今日の目標

レスポンシブ対応を学ぶ

レスポンシブデザインに対応するには主に
・HTMLのviewport
・CSSのmedia query
・Bootstrap
・JavaScript ほぼjQuery

その他にも色んな方法があるかと思うのですが、代表的なものはこんな感じだと思います。

そん中でもviewportをオススメするのですが

viewportというhtmlの機能を使ってスマホに対応させる方法なんです

HTMLでレスポンシブ対応？？？

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

って1行をHTMLのheadに記述するだけ

うぉおおおおおお　すげぇぇぇぇ楽だぜぇぇぇぇ

ちなみにhamlで書くとこんな感じ

!!!
%html{:lang => "en"}
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %meta{:charset => "utf-8"}/
    %meta{:content => "width=device-width, initial-scale=1, shrink-to-fit=no", :name => "viewport"}/
    %meta{:content => "", :name => "description"}/
    %meta{:content => "", :name => "author"}/

こんな感じでmetaタグに記述させるだけで、簡単に導入することができます。
width=device-widthこの記述でスクリーンサイズに合わせてねってことになり、
例えば、width=width=500とすると画面幅500px用の表示になります。

initial-scale=1.0は初期表示する際の拡大率。

viewportの概念(ちょっと真面目に)

<meta name="viewport" content="width=480"> と指定したとする。

するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。

ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。
したがって、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。

ブラウザがviewportを実際の液晶画面に表示する。この時、viewportの幅が実際の液晶画面よりも大きければviewportがはみ出して、液晶画面にはviewportの一部しか表示されないだろう。逆に、viewportの幅が液晶画面よりも小さければviewportの内容は液晶画面に収まるが、液晶画面には余白ができてしまうだろう。これを調整するため、ブラウザはviewportのレンダリング結果を液晶の画面サイズに合うようにズームアップまたはダウンして表示する。
と指定した場合はviewportの幅は端末やブラウザアプリ毎に調整される。

CSSで調整する方法

<link rel="stylesheet" href="sp.css" media="screen and (max-width: 500px)">
<link rel="stylesheet" href="pc.css" media="screen and (min-width: 1000px)">

少し紛らわしいところですが、
max-width 画面幅が500px以下はsp.cssを読み込み、
min-width 画面幅が1000px以上はpc.cssが読み込まれるという感じ

しかし使うなら下記のメディアクエリかなと思う。

@media screen and (max-width: 499px) { 
    /*　画面サイズ 499pxまで適用　*/
    .content {color: #red;}
  }
  @media screen and (min-width: 500px) and (max-width: 999px) {
    /*　画面サイズ 500pxから999pxまで適用　*/
    .content {color: #green;}
  }
  @media screen and (min-width:1000px) {
    /*　画面サイズ 1000px以上から適用　*/
    .content {color: #blue;}
  }

こんな感じで切り替えたい画面幅で、好きなようにスタイルを適応させれるのが便利

生CSSを打ちたくない人はBootstrapを使いましょう。

Bootstrapに関してはまた違う機会に！