Q&A
実行したいこと
.header-top のimgタグの中にあるmarginの中身を変えた時に画像と<div class="文字">の中にあるテキストが
同時に動かないようにしたいです。
コードミスがないか調べたりしたのですが原因が分かりませんでした。
解答よろしくお願いします。
HTML
1<html>> 2 <head> 3 <meta charset="utf-8"> 4 <title>ADVANCE</title> 5 <link rel="stylesheet" href="style.css"> 6 <link rel="preconnect" href="https://fonts.gstatic.com"> 7 <link rel="preconnect" href="https://fonts.googleapis.com"> 8<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 9<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&display=swap" rel="stylesheet"> 10<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap" rel="stylesheet"> 11 </head> 12 <body> 13 <header> 14 <!-- ヘッダーのトップの部分 --> 15 <div class="header-top"> 16 <p><img src="ロゴ.jpg" alt="会社" title="ロゴ"></p> 17 </div> 18 <div class="文字"> 19 テキスト 20 </div> 21 </header> 22 23
CSS
1body { 2 font-family: 'Noto Sans JP', sans-serif; 3 margin: 0; 4 padding: 0; 5} 6header { 7 height: 350px; 8 width: auto; 9} 10.header-top { 11 text-align: center; 12 width: auto; 13 color: #87cefa; 14} 15 16.header-top p { 17 margin: 0; 18 text-align: center; 19 padding: 0; 20} 21 22.header-top img { 23 margin: 150px 0px 0px 0px; 24 padding: 0; 25 height: 14%; 26 width: 10%; 27} 28 29.文字 { 30 color: black; 31 text-align: center; 32 margin: 0; 33 padding: 0; 34 font-size: 50px; 35 font-family: 'Noto Sans', sans-serif; 36 font-weight: bold; 37} 38
回答1件
0
ベストアンサー
下記のようにすれば、header 内の固定位置になります。
css
1header { 2 position: relative; 3} 4.文字 { 5 width: 100%; 6 position: absolute; 7 top: 180px; /* 希望の位置になるように調整 */ 8}
投稿2021/09/16 09:41
総合スコア34075
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/09/16 09:53