質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTTPヘッダー

Hypertext Transfer Protocol(HTTP)の中のHTTPヘッダフィールドはHTTPの要求やレスポンスの機能しているパラメーターが含まれます。その要求もしくはレスポンスライン(メッセージの最初の一行)でメッセージヘッダを作ります。

HTML

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

CSS

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

Q&A

解決済

1回答

4560閲覧

ヘッダー要素がメイン画像と被ってしまう

ma12

総合スコア10

HTTPヘッダー

Hypertext Transfer Protocol(HTTP)の中のHTTPヘッダフィールドはHTTPの要求やレスポンスの機能しているパラメーターが含まれます。その要求もしくはレスポンスライン(メッセージの最初の一行)でメッセージヘッダを作ります。

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/01/10 16:29

編集2020/01/10 16:30

掲題の通り、ヘッダー要素がその下のメイン画像と被ってしまいます。

HTML

1<body> 2 3<!-- header --> 4<header class="header"> 5 <div class="inner"> 6 <img src="images/logo.png"> 7 <div class="header-btn"> 8 <a href="#">お問い合わせ/資料請求</a> 9 <p>※メールで相場をお知らせします!</p> 10 </div> 11 </div> 12</header> 13 14<!-- main --> 15<div class="main"> 16 <img src="images/nmain.svg" alt=""> 17 <div class="box"> 18 <a class="btn" href="#"#> 19 <p>無料査定する!</p> 20 </a> 21 </div> 22</div> 23 24 25<script src="script.js"></script> 26</body> 27 28</html>

scss

1// 変数 2$base-color: #038EC8; 3 4// header 5 6header { 7 height: 107px; 8 width: 100%; 9} 10 11.header { 12 background-color: #ffffff; 13 position: fixed;/*ボックスの配置方法(基準位置)を指定する。スクロールしても固定される。*/ 14 top:0;/*topにぴったりとくっ付く*/ 15 display: inline-block; 16 padding: 15px 50px; 17 z-index: 10;/*数が大きい方が上に表示される*/ 18} 19 20.inner { 21 background: #fff; 22 display: flex; 23 align-items: center; 24 justify-content: space-between; 25 margin: 0 auto; 26 padding-top: 15px; 27 width: 960px; 28 position: relative; 29 img { 30 position: absolute; 31 top: 60%; 32 left: 0; 33 vertical-align: bottom;/*縦方向の揃え位置を指定する※この場合は下揃え*/ 34 } 35 .header-btn { 36 position: absolute; 37 top: 60%; 38 right: 0; 39 width: 250px; 40 height: 44px; 41 border: 1px solid $base-color; 42 background-color: $base-color; 43 border-radius: 25px; 44 text-align: center; 45 display: inline-block; 46 &:hover { 47 background-color: rgba($base-color,0.5);//色の不透明度を指定する 48 } 49 a { 50 text-decoration: none;/*※下線を削除した*/ 51 color: #ffffff; 52 font-size: 2rem; 53 display: block;/*※オンマウスしたときに、どこにカーソル合わせても反応する*/ 54 height: 100%; 55 line-height: 44px; 56 } 57 p { 58 padding: 0.3rem 0 0 2rem; 59 text-align: left; 60 font-size: 1.3rem; 61 } 62 } 63} 64 65// main 66.main { 67 height: 100%; 68 position: relative; 69 .box { 70 position: absolute; 71 bottom: 12%; 72 left: 30%; 73 /* margin: 0 auto; */ 74 width: 39%; 75 height: 8%; 76 color: #666; 77 background-color: #f7f7f7; 78 border: 1px solid #f7f7f7; 79 border-radius: 34px; 80 display: flex; 81 align-items: center; 82 justify-content: center; 83 // text-align: center; 84 .btn { 85 margin: auto; 86 &:hover { 87 opacity: 0.5; 88 } 89 p { 90 color: #000000; 91 font-size: 2.8rem; 92 line-height: 5px; 93 } 94 } 95 } 96}

こちら何かコードに問題があるのでしょうか?
宜しくお願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

headerをfixedにすると、イメージでいうところの浮いた状態になるので他の要素が上に詰めるから重なったように見える。

以下のコードを追加すると解決するはず、

JS

1document.getElementsByClassName('main')[0].style.marginTop = document.getElementsByClassName('header')[0].clientHeight + 'px';

投稿2020/01/10 22:46

kyoya0819

総合スコア10429

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

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

ma12

2020/01/14 00:33

解決しました! ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問