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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

XHTML

XHTMLは、eXtensible HyperText Markup Languageの略であり、SGMLベースであるHTMLとは違って、有効なXMLドキュメントにもなるHTMLアプリケーションです。XMLベースのツールを用いて生成されるHTMLページのためによく使われるマークアップ言語です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

4063閲覧

Jquery「Masonry」に1カラムの行を設けたい

hananoko_runrun

総合スコア21

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

XHTML

XHTMLは、eXtensible HyperText Markup Languageの略であり、SGMLベースであるHTMLとは違って、有効なXMLドキュメントにもなるHTMLアプリケーションです。XMLベースのツールを用いて生成されるHTMLページのためによく使われるマークアップ言語です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/09/07 15:29

編集2016/09/08 13:19

###前提・実現したいこと
Jquery「Masonry」に1カラムの行を設けたい。

現在、xhtmlで写真がレンガ状に並ぶようJquery「Masonry」を用いてページを作っています。横幅100%で作っています。

基本は、画像の幅が固定、高さ可変のものが並ぶので画面幅によって、カラム数は変わってきます。
ここまではきちんと再現できたのですが、途中に1カラム(width100%)のものを挟みたいという要望があるのですが、1カラムの部分だけ左右の余白がうまくいきません。

それだったら、1カラムの部分は、その他の複数カラムの幅に合わせたいと思うのですがなかなかうまくいかず困っております。

###現状

・1カラムの部分を除いては正しく動いている。
・1カラムの部分の左右の余白が正しく設定されない。
・ロードした時は良いが、画面の幅を縮めると、1カラムの下の余白が200px近く開き、
画面幅を元に戻してみると、1カラムの部分の高さが無視されて、1カラムの下の行が重なって表示される。

すべては1カラムの部分がなければ正常に動くのですが、1カラムの部分を入れたいがために苦労をしています。。。

###該当のソースコード
ざっくりと必要と思われる部分を抜粋します。
こちらでは1枚目のph1.jpgが1カラムで表示したい画像の想定です。

●html● <!-- masonry --> <script type="text/javascript" src="../../js/masonry.pkgd.min.js"></script> <script type="text/javascript" src="../../js/imagesloaded.js"></script> <script type="text/javascript"> $(window).load(function(){ var $container = $('#photos'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector: '.p_box', isFitWidth: true, isAnimated: true, columnWidth: 316 }); }); }); </script> <div id="photos_wrap"> <div id="photos"> <div class="p_box col1"> <a href="#"><img src="../../img/gallery/ph1.jpg" alt="" /></a> ↑このこだけwidth100%で他の行と同じになるように左右に余白を入れたいです。 </div> <div class="p_box"><a href="#"><img src="../../img/gallery/ph2.jpg" alt="" /></a></div> <div class="p_box"><a href="#"><img src="../../img/gallery/ph3.jpg" alt="" /></a></div> <div class="p_box"><a href="#"><img src="../../img/gallery/ph4.jpg" alt="" /></a></div> <div class="p_box"><a href="#"><img src="../../img/gallery/ph5.jpg" alt="" /></a></div> <div class="p_box"><a href="#"><img src="../../img/gallery/ph6.jpg" alt="" /></a></div> </div> <!-- /#photos --> </div> <!-- /#photos_wrap -->
●css● #photos_wrap { padding-top: 50px; width: 100%; text-align: center; } #photos{ width: 100%; display: inline-block; } .p_box { float: left; width: 310px; padding: 3px; } .col1 { width: 100%; float: left; display:block; margin-bottom:0 !important; } .p_box img{ width: 100%; height: auto; } .col1 img{ width: 100%; }

イメージとしては下記のような感じです。

イメージ説明

###追加の問題

kei344様からご回答いただいた通り、masonry を複数使うことで
1カラムの部分がきれいに100%になる様になりました!

が、私自身も認識の誤りがあったのですが、1カラムの部分は、下のカラムと
幅を合わせたいです。

jquery,javascriptの知識がないに等しいのですが、
下記で簡単に取得できそうなものなのですが、うまくいきません。

<#photos→ 複数カラムのwrap、#photos2→ 1カラムのwrapです。>

$(function(){ var w=$("#photos").width(); $("#photos2").width(w); });

ブラウザを広げるとサイズによっては下記のような感じになるので、#photos、#photos2のmarginを合わせられたらと思っております。

イメージ説明

どの様にコードをかけば、きちんと#photosの幅を取得して、#photos2に取得することができるのでしょうか?

teratailを使い始めて間もないので、
エンジニアの方たちに不快な思いをさせてしまうかもしれません。
またteratailにおいて本質問がお門違いでしたらすみません。

何卒よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

masonry を複数使って、幅100% の要素を挟んでは?

HTML

1<div id="photos1"><!-- --></div> 2<div class="w100"><!-- 全幅 --></div> 3<div id="photos2"><!-- --></div>

追記:

こういう設定があるようです。

【レスポンシブWebデザイン制作にjQuery Masonryを利用するための5つのポイント: 小粋空間】
http://www.koikikukan.com/archives/2012/10/19-015555.php

4.カラムレイアウト幅を要素全体の幅に追従させる
カラムレイアウトの幅を要素全体の幅に追従させるためには、プラグイン起動時のオプションとして「isFitWidth」を設定します。

JavaScript

1$('#container').masonry({ 2 isFitWidth: true, 3});

投稿2016/09/07 16:23

編集2016/09/08 17:47
kei344

総合スコア69364

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

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

hananoko_runrun

2016/09/08 02:55

>kei344さま 早々にご回答いただきまして誠にありがとうございます! masonry を複数使うというところに目が行きませんでした。 複数使うことによって、1カラムの部分は100%になる様になりました! 上記に追加の問題を記載したのですが、複数カラムの方の幅を取得して、1カラムの方に幅を代入して、全体の幅を揃えたいと思っています。 そういう前提で初めから質問しておけばよかったと反省しております。。。 こちら、またお力をお貸しいただけないでしょうか? 何卒よろしくお願いいたします。
kei344

2016/09/08 12:28

masonry 内の要素のmargin分、100%の要素にmarginを付けるだけでいいと思いますよ。 jQueryを使わなくても、masonry 1,2両方を覆うdivでも作って必要な幅を指定し、masonry 1,2 に width:100% を設定すればいいと思います。 ずれの状況がわからないので、もしこういうことでないのであれば、図示していただければと思います。
hananoko_runrun

2016/09/08 13:22

>kei344さま 度々のご回答ありがとうございます!ご親切に感謝いたします。 きちんと仕様を記載しきれておらず恐縮なのですが、レスポンシブで拡大した時に 追加の画像の通りに複数カラムの方が幅が広くなってしまったりします。 ここをどうにか解決できないかと思い、複数カラムの幅を取得したいと思った次第です。 何卒よろしくお願いいたします。
hananoko_runrun

2016/09/09 03:39

>kei344さま 度々のご回答ありがとうございます! isFitWidth: true,なのですが、●html●の部分にも書いていたのですが、 実は、入れているのです。 うまく説明できず申し訳ありません。 複数カラムの部分の画像が固定幅になっているので、 下記のサイトのように、ブラウザの幅によっては左右の余白を変えることで 対応していると思います。 jQuery Masonry公式に紹介されていたサイト http://www.kristianhammerstad.com/ 1カラムの部分は指定が幅100%なので、それを守ろうとして、複数カラムの部分を 左右の余白が変わってきてしまうのです。 1カラムは、幅100%、複数カラムの方は固定幅としているのですから、 当然の動作なのですが、 そこをなんとか複数カラムと1カラムの左右の余白を合わせられないかなあと 思ったのですが、難しいかもしれませんね、、、
kei344

2016/09/09 05:50

すいません、見落としていました。 .w100 { width: calc(100% - ((100% / 330px) - 20px )); } でいけるかと思ったのですが、「/」の右辺がintのみなので、下記とかでどうでしょう。 $(function(){ var w=$( "#photos" ).width(); $( ".w100" ).width( w - ( ( w / 330 ) - 20 ) ); // 330 = 1個の幅 + 間隔(20px) });
hananoko_runrun

2016/09/12 01:47

>kei344さま 度々のご回答ありがとうございます! こちらこそ、確認が遅くなってしまいまして申し訳ありません。 masonryの仕様のせいなのか、私のjavascriptの知識のなさのせいなのか 幅は同じになりませんでした汗 teratailさんよりベストアンサーを選んでくださいとのことで、時間切のようですので、 また自分でもjavascriptの勉強をして出直します! kei344さまの度々のご協力とお心遣いに感謝です。 ありがとうございました!
kei344

2016/09/12 04:37

そういう通知が行くようになったのですね。 ですが解決していないなら無理に解決済にする必要もないと思います。 状況がこちらで再現できないので、全てのHTML/CSS/jsを質問文に追記いただくか、コメント欄にURLを載せてもらうかどちらかがあれば何とかできるとは思います。
hananoko_runrun

2016/09/13 03:26

>kei344さま 度々のお気遣いありがとうございます。コメントのメッセージ通知がメールで届くとばかり思っていたので、気付かずに大変失礼いたしました! teratailさんから通知が来たので、yahoo知恵袋のように期限があるものと思い、解決済みとさせていただきました。 kei344さまから回答いただいても幅の取得ができなかったので、”stamp”というオプションで再現をしようとしたのですが、 http://codepen.io/kobataba/pen/ZpbyOd 上記の通り、ブラウザを小さくしたり、大きくしたりすると挙動がおかしくなるみたいでしてstampでも無理そうでした。 幅固定(px指定)というところがネックになっていたので、悔しいところではありましたがそこまで時間をかけることでもないという話になり、結局相対指定(%指定)にしました。 いろいろとお知恵をお貸しいただいたのに、諦める形となってしまい申し訳ありません。 ie9まで対応させるのに、masonry、imageloaderともにv3でないと正しく動作しないということに気づくまで約1日かかりましたが、何とか見られる形にはなりました。 お力をお貸しいただきまして本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問