Academia 3
アジェンダ
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/
- 上記にアクセスし、「Download」ボタンからダウンロードしたら、zipファイルを解凍し、「dist」フォルダを開く。
- distフォルダの下のimagesの中に入り、画像をすべて
mypf_2
のimagesフォルダにコピーする - distフォルダのcssフォルダに入り、
lightbox.min.css
をmypf_2
のcssフォルダにコピーする - distフォルダのjsフォルダに入り、
lightbox.min.js
をmypf_2
のjsフォルダにコピーする
読み込む
- bodyのとじタグあたりにあるscriptタグのうち、app.jsのひとつ手前に
<script src="js/lightbox.min.js"></script>
を足す - 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タグを付けてみよう。
スマホ対応
htmlファイルに「ビューポート」を追加
ビューポートは、ディスプレイの幅に合わせてサイトの横幅を変えるための仕組み。 これと次の「メディアクエリ」はセットで扱う。
ということで
以下のコードを
タグの中に書く。場所はどこでもいい。<meta name="viewport" content="width=device-width, initial-scale=1">
これで完了。次はcss。
cssファイルに「メディアクエリ」を追加
メディアクエリは、要は「幅に合わせたCSSをつくろう!」という仕組み。 これは、CSSをサイズなどの条件によって適用制御するための仕組み。 どういうことかというと...
たとえば、以下の図を見てほしい。
図の繰り返しになるが、要は 「横幅が480px以下のときはこのCSS!」
「それ以外のときはこのCSS!」ということがしたいのです。
では、それをどう書くか。 以下のように書いてみる。CSSファイルを開く。
@media (max-width: 480px) { /* この中のCSSは、ディスプレイの幅が480px超えたら無視されます! */ }
確認してみる。 元の状態はこちら。
さて、手元の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; } }
モバイルのデザインをすすめる
例示したものはあくまで例であり、実際はもっと素敵なデザインを考えることができる