Q&A
cssの記載がミスってるっぽいので更新して下さい
ドットインストールにて現在CSSの学習を行なっていますが、
どうしてもアイコンが丸くなりません。教えていただきたいです。
おそらくCSSの imgあたりがおかしいのでは？と
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>諒のポートフォリオサイト</title> 6 <link rel="icon" href="favicon.ico"> 7 <meta name="description" content="諒のポートフォリオサイト"> 8 <link rel="stylesheet" href="css/styles.css"> 9 10 </head> 11 <body> 12 <header> 13 <div class="container"> 14 <div> 15 16 <img src="taro.png" width="120" height="120" alt="中野のアイコンです"> 17 18 </div> 19 <div class="info"> 20 21 22 <h1>中野諒</h1> 23 <p>妻子持ちです。</p> 24 <ul> 25 <li> 26 27 <a href="https://dotinstall.com" target="_blank"> 28 29 <img src="blog.png" width="20" height="20" alt="ブログサイトへのリンク画像です"> 30 31 </a> 32 </li> 33 <li> 34 <a href="https://dotinstall.com" target="_blank"> 35 <img src="photos.png" width="20" height="20" alt="写真サイトへのリンク画像です"> 36 </a> 37 38 </li> 39 40 </ul> 41 42 </div> 43 44 </div> 45 </header> 46 <section> 47 48 <h1>works</h1> 49 50 <section> 51 <img src="work1.png" width="400" height="260" alt="勇者ゲームの紹介画像"> 52 <h2>勇者ゲーム</h2> 53 <p>楽しいアプリです楽しいあぷりです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです</p> 54 </section> 55 56 <section> 57 <img src="work2.png" width="400" height="260" alt="宝探しゲームの紹介画像"> 58 <h1>宝探しゲーム</h1> 59 <p>楽しいアプリです楽しいあぷりです楽しいアプリです楽しいアプリです 60 楽しいアプリです楽しいアプリです</p> 61 </section> 62 63 <section> 64 <img src="work3.png" width="400" height="260" alt="神経衰弱の紹介画像"> 65 <h1>神経衰弱</h1> 66 <p>楽しいアプリです楽しいあぷりです楽しいアプリです楽しいアプリです 67 楽しいアプリです楽しいアプリです</p> 68 </section> 69 70 71 </section> 72 <footer> 73 74 <p>(c)dotinstaill.com</p> 75 76 </footer> 77 </body> 78</html>
CSS
1body { 2 color: #333; 3 font-family: verdana, sans-serif; 4 margin: 0; 5} 6header{ 7 background-color: #efefef; 8} 9 10.container{ 11 background-color: pink; 12 width: 400px; 13 margin-left:auto; 14 margin-right:auto; 15 display: flex; 16 17} 18 19.icon{ 20 background-color: skyblue; 21} 22 23.icon img { 24 /* border-radius: 20px; */ 25 border-radius: 50%; 26} 27 28.info{ 29 background-color: tomato; 30 margin-left: 32px; 31}
/Users/ryookada/Downloads/IMG_1872.PNG
回答2件
0
iconというクラスのついたHTML要素が見当たらないです
投稿2020/12/29 06:41
総合スコア114843
0
ベストアンサー
css
1.icon img { 2 /* border-radius: 20px; */ 3 border-radius: 50%; 4}
このルールセットで丸くするのだと思われますが、これは「iconクラスの要素の中にある<img>」であり、HTML中に class="icon" の要素がありません。
もし <img src="taro.png" width="120" height="120" alt="中野のアイコンです"> が目的のアイコンでしたら、その親の <div> に class="icon" をつけてください。
投稿2020/12/29 06:50
総合スコア20884
ありがとうございます！アイコンは丸くなりましたがその周りが
幅が広くなったりしました、、、、、
CSSのcontainerあたりも修正しなければいけないのでしょうか
アイコンの周りが青くなりますが、幅は変わらないと思いますよ。
中央にアイコン等よっていたのが、変更して、結構横長になりました、
修正方法がわからなくて、すいません
提示されているコードだけではそういう現象は起こらないと思うので、ご自身で解決するか再現するコードで別の質問を立てるのはいかがでしょう。
あなたの回答
tips
プレビュー
