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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

jQuery

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

HTML

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

CSS

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

Q&A

解決済

1回答

4669閲覧

正方形をランダムなサイズ感でカッコ良く表示したい(jquery, jqueryプラグイン, css, html)

Daimian

総合スコア53

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/06/08 09:02

編集2018/06/08 09:04

前提・実現したいこと

個人でオリジナルアプリケーションを作成中ですデザイン(案)
アートの紹介をするページで、正方形で作成された様々なアートをトップページで、上記の図(すいません雑ですがペイントで簡単に作成したデザイン案です)のようなデザインで表示したいです。

様々なプラグインを探したりしているのですが、
https://masonry.desandro.com/
このプラグインのように、異なるサイズのイメージを隙間を詰めて表示するプラグインなどは存在しても、正方形のものを、ランダムのサイズで、均一の隙間で、表示してくれるように加工するプラグインなどが見つかりません。

プラグインでなくても、何か自力で出来ればいいのですが、特に今の所、その技術を持ち合わせていません。。。

どのようにすればこの図のようなデザインでトップページを実装出来るのか、何かご教示いただければ幸いです。
よろしくお願いします。

※理想を申し上げますと、リロードする度に配置が変わり、何度見ても飽きないデザインに出来ればいいなと思います。

該当のソースコード

もうほんとに、HTMLは下記のようなベーシックなもので今の所実装中です。

html

1<div id="container"> 2 <div><img src="/images/pic1.jpg" /></div> 3 <div><img src="/images/pic2.jpg" /></div> 4 <div><img src="/images/pic3.jpg" /></div> 5 <div><img src="/images/pic4.jpg" /></div> 6</div>

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

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

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

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

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

yambejp

2018/06/08 09:37

例示のものもそうですが、脇の方になると長方形にならざる得ないと思いますが、それを全部正方形に分割するのでしょうか?
Daimian

2018/06/08 09:49

早速のご回答ありがとうございます!すいません、分かりにくいですが、全て正方形が大前提なんです。。
Daimian

2018/06/09 04:20 編集

ありがとうございます!使えると思ったのですが、よく内容を見て見ると、サイズが違うものを並べることによって生まれた隙間(例えば長方形と正方形を連続で並べることによって発生した隙間など)を埋めるために使用するもの?のような気がしました。自分が目的としている、正方形をサイズ分けして綺麗に並べるということはでいないのかな、と考えてしまいました。
guest

回答1

0

ベストアンサー

とりあえず「正方形で充填」の条件をクリアするなら最小の正方形の大きさを決めそれを方眼紙のようなグリッドと見立て、充填に用いる様々な大きさの正方形を「グリッドの整数倍の大きさ」とすれば比較的素朴なアルゴリズム(※)で達成できると思います。


※: 素朴なアルゴリズム
例えば、大きな正方形から埋め始め、ある大きさの正方形の空きがなくなったらもう少し小さな正方形にして埋めていき・・・を繰り返し、最後にグリッド単位の正方形で残りを埋めると以下のような感じにできます。

イメージ説明

しかし「デザイン」というのは難しいもので、こうした素朴な方法でやった結果が「必ずしも意図したデザインになるとは限らない」と思います。

一見して質問にある例は「充填に用いる正方形の大きさのバリエーションや数が押さえられておりスッキリしたデザインになっている」と感じます。

一方、自分の回答例は「アルゴリズムは単純だが、充填に用いた四角形の大きさのバリエーションや数がごちゃごちゃしていて今一つよくない」と見えるのではないでしょうか?

人間が「よい」と感じるデザインには「単に正方形で充填できればよい」という以上に「なんらかの評価基準がある」と思います。その評価基準を想定して「ほどよく埋めるアルゴリズム」を考えないといけなくて「そこが難しい点」ではないでしょうか?

質問者さんは「例は挙げておられる」のですが「具体的な評価基準」を述べておられません。よって「実際に何を狙いとしたデザインにしたいのか」が曖昧なため、どういうアルゴリズム(方針)がよいか案を出しにくいと思います。回答側がデザイン基準まで想定することはできるでしょうけど、それはもう「回答者独自のデザインアイデア」であって回答が発散しかねないのでは?


追記:とりあえずアルゴリズムの雰囲気を示すものとしてPythonの実装例を挙げます。
JavaScriptの基本機能とnumpyライブラリーを用いたPythonを比べると、後者の方が多次元配列処理の記述能力が高いためJavaScriptに書き直すならnumpyがやっていることを理解する必要があります。numpyに大きく依存した記述についてはコメントを書いておきました。やっていることの要点さえつかめればJavaScriptでも二次元配列の要素を調べたり変更したりするループ処理っぽいものを書けば実現は容易です。

Python

1from tkinter import * # Pythonの標準GUIライブラリー 2import numpy as np # 行列演算を簡便に記述することができるライブラリー 3 4G = 4 5W, H = 16*5, 9*5 6CF = '#c5eb99' # 充填色 7CB = '#FFF' # ボーダー色 8 9 10def range2(n): 11 prime = 2**31-1 # 適当な大きさの素数 12 return map(lambda x: prime * x % n, range(n)) 13 14 15def find(r, cv: Canvas, a, range): 16 ww = W - r + 1 17 hh = H - r + 1 18 x0 = np.random.randint(0, ww) 19 y0 = np.random.randint(0, hh) 20 for ofs in range(ww * hh): 21 dy = ofs // ww 22 dx = ofs % ww 23 y = (y0 + dy) % hh 24 x = (x0 + dx) % ww 25 # 以下のif文は配列aの1次元目(y座標)がy~y+r-1まで、 26 # 2次元目(x座標)がx~x+r-1までの要素が全て0かを判定するものです。 27 if np.all(a[y:y + r, x:x + r] == 0): 28 # 以下の代入文でy座標がy~y+r-1, x座標がx~x+r-1の範囲の全要素を1にしてます 29 a[y:y + r, x:x + r] = 1 30 x1, y1 = x * G, y * G 31 x2, y2 = (x + r) * G - 1, (y + r) * G - 1 32 cv.create_rectangle((x1, y1), (x2, y2), fill=CF, outline=CB) 33 return True 34 35 36def main(): 37 a = np.zeros((H, W), dtype=np.uint8) # HxWの2次元行列(初期値0)を生成している 38 39 root = Tk() 40 cv = Canvas(root, width=W * G, height=H * G) # HTMLのcanvasみたいなもの 41 cv.pack() 42 # 空間充填に用いる正方形の大きさの候補のリスト 43 # この値を変えると結果の雰囲気は大分変化する 44 rs = [20, 10, 4, 2, 1] 45 for r in rs: 46 while find(r, cv, a, range2): 47 pass 48 root.mainloop() 49 50 51if __name__ == '__main__': 52 main()

投稿2018/06/08 15:27

編集2018/06/09 05:33
KSwordOfHaste

総合スコア18392

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

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

Daimian

2018/06/09 04:15

素晴らしい迅速なご回答本当にありがとうございます(初投稿でドキドキしていましたがすごい感激しました)。ご指摘いただきました内容、理解しました。確かに評価基準が曖昧で、程よく埋めるアルゴリズムがなんなのか、非常に感覚的な部分を明文化できておりません! というか、そもそも、一旦ご指摘いただいた私の"感覚的な部分"を抜きにして、素朴なアルゴリズムってのがどんなものか、実際に実装するときのアイデァが自分になさすぎて困ります。 ```html <div class="container"> <div class="grid-1"> <img src="/images/pic1.jpg" /> </div> <div class="grid-2"> <img src="/images/pic2.jpg" /> </div> </div> ``` のような感じにして、 ```css .container { displey: flex; } .grid-1 { width: 50px; hight: 50px; } .grid-2 { width: 100px; hight: 100px; } ``` のような感じで地道にデザインを作っていくことしかパッと思いつくものがありません。もし素朴なアルゴリズムに対する説明をもう少ししていただければすごく助かります!!!!
KSwordOfHaste

2018/06/09 04:26

実は回答にあるアルゴリズムは自分が書きやすい言語という理由でPythonで書いたものです(50行ぐらい)。質問者さんにとってはJavaScriptでsvgを生成するようなものの方が参考にしやすいだろうと思います。もしPythonでもよいならすぐに提示できますが・・・どうしましょう?
Daimian

2018/06/09 04:29

もう作成されていたんですか。。。すごいですね。。!! Javascriptしか逆に分からないですが、もうご提示いただけるのであればなんでも構いません!なんとか解読します!!!
Daimian

2018/06/09 05:59

いやもう本当にありがとうございます!!一生懸命、記載いただきましたpythonの記述を解読します!そしてjavascriptで実装して見ます!いや本当にありがとうございます!感謝します!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問