🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML

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

CSS

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

Q&A

解決済

1回答

602閲覧

画像にCSSが適用されない

haru0817

総合スコア3

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/11/22 12:39

前提・実現したいこと

htmlで設定した画像にCSSが適用されません。
同じようにIDをつけたid="myname"には適用されるのですが、id=”icon”に適用されてないのは何故でしょうか?

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

アイコン画像にCSSが適用されず、枠線や角丸の設定ができない

該当のソースコード

!DOCTYPE html> <html lang="jan"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自己紹介ページ</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <div class="top"> <img src="images/dumbo.jpg" id=”icon”> <span id="myname">私の名前は●●です</span> </div> <nav> <ul> <li><a href="a" target="blank">Home</a></li> <li><a href="a" target="blank">Twitter</a></li> <li><a href="a" target="blank">Facebook</a></li> <li><a href="a" target="blank">Instagram</a></li> </ul> </nav> </header> <div class="container"> <h2>自己紹介</h2> <div class="profile"> </div> </div> <footer> <p>&copy; 2020 urumya</p> </footer> </body> </html>

CSS

* { padding: 0; margin: 0; } header { background-image: url(../images/bg-sea.jpg); background-size: cover; } #icon { width: 150px; border: solid white; border-radius: 10%; } #myname { color: white; font-size: 40px; font-weight: bold; text-shadow:2px 2px 1px black; }

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

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

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

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

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

guest

回答1

3

ベストアンサー

<img src="images/dumbo.jpg" id=”icon”>

引用符が全角になってますので、半角に修正すればいいでしょう。

<img src="images/dumbo.jpg" id="icon">

投稿2020/11/22 12:43

hatena19

総合スコア34073

haru0817, CaneleWeb, kei344👍を押しています

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

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

haru0817

2020/11/22 12:47

ありがとうございます。初歩的なミスでした。解決いたしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問