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

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

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

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

1337閲覧

responsiveをしたい

rei007

総合スコア15

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/04/20 11:56

1.レスポンシブを施したいが文字が改行したときに隙間ができる
![イメージ説明
2.レスポンシブを施したいが[旅を送ろう。]と[ギフトカードを登録]が左揃いにならない

<!-- <!DOCTYPE html> <html lang="ja"> <head> <div>探す</div> <div><span>ホストを始める</span> <span>ヘルプ</span> 登録する ログイン</div> <div>今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください</div> <h1>旅を送ろう。</h1> <p>Airbnbギフトカードで、世界をぐんと身近に</p> <span>ギフトカードを登録</span> </head> <body> </body> </html> --> </head> <body> <header> <div class="header"> <div class="header-left"> <img class="logo" src="img/airbnb-icon-18.jpg"class="fas fa-search" width="30px" height="30px"> <form class="fas fa-search" action="#" method="get"> <input type="search" type="text" placeholder="探す"> </form> </div> <div class="header-right"> <a class="host" href="#">ホストを始める</a> <a class="help" href="#">ヘルプ</a> <a class="register" href="#">登録する</a> <a class="login" href="#">ログイン</a> </div> <!-- <div class="alert alert-info text-center mb-0 rounded-0 alert-dismissible" fade show> <button type="button" class="close" deta-dismiss="alert" aria-label="閉じる"> <span aria-hidden="true">&times;</span> </button> <i class="far fa-comment-dots fa-lightgreen"></i> 今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。 </div> </div> --> </header> <div class="main"> <div class="alert alert-info text-center mb-0 rounded-0 alert-dismissible"  fade show> <button type="button" class="close" deta-dismiss="alert" aria-hidden="true" aria-label="閉じる"> <!-- <span aria-hidden="true">&times;</span> --> × </button> <i class="far fa-comment-dots fa-lightgreen"></i> <span> 今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。 </span> </div> <div class="container"> <div class="text"> <h1>旅を送ろう。</h1> <p>Airbnbギフトカードで、世界をぐんと身近に</p> <button class="btn btn-light">ギフトカードを登録</button> </div> </div> </div> <!-- </div> --> <div class="contents"> <div class="container">   <h1>いつも完璧な贈り物</h1> <div class="boxs"> <div class="box"> <i class="far fa-envelope fa-3x fa-green"></i> <h5>簡単に使える</h5> <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p> </div> <div class="box"> <i class="fas fa-stopwatch fa-3x"></i> <h5>有効期限なし</h5> <p>Airbnbのギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p> </div> <div class="box"> <i class="fas fa-globe-africa fa-3x"></i> <h5>忘れられない旅</h5> <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p> </div> </div> </div> </div> <div class="content-wrapper"> <div class="container"> <div class="title"> <img src="https://a0.muscache.com/airbnb/gift_credit_v2/Home Page/Present Icon/Present Icon.png"> <h1>ギフトカードをもらったら...</h1> <p>ログインあるいは利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</p> <div class="btn-wrapper"> <a href="#" class="btn2" >ギフトカードを登録する</a> <br> <a href="#" class="btn3">Airbnbギフトカードの仕組みは?</a> </div> </div> </div> </div> </div> </div> </div> </footer> <!-- <img src="img/BackgroundHomeSummer.jpg" alt="写真" width="1920" height="650"> --> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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>
@media (max-width:1130px) { body { text-align: center; } .header-right { display: none; } .alert { height: 70px; } .alert span { line-height: inherit; } .contents { text-align: center; width: 100%; } }
html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, div { margin: 0; padding: 0; } html { font-family: sans-serif; } header { height: 80px; } a { text-decoration: none; } /* header-left */ .logo { margin-right: 25px; } .header-left { float: left; line-height: 80px; margin-left: 25px; } .header-left input { width: 460px; height: 48px; border-radius: 5px; /* color: #eee; */ /* background-image: "fas fa-search"; */ } /* header-right */ .header-right { line-height: 80px; display: flex; justify-content: flex-end; text-align: left; } .header-right input { /* background-image:"fas fa-search" */ } .header-right a { font-size: 15px; color:#696969; font-weight: bolder; padding: 0 20px; display: block; } .header-right a:hover { text-decoration: none; text-decoration: underline; border-bottom: 100px solid #696969; color: #696969; } .alert { height:50px; } .alert span { color: black; font-size: 14px; } .main { background: url(../img/BackgroundHomeSummer.jpg); background-size: cover; height: 650px; position: relative; } .container { width: 1100px; margin: 0 auto; /* padding: 300px 0; */ /* position: absolute; */ } .text { position: absolute; color: white; top: 42%; font-weight: normal; float: left; } .contents { text-align: center; } .text p { margin-top: 20px; } .text button { margin-top:32px; padding: 10px 20px; } .contents h1 { font-size: 30px; } .box h5 { font-weight: bold; } .box p { font-size: 16px; margin-top: 24px; color: #767676; width: 90%; display: inline-block; } .boxs { display: flex; } .box { margin-top: 30px; width: 33%; } .contents { padding: 48px 0; } .far { margin-bottom: 25px; } .fas { margin-bottom: 25px; } .content-wrapper { padding: 48px 0; background: #007a87; text-align: center; padding: 48px 0: } .title { color: white; } .title h1 { margin-top: 20px; font-weight: bold; font-size: 30px; } .title p { font-size: 21px; } .btn2 { display: inline-block; margin: 20px 0 15px 0;; color: white; padding: 8px 24px; background-color: #ff5a5f; border-radius: 4px; font-weight: bold; } .btn3 { display: inline-block; color: white; opacity: 0.6; font-size: 15px; } .btn2:hover { text-decoration: none; color: white; opacity: 0.9; } .btn3:hover { text-decoration: none; color: white; opacity: 1; } .contact { margin-top: 40px; } li { list-style: none; } .contact-list { margin-top: 25px; /* width: 25%; */ } .contact h4 { font-size: 15px; font-weight: bold; opacity: 0.9; } .contact-list a { color:#767676; font-size: 14px; font-weight: bold; } .contact-list a:hover { color: #767676; } .btn5 { background-color: #007a87; color: white; font-weight: bolder; padding: 0 5px; border: none; border-radius: 3px; font-size: 14px; margin-left: 5px; } .fab { font-weight: 4 margin-right: 5px; } footer .contact .container { display: flex; box-sizing: border-box; flex-wrap: wrap; } footer .contact .container .contacter { box-sizing: border-box; width: 25%; } footer .contact .container .contacter:last-child { box-sizing: border-box; width: 100%; display: flex; border-bottom: 1px solid lightgray; } .flex-auto { color: #767676; /* padding-top: 15px; */ flex: none; width: 50%; color: #767676; display: inline-block; vertical-align: middle; /* border-top: 1px solid #767676; */ /* display: flex; */ } .flex-auto a { color: #767676; font-weight: bold; font-size: 14px; } .flex-auto a:hover { color: #767676; } .money { position: relative; bottom: 90px; display: flex; flex-direction: row; justify-content: flex-end; } .money a { padding: 10px 15px; color: #767676; border: solid 1px rgb(242, 242, 242); font-weight: bold; font-size: 12px; border-radius: 4px; } .money a:hover { color: #767676; text-decoration: none; background-color:rgb(242, 242, 242); } .copy { border-top: 1px solid lightgray; width: 100%; margin-top: 20px; padding-top: 20px; } .logo2 { float: left; } .logo3 { margin-right: 10px; }

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

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

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

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

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

yoshinavi

2019/04/21 02:37

>1.レスポンシブを施したいが文字が改行したときに隙間ができる → どこの部分ですか? >2.レスポンシブを施したいが[旅を送ろう。]と[ギフトカードを登録]が左揃いにならない → メディアクエリでbodyに「text-align: center;」を指定しているからでは?
rei007

2019/04/21 10:59

2 解決できました! 1の部分ですが水色のalertの部分の「今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。」です!
rei007

2019/04/21 11:27

すいません1ですけど今自分で調べてコード調整してたらできました! 回答、アドバイスありがとうございました!!
yoshinavi

2019/04/21 11:42

「解決済」であれば、解決に至るまでを自己回答で投稿し、ベストアンサーに選び、質問を終了させてください。 ※「kei344」さんの回答にあるように、タグの不整合で崩れる場合がありますので、参照先を参考にしてチェックすると良いかと思います。
guest

回答1

0

下記部分で必要な</div>を余計に一つ消してしまっているので、崩れている可能性があります。デベロッパーツールでHTMLの構造が意図通りか確認してみてください。line-height: 80px;が適用されてしまっているのでは。

HTML

1 <!-- <div class="alert alert-info text-center mb-0 rounded-0 alert-dismissible" fade show> 2 <button type="button" class="close" deta-dismiss="alert" aria-label="閉じる"> 3 <span aria-hidden="true">&times;</span> 4 </button> 5 <i class="far fa-comment-dots fa-lightgreen"></i> 6 今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。 7 </div> 8 </div> -->

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

投稿2019/04/20 15:07

kei344

総合スコア69357

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問