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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

HTML

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

CSS

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

Q&A

解決済

3回答

480閲覧

複数画像を指定した幅の中に収めたい

EXIT

総合スコア43

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/11/11 17:20

前提・実現したいこと

ポートフォリオサイトを作ろうと思っていて、作品をこのように載せたいと思ってます。

こんな風

縦横正方形で幅が違うので、
ここからここまでの幅 |←→| に、「画像同士の隙間の幅」と「その下の説明等の文章」を固定した状態で 組み合わせていい感じに収まるようにしたいんですが、
どうすればこれが実現できますか?
(説明伝わってますか…?)

ランダムだからPHPと思いましたが、この感じができるならどのコーディングでも大丈夫です。

何卒よろしくお願いします!

(ドットインストールで一通り勉強しただけの初心者です)

発生している問題・エラーメッセージ

どれをどうすればいいか全く分からない。
コピペすれば実装できる所まで教えて欲しいです。(ごめんなさい)

補足情報(FW/ツールのバージョンなど)

使用ツール:ATOM

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

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

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

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

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

m.ts10806

2018/11/11 19:07

まずはご自身で思ったように作ってみてその過程でつまずいたことを質問してください。これだと「コードください」と変わりません。それとも「できます」と可不可だけの回答で良いのでしょうか?
退会済みユーザー

退会済みユーザー

2018/11/11 22:50

画像の縦幅は均一にしたいのでしょうか?
EXIT

2018/11/12 00:02

>>mts10806さん すみません。調べたりもしたのですが、結局幅を指定した上で画像の形を上手いこと組み合わせて幅に敷き詰める?コードをつくるにはどの言語でどうしたらいいか分からなかったので質問しました。はい、つまりコードくださいと同じです(ごめんなさい)
m.ts10806

2018/11/12 00:09 編集

タグにつけられている言語いずれか(または複数組み合わせ)で実現可能です。まずそこは組んでみましょう。丸投げは非推奨です。「コードください」は「質問」ではなく「作業依頼」なので。
EXIT

2018/11/12 00:08

>>yoshi_0819さん いえ、縦横正方形すべて同じ比率?にしたいです。なので縦の画像が下にでっぱるイメージです。
EXIT

2018/11/12 00:35

>>mts10806さん 組んでみても、画像の形によって可変するのはどうすれば出来ますか?という質問になると思います。(横に並べるのはできても順番を自動で並び替えてくれるようなのは本当に分からない)
m.ts10806

2018/11/12 00:59

んー。コピペコードを求める人の傾向ってそれで分かったつもりになって、結局扱えなくなってもらったコードそのままで回答者に確認せずに新しい質問をする人がすごく多いんですよね。だからteratailでは基本非推奨になってます。せめて出来るところまで、うまくいってない半端なものでもいいのでやってみてください。
m.ts10806

2018/11/12 01:06 編集

重複投稿されたので削除
m.ts10806

2018/11/12 01:07 編集

初心者こそトライ&エラーでやってみて失敗して身に付くものなので、何もやってないのにコピペコード求めるのはちょっと違うように思います。お金だして作ってもらってくださいという話になることもあります。失敗しないと身に付きませんし、失敗しない人はいません
m.ts10806

2018/11/12 01:10

せめて探し方を聞くにとどめるべきかと。ヘルプにもあるように適切な探し方を知っていることも重要なスキルのうちです。
EXIT

2018/11/12 06:08 編集

【補足】今は他にもやる事が沢山あるので、また時間があいたら頑張って出来るところまでコード書こうと思います。でも今まで色々調べまくっても解決できなかったので、コードや記事を教えてくれると大変助かります。
m.ts10806

2018/11/12 06:20

コード何も書いてないなら解決できないのは当たり前かと。やりたいことそのままあることって稀ですし、トライ&エラーです。その前にどれだけやりたいことを細分化できているかということではないでしょうか(その細分化は他人がやることではありません) とにかくこのままでは質問になっていないので修正してもらえればと(質問は編集可能です)
EXIT

2018/11/12 09:36

>>mts10806さん "やりたいことそのままあることって稀"→そうなんですね。ㅤうーん…またできたら編集します
m.ts10806

2018/11/12 09:41

大体は要件を細分化して部品にしてそれに合うものをひとつずつ探すか作って結合します。細分化できてないと何も進みません。質問のサイトなのであくまで「なにか作っていく過程でつまずいたところを質問」してください。「何もわからない」のは、途方もない先のゴールだけを見ているからで、細分化すれば今ご自身でもできることは意外とたくさんあるはずです。
guest

回答3

0

「レスポンシブ 可変グリッド」「レスポンシブ タイル」等で検索すると色々情報がでてきますので、
ご自身の要望にあったものを利用するか、無ければ作るのがいいと思います。

投稿2018/11/12 02:56

tabuu

総合スコア2449

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

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

EXIT

2018/11/12 09:28

回答ありがとうございます。 それらも含め、色々と調べてから質問しました。 要望に合ったのがなかなか見つからなくて… 自分で作れるほど腕ないですTT
guest

0

【よこ並びのCSS。】
http://lopan.jp/layout/

投稿2018/11/11 22:45

kei344

総合スコア69366

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

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

EXIT

2018/11/11 23:51

回答ありがとうございます。 ただ画像を横並びにするのではなく、|←→| の幅の中で図形を自動的に並び替えてくれるような(横幅 |←→| が自動的に敷き詰まるような?)感じにしたいです。 どのコードでどうしたら実現できるのでしょうか…?さっぱりわからなくて
kei344

2018/11/11 23:55

リンク先に説明があるので、読んで試してわからないことを質問してください。
EXIT

2018/11/12 00:14

つまり例えば画像配置が ①②③④ ⑤⑥⑦⑧ ではなく、図形によってなるべく丁度収まるように可変するような ①③④⑤ ②⑥⑦⑧⑨ みたいなように出来るにはどうしたらいいかということです。
guest

0

ベストアンサー

よくわかんないけどその程度だったらHTMLとCSSでいける気が
こちらに載せてあります。

投稿2018/11/12 07:31

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

EXIT

2018/11/12 09:23

ありがとうございます。 x y □□ □□ ←画像 (=横x 縦y)として、 そうです、タテと正方形だけだったらxが同じなので、このように整列できるんです。 が、ヨコがあるので |←→| 幅にどうしても上手く収まらない問題があります。(ヨコがメインなのでヨコが横並びに4つ入れるよう画像と隙間の幅を調整するつもりです) つまり、 □□□ㅤ□□□ㅤ□□□ㅤ□□□ □□□ㅤ□□□ㅤ□□□ㅤ□□□ ↑これがベース(ヨコ長方形が4つ) |←ーーーーーーーーーーーー→| で、例えば □□□ㅤ□□ㅤ□□ㅤ□□□ㅤ■■■ □□□ㅤ□□ㅤ□□ㅤ□□□ㅤ■■■ ㅤㅤㅤㅤ □□ だったら、黒ヨコが |←→| 幅からはみ出します。(黒ヨコがなくても |←→| 幅に足りてなくて右側になんかスペースが出来てしまう)(この右側のスペースをなるべく減らしたいので、機械で計算して上手いこと敷き詰めるコードを探している) Packeryというプラグインがまさしく「綺麗に配置されるように、隙間があれば順番が入れ替わる」というアルゴリズムが採用されてるようで、これに画像と文章を固定したのがやりたいです。 【簡単!可変グリッドレイアウトが作れるプラグインまとめ より】 ただ、|←→| 幅が指定できないっぽい?ので、Packeryの↑のアルゴリズムが出来る方法(コード)が知りたいです。 ちなみに、例えば □□□ㅤ□□ㅤ□□ㅤ□□ㅤ□□ □□□ㅤ□□ㅤ□□ㅤ□□ㅤ□□ ㅤㅤㅤㅤ □□ㅤㅤㅤㅤㅤㅤㅤㅤ□□ だったら、いい感じに |←→| 幅に収まってますよね。(タテと正方形は別の列から持ってきている) これが自動的に機械側で処理して配置してくれるようにしたい。 (ちなみにタテだけ小さく等はしたくない = □□□ㅤ□ㅤ□□ □□□ㅤ□ㅤ□□ㅤ←こういうのは✕ ) (説明伝わってるかな…)
退会済みユーザー

退会済みユーザー

2018/11/12 11:13

その画像は可変なのですか?
EXIT

2018/11/12 18:32

いえ、例えば ヨコ(100×200) タテ(200×100) 正方形(100×100) としたら、どういう場合でもその大きさは変えたくないです。(その大きさで固定) なので |←→| 幅に合わせるためにヨコを50×100にしたり、正方形を80×80にしたりはしたくないということです。
colling

2018/11/13 04:27

>Packeryというプラグインがまさしく であれば、それを使えば良いのでは?
退会済みユーザー

退会済みユーザー

2018/11/13 07:12 編集

collingさんの意見に賛成です。 また、それが最初から質問だったらカテゴリが違う気が... また、各画像のサイズがわかればパーセント指定でできる気が(その場合上下でサイズが変わる場合が) 右側に空白が嫌だということなら中央に寄せることも可能です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問