現在Q&A掲示板を作成しておりコンテンツを横に4列並べているのですが、ブラウザの横幅が変わる際にどう対応すべきか悩んでおります。
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>
No.5ベストアンサー
- 回答日時:
No.3
・・・どのデバイスのサイズで区切るのが良いでしょうか?・・・・・・・・
基本的には、貴方のページによって見せたいレイアウトがあるはずだから、それに合わせて好きなようにすれば良いでしょう。
元の質問はそれがしたいので、その仕方を聞いたのではないですか。
こちらもご参考に↓
https://hashimotosan.hatenablog.jp/entry/2020/12 …
No.3
- 回答日時:
初心者サイト作成 さん
・・・・どのように複数のブラウザ用に CSS を書くべきでしょうか?・・・・・・
通常は、レスポンシブデザインで作ります。
ご参考に↓
https://www.site-convert.com/archives/1528
例えば PC、タブレット、スマートフォンで4列、2列、1列に切り替わるようにするなら、こんな感じになります。↓
<!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>
アドバイスありがとうございます。
コード参考にさせていただきます。
様々なデバイスがある為どこまでメディアクエリで指定するべきか悩んでおります、どのデバイスのサイズで区切るのが良いでしょうか?
No.2
- 回答日時:
アドバイスありがとうございます。
スタイルを切り替える方法で実装してみます。
1点お聞きしたいのですが、メディアクエリで指定する場合にどのデバイスのサイズで区切るのが良いでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript Colorboxがうまく設置できません 2 2024/01/13 16:59
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSS初心者です。わかる方教えてください。 3 2023/09/08 22:04
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
このQ&Aを見た人はこんなQ&Aも見ています
-
性格の違いは生まれた順番で決まる?長男長女・中間子・末っ子・一人っ子の性格の傾向
同じ環境で生まれ育っても、生まれ順で性格は違うものなのだろうか。家庭教育研究家の田宮由美さんに教えてもらった。
-
40代後半でゼロからのプログラム業界への転職
その他(プログラミング・Web制作)
-
webデザインの勉強で、HTML/CSSから勉強するかPhotoshop/Illustratorかは
HTML・CSS
-
HTMLタグに複数のクラスを設定する方法がわからない
JavaScript
-
-
4
ITの見積もりってなんであんなに高いんですか? 原価がかからないのに
その他(ソフトウェア)
-
5
Javascriptエラーの原因が分からない
JavaScript
-
6
これらは書誌情報だと思うのですが それぞれ何ですか?
Ruby
-
7
プログラミング初心者です。 Windowsで作ったWebサイトをメールでMacBookに送ったところ
その他(プログラミング・Web制作)
-
8
単語を少し変えると1位になるのだけど、6位くらいになります。
SEO
-
9
Q&A掲示板の入力フォームに文字数制限を設けて入力可能な文字数を表示したい
JavaScript
-
10
Windows10のパソコンから謎のWi-Fiが出ています。
Windows 10
-
11
goo は、放置?
HTML・CSS
-
12
CSSについて教えてください。 こちらのサイトを参考にしているのですが、ナンバーを自動で付けているの
HTML・CSS
-
13
Windows10で小規模LANの構築はできるのでしょうか?
その他(OS)
-
14
ArduinoのジャイロモジュールMPU6050について
C言語・C++・C#
-
15
VBAで大量のファイルをシート名ごとに転記やらいろいろしたい!
Visual Basic(VBA)
-
16
AIの登場でプログラマーたちが解雇されていますが
その他(プログラミング・Web制作)
-
17
Windows 10のサポート期限切れとともにパソコンの 大量廃棄が予想されているのでしょうか それ
Windows 10
-
18
イラレやフォトショ、acrobat以外で、フリーで画像を縮小するソフトを教えてください。
画像編集・動画編集・音楽編集
-
19
分かる人は簡単なのだろうが、vscodeのマルチルートワークスペースで困ってます。
その他(プログラミング・Web制作)
-
20
あなたのXAMPPのdashboard内のjavascriptsのall.jsを見せて欲しい。バグ?
その他(プログラミング・Web制作)
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スクロール可能なチェックボックス
-
背景の過
-
文字をクリックしたら別の文字...
-
CSS <div>の入れ子が反映さ...
-
レイアウトが崩れないようにす...
-
フッターの下に隙間ができてしまう
-
textareaで入力した文字を改行...
-
borderがおかしくなる・・・
-
フッター上部に謎の隙間
-
文字を固定したいのですが…
-
【CSS】floatで左右に並べた...
-
MAX関数を使ってからLEFT JOIN...
-
c++std::string型をTCHARに変換...
-
javascriptテキストBOX色を元に...
-
jQueryのアコーディオンメニュ...
-
eclipseでcssを使うためには?
-
Javascript初心者|jQueryの.va...
-
「jQuery」アコーディオンメニ...
-
全部のサイコロをjavascriptで...
-
クリックした<a>タグのみにClas...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
フッター上部に謎の隙間
-
CSS <div>の入れ子が反映さ...
-
【CSS】floatで左右に並べた...
-
css固定したフッターが本文と重...
-
文字をクリックしたら別の文字...
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
スクロール可能なチェックボックス
-
文字を固定したいのですが…
-
1行で左寄せと右寄せと中央揃え...
-
Ctrl+F(検索)の窓を出したいの...
-
チェックボックスの背景色って...
-
Webサイト作成 プログレスバー ...
-
離れた場所にマウスオーバーで...
-
スタイルシートで画面を上下に...
-
メニューバーもスクロールに合...
-
ホームページのsidebar とconte...
-
CSSで背景を下までのばすには?
-
TABLEの高さを固定したいのですが…
-
かなり困っています。知恵を貸...
おすすめ情報