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

最後: スマホ対策とオリジナルサイト

今日やること

バイルでも閲覧できるWebサイトをつくる

学ぶこと

「レスポンシブwebデザイン」

今日のステップ

  • 過去に課題提出したフォルダを開く(なければ「pinterest」フォルダで)
  • index.htmlに「ビューポート」を追加
  • cssに「メディアクエリ」を追加
  • デベロッパーツールを使用し、モバイルでの見た目を確認する
  • 一つ一つデザインしていく
  • 完成

最終課題

pinterest的なレイアウト」「クリックしたら画像が大きくなるように」「モバイル対策」が完了しているサイトを提出。 期日は1/30

まずは課題提出フォルダを開く(なければpinterestフォルダ)

フォルダを開いてくださいませ。

htmlファイルに「ビューポート」を追加

ビューポートは、ディスプレイの幅に合わせてサイトの横幅を変えるための仕組み。 これと次の「メディアクエリ」はセットで扱う。

ということで

以下のコードをタグの中に書く。場所はどこでもいいです。

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

これで完了。次はcssです。

cssファイルに「メディアクエリ」を追加

メディアクエリは、要は「幅に合わせたCSSをつくろう!」という仕組みです。 これは、CSSをサイズなどの条件によって適用制御するための仕組みです。 どういうことかというと...

たとえば、以下の図を見てください。

f:id:dorak:20170123185111j:plain

図の繰り返しになっちゃいますけど、要は 「横幅が480px以下のときはこのCSS!」

「それ以外のときはこのCSS!」ということがしたいのです。

では、それをどう書くか。 以下のように書きます。CSSファイルを開きましょう。

@media (max-width: 480px) {

/*
この中のCSSは、ディスプレイの幅が480px超えたら無視されます!
*/

}

ちょっと確認してみましょう。 元の状態はこちら。

f:id:dorak:20170117092508p:plain

さて、手元のCSSファイルを開いて、

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

* {
  box-sizing: border-box;
}

html {
  background: #f8f8f8;
}

@media (min-width: 480px) {

  body {
    height: 100%;
    max-width: 1024px;
    margin: 0 auto;
  }

  .headline {
    text-align: center;
    font-weight: bold;
    padding: 80px 0;
  }

  .work {
    float: left;
    width: 33.3333333%;
    padding: 0 12px 24px 12px;
    display: inline-block;
  }

  .work img {
    border-radius: 4px;
    width: 100%;
  }

}

はい、記入終わったらブラウザの幅を広くしたり縮めたりしましょう。めっちゃ縮めるとCSSが外れるのがわかると思います。記述をここで再確認。

まずはこれ。

@media (min-width: 480px) {

}

これは、このカッコ{}の中にかいたCSSが当たるのは480pxが最小サイズという意味です。480pxよりも幅が狭くなるとCSSが外れます。 反対に、

@media (max-width: 480px) {

}

としたときは、CSSが当たる最大サイズが480pxとなります。480pxをブラウザの幅が超えたときはCSSが外れます。

ちなみに、480pxというのはモバイルのサイズです。

ということは、

480px以下のときのデザインと480px以上のデザインをつくってあげれば「モバイルとそれ以外(PC)のデザイン」となるわけです。

つまり、以下のようにメディアクエリを2つ用意して上げれば良いわけです。PC用と、モバイル用。

@media (max-width: 480px) {

}

@media (min-width: 481px) {

}

バイルのデザインをすすめる

最後、モバイルのデザインです。 PCはすでにつくってあるデザインを充ててあげればOKです。

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

* {
  box-sizing: border-box;
}

html {
  background: #f8f8f8;
}

@media (min-width: 480px) {

  body {
    height: 100%;
    max-width: 1024px;
    margin: 0 auto;
  }

  .headline {
    text-align: center;
    font-weight: bold;
    padding: 80px 0;
  }

  .work {
    float: left;
    width: 33.3333333%;
    padding: 0 12px 24px 12px;
    display: inline-block;
  }

  .work img {
    border-radius: 4px;
    width: 100%;
  }

}

これだけだとPCのみ。 モバイルにもあててあげましょう。

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

* {
  box-sizing: border-box;
}

html {
  background: #f8f8f8;
}

@media (min-width: 480px) {

  body {
    height: 100%;
    max-width: 1024px;
    margin: 0 auto;
  }

  .headline {
    text-align: center;
    font-weight: bold;
    padding: 80px 0;
  }

  .work {
    float: left;
    width: 33.3333333%;
    padding: 0 12px 24px 12px;
    display: inline-block;
  }

  .work img {
    border-radius: 4px;
    width: 100%;
  }

}

@media (max-width: 389px) {
    body {
    height: 100%;
    width: 100%;
  }

  .headline {
    text-align: center;
    font-weight: bold;
    padding: 60px 0;
  }

  .work {
    padding: 0 24px 32px 24px;
    width: 100%;
  }

  .work img {
    width: 100%;
  }
}

はい、こんな感じです! f:id:dorak:20170123232731p:plain

と、いうことでバーっと解説しました。 あとは自分で試してみてください!

完成、課題として送信

FC2ホームページのアカウントを持っている人はアップロードまで完了してリンクを下記URLに送信 アカウントを持ってなければzipにしてやっぱり以下のアドレス宛に送信

sy_tanaka@vivivit.co.jp

です。お疲れ様でした。