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. 完成チェック