ここから本文です

レスポンシブwebデザインに係る質問です。 ※Bootstrap4.1.3を使用して作成してい...

アバター

ID非公開さん

2020/1/1518:26:17

レスポンシブwebデザインに係る質問です。
※Bootstrap4.1.3を使用して作成しています。

商品を紹介するページを作っていますが、画面を小さくしていっても上手くレスポンシブ対応できていないようで、サイトの横幅を狭くしていくと画像が画面に収まりません。色々試しましたが解決策が分からないためご教授いただければと思います。

イメージ的には、下記のようなグリッド構造にするのが1つの目標です。
【PC・タブレット横】
<スライダー[8]><補足画像[4]>
<詳細・購入ボタン[8]><商品説明文[4]>

【タブレット縦】
<スライダー[12]>
<補足画像[6]><商品説明文[6]>
<詳細・購入ボタン[12]>

【スマホ】
<スライダー[12]>
<補足画像[12]>
<商品説明文[12]>
<詳細・購入ボタン[12]>

質問1: 上記のような構造にし、レスポンシブ対応させるにはどのように修正すれば良いでしょうか。
質問2: 本当はスライダーにサムネイルをつけて下記サイトの「サムネイル付きのフリックスライダー(カルーセル)」のようにしたかったのですが、同じように記述してもサムネイルとカルーセルが数十ピクセル離れてしまいました。下記サイトと同じような動きにできますでしょうか。
HP://demo.html-coding.co.jp/sbc/2012/C04-08/flexslider/


コードは以下の通りで、スライダーは下記サイトのものを利用しています。
HP://flexslider.woothemes.com/

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>タイトル</title>
<link href="css/bootstrap-4.3.1.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/flexslider.css" rel="stylesheet" type="text/css" />
<!-- <link href="css/flexslider.css" rel="stylesheet" type="text/css">
<script src="js/jquery.flexslider.js"></script>
--> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="js/jquery.bgswitcher.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/script.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).on("load", function () {
$('.flexslider').flexslider({
animation: "slide",
});
});
</script>
</head>
<body>
<nav class="navbar">
</nav>

<div class="key-viusal">
<div class="row">
<div class="col-12"><img src="images/key-vidual.jpg" class="img-fluid" alt="key-vidual">
<div class="key-capture">
<p class="title_ja">ジャンル</p>
<p class="title_en">ジャンル</p>
</div>
</div>
</div>
</div>

<section id="items">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h3 class="type_ja text-center">商品名</h3>
<p class="type_en text-center"><span>商品名</span></p>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="flexslider">
<ul class="slides">
<li><img src="/images/photo01.jpg" class="img-fluid" alt="画像01"/></li>
<li><img src="/images/photo02.jpg" class="img-fluid" alt="画像02"/></li>
<li><img src="/images/photo03.jpg" class="img-fluid" alt="画像03"/></li>
<li><img src="/images/photo04.jpg" class="img-fluid" alt="画像04"/></li>
<li><img src="/images/photo05.jpg" class="img-fluid" alt="画像05"/></li>
<li><img src="/images/photo06.jpg" class="img-fluid" alt="画像06"/></li>
</ul>
</div>

</div>
<div class="col-md-4">
<img src="/images/detail.jpg" class="img-fluid" alt="補足画像">
<div class="room-info">
<p class="my-0">商品説明文</p>
<p class="my-0">商品説明文</p>
<p class="my-0">商品説明文</p>
<p class="my-0">商品説明文</p>
<p class="my-0">商品説明文</p>
</div>
</div>
</div>
<a class="btn" href="#" target="_blank">商品詳細・購入</a>
</div>
</section>

<footer class="footer">
</footer>

</body>
</html>

閲覧数:
15
回答数:
1
お礼:
250枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

eos********さん

2020/1/1521:42:42

ブートストラップで使い勝手があるのは、まさにこの12個の枠組みのシステムのアイデアだけな気もするので、それだけパクって短いソースにすればすこぶるシンプルにはなるのですが、まぁそれはさておき。


<補足画像[4]>


通常は、この枠の中の画像の横幅を100%にしちゃえば、枠の伸縮に合わせて勝手に伸び縮みするかと思われます。

途中で止まるなら、min-widthとかが組み込まれているとか、他に何か干渉する要素が突っ込まれてしまっているとかだと思うんですが、検証ツールにてまずは、該当部分のCSSなどを探ってみてください。

逆に、何が原因でしたか?と、普通は聞かれる側の立場にいると思えます。

  • アバター

    質問者

    ID非公開さん

    2020/1/1523:57:43

    ご回答ありがとうございました。
    まだ2か月くらいの初学者なので、デバックの方法などもこれからって感じです。。

    > ブートストラップで使い勝手があるのは、まさにこの12個の枠組みのシステムのアイデアだけ
    まさに、こういう枠組みを使って自在にレスポンシブに作れることを期待していたのですが、思いのほか自由度がなく次からは面倒でも使わないようにしようかなと思ってます。。。

    > 通常は、この枠の中の画像の横幅を100%にしちゃえば、枠の伸縮に合わせて勝手に伸び縮みするかと思われます。
    bootstrapではclass="img-fluid"がその役割をするようなので、何故かわかりませんでしたが。。。どうやら質問1に関してはブレークポイントとmax-widthの設定を間違えていたことが原因だったようで、自己解決しました。

  • その他の返信(1件)を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

アバター

質問した人からのコメント

2020/1/16 02:35:34

全て解決しました。
お付き合いいただきありがとうございました。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる