下にスクロールしたい | 質問掲示板 | 独学!未経験からWebデザイナーになる!!

Web制作や付随することを何でも質問できるコーナーです。

未経験からWebデザイナーになる!! > 質問掲示板 > カテゴリ: HTML/CSS > 下にスクロールしたい

下にスクロールしたい

当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
htmlを学習しているものです。
一とうり、書き終えてブラウザで確認したんですが、
下にスクロールできませんでした。
コードはこちらです。

html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marine Coffee</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
<div class="container">
<div class="header-left">
<img class="header-logo" src="images/logo.png" alt="Marine Coffee">
</div>
<div class="header-right">
<a href="index.html">トップ</a>
<a href="menu.html">メニュー</a>
<a href="acces.html">アクセス</a>
<a href="contact.html">お問い合わせ</a>
</div>
<div class="clear">
<div class="main-visual">
<div class="container">
<h1 class="top-text">Marine Coffee</h1>
<h2 class="top-subtitle">東京の中心にある、隠れ家的カフェ</h2>
<p class="top-text">
渋谷にある「Marine COffee」の公式サイトです。
<br>
　店長こだわりのコーヒーを落ち着いた雰囲気で楽しめます。
<br>
　是非一度お立ち寄りください。
</p>
</div>
</div>
<div class="main">
<div class="container">
<h2>今月のおすすめ</h2>
<img class="main-image" src="images/lemon-tea.jpg" alt="レモンティー">
<h3>レモンティー</h3>
<P>
今月のおすすめメニューは「レモンティー」です。
<br>
爽やかなレモンの風味をお楽しみください。
</P>
</div>
</div>
<div class="footer">
<div class="container">
<div class="footer-left">
<p>このサイトをシェアする。</p>
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="Marine Coffee" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="footer-right">
&copy; 2018 Marine Coffee.
</div>
<div class="clear"></div>
</div>
</body>
</html>




css

@charset "utf-8";
* {
padding: 0;
margin: 0;
}
.header {
height: 56px;
width: 100%;
box-shadow: 0 0 10px #dddddd;
background-color: white;
position: fixed;
top: 0;
}
.header-left {
float: left;
}
.header-right {
float: right;
}
.clear{
clear: both;
}
.header-logo {
height: 40px;
margin-top: 8px;
}
.header-right a {
line-height: 56px;
color: #5a5c5f;
margin-left: 5px;
font-size: 16px
padding: 16px 5px;
}
.header-right a:hover {
background-color: #e2f1ff;
transition: background-color 0.5s;
}
.container {
max-width: 980px;
padding: 0 30px;
margin-left: auto;
margin-right: auto;
}
.main-visual {
padding-top: 140px;
padding-bottom: 100px;
background-image: url("images/main.png");
background-size: cover;
color: #f5f5f5;
text-align: center;
}
.top-title {
font-size: 64px;
margin-bottom: 10px;
}
.top-subtitle {
font-size: 24px;
margin-bottom: 60px;
}
.top-text {
opacity: 0.9px;
}
.main {
padding: 80px 0;
color: #5a5c5f;
text-align: center;
}
.main h2 {
margin-bottom: 25px;
}
.main-image {
width: 450px;
margin-bottom: 25px;
box-shadow: 2px 2px 4px #b7b7b7;
border-radius: 5px;
}
.main h3 {
margin-bottom: 10px;
}
.footer {
height: 120px;
background-color: #2f3a44;
color: #e8e8e8;
padding-top: 20px;
}
.footer-left {
float: left;
}
.footer-right {
float: right;
padding-top: 50px;
}
.footer-left p {
margin-bottom: 8px;
}
html {
overflow-y: scroll;
}




これを打ち込んだら下にスクロールできませんでした。
原因を教えてください。
satasata さん 01月30日 17時33分
satasataさん、こんばんは。

コード、拝見しました。
※本サイト上ではコードのインデント（字下げ）が無くなってしまっていますが、私の方ではちゃんとインデント有りで拝見しています。そのままに表示できておらず恐縮です。

直接的には、.headerがposition:fixedになっているのがスクロールしない原因です。これを外せばスクロールします。

ただ、察するにheaderはheight:56pxで固定（position:fixed）させたいと推測します。

その場合、本質的には.headerが適切に閉じられていない事に起因すると言えますね。

現在は.header内に全てのコンテンツが入ってしまっています。メインエリアに入る前に、.headerを閉じておくのが良いでしょう。

そもそも現時点でdivの閉じタグが4個程足りていないので、divの開始と終了をチェックしてみてください。

また、clearするためだけに<div class="clear">で囲うのはdivの階層が深くなり管理がしづらくなるので避けた方が良いです。

あとは本件とは無関係ですが、.header-right a のfont-size: 16pxの後にセミコロンが入力されていないので、追加しておくと良いですね。

以上、参考にしていただけると幸いです。
馬場誠 さん 01月30日 18時18分
馬場さん。
ありがとうございます。
ずっとわからなかったのでとっても助かりました。
satasata さん 01月30日 22時08分