Q&A
コードはマークダウンのコードタグ内に入れてください。
HTML と CSS は別のコードブロックに入れてください。
↓記述例
```html
ここにHTMLコードを記述
```
```css
ここにCSSコードを記述
```
【内容】
以下のコードを試してみたのですが、HP上に表示した際、mainの段落にfooterの内容が表示されてしまいます。
divの定義の仕方が問題なのかと思い試行錯誤しましたが解決できませんでした。
初心者で申し訳ないのですが、ご教授頂けると幸いです。
HTML5
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset = "UTF-8"> 5 <title>インターネットサイト一覧</title> 6 <link rel="stylesheet" href= "CSS/style.css"> 7</head> 8 <body> 9 <div class = "header"> 10 <div class = "header-list"> 11 <ul> 12 <li><a href = "https://global.toyota/jp/company/profile/overview/">代表者挨拶</a></li> 13 </ul> 14 </div> 15 <div class = "header-logo">インターネットサイト一覧</div> 16</div> 17 18** <div class="main"> 19 <div class = "main-list"> 20 <ul> 21 <li>使い方</li> 22 </ul> 23 </div> 24 <div class="main-logo">ネットサーフィンにお使いください</div> 25 26 <div class = "contents"> 27 <img src = "https://s.yimg.jp/images/promotionalads/site/images/service/sponsored-search/top-feature_search.png" alt = "写真" width = "100" height = "100"> 28 <p><a href = "https://www.yahoo.co.jp/">Yahoo!</a></p> 29 </div> 30 <div class = "contents"> 31 <img src = "https://assets.media-platform.com/lifehacker/dist/images/2015/09/150914mediagene_gizmodo-w960.jpg" alt = "写真２" width = "100" height = "100"> 32 <p><a href = "https://www.google.co.jp/">Google</a></p> 33 </div> 34</div> 35 36 <div class = "footer"> 37 <div class = "footer-logo">Interneeet</div> 38 <div class = "footer-list"> 39 <ul> 40 <li><a href = "https://global.toyota/jp/company/profile/overview/">会社概要</a></li> 41 </ul> 42 </body> 43</html>
CSS
1h1{ 2 color:blue; 3} 4h2{ 5 color:red; 6} 7.header-logo{ 8 background-color:green; 9 font-size:36px; 10 height:90px; 11} 12.header-list li{ 13 float:right; 14 list-style:none; 15} 16.main-logo{ 17 background-color:blue; 18 height:100px; 19 font-size:25px; 20} 21.main-list li{ 22 float:right; 23 list-style:one; 24} 25.contents{ 26 float:left; 27}
コードがコードブロック内に入ってません。上のコメントを参考に、コードを ``` の内側にいれてください。
回答1件
0
ベストアンサー
まず、HTMLコードに全角空白があります。これを半角空白に修正してください。
下記のwidthの前が全角空白です。
alt = "写真" width = "100"
あと、最後の部分で div の閉じタグが不足してます。
html
1 </ul> 2 </body> 3</html>
これを下記に修正
html
1 </ul> 2 </div> 3 </div> 4 </body> 5</html>
あとは、回り込みの回避については下記をご参考に。
floatを解除する4つの方法（clear:both;、overflow:hidden;、clearfix、height）
上記のリンク先の4番目の方法を使う場合のコード例
CSSに下記を追加。
css
1.main { 2 overflow:hidden; 3}
投稿2019/12/04 01:49
編集2019/12/04 02:39総合スコア34073
あなたの回答
tips
プレビュー
