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

今日やること

バイルでも閲覧できる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

です。お疲れ様でした。

画像をクリックしたら大きくなるようにする & Javascriptの簡単な理解

今日やること

  1. 画像をクリックしたら大きくなるように
  2. Javascriptのライブラリを自分のサイトに入れてみる

準備するもの

前回使った「pinterest」というフォルダを今回も使います。 また、後半では年末に課題として提出してもらった作品に前回、今回会得した表現方法を組み込んで、さらにクオリティを上げていきます。

画像をクリックしたら大きくなるように

まずはpinterestというフォルダを見つけ、Atomで開きます。

今回やりたいことはこんな感じです。

この画像をクリックすると...

f:id:dorak:20170117092508p:plain

こうなるように!!!

f:id:dorak:20170117092618p:plain

ということで、一個一個解説していきます。

まずは、「クリックすると画像が大きくなるようにするプラグイン」を導入します。

プラグインとは...

たとえば「クリックしたら画像を大きくしたい」とか、「pinterestみたいな複雑なレイアウトを簡単に実現したい」とかを読み込むだけで実現できる便利なファイルのことです。Photoshopなどでも、グリッドを決めたりするプラグインがあるかと思いますが、まああれと同じようなものです。

今回導入するプラグインは「Lightbox」。

index.htmlを開く

プラグインは単なるCSSファイル、Javascriptファイルなので、HTMLで読み込ませれば簡単に使えます。 ということで、今回使うlightboxを読み込んでいきましょう。

必要なプラグインファイルはlightbox.csslightbox.jsです。

ということで、まずはcssファイルから読み込んでいきましょう。 cssはheadタグの中にリンクを記載します。以下の記述を、app.cssが記載されている行よりも前に入れましょう。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/css/lightbox.min.css">

はい、これでOKです。次はjavascriptファイルを読み込んでいきます。 javascriptはbodyタグ直前に記載されています。これは、body閉じタグの直前に入れましょう。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.min.js"></script>

これで準備はOKです。

headタグの中, bodyタグのとじタグ前の状態をそれぞれ見ていきます。

headタグ前(css)

  <head>
    <title>Pinterest</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/css/lightbox.min.css">
    <link rel="stylesheet" href="assets/css/app.css">
  </head>

bodyタグ前(js)

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.min.js"></script>
    <script src="assets/js/app.js"></script>

クリックして画像を大きくするにはもうひと工夫必要

ここまでだと、単に「大きく出来るファイル」を読み込んだだけです。 最後、必要なのは「大きく出来るファイルを実行する」という命令を出す必要があります。

これをするには、以前つくった.workの調整が必要になります。 ここです。

<div class="work">
        <div class="work-image">
            <img src="assets/images/1.jpg">
        </div>
        <div class="caption">
          My work
        </div>
      </div>

lightboxを使って、クリックして画像を大きくするには、画像の周りをaタグで囲んで、リンクに画像を指定し、さらにrel要素にlightboxをしていしてあげる必要があります。 意味不明だとは思いますが、実際には以下のようなかんじです。

まず、<a href="assets/images/1.jpg" rel="lightbox"></a>を用意します。そしたら、もとからあるimgタグをこのaタグの中に入れてしまいます。具体的にはこんな感じです。

<div class="work">
        <div class="work-image">
          <a href="assets/images/1.jpg" rel="lightbox">
            <img src="assets/images/1.jpg">
          </a>
        </div>
        <div class="caption">
          My work
        </div>
      </div>

反映を確認してみましょう。 クリックしたら大きくなりましたか??

まだこれだけだと、「1つの画像しか大きくならない」という感じです。なので、一旦前回までの.workは全部消して、新しくつくった上の.workをコピペしていきましょう。 そうするとpinterestみたいな見た目でクリックしたら大きくなります。

以前つくった課題のポートフォリオページにも、pinterestレイアウトとlightboxを入れてみましょう。

ポイントは次の2点。

  1. プラグインファイルを読み込む
  2. プラグインを使う!という命令を書く

です。ということで、以前の課題ファイルを開いてみましょう。

Javascriptプラグインを使えるようにする

これは簡単です。bodyのとじタグの直前に、以下のコードを入れてください。

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

これで、いろいろなプラグインを使用するための準備が整いました。 ※これは厳密に言うとJavascriptプラグインではなく、jQueryプラグインです。jQueryとは、Javascriptをより書きやすくしたプログラミング言語です。この先Webをやるなら必ず使うことになりますが、まあ使ってさえしまえば簡単なものです。

さて、今回使った2つのプラグインを入れてみましょう。といっても、リンクを入れるだけです。 さっきのscriptタグの下に、以下のscriptタグを入れてみましょう。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.min.js"></script>

これでpinterestライクなレイアウトと画像クリックしたら大きくなるプラグインの導入が完了しました。

次は、「これらのプラグインを有効にします!」という命令を入れます。 scriptタグの一番下に以下のタグを入れてください。ファイル名を見るとわかると思いますが、app.jsなので、みなさんが使うファイルです。

    <script src="assets/js/app.js"></script>

はい、次はapp.jsを開きます。

そしたら、以下のコードをコピペしてください。

$(function(){
  $('#masonry').masonry({
    itemSelector: '.work',
    isFitWidth: true,
    isAnimated: true
  });
});

これで使用準備は完了です。 この段階で利用できない場合は、itemSelectorに指定されているクラス名が間違っているか、app.cssにコピペしちゃってるかの二択です。上記だと、.workというクラスがついたものを並べます。なので、クラス名がworkじゃないとちゃんと並びません。そこが要注意です。

次、lightboxです。 lightboxはもう一個、cssを別途で読み込む必要があります。 なので、headタグのcssのリンクが書いてあるところに以下を読み込んで見ましょう。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/css/lightbox.min.css">

これで使用準備は万全です。 最後に、HTMLの状態を整えましょう。

lightboxを使う際は、まず、<a href="assets/images/1.jpg" rel="lightbox"></a>を用意します。そしたら、もとからあるimgタグをこのaタグの中に入れてしまいます。

そんな手順が必要です。なので、imgタグを上記のaタグで囲ってあげましょう。

こんな感じです。

<a href="assets/images/1.jpg" rel="lightbox">
  <img src="assets/images/1.jpg">
</a>

これでオールオッケーだと思います。

Pinterestみたいなボックスをつくる

概要

Pinterestみたいな、互い違いのレイアウトをつくってカッコイイサイトを目指します。 このようなレイアウトがつくれることによって単純に見てる人は「すごい」って思います。

完成形

f:id:dorak:20170110130706p:plain

準備物

通常通りのHTMLフォルダ(思い出しましょう)

通常通りのHTMLフォルダ準備ステップ

  • pinterest」フォルダをつくる
  • いつものフォルダを用意する
    • index.html
    • assetsフォルダ
      • cssフォルダ
      • jsフォルダ
        • app.js
      • imagesフォルダ
        • サイトでつかう画像たち

制作ステップ

  1. 必要な画像をimagesフォルダに入れ込む
  2. HTMLに必要な情報を入れ込む
  3. CSSでデザインする
  4. javascriptpinterestライクにする
  5. 完成

1. 必要な画像をimagesフォルダに入れ込む

画像を8枚ほど ※注意!画像のサイズはなるべくバラバラに。以前までは正方形でつくっていたが、Pinterestみたいなレイアウトにおいてはむしろ画像サイズを固定しないほうがいい。

2. HTMLに必要な情報を入れ込む

  1. index.htmlを開く
  2. 必ず入力しなければいけない項目を入力する
<!doctype html>
<html lang="ja">
  <head>
    <title>Pinterest</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="assets/css/app.css">
  </head>
  <body>
  </body>
</html>
  1. 今回はjavascriptも使うので、bodyのとじタグの直前に以下のコードを加える
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
<script src="assets/js/app.js"></script>

ということでこの状態では以下の感じに

<!doctype html>
<html lang="ja">
  <head>
    <title>Pinterest</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="assets/css/app.css">
  </head>
  <body>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
    <script src="assets/js/app.js"></script>
  </body>
</html>
  1. 全体の箱をつくる bodyタグの中に以下のように入れる
<p class="headline">My Pinterest</p>
<div class="works" id="masonry">
</div>

My Pinterestはタイトル、div.workspinterestっぽいカードを入れる箱

  1. pinterestっぽいカードをまずはhtmlで組む 必要な情報は以下
  2. 画像
  3. キャプション

なので、次のようにコーディングしてみる

<div class="work">
  <div class="work-image">
    <img src="assets/images/1.jpg">
  </div>
  <div class="caption">My work</div>
</div>

全体を.workクラスでくくってあげて(worksではない、単数形のwork)、中で画像の箱である.work-image、キャプションを入れる箱である.captionに分けてつくる。 .work-imageの中にはimgタグで画像を入れてあげる。

これをあと7個コピペして、ファイル名を適宜変えてあげればうまくいく

この時点でのhtmlは以下

<!doctype html>
<html lang="ja">
  <head>
    <title>Pinterest</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="assets/css/app.css">
  </head>
  <body>
    <p class="headline">My Pinterest</p>
    <div class="works cf" id="masonry">

      <div class="work">
        <div class="work-image">
          <img src="assets/images/1.jpg">
        </div>
        <div class="caption">
          My work
        </div>
      </div>

      <div class="work">
        <div class="work-image">
          <img src="assets/images/2.jpg">
        </div>
        <div class="caption">
          My work
        </div>
      </div>

      <div class="work">
        <div class="work-image">
          <img src="assets/images/3.jpg">
        </div>
        <div class="caption">
          My work
        </div>
      </div>

      <div class="work">
        <div class="work-image">
          <img src="assets/images/4.jpg">
        </div>
        <div class="caption">
          My work
        </div>
      </div>

      <div class="work">
        <div class="work-image">
          <img src="assets/images/5.jpg">
        </div>
        <div class="caption">
          My work
        </div>
      </div>

      <div class="work">
        <div class="work-image">
          <img src="assets/images/6.jpg">
        </div>
        <div class="caption">
          My work
        </div>
      </div>

      <div class="work">
        <div class="work-image">
          <img src="assets/images/7.jpg">
        </div>
        <div class="caption">
          My work
        </div>
      </div>

      <div class="work">
        <div class="work-image">
          <img src="assets/images/8.jpg">
        </div>
        <div class="caption">
          My work
        </div>
      </div>

    </div>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
    <script src="assets/js/app.js"></script>
  </body>
</html>

で、ブラウザで確認するとこんな感じ。まだCSSが当たってないから崩れます。

f:id:dorak:20170110132422p:plain

3. CSSでデザインする

まずはCSSを設定する時の必ず入れる項目を入れる

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

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

* {
  box-sizing: border-box;
}

サクサクいきます。 次はheadlineの「My Portfolio」をデザイン。 ついでに、全体の幅も決めちゃいます。 全体の幅が決まれば、画像もちょっと小さくできます。 CSSファイルのお尻に付け足してください

html {
  background: #f8f8f8;
}

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

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

.work-image img {
  width: 100%;
}

ここまでやって、見た目はこんな感じ。 画像が結構でかいのでまあまあ崩れてますが、まあよしとします。 f:id:dorak:20170110133007p:plain

ここまででやったのは、 - ヘッドラインの整え - ページ全体の幅設定

次は列表示です。今回は3列にしたいので、flaot: left;.cfをテーマに追加してみましょう。 といっても、列の幅を例のごとく%で指定するくらいですが。

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

ということで今見た目はこんな感じです。ぽいといえばぽいんですが、おしいですね。

f:id:dorak:20170110134451p:plain

最後、javascriptです。

4. javascriptpinterestライクなデザインをつくる

といっても、もうあまりやることはなくて、以下をapp.jsにコピペすればOKです。

$(function(){
  $('#masonry').masonry({
    itemSelector: '.work',
    isFitWidth: true,
    isAnimated: true
  });
});

はい、ブラウザを再読込してみましょう。 おそらくきちんとした見た目になっているはずです。

5. 完成チェック

スマホ対応を考える

概要

スマホでサイトが見れなければ意味が無い・・・と言ってもいいくらい、スマホからサイトを見ることは重要です。 これまでの知識を活かし、スマホでも見れるようにサイトを改造してみましょう。

アジェンダ

  • スマホで見た時にも崩れないような画面をつくる

ステップ

  • 以前作成したプロフィールページを題材にしてすすめる
  • スマホで見ても崩れないレイアウトに
    • CSS メディアクエリという技術を用いて、ブラウザ(キャンバス)の表示幅ごとにCSSをつくる

完成形

f:id:dorak:20160615192402p:plain

前提知識

HTMLのheadに次の記述を追加(CSSのリンクよりも上に書く)

<meta name="viewport" content="width=device-width, initial-scale=1.0"> これは、これからスマホ対応をしていく上で必要なコード。

メディアクエリ

メディアクエリとは、ブラウザの幅が今どれくらいかを取得する機能。 ここ超重要です。

例えば、みなさんはこのテキストをなんらかのブラウザで読まれていると思います。 Safariなのか、Chromeなのか、firefoxなのか・・・ そういったブラウザのサイト表示領域がブラウザの幅です。

メディアクエリは、この幅が今何pxかを計算してくれます。

ページの半分くらいまでブラウザを縮めているのであれば680pxくらい(適当)、画面いっぱいに広げていれば1365pxくらい、といったような感じです。

さて、これを使うとなぜスマホ対応出来るのか。

答えはブラウザの幅、という点です。

スマホでネットをするときも、ブラウザの幅という制約がつきまといます。 みなさんはスマホでもSafariChrome, または「ブラウザ」というアプリを使ってサイトを閲覧すると思いますが、そういったスマホも横幅を持っています。 これを、メディアクエリを使えば判定出来ます。幅が小さいからスマホだろう、というロジックですね。

メディアクエリってどう書くのか

メディアクエリはCSSファイルに書きます。

@media (min-width: 968px) {
  ここに、幅が968px以上のときのスタイルを書く
}

こう書きます。

意味を解説します。

@media と書くことによって、メディアクエリを使います!という宣言をしています。 次、@mediaのあとの (min-width: 968px) 。 これは見ての通りで、最低横幅が968pxのとき、という条件をつけています。

まとめると、

画面の最低横幅が968pxのとき、{}の中のcssを適用します

ということです! 一応実際のコードも載せときます。

@media (min-width: 968px) {
  .keyvisual {
    background-color: red;
  }
}

繰り返します。 @mediaでくくった中にいつも通りのCSSをかけば、条件に応じてCSSが出しわけられていきます。

上記は最低横幅が968pxのときでした。これはPCサイズですね。 では、968px以下、スマホのサイズはどうやって表現すれば良いのかというと、

@media (max-width: 967px) {
  967px以下の時のスタイル
}

こう書いてください。

すると、画面サイズが967px以下の時のスタイルを指定できます。

これで、

968px以上の時のスタイル

967px以下の時のスタイル

の書き方を学びました。これで、1つのHTMLで、画面サイズに応じて2パターンのデザインをつくれるということです。 968px以上の時はこのスタイル、967px以下の時はこのスタイル、といったように。

2つのデザインをつくることになるので、CSSは従来の2倍近く書かなければいけません。

さて、それでは実際に作っていきましょう。

ここから先はスマホの開発。Chromeを使いましょう。

Chromeには、スマホモードでサイトを表示できる便利機能がある

まずは、要素の検証を立ち上げます。 cmd + shift + cを押しましょう。(windowsctrl + shift + c)

f:id:dorak:20160615184419p:plain

右側の画面が立ち上がったと思います。 つぎに、下のスクショの赤枠でかこってあるボタンをクリックしてみてください。 f:id:dorak:20160615185045j:plain

こんな画面になるはずです。 f:id:dorak:20160615185603p:plain

これで、スマホのサイズ感で作業ができます。可能なら、ページ上部から横幅を320pxに設定しておきましょう。

さて、

CSSは次のようになります。

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

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

* {
  box-sizing: border-box;
}

/*-----------ここからがPC版-----------------*/
@media (min-width: 968px) {
  ここに、今までのapp.cssの内容をコピー
}


/*--------ここからがスマホ版--------*/

@media (max-width: 967px) {
  スマホ用に新しくスタイルを作成
}

スマホ用に新しくスタイルを作成」の部分に、完成形となるようにCSSを入れていってみてください。

答えは以下です。 これコピペするだけじゃ力つかないので、どうしてこうなるのかをきっちり考えてみてください。

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

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

* {
  box-sizing: border-box;
}

@media (min-width: 968px) {
body {
  position: relative;
}

.keyvisual {
  background-image: url(../images/covere.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  height: 420px;
}

.title {
  display: inline-block;
  background: rgba(255,255,255,.8);
  margin-top: 90px;
  padding: 64px;
  color: #757575;
}

.main_text {
  display: block;
  font-size: 32px;
  border-bottom: 3px solid #757575;
  margin-bottom: 48px;
}

.sub_text {
  font-weight: bold;
  font-size: 12px;
}

.works {
  width: 960px;
  margin: 32px auto;
}

.work {
  float: left;
  width: 25%;
  padding: 0 8px 16px;
  cursor: pointer;
}

.work:hover {
  opacity: .8;
}

.work img {
  width: 100%;
}


.work_title {
  color: #757575;
  float: left;
  font-size: 12px;
  padding-top: 2px;
}

.work_date {
  color: #757575;
  float: right;
  font-size: 10px;
  border: 1px solid #757575;
  padding: 2px 4px;
  border-radius: 2px;
}

.credit {
  background: #ddd;
  color: #757575;
  padding: 16px 0;
  text-align: center;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.8);
}

.modal img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
}


@media (max-width: 967px) {
body {
  position: relative;
}

.keyvisual {
  background-image: url(../images/covere.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  height: 420px;
}

.title {
  display: inline-block;
  background: rgba(255,255,255,.8);
  margin-top: 90px;
  padding: 64px;
  color: #757575;
}

.main_text {
  display: block;
  font-size: 32px;
  border-bottom: 3px solid #757575;
  margin-bottom: 48px;
}

.sub_text {
  font-weight: bold;
  font-size: 12px;
}

.works {
  width: 100%;
  margin: 32px auto;
}

.work {
  float: left;
  width: 50%;
  padding: 0 8px 16px;
  cursor: pointer;
}

.work:hover {
  opacity: .8;
}

.work img {
  width: 100%;
}


.work_title {
  color: #757575;
  float: left;
  font-size: 12px;
  padding-top: 2px;
}

.work_date {
  color: #757575;
  float: right;
  font-size: 10px;
  border: 1px solid #757575;
  padding: 2px 4px;
  border-radius: 2px;
}

.credit {
  background: #ddd;
  color: #757575;
  padding: 16px 0;
  text-align: center;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.8);
}

.modal img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
}

宿題!

最終課題です。 つくりたいサイトを考えてきてください。 最終的にネットで公開します。

題材は自由です。 PhotoshopIllustratorを用いて、つくりたいサイトをデザインしてきてください。

FC2ホームページを使ってWebサイトを一般公開する

最終課題

FC2ホームページに自分のサイトをアップロードし、そのURLを僕あてに送信 送信先メールアドレス -> sy_tanaka@vivivit.co.jp 本文にURLのみ記載し、特別な理由がなければ本文・件名ともになくて大丈夫です。

http://sniresnriesa.web.fc2.com/index.html

Yahooジオシティーズを使ってアップロード

  1. Yahoo!japanアカウント登録
  2. Yahoo!ジオシティーズにアクセス http://geocities.yahoo.co.jp/

  3. 無料ホームページを開設ボタンをクリック

  4. あとの手順は以下

  5. メニューの左方にある「ディレクトリ作成」ボタンをクリックでassetsフォルダを作成

  6. assetsフォルダをダブルクリック
  7. assetsフォルダ内にcssフォルダを作成
  8. assetsフォルダ内にimagesフォルダを作成
  9. cssフォルダをダブルクリック
  10. cssフォルダ内に、メニュー左方にある「アップロードするファイルを選択」をクリックして、app.cssをアップロード
  11. メニュー一番左の左矢印(ディレクトリをひとつ上にもどる)ボタンを押して、assetsフォルダに戻る
  12. imagesフォルダをダブルクリック
  13. imagesフォルダ内に使用する画像をアップロード
  14. 一番上の階層に戻って、アップロードするファイルを選択ボタンからindex.htmlをアップロード
  15. index.htmlをダブルクリック
  16. サイトが表示されていれば完成!!

宿題

FC2ホームページの登録を完了する!

概要

今日、そして次回(最終回)にわたり、今まで作ってきたWebページを一般公開します。 今回利用するのはFC2ホームページ(http://web.fc2.com/)です。 FC2ホームページはHTML, CSS, Javascriptなどのアップロードに対応している無料サービスで、手軽にオリジナルサイトがつくれます。

まだページができてない人は、今日はページのブラッシュアップを行ってください。 完成してるなーという人は下記の手順でサイト公開してみてください。

※公開したサイトは必ずポートフォリオに載せましょう。採用担当者の食いつきが違います。 他の方法ではGithub-page(https://pages.github.com/)とかもありますが、こっちはプログラムの知識が若干必要なためやや敷居が高いです。ただ、業界標準の作られ方をしているので、勉強する価値はあります。興味がある人は調べてみてください。(Gitとかターミナルの操作は必須となります。)

ステップ

  1. FC2アカウントを取得
  2. FC2ホームページへアクセス
  3. ファイルをアップロード
  4. 公開完了

詳細手順

  1. FC2アカウントを取得してください。持ってる人はログインしてください。
  2. FC2ホームページ(http://web.fc2.com/)にアクセスしてください
  3. 無料プランで登録
  4. サイトのアカウント名を決定(これがURLになります)
  5. カテゴリ、タイトル、詳細を決定して利用規約同意チェックマークをつけ、登録ボタンをクリック
  6. ホームページ作成ボタンをクリック
  7. ホームページ管理の下にあるファイルを作成アップロード
  8. すでにindex.htmlがアップロードされているので、右クリック(副クリック)で削除をクリック

ファイルアップロード

ここからさきは実際にサイトを公開するにあたって必要なファイル(index.htmlとかassetsフォルダとかapp.css)をアップロードしていきます。といっても、自分のPCにフォルダつくるのと全く同じ感じです。 profile3を例に解説します。もちろん、assetsやcssといったファイル・フォルダの名前は自分が今つくっているディレクトリの名前に合わせる必要があるので、その辺は適宜よろしくお願いします。

  1. メニューの左方にある「ディレクトリ作成」ボタンをクリックでassetsフォルダを作成
  2. assetsフォルダをダブルクリック
  3. assetsフォルダ内にcssフォルダを作成
  4. assetsフォルダ内にimagesフォルダを作成
  5. cssフォルダをダブルクリック
  6. cssフォルダ内に、メニュー左方にある「アップロードするファイルを選択」をクリックして、app.cssをアップロード
  7. メニュー一番左の左矢印(ディレクトリをひとつ上にもどる)ボタンを押して、assetsフォルダに戻る
  8. imagesフォルダをダブルクリック
  9. imagesフォルダ内に使用する画像をアップロード
  10. 一番上の階層に戻って、アップロードするファイルを選択ボタンからindex.htmlをアップロード
  11. index.htmlをダブルクリック
  12. サイトが表示されていれば完成!!

オリジナルサイトをつくる

概要

今日から、本格的にオリジナルのサイトを作っていきます。

流れ

  • PhotoshopIllustratorを用いてサイトのデザインをつくります。
  • どうやってHTML/CSSを組んだらいいかを考えます。
  • 実際にフォルダをつくって、作業を開始します。

まずはグラフィックソフトでデザインをつくる

※好きなツールを使って大丈夫ですが、こだわりが無ければPhotoshopでつくりましょう。

  • ファイル作成時のカンバスサイズはヨコ1366px, タテ768pxでつくると実際のサイズに近い(タテに長くなる場合は適宜カンバスサイズの高さを調整)
  • aboutページなど、複数ページがある場合はページ分HTMLをつくります

  • 参考PSD

https://www.dropbox.com/sh/alwc8ta98mlrtk5/AABz18IG8YM_3DxpsUayeaeIa?dl=0

参考サイト

AWWWARDS ( http://www.awwwards.com/ ) など

ざっくりとした流れ

  1. つくりたいものを確認
  2. デザインをつくる
  3. HTML, CSSを用いてコーディング

なお、流れを再び確認したい場合は、下記スライドをチェックしてください。 わからないことがあれば随時聞いてください。

宿題

サイトを完成させる

既存のサイトを真似てみる(Webデザインスケッチ)

一旦復習

  1. テキストや画像を並べるには?
  2. 並べたい要素すべてに対して、cssでfloat: left;を指定してあげる。並べたい要素の親要素には、必ず.cfクラスを付けてあげる

  3. 例えばどうやるの?

  4. こないだのメニュー↓みたいなのをやろうとしたとします。 f:id:dorak:20161122142157p:plain

これは本当に単純な3列レイアウトなので、 こんなHTMLを組んでみます。

<div class="nav cf">
  <div class="menu">HOME</div>
  <div class="menu">FRENCH CUISSE x VSCO</div>
  <div class="menu">ARCHIVE</div>
</div>
.nav {
  width: 980px; /*←なんでもいい*/
}

.menu {
  float: left;
  width: 33.33333%; /*←3列にしたいから*/
}

では続きをやってみましょう。

概要

今回は既存のWebサイトをそっくりそのまま真似てみます。 これにより、実際のサイトをつくる技術を身につけられるほか、デザインの能力を高めることができます。

題材

http://www.frenchcuisse.com/ f:id:dorak:20160602101301p:plain

身につけられること

  • 白を貴重とし、セリフ体をベースとしたシンプルかつかわいい、雑誌のようなデザイン
  • 写真を列で並べる技術
  • ヘッダーメニュー、フッターメニュー、ページャー(ページ送りの数字のこと)を用いた本格的なwebサイトをつくる技術

ステップ(いつものステップです)

  • プロジェクトフォルダfrenchを作成する
  • french内にindex.html、assetsフォルダを作成する
  • assetsフォルダをつくる
  • assetsフォルダの中にcssフォルダとimagesフォルダをつくる
  • 必要な画像をimagesフォルダに入れる
  • index.htmlを編集
  • app.cssを編集
  • ブラウザで確認
  • 完成!

はじめる前に

今回は、すでに出来上がったサイトが課題なので、すでに出来上がったHTMLやCSS、つまり答えを見ることが出来ます。 それは「要素を検証」ということで実現可能です。 なお、Google Chromeが一番使いやすいので、基本的にはGoogle Chromeを使用してください。

要素を検証

まず、どんなHTMLやCSSをつかってるんだろう・・・と思ったサイトにアクセスしてください。 アクセスしたら、cmd + shift + cを押しましょう。Windowsctrl + shift + cです。すると、下記のような画面が立ち上がります。

f:id:dorak:20160602102457p:plain

右側です。なんだよこれみたいな見た目だと思いますが、よくよく見るとただのHTMLです。<div>とかがあって、その中に文章とかのコンテンツがあるだけです。

で、どんなCSSを使っているのかは、下記手順で可能です。

  1. 要素を検証ウィンドウの一番上の矢印アイコン(カーソルアイコン?)をクリック
  2. すると、下記画像みたいな感じで、ページの特定の場所がどのようなHTMLとCSSでできているかを表示してくれます。f:id:dorak:20160602102902p:plain

上がHTML、下がHTMLに対応するCSSです。

f:id:dorak:20160602102801p:plain

基本的にはこれを見ながらやっていけば大丈夫・・・ですが、 それだとただ書き写しているだけなので、このWebサイトをHTMLでつくるにはどうしたら良いか、考えながらやってみましょう。

HTMLをつくる時のヒント

PhotoshopIllustratorでもそうだと思いますが、デザインをつくるときは必ずグループをつくると思います。 例えば人のイラストの場合、顔の中でも目や髪は「目」や「髪」といったグループをつくって、塗りを足していったりするのではないでしょうか。 なぜそうするのかというと、そのほうが編集しやすいからですね。 これはHTMLも同じで、HTMLを組もうと思った時、現場ではまずつくりたいデザインを分解します。分解すると、それがグループになります。グループ、グループと言ってますが、HTMLの場合は<div>とかで囲ってあげればグループになります。余談だとPhotoshopの場合はcmd + gでグループ化できますね。それがHTMLだと<div>で囲うって感じです。

で、今回つくりたいのはこれ↓ f:id:dorak:20160602101301p:plain なので、無計画にHTMLを書いていく前に、把握しやすいようにグループにしてあげます。

グループ化

取り急ぎ、僕ならどうグループ化するか。 こんなかんじでいかがでしょうか。

f:id:dorak:20160602103725p:plain

グループ化したら、名前を付けましょう。イラスト書くときに「目」とか「輪郭」ってグループつくるのと同じで、グループ名は好きなものでいいです。 僕は取り急ぎ下記のようにグループ名を付けました。

f:id:dorak:20160602105800j:plain

どうでしょう。 グループ名をつけたら、さっそくHTMLを書いていっちゃいましょう。

まずはお決まりの記述をしてください。前回、前々回のテキストにHTMLに絶対必要な記述が書いてあるので、復習が必要な場合は復習をお願いします。

さて、グループを書きます。

<div class="header">
  
</div>

<div class="logo">
</div>

<div class="lists">

</div>


<div class="filter">

</div>

<div class="pager">

</div>


<div class="footer">

</div>

こんなかんじでしょうか。以降は、わからなくなったら都度要素の検証をしつつ、サイトを完成させましょう。

僕はこう書いたHTML

<html lang="ja">

<head>
  <title>none</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
  <link rel="stylesheet" href="assets/css/app.css">
</head>

<body>
  <header class="cf">
    <div>HOME</div>
    <div>HOME</div>
    <div>HOME</div>
  </header>
  <div class="logoarea">
    FRENCH CUISSE
  </div>
  <div class="posts">

    <div class="post">
      <div class="post-image">
        <img src="assets/images/1.jpg">
      </div>
      <div class="caption">
        TEXT
      </div>
    </div>

    <div class="post">
      <div class="post-image">
        <img src="assets/images/1.jpg">
      </div>
      <div class="caption">
        TEXT
      </div>
    </div>

    <div class="post">
      <div class="post-image">
        <img src="assets/images/1.jpg">
      </div>
      <div class="caption">
        TEXT
      </div>
    </div>

  </div>
</body>
</html>

以下のCSSをapp.cssのあたまに付けてください

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

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

* {
  box-sizing: border-box;
}

html {
  background: #f8f8f8;
}

header {
  background: #fff;
}

header div {
  float: left; /* header下のdivタグをぜんぶ横並びに */
  width: 33.333333%; /* divタグの幅は3等分 */
  text-align: center; /* 文字は中央寄せ */
  line-height: 4; /* 行の高さを確保 */

.logoarea {
  text-align: center;
  line-height: 8;
  max-width: 968px;
  margin: 0 auto;
}

img {
  width: 100%;
}

.posts {
  max-width: 968px;
  margin: 0 auto;
}

.post {
  float: left;
  width: 33.33333%;
  padding: 0 10px;
}

.post-image {
  border: 20px solid #fff;
}

.caption {
  font-size: 20px;
  margin-top: 20px;
  text-align: center;
}

}

もう終わった人は次のスケッチ

f:id:dorak:20161122141740p:plain

www.instagram.com

これも完全に同じです。 要は、2列とか3列のレイアウトをつくれたらこのレイアウトもつくれるということです。