現在はpcでwebを見る人よりスマホなどのモバイルデバイスでwebを見る人の方が多い。なのでサイト制作もモバイルでの利用を最大限考慮しなくてはならない。

今回はモバイルにも対応させたサイトを作ってみよう。

[レスポンシブウェブデザイン]

スマホ対応の方法にも色々あるが、今回は一つのhtmlをcssで細かく調節していくレスポンシブウェブデザインをやってみよう。

1.いつものようにLesson7フォルダを作ったらその中にcss,images,jsフォルダを作る。
2.下のリンクから画像を集めたzipファイルをダウンロードして解凍後、それぞれのファイルをimagesフォルダに入れる。


3.以下のようにindex.htmlとmain.cssを編集する。

●index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>レスポンシブデザイン</title>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
  <div id="container">
    <header>
      <h1>Hello Responsive Web Design!</h1>
    </header>
    <main>
      <h2>Image</h2>
      <img class="imgFull" src="images/girl.jpg" alt="sample Image" />
      <h2>YouTube</h2>
      <div class="youtubeContainer">
        <iframe width="1280" height="720" src="https://www.youtube.com/embed/upRxE7a-tHM" frameborder="0" allowfullscreen></iframe>
      </div>
      <h2>float Items</h2>
      <ul id="floatItems">
        <li><img src="images/float1.jpg" alt="sample Image"/></li>
        <li><img src="images/float2.jpg" alt="sample Image"/></li>
        <li><img src="images/float3.jpg" alt="sample Image"/></li>
        <li><img src="images/float4.jpg" alt="sample Image"/></li>
      </ul>
    </main>
    <footer>
      &copy;Joytas All Rights Reserved.
    </footer>
  </div>
</body>
</html>

●main.css

header{
  position:relative;
  width:100%;
  padding-top:34%;
}
header h1{
  position: absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
  background-image:url(../images/headerImg.png);
  background-size:cover;
  box-sizing: border-box;
  padding:10%;
  font-size:3.5vw;
  color:#345;
}
main h2{
  background: #345;
  color:white;
  text-align: center;
  font-size:3vw;
  padding:5px 0;
}
.imgFull{
  display: block;
  width:100%;
}
.youtubeContainer{
  position: relative;
  width:80%;
  padding-top:45%;
  margin:2vh auto;
}
.youtubeContainer iframe{
  position: absolute;
  top:0;
  right:0;
  width:100% !important;
  height:100% !important;
}

#floatItems img{
  display: block;
  width:50%;
border:1px solid #333;
  box-sizing: border-box;
  float:left;
}
footer{
  text-align: right;
  padding-right:10px;
  color:#345;
}
/*1200px以上で適用*/
@media screen and (min-width:1200px){
  header h1{
    font-size:3vw;
  }
}
/*600px以下で適用*/
@media screen and (max-width:600px){
  header h1{
    font-size:4vw;
  }
  main h2{
    font-size:3.5vw;
  }
}

/*480px以下で適用*/
@media screen and (max-width:480px){
  #floatItems img{
  
  width:100%;

 }
}


ここまで打ったら、保存してブラウザで見てみよう。
下のようになったら成功だ。

ブラウザの幅を広げたり、狭めたりしてみよう。コンテンツがブラウザに合わせて拡大縮小するのがわかる。これがレスポンシブデザインだ。

[ソースコード解説]
●index.html
まずはファイル名に注目してもらいたい。このindexという名前は特別な意味を持つ名前で、url入力の際、index.htmlが入っているフォルダまでのアドレスを打てばこのファイルが表示される。

5行目:viewportの設定

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

この記述がないとスマホで見たときに縮小されて表示されてしまう。今回のように最適化を施したサイトはこの記述を入れよう。これをいれることによってgoogleからも「よしよしスマホ最適化しておるな」と判断され検索順位も上がる。
31行目:特殊文字
&copy;でコピーライトマークが表示できる。こういった特殊文字が色々あるので以下のリンクから一度目を通しておこう。
HTML特殊文字コード表
●main.css
今回のはぐっと実践的な内容になっている。細かく見ていこう。
1〜17行目:今回のヘッダーは凝っていて背景画像をブラウザ幅に合わせて拡大縮小して、その中に文字を出力している。
2行目:position:relativeこれは次のh1タグを絶対配置するための準備だ。絶対配置の起点となる要素にposition:relativeにするととりあえずは覚えておけば良い。
3行目:header要素をブラウザ幅いっぱいの100%に指定している。レスポンシブでは「%」を使うのが秘訣となる。ちなみにブロック要素はデフォルトで100%なのでここは書かなくても同じだ。
4行目:ここがポイントだ。横幅はブラウザ幅に対して指定すれば良いが高さをどうやって指定したらよいだろうか?今回はまず背景となる画像の横に対する縦の割合を計算し(34%)それをpadding-top:34%としてしてやる。これでブラウザがどんな幅になろうとそれに対して34%の高さのブロック要素を作ることができる。
6行目:header h1という記述はheader要素の中のh1タグという意味。このように半角スペースに続いて記述することで要素を限定できる。
7行目:position:absolute
これでさきほどposition:relativeを指定した親要素に対して絶対配置ができるようになる。絶対配置とは通常の上から下に流れる自然な配置を無視して、親要素に対しての位置を指定して配置する方法だ。
8,9行目:top:0;right:0:でその要素の起点となる場所を指定している。これで起点要素と同じ場所から描画するという指定をしている。left:0でも同じ挙動だが、なぜかright:0の記述を多く見かける、何故なのかは不明。
10,11行目:上で決めた起点を元にどのくらいの大きさを確保するかを決めている。ここではwidth,height共に100%つまり親要素と全く同じ領域を確保したことになる。
12行目:背景につかう画像を指定している。
13行目:background-size:cover;を指定することでその画像で領域を覆い尽くすまで拡大される。
14行目:box-sizing: border-box;これでpaddingやborderを設定してもこの要素自体が大きくならない。(無いとpaddingとborderを設定すると要素自体がそのぶん大きくなる)
これが無い時代はよく計算機で計算していた。まさに神プロパティだ。
15行目:上の処理でボックスの大きさが変わってしまうことがないので安心してpaddingを設定できる。
要素の幅にたいする10%のpaddingを四方向につけてh1の文字が画像の真ん中あたりに表示されるようにしている。
16行目:font-size:3.5vw;画面幅に対して文字サイズを変更する。これで画面幅の3.5%の大きさに文字サイズが設定される。vwはviewport widthの略

26行目:display: block; imgタグはインライン要素だが。displayプロパティでこれを強制的に変更できる。今回は画像をブロック要素に変換しwidthを100%にしている。画面横幅いっぱいに画像を広げたい時のイディオム。画像の場合は高さは自動的に比率を保ったまま拡大してくれる。

30~43行:YouTubeのレスポンシブ化
YouTubeをレスポンシブ化する案件も多い。ここはひとつのイディオムとして情報整理しておくとよい。

<div class="youtubeContainer">
        <iframe width="1280" height="720" src="https://www.youtube.com/embed/upRxE7a-tHM" frameborder="0" allowfullscreen></iframe>
      </div>

まずは上記のようにYouTubeサイトからコピペしてきたソースをdivでラッピングするところから始める。
親子関係にして親で領域をつくり、子で絶対配置をするのは最初やった背景画像とh1の関係と同じだ。
この時iframeタグに書かれているwidthが十分に取られていることを確認する。(YouTubeからの取得の際にオプションから大きさを設定できる)

css
32行目:100%にすれば画面いっぱいに広がるがあまりにデカイので画面に対して80%にしてみた。ここは状況にあわせて変えてもらいたい。
33行目:padding-top: 45%;youtubeの動画の縦横比率は100:56.25である。幅を80%に設定したので高さは45%を指定している。
34行目:margin:2vh auto; vhはviewport heightの略でブラウザの縦の高さに対する指定。
これでブラウザ高さの2%の隙間を動画の上下に確保できる。autoは左右autoの意味。これで動画がセンタリングされる。
35行目:上で作った領域に対して動画を絶対配置している。詳しくはヘッダー部分の解説参照のこと。
41,42行目:100% !important; 今回youtubeで引っ張ってきたソースコードにはインラインでwidthとheightが設定されている。通常はcssでの記述よりインラインの方が優先なのだが!importantを付与することで最強の強さにすることができる。今回のような自動生成されたコードに対してスタイルを当てる時などに利用する手段。最強になれるからといって乱用は禁止。

float Items
47行目:widthを50%にすれば二つの画像が幅いっぱいにおさまる。繰り返しになるがレスポンシブは「%」が基本。
48行目:1pxの隙間もなく画像が幅いっぱいに並んでいる。1pxの罫線を追加しただけでもカラム落ちする。現在はこの記述は必要ないがこうしておけば今後罫線を追加してもカラム落ちせずにすむ。
49行目:float:left;こういったときはfloat:leftで並べるのが基本。収まるスペースがなくなると自動的に改行して表示してくれる。今回は50%にして4枚並べることでCDジャケットのようなデザインを実現している。

57~70:メディアクエリ
画面の大きさによってあてたいスタイルがある場合はこの書き方が便利。
上のcssが読み込まれた後、その画面サイズの場合はスタイルが上書きされる。
今回はとてもブラウザサイズが大きくなったときフォントが大きくなりすぎることと、画面がとても小さくなったときに少し文字を大きくする設定をいれている。