可変グリッドレイアウトのMasonryが効いていない理由について

『HTML5/CSS3モダンコーディング」という本で勉強しており、Part2でグリッドレイアウトを活かしたサイトを作成するのですが、見本は１ページにタイルが収まっているのですが、私の場合は縦長になったままになっています。

おそらくMasonryが効いてないと思うのですが、関数が間違っているのでしょうか？

######試したこと
如何せん本が古い(2015年出版)なので、最新の情報を検索し(リンク)、
①headにjQueryを導入
②imagesloadedの導入(あっても無くても良い)
③呼び出しscriptを書籍では

<script>
  new Masonry ('body'{
    itemSelector: '.item',
    Width: 180,
    gutter: 4
  }):
</script>

でしたが、以下のコードに変更しました。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>グリッドレイアウト</title>
6    <link rel="stylesheet" href="css/reset.css">
7    <link rel="stylesheet" href="css/style.css">
8    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
9</head>
10<body>
11    <header class="header item">
12        <h1>
13            <a href="#">
14                <img class="logo" src="images/logo.png" alt="SAMPLE SITE2">
15            </a>
16        </h1>
17        <nav calss="nav">
18            <ul>
19                <li class="nav-item"><a href="#">HOME</a></li>
20                <li class="nav-item"><a href="#">ABOUT</a></li>
21                <li class="nav-item"><a href="#">MAIN DISH</a></li>
22                <li class="nav-item"><a href="#">APPETIZER</a></li>
23                <li class="nav-item"><a href="#">BREAK TIME</a></li>
24                <li class="nav-item"><a href="#">COLUMN</a></li>
25                <li class="nav-item"><a href="#">OTHER</a></li>
26            </ul> 
27        </nav>
28    </header>
29    <section class="item item-l item-maindish">
30        <a href="#">
31            <img class="image" src="images/image_L_1.jpg" alt="メインディッシュ">
32            <div class="category">MAIN DISH</div>
33            <p class="description">Lorem ipsum dolor sit amet, 
34                consectetur adipiscing elit, 
35                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
36        </a>
37    </section>
38    <section class="item item-m item-appetizer">
39        <a href="#">
40            <img class="image" src="images/image_M_1.jpg" alt="前菜">
41            <div class="category">APPETIZER</div>
42            <p class="description">Lorem ipsum dolor sit amet, 
43                consectetur adipiscing elit, 
44                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
45        </a> 
46    </section>
47    <section class="item item-m item-maindish">
48        <a href="#">
49            <img class="image" src="images/image_M_2.jpg" alt="メインディッシュ">
50            <div class="category">MAIN DISH</div>
51            <p class="description">Lorem ipsum dolor sit amet, 
52                consectetur adipiscing elit, 
53                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
54        </a>
55    </section>
56    <section class="item item-maindish">
57        <a href="#">
58            <img class="image" src="images/image_S_1.jpg" alt="メインディッシュ">
59            <div class="category">MAIN DISH</div>
60            <p class="description">Lorem ipsum dolor sit amet, 
61                consectetur adipiscing elit, 
62                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
63        </a>
64    </section>
65    <section class="item item-appetizer">
66        <a href="#">
67            <img class="image" src="images/image_S_2.jpg" alt="前菜">
68            <div class="category">APPETIZER</div>
69            <p class="description">Lorem ipsum dolor sit amet, 
70                consectetur adipiscing elit, 
71                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
72        </a> 
73    </section>
74    <section class="item item-m item-breaktime">
75        <a href="#">
76            <img class="image" src="images/image_M_3.jpg" alt="おやつの時間">
77            <div class="category">BREAK TIME</div>
78            <p class="description">Lorem ipsum dolor sit amet, 
79                consectetur adipiscing elit, 
80                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
81        </a> 
82    </section>
83    <section class="item item-column">
84        <a href="#">
85            <img class="image" src="images/image_S_3.jpg" alt="コラム">
86            <div class="category">COLUMN</div>
87            <p class="description">Lorem ipsum dolor sit amet, 
88                consectetur adipiscing elit, 
89                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
90        </a> 
91    </section>
92    <section class="item item-breaktime">
93        <a href="#">
94            <img class="image" src="images/image_S_4.jpg" alt="おやつの時間">
95            <div class="category">BREAK TIME</div>
96            <p class="description">Lorem ipsum dolor sit amet, 
97                consectetur adipiscing elit, 
98                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
99        </a> 
100    </section>
101    <!-- 中略 -->
102    <section class="item item-m item-appetizer">
103        <a href="#">
104            <img class="image" src="images/image_M_4.jpg" alt="前菜">
105            <div class="category">APPETIZER</div>
106            <p class="description">Lorem ipsum dolor sit amet, 
107                consectetur adipiscing elit, 
108                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
109        </a> 
110    </section>
111    <section class="item item-maindish">
112        <a href="#">
113            <img class="image" src="images/image_S_9.jpg" alt="メインディッシュ">
114            <div class="category">MAIN DISH</div>
115            <p class="description">Lorem ipsum dolor sit amet, 
116                consectetur adipiscing elit, 
117                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
118        </a>
119    </section>
120    <section class="item item-column">
121        <a href="#">
122            <img class="image" src="images/image_S_10.jpg" alt="コラム">
123            <div class="category">COLUMN</div>
124            <p class="description">Lorem ipsum dolor sit amet, 
125                consectetur adipiscing elit, 
126                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
127        </a> 
128    </section>
129    <script src="masonry-docs/js/masonry-docs.min.js"></script>
130    <script src="masonry-docs/js/imagesloaded.pkgd.min.js"></script>
131    <script>
132        var $item = jQuery('.item').imagesLoaded(function(){
133            $item.masonry({
134                itemSelctor: '.item' ,
135                colimnWidth: 180 ,
136                gutter: 4
137            });
138        })
139    </script>
140</body>
141</html>

css
1@charset "UTF-8";
2
3/* base */
4html {
5    font-size: 62.5%;
6}
7body {
8    padding: 30px;
9    background-color: #f6f7fb;
10    color: #333;
11    font-size: 1.2rem;
12    font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
13}
14*, *::before, *::after {
15    box-sizing: border-box;
16}
17a:link, a:visited, a:hover, a:action {
18    color: #7c5119;
19    text-decoration: none;
20}
21
22/* header */
23.header {
24    padding: 25px 0;
25    border-bottom: none;
26    text-align: center;
27}
28.logo {
29    width: 136px;
30    height: 136px;
31    transition: .3s; 
32}
33.logo:hover {
34    transform: rotate(360deg);
35}
36
37.nav {
38    margin: 35px auto 10px;
39}
40.nav-item {
41    margin-top: 20px;
42    text-align: center;
43    letter-spacing: 1px;
44    font-weight: bold;
45    font-size: 1.3rem;
46}
47.nav-item a {
48    display: inline-block;
49}
50.nav-item a::after {
51    content: '';
52    display: block;
53    width: 0;
54    margin: 6px auto 0;
55    border-bottom: 1px solid #7c5119;
56    transition: width .3s ease-in-out;
57}
58
59/* main */
60.item {
61    width: 180px;
62    margin-bottom: 4px;
63    padding: 8px;
64    border-bottom: 3px solid;
65    border-radius: 5px;
66    background-color: #fff;
67}
68.item .image {
69    display: block;
70    width: 100%;
71    height: 109px;
72}
73.item .category {
74    margin: 15px 9px 10px;
75    color: #aaa;
76    letter-spacing: 1px;
77    font-family: "Trebuchet MS", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
78}
79.item .category::before {
80    content: '';
81    display: inline-block;
82    width: 19px;
83    height: 19px;
84    margin-right: 5px;
85    border: 2px solid;
86    border-radius: 50%;
87    vertical-align: -5px;
88}
89.item .description {
90    margin: 10px;
91    line-height: 1.5;
92}
93.item > a {
94    display: block;
95    margin: -8px -8px -11px;
96    padding: 8px 8px 11px;
97    border-radius: inherit;
98    color: #777;
99    transition: all 0.3s;
100}
101.item > a:hover {
102    box-shadow: 0 0 6px -1px rgba(0,0,0,.3);
103    opacity: .8;
104}
105.item-maindish,
106.item-maindish .category::before {
107    border-color: #ffc0cb;
108}
109.item-apptizer,
110.item-apptizer .category::before {
111    border-color: #76c047;
112}
113.item-column,
114.item-column .category::before {
115    border-color: #fff100;
116}
117.item-breaktime,
118.item-breaktime .category::before {
119    border-color: #c1efff;
120}
121.item-m {
122    width: 364px;
123}
124.item-m .image {
125    height: 146px;
126}
127.item-l {
128    width: 732px;
129}
130.item-l .image {
131    height: 403px;
132}

ご回答よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

imagesLoadedの方も間違っていてややこしくなるので、
質問されているMasonryについてだけ触れます。

Masonryを適用したいsectionたちの親に.itemsを追加してください。

HTML
1<div class="items">
2    <section class="item item-l item-maindish">
3        〜省略〜
4    </section>
5    <section class="item item-m item-appetizer">
6        〜省略〜
7    </section>
8    ・
9    ・
10    ・
11</div>

Initializeは下記に書き換えてみてください。
（imagesLoadedはとりあえず消します。）

JavaScript
1<script>
2    jQuery('.items').masonry({
3        itemSelector: '.item' ,
4        columnWidth: 180,
5        gutter: 10
6    });
7</script>

Initializeのselectorに指定するのは並べるアイテムを囲っている親（ここでは.items）です。
下記はタイポです。
itemSelctor→itemSelector
colimnWidth→columnWidth

そして、CSSで.itemの幅を指定してください。

CSS
1/* columnWidthと同じ幅 */
2.item { width: 180px; }

これで動くと思います。

投稿2020/04/21 18:59

退会済みユーザー

総合スコア0

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

可変グリッドレイアウトのMasonryが効いていない理由について

関連した質問