つらい・・・

アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません

解決済

質問者：初心者サイト作成
質問日時：2023/07/23 21:59
回答数：3件

ファイルを最大３つアップロードできる掲示板を作成しているのですが、2個の場合は縦並び、3個の場合は2個横並び＋一段下に回り込んで1個並べたいです。

div class="billboard_article_areaにCSSを設定しておりクラス名を維持したまま、個数に応じてCSSを差し替えたいと考えております。

jQueryで可能なようで参考にしたいと考えているのですが、ブラウザにより対応できない場合もあるようで躊躇していて、他に方法がないかと模索しているのですが何か良い方法はありますでしょうか？

※参考サイト
https://okwave.jp/qa/q7386889.html

※アップロードファイルコード
<div class="billboard_article_area">
<div class="billboard_uploadFiles_area">

<div class="viewer"><?php echo $view[0]; ?></div>
</div>
<div class="billboard_uploadFiles_area">

<div class="viewer"><?php echo $view[1]; ?></div>
</div>
<div class="billboard_uploadFiles_area">

<div class="viewer"><?php echo $view[2]; ?></div>
</div>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： fujillin
回答日時：2023/07/24 18:05

No1です。

画像の表示順序がどれだけ重要なのかがよくわからないのですが・・

ご提示のHTMLのどこが画像なのかも不明なのと、画像サイズがどの程度バラついているのかも不明なので、何とも記述しにくいのですが、大雑把な参考としてのサンプルを作成してみました。

適当に以下の仮定をしています。
・各画像（又は包含要素）は同じくらいのサイズになっている
　（例では100×100pxとしてあります）
・ご提示のHTMLでdiv要素が画像（又は画像の包含要素）になっていると想定

画像の順を気にしなければ、一律設定のCase1で事足りると思います
画像の順も気にするのなら、CSSを使い分ける方法でCase2の例で
（とは言っても、.tripleの設定を追加しただけですが・・）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* divを画像代わりにする仮設定他 */
h4 { margin: 1.5em 0 .2em; }
.img {
width: 100px; height: 100px;
text-align: center; line-height: 100px;
font-weight: bold;
border: 1px solid #888;
background-color: #DFF;
margin: 1px;
}

/* レイアウトの設定 */
.wrap1, .wrap2 {
display: flex;
flex-wrap: wrap;
flex-direction: column;
max-height: 210px; max-width: 210px;
}
.wrap2.triple { flex-direction: row; }
</style>
</head>
<body>
<h4>Case1:1個の場合</h4>
<div class="wrap1">
<div class="img">画像1</div>
</div>
<h4>Case1:2個の場合</h4>
<div class="wrap1">
<div class="img">画像1</div>
<div class="img">画像2</div>
</div>
<h4>Case1:3個の場合</h4>
<div class="wrap1">
<div class="img">画像1</div>
<div class="img">画像2</div>
<div class="img">画像3</div>
</div>

<h4>Case2:1個の場合</h4>
<div class="wrap2">
<div class="img">画像1</div>
</div>
<h4>Case2:2個の場合</h4>
<div class="wrap2">
<div class="img">画像1</div>
<div class="img">画像2</div>
</div>
<h4>Case2:3個の場合</h4>
<div class="wrap2 triple">
<div class="img">画像1</div>
<div class="img">画像2</div>
<div class="img">画像3</div>
</div>
</body>
</html>

- 1
- 件

通報する

この回答へのお礼

PHPでアップロード数に応じてif分岐を使い、CSSの表示を切り替えることが可能そうなのでそちらを先ず試してみて、不可能であればこちらの方法を代用させていただきます。勉強になりました、コード提示ありがとうございます。

通報する

お礼日時：2023/07/27 15:23

No.2

回答者： Ogre7077
回答日時：2023/07/24 12:03

$imgorder = 'solo' または 'duo' または 'trio';

- 1
- 件

通報する

この回答へのお礼

回答ありがとうございます、echo部分はウイルス対策などを施したディレクトリからのものを使用したいのですが、そちらでも応用可能でしょうか？

<div class="billboard_article_area">
<div id="billboard_toggle_target">
<div class="billboard_uploadFiles_area">

<div class="viewer"><?php echo $view[0]; ?></div>
</div>
<div class="billboard_uploadFiles_area">

<div class="viewer"><?php echo $view[1]; ?></div>
</div>

<div class="billboard_uploadFiles_area">

<div class="viewer"><?php echo $view[2]; ?></div>
</div>
</div>

通報する

お礼日時：2023/07/24 16:34

参考程度に

No.1

回答者： fujillin
回答日時：2023/07/23 22:59

こんばんは

単純に画像の数で並びを変えたいだけなら、
・インライン要素にして並べる（float等でも可）
・flex あるいは grid レイアウトで並べる
等の方法で、3個目から次の行になるようにしておけば済みそうですが？
サイズがどのように決まっているのか不明ですが、親要素の幅を画像2個分にしておけば、3個目から次の行に送られると思います。

そこまでする必要があるのかどうか不明ですけれど、個別に3種類のレイアウトをCSSで記述しておく方法も考えられます。
それぞれにクラス名を設けておいて、画像の数によって、親要素にそのクラス名を付与することで、適用するCSSを変えることが可能になるでしょう。

- 1
- 件

通報する

この回答へのお礼

回答ありがとうございます、CSSで2個の場合は縦並び、3個の場合は横並び＋下の段に1個回り込むという構想で考えていたので、3個目から次の行というのは考えておりませんでした…

PHPで方法を模索しているのですが、一部のみfunctions.php(他の処理が書かれている)以外で別にcss.phpを作成して読み込ませることは可能でしょうか？

※参考サイト
http://103px.blog.fc2.com/blog-entry-19.html

https://fantastech.net/php-css

通報する

お礼日時：2023/07/24 16:40

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！