Q&A
ありがとうございます！
aタグにtext-decoration:none;を入れると直りました！
.link-img-inline a に入れると変化がなかったのですがなぜでしょうか？
前提・実現したいこと
aタグを使って画像でのリンクを横並びにしているのですが、画像の右下にアンダーバーが入ってしまいます。
どうすれば横並びのままアンダーバーが無くなりますでしょうか。
発生している問題・エラーメッセージ
横並びにした際、画像の右下にアンダーバーが入ってしまう。
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>赤井はあと</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <!-- 自己紹介 --> <img class="inline-block" src="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,fl_lossy,h_1000,w_500,f_auto,q_auto/1369026/970398_960056.png" alt="はぁちゃま1"> <section class="inline-block"> <h1>赤井はあと</h1> <p>赤井心 (bilibili) / Akai Haato <br> 「こんるーじゅ！赤井はあとよ！」</p> <p>生意気な後輩。普段はツンツンしているが仲良くなった相手には甘えたりする。赤いリボンとハートが好きで、髪や服によくつけている。</p> <br> <a href="https://www.youtube.com/channel/UC1CfXB_kRs3C-zaeTG3oGyg" class="btn-square">Youtube</a> </section> <!-- 本文 --> <br> <p class="detail-info-title">詳細情報</p> <br> <img src="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,fl_lossy,h_9000,w_1200,f_auto,q_60/1369026/790733_87219.gif" alt="はぁちゃまgif"> <p>デビュー日：2018年6月2日</p> <p>誕生日：8月10日</p> <p>身長：154cm</p> <p>ファンネーム：はあとん</p> <p>イラストレーター：はる雪</p> <p>オススメシーン</p> <p>①2019/11/15放送</p> <p><iframe width="560" height="315" src="https://www.youtube.com/embed/zXzsdzFR4BA" frameborder="0"></iframe> </p> <p>②2018/06/16放送</p> <p><iframe width="560" height="315" src="https://www.youtube.com/embed/NgR8XUVxe6w" frameborder="0"></iframe> </p> <p>③2019/11/19放送</p> <p><iframe width="560" height="315" src="https://www.youtube.com/embed/Se00xsFoPfk" frameborder="0"></iframe> </p> <div class="link-img-inline"> <a href="https://twitter.com/akaihaato"> <img class="twitter-btn" src="https://raison-dtr.com/wp/wp-content/uploads/2019/09/twitter.png" alt="twitter-logo"> </a> <a href="https://space.bilibili.com/339567211/"> <img class="bilibili-btn" src="https://multimedia.reneelab.jp/wp-content/uploads/sites/15/2020/02/bilibili-logo.jpg" alt="bilibili-logo"> </a> </div> <img src="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,fl_lossy,h_9000,w_1200,f_auto,q_auto/1369026/277588_359286.png" alt="はあちゃま2"> </div> </body> </html>
.inline-block { display: inline-block; vertical-align: top; text-align: left; width: 49%; } .btn-square { display: block; padding: 0.5em 1em; text-decoration: none; color: #ffffff; background-color: rgb(162, 216, 230); border-radius: 50px; font-weight: bold; text-align: center; } .btn-square:hover { background-color: rgb(186, 248, 255); } p { text-align: left; margin-bottom: 30px; } .detail-info-title { font-weight: bold; color: rgb(132, 136, 140); margin-top: 90px; margin-bottom: 30px; } .container { margin: 0 auto; width: calc(100% - 20px - 20px); /* 20pxは、左右の余白です。好きな値を設定してください */ max-width: 800px; /* 800pxは横幅の上限です。好きな値を設定してください */ } img, iframe { max-width: 100%; margin-left: auto; margin-right: auto; display: block; } body { color: rgb(50, 57, 64); } .twitter-btn:hover { /* 透明度を上げることで、画像の色を薄く見せる。*/ opacity: 0.5; /* リンクをホバーしたときのカーソルにする。*/ cursor: pointer; } .twitter-btn { max-width: 200px; margin-left: 100px; } .bilibili-btn { max-width: 300px; margin-left: 100px; } .bilibili-btn:hover { /* 透明度を上げることで、画像の色を薄く見せる。*/ opacity: 0.5; /* リンクをホバーしたときのカーソルにする。*/ cursor: pointer; } .link-img-inline img { display: inline; text-align: center; }
試したこと
display: inline;を消すとアンダーバーが消えたのですが、そうすると画像の横並びが解除されてしまいます。
補足情報（FW/ツールのバージョンなど）
確認ブラウザ Google Chromeバージョン: 83.0.4103.61（Official Build）
回答2件
0
CSS
1.link-img-inline a { 2 text-decoration: none; 3}
投稿2020/05/27 13:13
総合スコア69606
0
ベストアンサー
CSS
1a { 2 text-decoration:none; 3}
投稿2020/05/27 13:12
総合スコア2076
https://codepen.io/k011510/pen/VwvOdbR
いえ。そちらでもできます。
そちらの方がセレクターとしてはいいでしょう。
link-img-inlineないのaタグに対してスタイリングしているのかaタグに直接スタイリングするのかという違いです。仮に今後他のaタグに下線なりスタイリングを当てるときは後者の方が良いかと思われます。
ありがとうございます。
間違えて.link-img-inline imgの方にnoneを入れてました。
解決されたようで何よりです。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/27 13:18
2020/05/27 13:28