備忘録としてアップします
チャットを終了するのボタンを作ろうとした際に、
ボーダーが２個できてしまうエラーが発生しました。
以下エラーのスクショ
https://gyazo.com/9a950170296593558bbcdf31bb9a9d86
以下問題のコード
HTML
main_chat.html.erb
<div class="main_chat_top">
<div class="chat_summary">
<div class="chat_summary_title">
hogefuga
</div>
</div>
<div class="chat_end">
<div class="chat_end_button">
<a href="">チャットを終了する</a>
</div>
</div>
</div>
<div class="main_chat_middle">
</div>
<div class="main_chat_bottom">
</div>
CSS
.wrapper{display:flex;}.side_bar{width:300px;height:100vh;}.side_bar_top{height:100px;padding:020px;background-color:#253241;display:flex;justify-content:space-between;align-items:center;}.user_namea{font-size:16px;color:#FAFAFA;text-decoration:none;}.chat_makea{text-decoration:none;padding:14px;border:1pxsolidlightblue;font-size:10px;color:deepskyblue;}.side_bar_bottom{height:calc(100vh-100px);background-color:#2f3e51;padding:020px;}.chat_list{padding:20px040px;}.chat_lista{color:white;text-decoration:none;}/* ---------------以下メインチャット--------------- */.main_chat{width:calc(100vw-300px);height:100vh;background-color:#ffffff;}/* main_chat_top */.main_chat_top{height:100px;padding:040px;display:flex;justify-content:space-between;}.chat_summary_title{padding-top:36px;font-size:24px;color:#333;}.chat_end_button{margin-top:40px;}.chat_end_buttona{text-decoration:none;border:1pxsoliddarkred;padding:20px;color:darkred;}/* .main_chat_middle */.main_chat_middle{height:calc(100vh-100px-90px);background-color:#fafafa;padding-top:46px40px0;}/* .main_chat_bottom */.main_chat_bottom{height:90px;background-color:#dddddd;padding:20px40px;}以上、コードの
div class="cat_end_button"
内の
<a href="">チャットを終了する</a>
にCSSでボーダーを指定したら、当該ボーダーの左に別のボーダーが生成されてしまします。
■仮説と検証
1.コードの間違い？
→確認しましたがおそらく問題はないと思います。
2.別のdivが生成されたのではないか？
→61行目
.chat_end_buttona{text-decoration:none;border:1pxsoliddarkred;padding:20px;color:darkred;}内に background-color：red:で色をつけたところ、
エラーのボーダー含めて赤くなりましたので、div要素は1つと思われます。
結果
本ページはrenderを用いて、サイドバーとメインチャットのファイルを分けてindex.html.erbで読み込んでおりました。
index.htm.erb
<div class="wrapper">
<div class= "side_bar">
<%= render "side_bar" %>
</div>
<div class= "main_chat">
<%= render "main_chat" %>
</div>
</div>
<div><div class="side_bar_top">
<div class="user_name">
<a href="">Tom</a>
</div>
<div class="chat_make">
<a href="">チャットを作成する</a>
</div>
</div>
<div class="side_bar_bottom">
<div class=chat_list>
<a href="">techroom1</a>
</div>
<div class=chat_list>
<a href="">techroom2<a>
</div>
</div>
問題は先に読み込んだサイドバーのaタグが閉じられていないことでした。
side_bar.html.erb
<div class="side_bar_top">
<div class="user_name">
<a href="">Tom</a>
</div>
<div class="chat_make">
<a href="">チャットを作成する</a>
</div>
</div>
<div class="side_bar_bottom">
<div class=chat_list>
<a href="">techroom1</a>
</div>
<div class=chat_list>
<a href="">techroom2<a> <%＃ ←ここに / の忘れが原因 %>
</div>
</div>
閉じられていないことで、index.htm.erbの /aに影響し、ボーダーが生成されたようでした。
別のファイルが影響を及ぼすことがありますので、参考になればと思います。