画面下、画面右におそらくpaddingでの作用だと思われる空白が生じ、消すことができない。文字にurlがなぜか貼られている

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <link rel="stylesheet" href="pencil.css">
9    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
10</head>
11<body id='dosukoi'>
12    <header class="webheader pageheader">
13<h1><a href="web.html"></a>書く楽しみを</h1>
14
15
16<div styles="width:30px; height:100vh;">
17<nav class="hambarger">
18    
19    <ul class="pagenav">
20<li class="tamtam menu "><a href="pencil.html">ペンシル</a></li>
21<li class="tamtam menu "><a href="ballpen.html">ボールペン</a></li>
22<li class="tamtam menu "><a href="fountain.html">万年筆</a></li>
23<li class="tamtam menu "><a href="pencase.html">ペンケース</a></li>
24
25    </ul>
26</nav>
27</div>
28    </header>
29 
30    <div class="hambarger tamtam gernius">
31<span class="icon"></span>
32<span class="icon"></span>
33<span class="icon"></span>
34    </div>
35<div id="mask"></div>
36  
37
38    <div class="parfect"> アンビションロンバス<a href="ronbass.html"><img src="images/ronbass.png" alt="アンビションロンバス"></div></a>
39    <div class="parfect">DIA2ゴールド<a href=""><img src="images/kawecoDIA2.png" alt="カヴェコDIA2ゴールド"></div></a>
40    <div class="parfect">LAMY2000 <a href=""><img src="images/LAMY2000.png" alt="LAMY2000ペンシル"></div></a>
41
42
43   <script src="pencil.js"></script>
44</body>
45</html>

CSS
1h1{
2    color: white;
3}
4header div{
5    color: white;
6    font-size: 30px;
7    position: fixed;
8    top: 0;
9    left: 42%;
10}
11
12.parfect{
13    display: flex;
14    padding-left: 30px;
15    margin-top: 50px;
16}
17body{
18    overflow: scroll;
19}
20div{
21    color: white;
22}
23img{
24    width: 300px;
25    height: auto;
26}
27
28h2{font-size: 18px;}
29.pagenav{
30    
31    font-size: 1.35remrem;
32    text-transform: uppercase;
33    list-style: none;
34
35}
36h1{
37    font-weight: bold;
38}
39body{
40
41    background-image: url(images/background.jpg);
42    background-repeat: no-repeat;
43    background-size: cover;
44    background-position: center top;
45    min-height: 100vh;
46
47}
48
49
50.pagenav a {  
51    color: #32605a;
52}
53a{
54    text-decoration: none;
55}
56
57
58.pagenav li{
59    left: 20px;
60}
61
62
63 header h1{margin-top: 15px;
64    margin-left: 80px;
65    font-size: 35px;
66}
67 .pageheader{
68     max-width: 1100px;
69     margin: 0 auto;
70     padding: 0 4%;
71 }
72 .stationary{
73     text-align: center;
74     margin-top: 10%;
75 }
76 
77body{
78    color: white;
79}
80.menu{
81   display: block;
82 
83   transition: all 0.5s;
84   left: -300px;
85   opacity: 0;
86   border-bottom: 1px solid black;
87padding: 0.3rem;
88top: 0;
89bottom: 0;
90opacity: 0;
91}
92
93
94.hambarger{
95    display: block;
96    font-size: 18px;
97    position: fixed;
98top: 30px;
99left: 30px;
100width: 30px;
101height: 32px;
102cursor: pointer;
103}
104.hambarger span{
105    position: absolute;
106    display: block;
107    left:0;
108    width: 30px;
109    height: 2px;
110   background-color: black;
111    transition: all 0.5s;
112    border-radius: 4px;
113}
114
115.hambarger span:nth-child(1){
116    top: 4px;
117    
118}
119.hambarger span:nth-child(2){
120    top: 15px;
121    
122}
123.hambarger span:nth-child(3){
124    bottom: 4px;
125}
126
127.pagenav a:nth-child(1){
128    top: 10px;
129    }
130    .pagenav a:nth-child(2){
131        top: 20px;
132    }
133
134
135    ul{
136        position: absolute;
137        top: 20px;
138        left: 10px;
139        width: 120px;
140        padding: 0;
141    }
142
143.open{
144    opacity: 1;
145    left: 5px;
146  }
147
148

JS
1$(function(){
2    $('.hambarger').click(function(){
3    var $menu=$('.menu')
4    if($menu.hasClass('open')){
5    $menu.removeClass('open');
6    
7    }
8    else{
9    $menu.addClass('open');
10    
11    }
12    });
13    });

サイトの画面下に少し空白ができ、どの記述が原因か不明

アンビションロンバスの文字になぜかurlが貼られていて原因が不明

itagagaki

2022/07/25 11:28

起こっている現象がよくわからないのでもっと詳しく。あと、関係ないと思いますが、<div><a></div></a> って感じになってるところが複数個所ありますよ。

行動規範の内容に同意します

回答2件

ベストアンサー

「画面下の空白」というのが水平スクロールバーのことだとしたら、

css
1body{
2    overflow: scroll;
3}

としているので、必要なくても(スクロールしなくても)表示されているので、

css
1body{
2    overflow: auto;
3}

とすれば水平スクロールバーは消えます。というか、この設定自体削除してもOKです。デフォルトがautoなので。

アンビションロンバスの文字になぜかurlが貼られていて原因が不明

これは、アンビションロンバスに貼られているのではなく、それに重なっている pagenav内のaリンクのurlです。
opacity: 0;で透明にしているだけですので、要素自体は存在してます。
display: none;とすれば、存在自体がないものとされますので、リンクも消えます。
しかし、display: none;だとアニメーションはできません。
アニメーションしたいなら、jQuery の fadeIn / fadeOut を使えばいいでしょう。あるいは、fadeToggle 。

js
1$(function(){
2  $('.hambarger').click(function(){
3    $('.menu').fadeToggle();
4  });
5});

.menuの設定は下記だけでOK。

css
1.menu{
2  display: none;
3  border-bottom: 1px solid black;
4  padding: 0.3rem;
5}

投稿2022/07/25 13:53

hatena19

総合スコア33106

回答へのコメント

darkstar

2022/07/25 14:52

opacityからdisplayに変えてアニメーションが使えなくなることまで考えて教えてくれてありがとうございました

行動規範の内容に同意します

サイトの画面下に少し空白ができ、どの記述が原因か不明

CSS
1min-height: 100vh;

100vhはスクロールバーの高さを含むため、余白が発生しています。

アンビションロンバスの文字になぜかurlが貼られていて原因が不明

ハンバーガーメニュー内のリンクが、見えなくなっているだけでクリックできる状態になっています。
これが文字に重なっているということではないかと思います。

投稿2022/07/25 13:40

norando

総合スコア113

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.68%

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

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

質問する

同じタグがついた質問を見る

トップ HTML5に関する質問

画面下、画面右におそらくpaddingでの作用だと思われる空白が生じ、消すことができない。文字にurlがなぜか貼られている

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

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

画面下、画面右におそらくpaddingでの作用だと思われる空白が生じ、消すことができない。文字にurlがなぜか貼られている

同じタグがついた質問を見る