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

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

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

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

HTML

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

解決済

bootstrapのmarginが上手くいかない

ivrpocari
ivrpocari

総合スコア0

Bootstrap

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

HTML

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

1回答

0評価

1クリップ

177閲覧

投稿2019/03/23 13:25

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

見本はこちら

html

<!doctype html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="css/styles.css" type="text/css"> <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"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <meta charset="utf-8"> <title>copy-Airbnb</title> </head> <body> <header> <nav class="navbar navbar-expand-lg navbar-light "> <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> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <form class="form-inline my-2 my-lg-0 p-1"> <i class="fas fa-search m-2"></i> <input class="mr-sm-2" type="search" placeholder="探す" aria-label="Search"> </form> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link text-body" href="#">ホストを始める</a> </li> <li class="nav-item"> <a class="nav-link text-body" href="#">ヘルプ</a> </li> <li class="nav-item"> <a class="nav-link text-body" href="#">登録する</a> </li> <li class="nav-item"> <a class="nav-link text-body" href="#">ログイン</a> </li> <li class="nav-item dropdown"> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </nav> </header> <div class="top_message"> <div class="alert alert-success alert-dismissible fade show text-center" role="alert"> <i class="far fa-comment-dots fa-2x"></i> 今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。 <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class=""> </div> </div> <div class="top_main"> <div class="top_contain"> <strong class="">旅を贈ろう。</strong> <p> Airbnbギフトカードで、世界をぐんと身近に</p> <button type="button" class="btn btn-light">ギフトカードを登録</button> </div> </div> <div class="present container text-center"> <strong class="my-5">いつも完璧な贈りもの</strong> <ul class="row"> <li class="col-xl-4 col-md-12"> <i class="far fa-envelope fa-3x d-block"></i> <strong>簡単に使える</strong> <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p> </li> <li class="col-xl-4 col-md-12"> <i class="fas fa-stopwatch fa-3x d-block"></i> <strong>有効期限なし</strong> <p>Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p> </li> <li class="col-xl-4 col-md-12"> <i class="fas fa-globe-asia fa-3x d-block"></i> <strong>忘れられない旅</strong> <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p> </li> </ul> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>

css

li { list-style: none; } /*リセットcss*/ html { font-family: Circular, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS Pゴシック", "MS PGothic", "MS Gothic", "MS ゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif; } header { background-color: white; } .Airbnb_icon { width: 40px; height: 40px; } .navbar-nav { position: absolute; right: 10px; } .form-inline { border-radius: 4px; border: 1px solid #EBEBEB; box-shadow: 0 1px 1px 1px #EBEBEB; } form input { border-style: none; } .nav-item:hover { border-bottom: 1px solid #484848; } .top_main { background-image: url("https://a0.muscache.com/airbnb/gift_credit_v2/HomePage/BackgroundHomeSummer.jpg");/*imgフォルダから引っ張れなかった*/ background-size: cover; height: 600px; } .top_main { color: white; padding: 200px 300px; } .top_contain strong{ font-size: 45px; } .top_contain p { font-size: 17px; } .present strong { font-size: 25px; } .present .row { margin: auto; } .present li strong { font-size: 15px; }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806
m.ts10806

2019/03/23 21:45

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

2019/03/24 01:03

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Bootstrap

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

HTML

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