前提・実現したいこと
ProgateのHTML&CSSコースの道場コースのLPを自分自身のエディタを使って再現するために、上部の空白を消したい。
headタグ内に、meta情報やlinkの情報などが記載させたい。
発生している問題・エラーメッセージ
ProgateのHTML&CSSコースの道場コースのLPを自分自身のエディタを使って再現しようとしているのだが、上部の空白が消えないので困っている。
また検証機能を使い確認してみたところ、headタグ内に、meta情報やlinkの情報などが記載されていないことになっている
エラーメッセージ ![実際に記述したHTMLのコード](d9c1bd0c8db37f0a08dde8dbb311a229.png) ![CSSコード1](9916947ad71c5ab3a6f333271acefad7.png) ![cssコード2](74f4ab00f3fd490b3d04220f1ddaa407.png) ![エラーコード](026977bb92f452c4f9be241cdffc2b72.png) ![ブラウザに表示させた時の検証画面(head内記述なしになってる)](dfc384653770e637ed8b8d0bf03f6e47.png) ソースコード HTML&CSS ### 試したこと ・CSSで*{}内のpadding,marginを0に設定したが効果なし ・google chromeのキャッシュなども削除したが効果なし ・safariで開いてみるも結果は同じであった
Console(Elementの隣のタブをクリックで見れます)に出ているエラーはどんなエラーですか?
あと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件
あなたの回答
tips
プレビュー