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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2242閲覧

コンテンツを中央に寄せたいです

gygy

総合スコア5

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2020/03/18 06:05

編集2020/03/18 09:17

html

1 2 <body> 3 <div class="filter wrapper"> 4 <ul class="flex"> 5 <li class="flex-item"> 6 <a href="#" data-filter="*" class="current button">ALL</a> 7 </li> 8 <li class="flex-item"> 9 <a class="button" href="#" data-filter=".filter-1">カテゴリー1</a> 10 </li> 11 <li class="flex-item"> 12 <a class="button" href="#" data-filter=".filter-2">カテゴリー2</a> 13 </li> 14 <li class="flex-item"> 15 <a class="button" href="#" data-filter=".filter-3">カテゴリー3</a> 16 </li> 17 <li class="flex-item"> 18 <a class="button" href="#" data-filter=".filter-4">カテゴリ−4</a> 19 </li> 20 </ul> 21 </div> 22 <!-- filter --> 23 24 <div class="wrapper grid isotope"> 25 <div class="item filter-1"> 26 <img src="images/menu1.jpg" alt="" /> 27 <p>写真キャプション写真キャプション</p> 28 </div> 29 <div class="item filter-1"> 30 <img src="images/menu2.jpg" alt="" /> 31 <p>写真キャプション写真キャプション</p> 32 </div> 33 <div class="item filter-1"> 34 <img src="images/menu3.jpg" alt="" /> 35 <p>写真キャプション写真キャプション</p> 36 </div> 37 </div> 38 <!-- /.grid --> 39 40 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 41 <script src="./js/isotope.pkgd.min.js"></script> 42 <script src="./js/app.js"></script> 43 </body>

css

1@charset "UTF-8"; 2 3/* 共通部分 4------------------------------- */ 5html { 6 font-size: 100%; 7} 8body { 9 font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", 10 "ヒラギノ角ゴ Pro W3", sans-serif; 11 line-height: 1.7; 12 color: #432; 13} 14a { 15 text-decoration: none; 16} 17img { 18 max-width: 100%; 19} 20.flex { 21 list-style-type: none; 22 display: flex; 23} 24 25.wrapper { 26 max-width: 1100px; 27 margin: 0 auto; 28 padding: 0 4%; 29} 30 31/* ボタン */ 32.button { 33 font-size: 0.5rem; 34 background: #0bd; 35 color: #fff; 36 border-radius: 5px; 37 padding: 18px 32px; 38} 39.button:hover { 40 background: #0090aa; 41} 42 43.grid { 44 margin-top: 6%; 45 margin-bottom: 50px; 46} 47.grid .item { 48 width: 20%; 49} 50 51/* MENU */ 52.menu-content { 53 margin-top: 20%; 54}

js

1// Isotopeの初期化設定 2$(function() { 3 var $container = $(".isotope"); 4 $(".isotope").isotope({ 5 itemSelector: ".item", 6 masonry: { 7 columnWidth: 100 8 } 9 }); 10 11 $(".filter a").click(function() { 12 $(".filter .current").removeClass("current"); 13 $(this).addClass("current"); 14 15 var selector = $(this).attr("data-filter"); 16 $container.isotope({ 17 filter: selector, 18 animationOptions: { 19 duration: 750, 20 easing: "linear", 21 queue: false 22 } 23 }); 24 return false; 25 }); 26});

上記jsを読みこむとコンテンツ全体が左によってしまい、中央にコンテンツが配置されません。よろしくお願いします。
https://unpkg.com/isotope-layout@3.0.6/dist/isotope.pkgd.min.jsも読み込んでます。
イメージ説明
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2020/03/18 08:27

スクリーンショットは、左に寄っているものですか?
gygy

2020/03/18 09:30 編集

わかりづらいですが、左右の赤い部分の余白が均等になるようにしたいです。
guest

回答1

0

ベストアンサー

これでいかがでしょうか。

js

1 $(".isotope").isotope({ 2 itemSelector: ".item", 3 masonry: { 4 columnWidth: 100, 5 fitWidth: true // これ 6 } 7 });

When enabled, you can center the container with CSS.

fitWidth | Isotope · masonry

投稿2020/03/19 00:58

編集2020/03/19 00:59
Lhankor_Mhy

総合スコア35860

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2020/03/19 02:57 編集

ああ、すでに補足欄で書かれていたんですね。 当方では上手くいったのですが、このやり方は、どういったことがダメなのですか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問