こんにちは。
こまりまゆこです。
自分が学習したことを載せています。
今回はカード型レイアウトの作成です。
作品をあげるのにすごく良いなと思い使用しました。
カード型レイアウト手順
①カードのHTML部分を入力
※classは現状高さをつける為に付けているので使用しなくても大丈夫です。
index.html
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
<div class="item11">11</div>
<div class="item12">12</div>
<div class="item13">13</div>
</div>
②CSSを入力
stylesheet.css
.container div {
width: 280px;
height: 500px;
background-color: antiquewhite;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
}
.container .item1 {
height: 200px;
}
.container .item4 {
height: 800px;
}
.container .item6 {
height: 600px;
}
.container .item11 {
height: 400px;
}
③JavaScriptファイルの読み込み
下記のコードを< /body >の前に入力
index.html
<script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>
④JavaScriotの設定
③の下にこのコードを書く。
静的、動的コンテンツ(その他もあるが今回は主な2つ)によってコードが変わります。
静的・動的コンテンツの説明はこちらの記事がわかりやすいです！
静的コンテンツ
<script>
let magicGrid = new MagicGrid({
container: '.container', //カード型要素を囲むボックス(class or id)
animate: true, // 各要素を配置する際にアニメーション処理させる。
static: true // 静的コンテンツの場合は必須。
});
magicGrid.listen();
</script>
動的コンテンツ
<script>
let magicGrid = new MagicGrid({
container: "#container", //カード型要素を囲むボックス(class or id)
items: 20, // アイテム数を定義
animate: true, // 各要素を配置する際にアニメーション処理させる。
});
magicGrid.listen();
</script>
⑤下記の写真のようになれば完成！
参考サイト
https://on-ze.com/archives/7644
https://github.com/e-oj/Magic-Grid
最後に
メモを載せていますがどなたかの参考になれば嬉しいです
↧