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

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

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

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

CSS

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

Q&A

解決済

隙間が埋まらない (css)

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

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

CSS

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

1回答

0グッド

0クリップ

256閲覧

投稿2022/10/17 08:44

編集2022/10/17 14:57

概要

1.showページにボタンを縦に並ばせています。

2.ログアウト時のボタンはきれいに並んでいます。

3.ログイン時のボタンの並びはお気に入りボタンの上下に隙間があります。

4.positionやmargin,paddingなどで隙間を埋めてみたがお気に入りボタンをクリックした後に表示されるお気に入り解除ボタンがずれる

5.ボタン同士の隙間を探してみたが、どこの要素の隙間なのかが分からなかった。

6.ログアウト時とログイン時のボタン箇所のコードは少し違う

実現したいこと

1.ボタンの間にある隙間を埋めて縦に並べたい

発生している問題・エラーメッセージ

・ログアウト時
イメージ説明

。ログイン時
イメージ説明

該当のソースコード

コンパイル後のshow.html

plans/show.html/ボタン箇所

1<div class="container"> 2 <div class='plan-content'> 3 <div class="plan-header"> 4 <div class="plan-user"><h3><a href="/users/1">株式会社テスト</a></h3></div> 5 <div class="plan-time"><p>掲載期間:2022年10月17日~2022年11月01日</p></div> 6 </div> 7 <div class="plan-title"> 8 <h4>~企画内容~</h4> 9 <div class="plan-title-name"><h5>テスト44a</h5></div> 10 </div> 11 <div class="plan-overview"> 12 <div class="plan-photo"><p><img alt="企画書イメージ図" src="/uploads/plan/photo/4/pawel-czerwinski-8uZPynIu-rQ-unsplash.jpg" /></p></div> 13 <div class="plan-detail"> 14 <h4>企画概要</h4> 15 <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 16<br />bvbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb 17<br />cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</p> 18 </div> 19 </div> 20 <div class="sub-plan-content"> 21 <div class= "plan-conditions"> 22 <h4>希望条件</h4> 23 <p class="plan-show-conditions">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiddddddddddddddddddllllllllllssssssss 24<br />cccccccccckkkkkkkkkkksss 25<br />dddddddddk ccccccss</p> 26 </div> 27 <div class= "plan-number"> 28 <h4>電話番号</h4> 29 <p>00000000000</p> 30 </div> 31 <div class= "plan-address"> 32 <h4>所在地</h4> 33 <div class="plan-adress-overview"> 34 <p>〒0000000</p><br /> 35 <p class="adress-content">東京都渋谷区〇〇町00-000-00 テストビル〇階〇号室</p> 36 </div> 37 </div> 38 </div> 39 <div class="plan-content-btn"> 40 <div class="plan-favorite-btn"> 41 <p> <form action="/favorites" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="n9MX46nLLJHUEWYoxzMh97yAYrp9vuj364k24U6hG3kNDOKCIzjP0ZO5QXXZzpO8xVrC5dHQ46uTiKqoJ9UcYw" autocomplete="off" /> 42 <input type="hidden" name="plan_id" id="plan_id" value="4" autocomplete="off" /> 43 <input type="submit" name="commit" value="お気に入り" class="btn btn-outline-danger btn-lg" data-disable-with="お気に入り" /> 44</form> </div> 45</p> 46 </div> 47   48 <form class="new_room" id="new_room" action="/rooms" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="kSUvQAhDQZf3W8N63RY9jDnghV8Pu-_rPU9S6LaMWxrIPE6bZaNDlqQpEE0SvWK9TIiJMUMYKsAIJBuHGQx1Fg" autocomplete="off" /> 49 50 <input value="4" autocomplete="off" type="hidden" name="entry[plan_id]" id="entry_plan_id" /> 51 <input value="1" autocomplete="off" type="hidden" name="entry[user_id]" id="entry_user_id" /> 52 <div class="plan-entry-btn"> 53 <input type="submit" name="commit" value="応募" class="btn btn-outline-danger btn-lg" data-disable-with="応募" /> 54 </div> 55</form> <div class="plan-content-btn"> 56 <a class="btn btn-outline-danger btn-lg" href="https://f3c5ff7c750c474ba358523266e7506d.vfs.cloud9.ap-northeast-1.amazonaws.com/">戻る</a> 57 </div> 58 </div> 59 </div>

plan.scss/plans/show.html.erb箇所

1.plan-content{ 2 border-radius: 20px; 3 height: auto; 4 margin-left: calc(-50vw + 50%); 5 width: 100vw; 6 7 //企画掲載ページヘッダー箇所 8 .plan-header{ 9 margin-bottom: 30px; 10 border-bottom: solid 1px silver; 11 height: 60px; 12 .plan-user{ 13 text-align: left; 14 font-family: Arial; 15 16 .plan-user h3 { 17 width: 50%; 18 font-size: 20px; 19 } 20 a { 21 color: black; 22 text-decoration: none; 23 position: relative; 24 left: 50px; 25 } 26 a:hover{ 27 color: silver; 28 } 29 30 } 31 .plan-time{ 32 width: 100%; 33 text-align: right; 34 font-size: 12px; 35 position:relative; 36 bottom: 10px; 37 right: 40px; 38 } 39 } 40 41 .plan-title{ 42 margin-top: 10px; 43 margin-bottom: 10px; 44 text-align: center; 45 word-wrap: break-word; 46 47 .plan-title-name{ 48 height: 60px; 49 margin-top: 20px; 50 } 51 } 52 .plan-overview{ 53 border-top: solid 1px silver; 54 border-bottom: solid 1px silver; 55 padding: 20px; 56 display:flex; 57 margin-left: auto; 58 margin-right: auto; 59 width: 95%; 60 .plan-photo{ 61 padding-right: 50px; 62 } 63 .plan-detail{ 64 font-size: 20px; 65 width: 73%; 66 word-wrap: break-word; 67 } 68 } 69 .sub-plan-content{ 70 margin-left: 50px; 71 border-bottom: solid 1px silver; 72 width: 73%; 73 74 .plan-conditions{ 75 height: auto; 76 padding-top: 20px; 77 margin-bottom: 20px; 78 display:flex; 79 h4{ 80 width: 50%; 81 padding-right: 2%; 82 } 83 .plan-show-conditions{ 84 width: 72%; 85 word-wrap: break-word; 86 } 87 } 88 89 .plan-number{ 90 padding-top: 40px; 91 margin-bottom: 20px; 92 display:flex; 93 h4{ 94 padding-right: 19%;; 95 } 96 p{ 97 } 98 99 } 100 101 .plan-address{ 102 height: auto; 103 padding-top: 20px; 104 margin-bottom: 40px; 105 word-wrap: break-word; 106 display:flex; 107 h4{ 108 padding-right: 22%; 109 } 110 .plan-adress-overview{ 111 } 112 .adress-content{ 113 } 114 } 115 } 116 117 .plan-content-btn a{ 118 display: block; 119 } 120 .plan-favorite-btn input{ 121 width: 100%; 122 } 123 .plan-entry-btn input{ 124 width: 100%; 125 } 126 127 .finish-text{ 128 padding: 15px; 129 margin-left: calc(-50vw + 50%); 130 width: 100vw; 131 text-align: center; 132 background-color: silver; 133 margin-top: -25px; 134 margin-bottom: 25px; 135 } 136}

試したこと

marginやpadding,positionで埋めてみたが、お気に入りボタンがクリック後ずれる

文書が拙かったり、まかせっきりに見えた文章でしたら、コメントで指摘していただいたら
修正させていただきます。

!現在の状態
イメージ説明

以下のような質問にはグッドを送りましょう

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

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

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

hatena19

2022/10/17 11:00

erbではなく、コンパイル後のHTMLコードを提示した方が回答が付きやすいと思います。
退会済みユーザー

退会済みユーザー

2022/10/17 11:23

コンパイル後のHTMLコードをコピーして貼り付けたのですが、コードの並びがいびつになってしまいました。 誠に申し訳ありません。
hatena19

2022/10/17 12:46

提示のHTMLとSCSSでは、画像のような表示を再現できません。 SCSSのセレクターのiクラスがHTMLにはありません。 こちらでも再現できるコードを提示してもらわないと、回答は不可能です。
退会済みユーザー

退会済みユーザー

2022/10/17 13:17

コードを更新したのですが、再現できるコードになっていますでしょうか?

回答1

0

ベストアンサー

下記の<form class="new_room" の前の行内に全角空白があります。これを削除したらどうでしょうか。

html

1 </div> 2   3 <form class="new_room" id="new_room" action="/rooms" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="kSUvQAhDQZf3W8N63RY9jDnghV8Pu-_rPU9S6LaMWxrIPE6bZaNDlqQpEE0SvWK9TIiJMUMYKsAIJBuHGQx1Fg" autocomplete="off" />

追記

html

1 <div class="plan-content-btn"> 2 <div class="plan-favorite-btn"> 3 <p> <form action="/favorites" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="n9MX46nLLJHUEWYoxzMh97yAYrp9vuj364k24U6hG3kNDOKCIzjP0ZO5QXXZzpO8xVrC5dHQ46uTiKqoJ9UcYw" autocomplete="off" /> 4 <input type="hidden" name="plan_id" id="plan_id" value="4" autocomplete="off" /> 5 <input type="submit" name="commit" value="お気に入り" class="btn btn-outline-danger btn-lg" data-disable-with="お気に入り" /> 6</form> </div> 7</p> 8 </div>

上記の部分ですが、整形されていないのでわかりにくいですが、整形すると、下記のようになります。
コメントをいれた<p></p>の対応ができてないので、ブラウザが開始タグと終了タグを補っていて、それが余白になっているようです。

html

1 <div class="plan-content-btn"> 2 <div class="plan-favorite-btn"> 3 <p> <!-- ココ --> 4 <form action="/favorites" accept-charset="UTF-8" method="post"><input type="hidden" 5 name="authenticity_token" 6 value="n9MX46nLLJHUEWYoxzMh97yAYrp9vuj364k24U6hG3kNDOKCIzjP0ZO5QXXZzpO8xVrC5dHQ46uTiKqoJ9UcYw" 7 autocomplete="off" /> 8 <input type="hidden" name="plan_id" id="plan_id" value="4" autocomplete="off" /> 9 <input type="submit" name="commit" value="お気に入り" class="btn btn-outline-danger btn-lg" 10 data-disable-with="お気に入り" /> 11 </form> 12 </div> 13 </p> <!-- ココ --> 14 </div>

ブラウザの検証ツールで確認できます。
イメージ説明

<div>で囲んでいるので、さらに<P>で囲む必要はないので<P>は削除すればいいと思います。

投稿2022/10/17 13:55

編集2022/10/17 23:57
hatena19

総合スコア32014

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

退会済みユーザー

退会済みユーザー

2022/10/17 14:58 編集

下側の隙間が少し埋まりましたが、まだ上下ともに隙間ができてしまっています。 現在位の状態は質問に添付させていただきました。
hatena19

2022/10/17 23:57

回答に追記しましたので、参照ください。
退会済みユーザー

退会済みユーザー

2022/10/18 02:52

隙間を埋めることができました! 本当にありがとうございます。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

HTML

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

CSS

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