Q&A
コードはマークダウンのcode機能を利用してご提示ください。あと、もっと最小構成のコードで試したほうが問題切り分けできると思います。
前提・実現したいこと
題名の原因を知りたい
Progate html&CSS中級道場ステージ ヘッダーを作ろう という章で、headerの親要素の中に画像を入れてもヘッダー内に表示されません。どのような仕組みでこのような状態になるのか、ヒントでも教えていただきたいです。
該当のソースコード
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>Progate</title> 6 <link rel="stylesheet" href="stylesheet.css"> 7 <!-- ここでFont Awesomeを読み込んでください --> 8 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 9</head> 10<body> 11 <!-- ここにコードを書いていきましょう --> 12 <header> 13 <div class="container"> 14 <div class="header-left"> 15 <img src="https://prog-8.com/images/html/advanced/main_logo.png" alt="" /> 16 </div> 17 <div class="header-right"> 18 19 </div> 20 </div> 21 </header> 22 <div class="top-wrapper"> 23 <div class="container"> 24 <div class="heading"> 25 <h1 class="top-header">LEARN TO CODE.</h1> 26 <h1 class="top-header">LEARN TO BE CREATIVE</h1> 27 <p>Progateはオンラインプログラミング学習サービスです。</p> 28 <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 29 </div> 30 <div class="btn-wrapper"> 31 <a class="btn green" href="">新規登録はこちら</a> 32 <p>or</p> 33 <a class="btn facebook" href=""><span class="fa fa-facebook"></span> Facebookで登録</a> 34 <a class="btn twitter" href=""><span class="fa fa-twitter"></span> Twitterで登録</a> 35 </div> 36 </div> 37 </div> 38 39</body> 40</html>
CSS
1html, body, 2ul, ol, li, 3h1, h2, h3, h4, h5, h6, p, div { 4 margin: 0; 5 padding: 0; 6} 7 8body { 9 font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; 10} 11 12li { 13 list-style: none; 14} 15 16a { 17 text-decoration: none; 18} 19 20/* ここからCSSを書いていきましょう */ 21.top-wrapper{ 22 background-image:url(https://prog-8.com/images/html/advanced/top.png); 23 background-size:cover; 24} 25.container{ 26 padding-top:180px; 27 padding-bottom:100px; 28 text-align:center; 29 color:white; 30 margin:auto; 31} 32.top-header{ 33 opacity:0.7; 34 font-size:45px; 35 letter-spacing:5px; 36} 37.heading p{ 38 opacity:0.7; 39} 40.btn{ 41 display:inline-block; 42 opacity:0.8; 43 padding:8px 24px; 44 color:white; 45 border-radius:5px; 46} 47.btn:hover{ 48 opacity:1; 49} 50.green{ 51 margin-top:30px; 52 background-color:#239b76; 53} 54.btn-wrapper p{ 55 padding:15px 0px; 56} 57.facebook{ 58 background-color:#3b5998; 59 padding-right:10px; 60} 61.twitter{ 62 background-color:#55acee; 63 64} 65header{ 66 background-color:rgba(34,49,52,0.9); 67 height:65px; 68} 69.container{ 70 margin:auto; 71 width:1170px; 72}
試したこと
mainのCSSの影響を受けているのかとも考えてみましたが、解決には至りませんでした。
補足情報（FW/ツールのバージョンなど）
画像の「Progate」と書かれたロゴの部分が
<img src="https://prog-8.com/images/html/advanced/main_logo.png" alt="" />
の部分に該当しています。このロゴの画像を、画像の矢印の示している左上に表示させたいです。
実際にコピペして、インスペクターで見た限り、<header></header>要素の子として表示されているようなのですが？
該当の画像表示する部分は、以下の認識でOKですか？
<img src="https://prog-8.com/images/html/advanced/main_logo.png" alt="" />
m.ts10806 さん ご指摘ありがとうございます。のちの学習の為にお聞きしておきたいのですが、「最小構成のコード」とは、「問題に関係のありそうな部分のコードを抜き出す」といった意味でしょうか？
Yasumichiさん そうです。画像は「Progate」のロゴの部分です。
＞「問題に関係のありそうな部分のコードを抜き出す」といった意味でしょうか？
そうですね。正確には「改めて作る」と言ったほうが良いかもしれません。
ヘルプページの「質問するときのヒント」にもあるのですけど、自身の問題整理にもなります。分かってる範囲や分からないところを明確にできます。
参照して、自力での問題解決に役立てたいと思います。貴重なアドバイス、ありがとうございます。
回答2件
0
ベストアンサー
.containerにpaddingを指定していますが、.top-wrapper > .containerにしないとcontainerクラスがあるところ全部に大きめのpaddingがつきますよ。
【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool
【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/
投稿2020/05/02 11:46
総合スコア69407
クラス名がかぶっていたのですね。意外と単純な見落としでした。今後もまずはそこをチェックしてみたいと思います。また、「.top-wrapper > .container」のような親要素の指定方法も初めて知りました。参考になります。ありがとうございます。デベロッパーツールもこのタイミングで習得しようと思います。
0
html
1 <div class="header-left"> 2 <img src="https://prog-8.com/images/html/advanced/main_logo.png" alt="" /> 3 </div>
の部分で <img> の親要素の <div> に header-left クラスが指定されていますが、CSS 側に該当の定義がないように思われます。調整が必要そうですが、以下のように追加した方が良いと思います。
css
1.header-left { 2 text-align: left; 3}
これだけだと同じ高さで左によるだけです。開発者ツールを駆使して、親要素等も含めて、なぜ、下に寄ってしまうか、一度、考えてみてください。
投稿2020/05/02 10:40
編集2020/05/02 11:15総合スコア1773
あなたの回答
tips
プレビュー
