うーん・・・

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

解決済

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

現在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>

通報する

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

質問の本文を隠す

回答 (5件)

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

No.5ベストアンサー

回答者： gura_
回答日時：2024/07/10 21:12

No.3

　･･･どのデバイスのサイズで区切るのが良いでしょうか？････････

基本的には、貴方のページによって見せたいレイアウトがあるはずだから、それに合わせて好きなようにすれば良いでしょう。

元の質問はそれがしたいので、その仕方を聞いたのではないですか。

こちらもご参考に↓
https://hashimotosan.hatenablog.jp/entry/2020/12 …

- 1
- 件

通報する

この回答へのお礼

アドバイスありがとうございます。
520px/960px で基本的なレイアウトを考えながら作成してみます。

通報する

お礼日時：2024/07/15 22:57

No.4

回答者：だいぬ
回答日時：2024/07/09 12:00

どっちが見やすいかなんて分かりきってるのだから、好きにすれば良くないですかね

- 1
- 件

通報する

この回答へのお礼

アドバイスありがとうございます。
他サイトを見ながら判断してみます。

通報する

お礼日時：2024/07/10 00:42

No.3

回答者： gura_
回答日時：2024/07/09 09:33

初心者サイト作成さん

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

通常は、レスポンシブデザインで作ります。
ご参考に↓
https://www.site-convert.com/archives/1528

例えば PC、タブレット、スマートフォンで４列、２列、１列に切り替わるようにするなら、こんな感じになります。↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<style>
/* 雑談掲示板　一覧表示画面本体定義 */
.image-inline-player {
width: 1140px; /* pc時適用される */
margin: 0 auto 50px;
background-color: #fff;
border: 2px solid #999;
/* clear: both; 不要 */
display: flex; flex-wrap: wrap; 1justify-content: space-between;
}

/* 雑談掲示板　一覧表示画面本体定義 */
.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 img {
height: 150px; /* 画像の高さ */
width: 260px; /* 画像の横幅 */
}
@media screen and (max-width:768px) { /* タブレット時適用される */
.image-inline-player {
width: 600px;
}
}
@media screen and (max-width:480px) { /* スマホ時適用される */
.image-inline-player {
width: 300px;
}
}
</style>
</head>
<body>
<div class="image-inline-player">
<div class="image-card-wrap">
<a href=""><div class="image-thumbnail-card">
<img src="https://oshiete.xgoo.jp/images/feeling/qjiro/pc/ …
</div>
<div class="image-title-link">タイトルテスト1タイトルテスト1タイトル...
</div>
</a>
</div>
<div class="image-card-wrap">
<a href=""><div class="image-thumbnail-card">
<img src="https://oshiete.xgoo.jp/images/feeling/qjiro/pc/ …
</div>
<div class="image-title-link">タイトルテスト2タイトルテスト2タイトル...
</div>
</a>
</div>
<div class="image-card-wrap">
<a href=""><div class="image-thumbnail-card">
<img src="https://oshiete.xgoo.jp/images/feeling/qjiro/pc/ …
</div>
<div class="image-title-link">タイトルテスト3タイトルテスト3タイトル...
</div>
</a>
</div>
<div class="image-card-wrap">
<a href=""><div class="image-thumbnail-card">
<img src="https://oshiete.xgoo.jp/images/feeling/qjiro/pc/ …
</div>
<div class="image-title-link">タイトルテスト3タイトルテスト3タイトル...
</div>
</a>
</div>
<div class="image-card-wrap">
<a href=""><div class="image-thumbnail-card">
<img src="https://oshiete.xgoo.jp/images/feeling/qjiro/pc/ …
</div>
<div class="image-title-link">タイトルテスト3タイトルテスト3タイトル...
</div>
</a>
</div>
</div>

</body>
</html>

- 1
- 件

通報する

この回答へのお礼

アドバイスありがとうございます。
コード参考にさせていただきます。
様々なデバイスがある為どこまでメディアクエリで指定するべきか悩んでおります、どのデバイスのサイズで区切るのが良いでしょうか？

通報する

お礼日時：2024/07/10 00:59

No.2

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

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

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

- 1
- 件

通報する

この回答へのお礼

アドバイスありがとうございます。
スタイルを切り替える方法で実装してみます。
1点お聞きしたいのですが、メディアクエリで指定する場合にどのデバイスのサイズで区切るのが良いでしょうか？

通報する

お礼日時：2024/07/10 00:55

No.1

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

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

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

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