Q&A
Console(Elementの隣のタブをクリックで見れます)に出ているエラーはどんなエラーですか？
前提・実現したいこと
ProgateのHTML&CSSコースの道場コースのLPを自分自身のエディタを使って再現するために、上部の空白を消したい。
headタグ内に、meta情報やlinkの情報などが記載させたい。
発生している問題・エラーメッセージ
ProgateのHTML&CSSコースの道場コースのLPを自分自身のエディタを使って再現しようとしているのだが、上部の空白が消えないので困っている。
また検証機能を使い確認してみたところ、headタグ内に、meta情報やlinkの情報などが記載されていないことになっている
エラーメッセージ      ソースコード HTML&CSS ### 試したこと ・CSSで*{}内のpadding,marginを０に設定したが効果なし ・google chromeのキャッシュなども削除したが効果なし ・safariで開いてみるも結果は同じであった
あと1つ目のメタタグの前のところに全角スペース使ってたりしてないですか？
エラー部分を画像として追加しました。
確認しましたが、半角スペースでした。
そうですか。
すみませんが、私の環境で調べて見たいので、コード(htmlとcss)をスクショでなく、コピペで貼り付けてもらえないでしょうか。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="description" content=""><!--検索して出てきた時にhoverすると表示される文字。基本はnameはdescription、contentは表示される文字なので説明文的なもの-->
<meta name="viewport" content="width=device-width, initial-scale=1"><!--レスポンシブ対応のためのもの。基本的にはこの定型で入れる-->
<title>Progate</title>
<link rel="shortcut icon" href="./image/favicon.png">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container">
<img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
<div class="menu">
<a href="#">レッスン</a>
<a href="#">新規登録</a>
<a href="#">ログイン</a>
</div>
</div>
</header>
<div class="top-wrapper">
<div class="top-text">
<h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
<p>Progateはオンラインプログラミング学習サービスです。<br>
初心者にも優しいスライドとレッスンで、Webサービスを作りながら学ぼう。</p>
</div>
<div class="access-btn">
<a href="#" class="btn login-btn">新規登録はこちら</a>
<p>or</p>
<a href="#" class="btn facebook"><span class="fa fa-facebook">Facebookで登録</a>
<a href="#" class="btn twitter"><span class="fa fa-twitter">Twitterで登録</a>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
}
a {
text-decoration: none;
display: inline-block;
}
header{
height: 65px;
width: 100%;
background-color: rgba(34,49,52,0.9);
top: 0;
z-index: 10;
position: fixed;
}
header .logo{
width: 124px;
margin-top: 20px;
float: left;
}
header .menu{
float: right;
}
header .menu a{
float: left;
line-height: 65px;
padding: 0 25px;
color: white;
}
.menu a:hover{
background-color: rgba(255,255,255,0.3);
}
.top-wrapper{
background-image: url(https://prog-8.com/images/html/advanced/top.png);
padding-top: 140px;
padding-bottom: 100px;
background-size: cover;
text-align: center;
color: white;
}
.top-text h1{
font-size: 60px;
font-weight: bold;
padding-bottom: 15px;
opacity: 0.7;
letter-spacing: 5px;
font-size: 45px;
}
.top-text p{
opacity: 0.7;
font-size: 16px;
}
.btn{
padding: 8px 24px;
color: white;
opacity: 0.8;
text-align: center;
border-radius: 4px;
}
.login-btn{
background-color: #239b76;
}
.facebook{
background-color: #3b5998;
}
.twitter{
background-color: #55acee;
}
.fa{
display: inline-block;
margin-right: 5px;
font-size: inherit;
}
といった具合です。よろしくお願いします
まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
回答2件
ベストアンサー0
なにかのバグではないですか？
ローカルにファイルを置いて確認をしてみて問題なければ、
スクリーンショットを添えてサービスの運営へ問い合わせることが良いと思います。
投稿2020/02/24 15:27
総合スコア15
あなたの回答
tips
プレビュー
