Academia 3

アジェンダ

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

今日使うフォルダ

以前使用したmypf_2

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

javascriptとは

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

準備

  • imagesフォルダの中身を、バラバラのサイズの画像に差し替える(以前までは正方形にトリミングした画像を使っていたが、今回からはトリミングしていない画像を使う。)
  • cssフォルダやimagesフォルダと同じ階層に、jsフォルダをつくる
  • jsフォルダの中にapp.jsファイルをつくる
  • javascriptを使用する準備。bodyのとじタグの直前に以下のコードを加えて、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なのかをのちほど解説する。

なぜ閉じタグの前?headじゃだめ?

繰り返すが、上記コードはbody閉じタグの直前に入れる。 何故かと言うと、理由は次の通り。

  1. javascriptは、読み込まれた時点でのHTMLに対して実行される
  2. headタグに記述すると、bodyタグよりも早くjavascriptが読み込まれる
  3. したがって、「あれ?javascript動かない…」となる場合がある
  4. なぜなら読み込まれていないHTMLに対してjavascriptの命令を実行しているから
  5. これを避けるためにbody閉じタグの直前に入れる = ページが読み込み完了した後に読み込む、というイメージ

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')

で済む。jQueryjavascriptをもっと書きやすくした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.cssmypf_2cssフォルダにコピーする
  4. distフォルダのjsフォルダに入り、lightbox.min.jsmypf_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;
  }
}

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

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

サイトを公開する

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

※FC2のアップローダーは無料版だと1ファイルあたり1MBまでしかアップロードできない。そんなときは以下のツールを使って縮小する

JPEGmini | Oops... (JPEG用)

TinyPNG – Compress PNG images while preserving transparency (PNG用)

広告を非表示にする