Help us understand the problem. What is going on with this article?

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

今日の目標

レスポンシブ対応を学ぶ

レスポンシブデザインに対応するには主に
・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に関してはまた違う機会に!

keitah
インフラエンジニアとして勤務しています。 AWS SAA取得 LPIC: Level.201 Cisco:CCNA
https://myprofile-7377b.web.app/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away