Q&A
.sumple {
margin-right: 30%;
}
というコードがありますが、右側に余白をつけたい、ということでいいでしょうか？
カラムとの間に余白をつけるのであれば左側ではないかな、とも思えるのですが、それは気にしなくていいでしょうか？
また、「カラム分けのエリアを作るrowに対してmarginで余白を指定しました」とのことですが、そのマージン指定はご提示のコードではどの部分に当たりますか？ CSSでも属性でも見つけることができませんでした。
前提・実現したいこと
こんにちは！１つ質問させて下さい。
現在、bootstrapを使ってサイト制作を勉強しています。画像の矢印のように、カラムとの間の余白を広げつつ、スマホサイズでも表示位置をずらさずに表示させたいです。
初歩的な質問で大変恐縮ですが、分かる方おりましたらアドバイスを頂きたいです。よろしくお願いします。
発生している問題・エラーメッセージ
カラム分けのエリアを作るrowに対してmarginで余白を指定しました。広くなったのですが、スマホサイズまで反映されてしまうのか、横にずれてしまいます。
該当のソースコード
HTML
1<!doctype html> 2<html lang="ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <!-- Bootstrap CSS --> 9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> 10 11 <script src="https://kit.fontawesome.com/8b5cdbe473.js" crossorigin="anonymous"></script> 12 <link href="css/style.css" rel="stylesheet"> 13 14 <title>SAMPLE LP</title> 15 </head> 16 17 18 <body> 19 20<div class="height"></div> 21 22<div class="container"> 23 <div class="row"> 24 <div class="col-lg-5"> 25 <p class="main-h6 mb-3"> 26 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 27 </p> 28 <p class="m-h6 h6 mb-5 "> 29 <a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</a> 30 </p> 31 </div> 32 <div class="sumple col-lg-5 ml-5"> 33 <div class="mb-3"> 34 <i class="fa fa-check text-primary mr-2"></i> 35 <span class="sub-h6"> 36 Lorem ipsum dolor sit amet, consectetur 37 </span> 38 </div> 39 <div class="mb-3"> 40 <i class="fa fa-check text-primary mr-2"></i> 41 <span class="sub-h6"> 42 Lorem ipsum dolor sit amet, consectetur 43 </span> 44 </div> 45 <div class="mb-3"> 46 <i class="fa fa-check text-primary mr-2"></i> 47 <span class="sub-h6" > 48 Lorem ipsum dolor sit amet, consectetur 49 </span> 50 </div> 51 <div class="mb-3"> 52 <i class="fa fa-check text-primary mr-2"></i> 53 <span class="sub-h6"> 54 Lorem ipsum dolor sit amet, consectetur 55 </span> 56 </div> 57 <div class="mb-3"> 58 <i class="fa fa-check text-primary mr-2"></i> 59 <span class="sub-h6"> 60 Lorem ipsum dolor sit amet, consectetur 61 </span> 62 </div> 63 <div class="mb-3"> 64 <i class="fa fa-check text-primary mr-2"></i> 65 <span class="sub-h6"> 66 Lorem ipsum dolor sit amet, consectetur 67 </span> 68 </div> 69 </div> 70</div> 71 72</main> 73 74 75 <!-- Optional JavaScript --> 76 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 77 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> 78 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> 79 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> 80 </body> 81</html> 82 83 84 85 86 87css 88.height { 89 height:150px; 90} 91 92/* 780pxより小さい画面サイズ */ 93@media screen and (max-width: 780px) { 94.sumple { 95margin-right: 30%; 96} 97
試したこと
メディアクエリで同じく、marginで余白を指定してみましたが、テキストが改行され、幅が狭くなってしまいます。
補足情報（FW/ツールのバージョンなど）
bootstrap 4.5.0を使用しています。
お忙しい中、返信ありがとうございます。
780pxより大きい画面サイズでは左側に余白をつけたいと思い、ml-5(下記参照)指定しました。
780pxより小さいサイズでは✓ Lorem ipsum dolor sit amet, consecteturという複数のテキストの表示位置を上の2文と同じくらいの表示位置にしたいと思い、margin-rightを指定しました。
余白の指定方法に関してまだまだ勉強不足を痛感しています。この考え方は
そもそも間違っているのでしょうか？
記述間違いをしていました。すみませんでした。
sumpleというclass名に対してマージン(ml-5)を指定しました。
回答1件
0
ベストアンサー
上の2文と同じくらいの表示位置にしたいと思い、margin-rightを指定しました。
もしかすると、
右に余白を付ければ、押し出されるように、表示位置が左に寄るかも
みたいな発想でしょうか?
残念ながら、そうはいかないですね。
今回のケースでは、
左マージンを設定するときに、ml-5ではなく、ml-lg-5を使えば良いと思います。
そうすれば、lg以上のサイズ(Bootstrap4なら992px以上)のときだけ、左に余白が付きますよ。
もし、780pxというブレークポイントにこだわりがあるなら、別解を検討する必要がありますが…。
投稿2021/02/07 03:38
総合スコア1323
あなたの回答
tips
プレビュー
