質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

4454閲覧

bootstrapのmarginが上手くいかない

ivrpocari

総合スコア23

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2019/03/23 13:25

模写コーディングの際に、bootstrapを初めて使いました。
htmlの77行目です。
my-5を指定して、
開発者ツールでmargin: 0 3em;となっているが、
見た目が変わりません。どうしてですか?

見本はこちら

html

1<!doctype html> 2<html> 3<head> 4<meta name="viewport" content="width=device-width,initial-scale=1"> 5<link rel="stylesheet" href="css/styles.css" type="text/css"> 6<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 7<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> 8<meta charset="utf-8"> 9<title>copy-Airbnb</title> 10</head> 11<body> 12 <header> 13 <nav class="navbar navbar-expand-lg navbar-light "> 14 <a class="navbar-brand" href="#"><img class="Airbnb_icon" src="https://cdn.user.blog.st-hatena.com/default_entry_og_image/112231897/1514240317721749" alt=""></a> 15 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 16 <span class="navbar-toggler-icon"></span> 17 </button> 18 19 <form class="form-inline my-2 my-lg-0 p-1"> 20 <i class="fas fa-search m-2"></i> 21 <input class="mr-sm-2" type="search" placeholder="探す" aria-label="Search"> 22 </form> 23 24 <div class="collapse navbar-collapse" id="navbarSupportedContent"> 25 <ul class="navbar-nav mr-auto"> 26 <li class="nav-item"> 27 <a class="nav-link text-body" href="#">ホストを始める</a> 28 </li> 29 <li class="nav-item"> 30 <a class="nav-link text-body" href="#">ヘルプ</a> 31 </li> 32 <li class="nav-item"> 33 <a class="nav-link text-body" href="#">登録する</a> 34 </li> 35 <li class="nav-item"> 36 <a class="nav-link text-body" href="#">ログイン</a> 37 </li> 38 <li class="nav-item dropdown"> 39 <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 40 <a class="dropdown-item" href="#">Action</a> 41 <a class="dropdown-item" href="#">Another action</a> 42 <div class="dropdown-divider"></div> 43 <a class="dropdown-item" href="#">Something else here</a> 44 </div> 45 </li> 46 </ul> 47 </div> 48 </nav> 49 50 </header> 51 52 <div class="top_message"> 53 <div class="alert alert-success alert-dismissible fade show text-center" role="alert"> 54 <i class="far fa-comment-dots fa-2x"></i> 55 今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。 56 <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 57 <span aria-hidden="true">&times;</span> 58 </button> 59 </div> 60 61 <div class=""> 62 63 </div> 64 </div> 65 66 <div class="top_main"> 67 <div class="top_contain"> 68 <strong class="">旅を贈ろう。</strong> 69 <p> Airbnbギフトカードで、世界をぐんと身近に</p> 70 <button type="button" class="btn btn-light">ギフトカードを登録</button> 71 </div> 72 </div> 73 74 <div class="present container text-center"> 75 <strong class="my-5">いつも完璧な贈りもの</strong> 76 <ul class="row"> 77 <li class="col-xl-4 col-md-12"> 78 <i class="far fa-envelope fa-3x d-block"></i> 79 <strong>簡単に使える</strong> 80 <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p> 81 </li> 82 <li class="col-xl-4 col-md-12"> 83 <i class="fas fa-stopwatch fa-3x d-block"></i> 84 <strong>有効期限なし</strong> 85 <p>Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p> 86 </li> 87 <li class="col-xl-4 col-md-12"> 88 <i class="fas fa-globe-asia fa-3x d-block"></i> 89 <strong>忘れられない旅</strong> 90 <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p> 91 </li> 92 </ul> 93 </div> 94<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 95<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 96<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 97</body> 98</html>

css

1li { 2 list-style: none; 3} 4/*リセットcss*/ 5html { 6 font-family: Circular, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS Pゴシック", "MS PGothic", "MS Gothic", "MS ゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif; 7} 8 9header { 10 background-color: white; 11} 12 13.Airbnb_icon { 14 width: 40px; 15 height: 40px; 16} 17 18.navbar-nav { 19 position: absolute; 20 right: 10px; 21} 22 23.form-inline { 24 border-radius: 4px; 25 border: 1px solid #EBEBEB; 26 box-shadow: 0 1px 1px 1px #EBEBEB; 27} 28 29form input { 30 border-style: none; 31} 32 33.nav-item:hover { 34 border-bottom: 1px solid #484848; 35} 36 37.top_main { 38 background-image: url("https://a0.muscache.com/airbnb/gift_credit_v2/HomePage/BackgroundHomeSummer.jpg");/*imgフォルダから引っ張れなかった*/ 39 background-size: cover; 40 height: 600px; 41} 42 43.top_main { 44 color: white; 45 padding: 200px 300px; 46} 47 48.top_contain strong{ 49 font-size: 45px; 50} 51 52.top_contain p { 53 font-size: 17px; 54} 55 56.present strong { 57 font-size: 25px; 58} 59 60.present .row { 61 margin: auto; 62} 63 64.present li strong { 65 font-size: 15px; 66}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/03/23 21:45

どういう風に変わってほしいのでしょうか。開発者ツールを使えるのでしたらコード直接触るのではなく、開発者ツール上で変えてみては? 既存指定の設定値を変えるだけではなく指定を追加することもできます
yoshinavi

2019/03/24 01:03

早合点して回答してしまいましたが、「marginが上手くいかない」→ 該当のテキスト部分に「上下のmarginを効かせたい」との理解で良いのでしょうか? 「開発者ツール」のスクショ等も提示してみてください。
guest

回答1

0

ベストアンサー

htmlの77行目です。

my-5を指定して、
開発者ツールでmargin: 0 3em;となっているが、
見た目が変わりません。どうしてですか?

<strong class="my-5">いつも完璧な贈りもの</strong>」の部分でしょうか?

であれば、そこは「インライン要素」なので、marginによる上下は効きません。
「padding」「line-height」等を試してみてください。

どうしても、margin設定したい場合は、「display: inline-block;」を付与してみてください。

投稿2019/03/24 00:48

yoshinavi

総合スコア3523

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問