HTML css PHP 画面を下にスクロール出来ない。というかバックグラウンドイメージが常についてきてしまう。
Q&A
Closed
解決したいこと
HTMLcss js PHPでお店のホームページを作るという課題をやっているのですが、ヘッダー部分しか表示できず困っています。
本当はバックグラウンドイメージのあるヘッダーの下にもまだ文字があり、下にスクロールできるようにしたいのですが、ヘッダーの下のメインの部分に文字を入れてもスクロール出来ません。
試しにメイン部分に何行も何行も適当に文字を入れてみると、右端にスクロールバーが表示され上下に動かすことはできるのですが画面は全く変わらずバックグラウンドイメージが表示されたままです。
書いているHTML
<?php require_once('data.php'); ?>
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Lesson Sample Site</title>
</head>
<body>
<header>
<div class="header_img">
<div class="colona">
<a class="header1" href="" >
<?php echo '新型コロナウイルスに対する取組の最新情報をご案内' ?></a>
</div>
<div class="header_fixed">
<div class="cafe_logo">
<img src="./cafe/img/logo.png" alt="cafe">
</div>
<div class="header_support">
<?php foreach ($header_support as $h_suppo => $h_url): ?>
<a class="h_suppo" href="<?php echo $h_url; ?>">
<?php echo $h_suppo; ?></a>
<?php endforeach; ?>
</div>
<div class="signin_box">
<a class="signin" href=""><?php echo 'サインイン' ?></a>
</div>
</div>
<h1 class="header_h1"><?php echo 'あなたの<br/>好きな空間を作る。' ?></h1>
</div>
</header>
<main>
<!--ここから文字が表示できません-->
<h1>sssssssssssssss</h1>
</main>
</body>
</html>
書いているcss
body{
margin: 0px;
}
header{
position: fixed; */
width: 100%;
top: 0;
}
.header_img{
background-image: url("./cafe/img/eyecatch.jpg");
background-size: cover;
height: 800px;
}
.header_fixed{
}
.colona{
display: block;
background-color: black;
text-align: center;
padding: 25px 0;
text-decoration: underline;
}
.header1{
color: white;
}
.header_h1{
color: white;
font-size: 60px;
position: absolute;
top: 300px;
left: 60px;
}
.cafe_logo{
position: absolute;
top: 100px;
left: 70px;
}
.header_support{
display: flex;
justify-content: center;
padding: 25px;
grid-gap: 50px;
}
.h_suppo{
color: white;
text-decoration: none;
}
.signin_box{
text-align: right;
}
.signin{
color: white;
text-decoration: none;
position: relative;
bottom: 50px;
right: 70px;
}
Jsはまだ書いておりません。
PHPはまだ一つの配列しか用意していないためおそらく原因ではないと思います。
宜しければご教授いただきたいです。
よろしくお願い致します。
0
