Academia 3

アジェンダ

  • Pinterestみたいなレイアウトをつくる
  • 「ライブラリ」
  • 画像を大きくするライブラリ「Lightbox」
  • Pinterestではなく、あくまで正方形など固定サイズでいきたいあなたへ
  • スマホ対応

Pinterestみたいなレイアウトをつくる

javascriptとは

れっきとしたプログラミング言語。 HTMLやCSSは、厳密に言うと「マークアップ言語」と言われ、演算はできない。しかし、javascriptは演算もできれば関数もつくれる。つまり、「●●のとき▲▲したい」といった条件分岐が可能になる。今回はjavascriptの書き方について厳密に見ていくことはせず、javascriptを用いてつくられた便利なはたらきをする「ライブラリ」を使用してデザインを仕上げていく。

準備

  • imagesフォルダの中身を、バラバラのサイズの画像に差し替える(以前までは正方形にトリミングした画像を使っていたが、今回からはトリミングしていない画像を使う。)
  • cssフォルダやimagesフォルダと同じ階層に、jsフォルダをつくる
  • jsフォルダの中にapp.jsファイルをつくる
  • javascriptを使用する準備。headタグに以下のコードを加えて、HTMLからjavascriptを読み込む
<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://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="js/app.js"></script>

javascriptの読み込みは、CSSと違って<link>タグは使わない。<script></script>タグを使う。 そして、上記はなにやら複雑に見えるが、3つのjavascriptを読み込んでいるだけ。 1つめは「jQuery」。2つめは「masonry」。3つめは「imagesLoaded」。4つめは「app.js」。 それぞれどういう役割のjavascriptなのかをのちほど解説する。

HTMLを強力に指定する「id」

HTLMを指定するものは以前は「class」を使用していた。もちろんclassが今後もメインの指定方法となるが、class以外のメジャーな指定方法に「id」がある。idは同様のidを1ページに1つしか設定してはいけないというルールがあり、プログラム的にはclassの3倍早くHTMLを検索できる。

idの付け方

<div id="sample"></div>

javascriptからHTMLを指定するときは、idを使うのが基本

Pinterestみたいにする準備

worksクラスが付いているdivの下に「masonry」idがついたdivをつくる

<div class="works clearfix">
...
</div>

これを

<div class="works clearfix">
  <div id="masonry">
    ...
  </div>
</div>

のちほど説明するが、「masonry」はpinterestみたいにしてくれるjavascriptコードの名前。

app.jsにpinterestみたいにするコードを記述

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

ライブラリってなんだ

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

もっと「っぽく」言うと、決まった動きをするコードのこと。自分でイチから書かなくても、大抵は誰かが書いたコードが使える。これはjavascriptに限った話ではなく、例えばすでにheadでしようしているreset.cssもライブラリ。

実際の開発ではこのライブラリをググり、適宜使用していく。ライブラリを使わない開発は効率の観点からありえない。

jQuery

javascriptだと、HTMLを指定するのに結構ながいコードを書かなければいけない。 例えば以下。

document.getElementById('masonry');

これが、jQueryだと

$('#id')

で済む。jQueryはjavascriptをもっと書きやすくしたjavascriptライブラリ。

masonry

画像をpinterestっぽく並べてくれるライブラリ。この挙動をイチから書こうと思うとめちゃくちゃ大変。

imagesLoaded

画像の読み込み完了を検知するライブラリ。 masonryは画像が完全に読み込まれてから実行しないとバグる。

ライブラリは、「実行するためのコード」を書かないと実行されない(読み込んだだけでは実行されない)

ライブラリはあくまで「挙動」を記述しただけのファイルなので、実際に動かすにはapp.jsに「動かす」ためのコードを書く必要がある。 もっと砕けて言うと、「これらのライブラリを有効にします！」という命令を入れる必要がある。

クリックして画像を大きくする

lightboxというライブラリを使用。

lightboxの使用準備

lightboxのダウンロード

lightboxは画像拡大表示用のライブラリ。 バツマークなどの画像も用意してくれているのでこちらはコードのURLをscriptタグに記述するのではなく直接ダウンロードすることにする。

http://lokeshdhakar.com/projects/lightbox2/

  1. 上記にアクセスし、「Download」ボタンからダウンロードしたら、zipファイルを解凍し、「dist」フォルダを開く。
  2. distフォルダの下のimagesの中に入り、画像をすべてmypf_2のimagesフォルダにコピーする
  3. distフォルダのcssフォルダに入り、lightbox.min.cssをmypf_2のcssフォルダにコピーする
  4. distフォルダのjsフォルダに入り、lightbox.min.jsをmypf_2のjsフォルダにコピーする

読み込む

  1. bodyのとじタグあたりにあるscriptタグのうち、app.jsのひとつ手前に<script src="js/lightbox.min.js"></script>を足す
  2. headタグ、app.cssのひとつ手前に<link rel="stylesheet" type="text/css" href="css/lightbox.min.css">を足す

※.minは圧縮されたファイルのこと

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

命令

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

<div class="work">
  <a href="images/1.jpg" rel="lightbox">
    <img src="images/1.jpg">
  </a>
  <div class="caption">
     <p>Sanrio New Grad Poster</p>
     <p class="credit">Illustration</p>
  </div>
</div>

imgタグはこれまで通りサムネイルの役割を果たしていて、 追加でaタグにて囲ってあげることでクリックできる状態にしています。

これで、サムネイルをクリックしたときに画像が大きく。

すべてのwork以下の画像に、aタグを付けてみよう。

スマホ対応

  • index.htmlに「ビューポート」を追加
  • cssに「メディアクエリ」を追加
  • デベロッパーツールを使用し、モバイルでの見た目を確認する
  • 一つ一つデザインしていく
  • 完成

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ファイルを開いて、

@media (min-width: 480px) {
.informations {
  position: fixed;
  width: 100%;
  color: white;
  z-index: 2;
  font-size: 12px;
  font-weight: bold;
  padding: 12px;
}

.title {
  float: left;
  font-weight: bold;
}

.navigation {
  float: right;
}

.navigation p {
  float: left;
  margin-left: 12px;
}

.navigation p a {
  color: white;
  text-decoration: none;
}

.keyvisual {
  background: url(../images/cover.png) center center no-repeat;
  height: 100vh;
  width: 100%;
  position: relative;
}

.tagline {
  color: white;
  position: absolute;
  top: 50%; left: 50%;
  font-size: 64px;
  font-weight: bold;
  font-style: italic;
}

.subhead {
  display: block;
  font-size: 20px;
  text-align: right;
}

.works {
  max-width: 960px;
  margin: 80px auto 0 auto;
  margin-top: 80px;
}

.footer {
  background: white;
  text-align: center;
  font-size: 12px;
}

.copyright {
  padding: 40px 0 35px 0;
}

.work {
  float: left;
  width: 33.3333333%;
  font-size: 12px;
  font-weight: bold;
  padding: 0 15px 40px 15px;
}

.work:hover img {
  transform: scale(1.05);
}

.work img {
  transition: transform ease-in-out 0.2s;
}

img {
    width: 100%;
    border-radius: 8px;
}

.credit {
  font-weight: normal;
}

.caption {
  margin-top: 12px;
}

.contact {
  text-align: center;
  margin: 40px 0 80px 0;
}

.button {
  font-weight: bold;
  padding: 16px;
  border-radius: 8px;
  border: 2px solid #0099e5;
  transition: color,border-color,background ease-in-out 0.2s;
  color: #0099e5;
  text-decoration: none;
}

.button:hover {
  color: white;
  background: #0099e5;
  border: 2px solid #f4f4f4;
}
}

}

記入終わったらブラウザの幅を広くしたり縮めたりする。めっちゃ縮めると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) {
.informations {
  position: fixed;
  width: 100%;
  color: white;
  z-index: 2;
  font-size: 12px;
  font-weight: bold;
  padding: 12px;
}

.title {
  float: left;
  font-weight: bold;
}

.navigation {
  float: right;
}

.navigation p {
  float: left;
  margin-left: 12px;
}

.navigation p a {
  color: white;
  text-decoration: none;
}

.keyvisual {
  background: url(../images/cover.png) center center no-repeat;
  height: 100vh;
  width: 100%;
  position: relative;
}

.tagline {
  color: white;
  position: absolute;
  top: 50%; left: 50%;
  font-size: 64px;
  font-weight: bold;
  font-style: italic;
}

.subhead {
  display: block;
  font-size: 20px;
  text-align: right;
}

.works {
  max-width: 960px;
  margin: 80px auto 0 auto;
  margin-top: 80px;
}

.footer {
  background: white;
  text-align: center;
  font-size: 12px;
}

.copyright {
  padding: 40px 0 35px 0;
}

.work {
  float: left;
  width: 33.3333333%;
  font-size: 12px;
  font-weight: bold;
  padding: 0 15px 40px 15px;
}

.work:hover img {
  transform: scale(1.05);
}

.work img {
  transition: transform ease-in-out 0.2s;
}

img {
    width: 100%;
    border-radius: 8px;
}

.credit {
  font-weight: normal;
}

.caption {
  margin-top: 12px;
}

.contact {
  text-align: center;
  margin: 40px 0 80px 0;
}

.button {
  font-weight: bold;
  padding: 16px;
  border-radius: 8px;
  border: 2px solid #0099e5;
  transition: color,border-color,background ease-in-out 0.2s;
  color: #0099e5;
  text-decoration: none;
}

.button:hover {
  color: white;
  background: #0099e5;
  border: 2px solid #f4f4f4;
}
}

@media (min-width: 481px) {
  .informations {
    position: fixed;
    top: 16px;
    left: 16px;
    width: 100%;
    font-size: 12px;
    z-index: 1;
    color: white;
  }

  .navigation a {
    color: white;
    font-size: 10px;
  }

  .keyvisual {
    background: url(../images/cover.png) center center no-repeat;
    height: 40vh;
    width: 100%;
    position: relative;
    background-size: cover;
  }

  .tagline {
    color: white;
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    bottom: 20px; right: 20px;
  }

  .subhead {
    font-size: 12px;
    display: block;
  }

  #masonry {
    margin: 40px auto 0 auto;
    width: 80%!important;
  }

  .work {
    margin-bottom: 30px;
    width: 100%;
  }

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

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

  .credit {
    font-weight: normal;
  }

  .contact {
    text-align: center;
    margin: 40px 0 80px 0;
  }

  .button {
    font-weight: bold;
    padding: 16px;
    border-radius: 8px;
    border: 2px solid #0099e5;
    transition: color,border-color,background ease-in-out 0.2s;
    color: #0099e5;
    text-decoration: none;
  }

  .footer {
    background: white;
    text-align: center;
    font-size: 12px;
    padding: 16px 0;
  }
}

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

例示したものはあくまで例であり、実際はもっと素敵なデザインを考えることができる