うーん・・・

サイトにコンテンツを並べる際の CSS についてアドバイスお願い致します。

受付中

質問者：初心者サイト作成
質問日時：2024/07/08 21:39
回答数：2件

現在Q&A掲示板を作成しておりコンテンツを横に４列並べているのですが、ブラウザの横幅が変わる際にどう対応すべきか悩んでおります。
2つの方法で悩んでいて参考サイトを探してみたところYoutubeの動画一覧表示は➀の方法でコードが書かれているという記事を見つけました。

こちらのコードで CSS を設定した場合並べることは出来たのですが、ブラウザの横幅でコンテンツが右端に追加される仕組みなので、スペースが足りない場合に間隔が空いてしまいデザインが崩れるのではないかと心配しております。

どのように複数のブラウザ用に CSS を書くべきでしょうか？

➀ブラウザによって横に並べるコンテンツ数を変化させる（減らす・増やす）
➁横に並べるコンテンツ数は維持して横幅を広げる

※参考サイト
https://ecsiter.com/limage

※該当コード
<html>
<div class="image-inline-player">
<div class="image-card-wrap" style="display: inline-block;">
<a href=""><div class="image-thumbnail-card">
<img src="">
</div>
<div class="image-title-link">タイトルテスト1タイトルテスト1タイトル...
</div>
</a>
</div>
<div class="image-card-wrap" style="display: inline-block;">
<a href=""><div class="image-thumbnail-card"><img src="">
</div>
<div class="image-title-link">タイトルテスト2タイトルテスト2タイトル...
</div>
</a>
</div>
<div class="image-card-wrap" style="display: inline-block;">
<a href=""><div class="image-thumbnail-card"><img src="">
</div>
<div class="image-title-link">タイトルテスト3タイトルテスト3タイトル...
</div>
</a>
</div>
<div class="image-card-wrap" style="display: inline-block;">
<a href=""><div class="image-thumbnail-card"><img src="">
</div>
<div class="image-title-link">タイトルテスト3タイトルテスト3タイトル...
</div>
</a>
</div>
</div>
</html>

<style>
/* 雑談掲示板　一覧表示画面本体定義 */
.image-inline-player {
width: 1140px;
margin: 0 auto 50px;
background-color: #fff;
border: 2px solid #999;
clear: both;
}

/* 雑談掲示板　一覧表示画面本体定義 */
.image-inline-player .image-card-wrap {
width:260px; /* 枠の横幅 */
margin: 23px 0px 23px 19px; /* 枠のスペース */
vertical-align:top; /* 上端に揃える */
word-wrap:break-word; /* 文字を改行し枠内に収める */
display:inline-block; /* <li>要素を横に並べる */
/* display:inline; */
zoom:1;
}

/* 雑談掲示板　一覧表示画面配置位置 */
.image-inline-player .image-card-wrap .image-title-link {
font-size: 150%;
font-weight: 700;
letter-spacing: .1em;
}

/* 雑談掲示板　一覧表示画面の画像配置位置 */
.image-inline-player .image-card-wrap .image-thumbnail-card {
height: 150px; /* 画像の高さ */
width: 260px; /* 画像の横幅 */
}
</style>

通報する

質問の本文を隠す

画像を添付する（ファイルサイズ：10MB以内、ファイル形式：JPG/GIF/PNG）
今の自分の気分スタンプを選ぼう！

あと4000文字

回答を確認する

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： rera1016
回答日時：2024/07/09 01:39

横幅のピクセル数が変化する毎に、適用されるスタイルを切り替えればいいです。

https://sole-color-blog.com/blog/71/

- 0
- 件

通報する

No.1

回答者：かわごえ
回答日時：2024/07/08 22:30

＞どのように複数のブラウザ用に CSS を

いわゆるレスポンシブで考えたほうが良いと思います。
@media screen and (max-width: 768px)
PCは横、スマホは縦、タブレットは向きによってタテヨコ切り替え
その判断は画面の解像度です。

既存のサイトを参考にするのがいいですよ。
見た感じ掲示板っぽいのでYoutubeを参考にするのは違う気がします。