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

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

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

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

HTML5

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

JavaScript

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

jQuery

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

Q&A

解決済

3回答

4185閲覧

Masonryを使って、スマホサイズの時に画像を縦2列に配置したい。

stowe

総合スコア19

CSS3

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

HTML5

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

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/07/06 16:35

編集2017/07/07 02:09
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WORKS/2015_PRESENT</title> <link href="../../css/reset.css" rel="stylesheet" type="text/css"> <link href="../../css/style.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> </head> <body> <div id="wrapper_work_sub"> <div id="content"> <div id="works_sakuhin"> <ul class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 150 }'> <li class="grid-item"><img src="../../img/2015_present/2017_01.jpg" width="4000" height="3000" alt=""/> </li> <li class="grid-item"><img src="../../img/2015_present/2015_10.jpg" width="4000" height="1933" alt=""/> </li> <li class="grid-item"><img src="../../img/2015_present/2015_09.jpg" width="3000" height="2609" alt=""/> </li> <li class="grid-item"><img src="../../img/2015_present/2015_08.jpg" width="3543" height="2363" alt=""/> </li> <li class="grid-item"><img src="../../img/2015_present/2015_07.jpg" width="3000" height="3000" alt=""/></li> <li class="grid-item"><img src="../../img/2015_present/2015_06.jpg" width="3000" height="3000" alt=""/></li> <li class="grid-item"><img src="../../img/2015_present/2015_05.jpg" width="3000" height="2229" alt=""/></li> <li class="grid-item"><img src="../../img/2015_present/2015_04.jpg" width="2000" height="1489" alt=""/></li> <li class="grid-item"><img src="../../img/2015_present/2015_03.jpg" width="2045" height="3000" alt=""/></li> <li class="grid-item"><img src="../../img/2015_present/2015_02.jpg" width="960" height="678" alt=""/></li> <li class="grid-item"><img src="../../img/2015_present/2015_01.jpg" width="3467" height="3000" alt=""/></li> </ul> </div> </div> </div> </body> </html>

こちらのサイト
https://allabout.co.jp/gm/gc/402549/2/
にならい、コードを書いてみたんですが、上手くこのサイトのように動きません。
参考サイトを試したんですが、画像がスマホの画面サイズ横幅いっぱいに縦に重なるだけで二列になってくれません、ブラウザを広げてもそのまま画像が画面いっぱいに広がるだけでした。

以下追記です。
画像がスマホの画面サイズ横幅いっぱいになるのは、他のページで書いていたcssがこの画像タグにも影響していたからでした。この部分は自己解決しました。
そして、回答にて指摘された画像サイズを小さくした所、きちんと動いてくれました。ありがとうございました。

ですが、問題としては画像サイズをそのまま使用したいので、画像サイズを変更しないともちろんのこと画像が広がるだけでフロート出来るスペースは出来ません。そこで、imgタグにwidth50%height:autoをかけてみたんですが、そうすると今度はきちんと動かなくなってしまいました。

画像サイズをそのままで、スマホの画面サイズで縦2列高さが違う要素を並べたい。という質問に変更したいんですが、こんな書き方で大丈夫でしょうか?

もし解決方法が分かる方、宜しくお願い致します。

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

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

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

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

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

kei344

2017/07/06 16:38

「上手く動きません」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
stowe

2017/07/06 16:46

失礼いたしました。質問内容を修正いたします。
guest

回答3

0

ベストアンサー

記載のHTMLコードを貼り付け、jQuery、masonryを読み込んだだけですが動作しているようです。
※元コードの画像サイズが極端に大きかったので、10/1のサイズに変更しています。
https://jsfiddle.net/6sd6kavz/

流石にCSS無しだと、liタグのドットが表示されたりするので、多少はCSSを記述する必要ありますが、
CSSの記述がないと動作しないということはないようです。

投稿2017/07/07 00:00

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

stowe

2017/07/07 01:10

わー、本当だ。普通に動いていますね・・・。それでは画像のサイズが原因ということでしょうか・・・。画像サイズはこのまま使用したいのですがそれは難しいでしょうか?
stowe

2017/07/07 01:41

今、自分自身で画像サイズを小さくし、やってみたらきちんと動いていました。ですが、スマホサイズの時に2列になってくれず、1列のままでした。スマホサイズ(ブラウザをスマホサイズくらいに縮めてプレビューしています)の時に、2列に出来るようにはどのようにしたらよろしいでしょうか?ご回答頂けると幸いです。宜しくお願い致します。
退会済みユーザー

退会済みユーザー

2017/07/07 02:05

一旦、全ての画像の横幅を100px固定とかにして、スマホで複数列配置になるか確認してみてはどうでしょうか?
stowe

2017/07/08 04:41

回答ありがとうございました。100pxにしたら二列になったので、うまい具合にスマホのとき2列になるよう調節してみます。
guest

0

https://teratail.com/questions/82302
のように画像サイズが大きいと画像読み込み前に配置しようとするので高さの判定ができていないのではないですが?
画像サイズを小さくしてうまくいった方がいるように画像の読み込み時間が短いと処理できているのだと思います。

投稿2017/07/07 00:28

sha

総合スコア141

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

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

stowe

2017/07/08 04:41

回答ありがとうございました!!
guest

0

cssで動かした方が簡単です、<ul><li></li></ul>タグよりも、<div class="box"></div><div class="box"></div>などとし

<style> .box { float: left; width: 3000px; height: auto; } .box2 { float: left; width: 4000px; height: auto; } .box3 { float: left; width: 3543px; height: auto; } </style>

ディブ(ボディーインボディー、ディヴィジョン)を横にならべるために、縦に書いていきます、フロートレフトは左に回り込むスタイルなので、左に回りこみ、隣に同じ高さから始まる、高さのことなるパーツを並べっていきます。IDは一家ポッキリの個別指定で、CLASSは何度でも繰り返し使えます。
class
.~ {}
ID
##~ {}
です。個別にタグ内に書く場合。

<ul> <li style="float: left; width: 4000px; height: 3000px;">~</li> <li style="float: left; width: 4000px; height: 933px; ">~</li> ~~~~ </ul> とカスタマイズできます。 上記はスタイルシートを読み込んで射るようですが、どうやらそれが当たっていないか、デバイスのワイズに読み込んだスタイルがあっていないようです。 ですから、自分で、スタイルを書いてあげるのが得策です。またそのサイトが、うまく動作できていて、自分のサイトができないと言うのなら、スタイルもしくは、スクリプトに何らかの問題が考えられます。質問の内容では、判断できに内容ですので、 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable="no" /> などの設定も見直すと良いでしょう。 画像ファイルの大きさをそのまま利用すると、画面におさまらない、大きさのピクセル(解像度)しか持たないデバイスは、画像がはみ出るため、横列はできません。またスマホの場合、基準となる、幅が320pxと640pxなど比較的小さく設けられているブラウザの仕様です。 そのため、2列にするには、320pxの場合、画像のワイズを160px以下、640pxの場合320px以下に圧縮しなければなりません。 //補足と画像盗難防止タグの挿入 <img src="url.jpg" width="160" height="auto" alt="" oncontextmenu="return false">

などとすれば、自動敵の圧縮されます。ブラウザ互換。
また、スタイルを幅のによって分けるタグ、

//追加提案

<head> <link rel="stylesheet" href="url.css" type="text/css" media="only screen and (max-width: 320px)" /> <link rel="stylesheet" href="url2.css" type="text/css" media="only screen and (min-width: 321px)" /> </head> とすることも可能です。

投稿2017/07/06 17:33

編集2017/07/07 05:44
grandcross_info

総合スコア130

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

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

kei344

2017/07/07 05:57

回答文でもコードブロック使えますよ。```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。ちなみにコメント欄では使えませんが・・・。 ```CSS #test { /* 「#」がマークダウンで「h要素」に変わるので表示されるものが不正確に */ display: block; /* マークダウン内でないとインデントが消える */ } ```
grandcross_info

2017/07/07 16:42

ありがとうございます、あ昨日入会したばかりなもので。
stowe

2017/07/08 04:42

回答ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問