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

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

新規登録して質問してみよう
ただいま回答率
85.35%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

227閲覧

ブラウザに表示させた時に空白が消えない&head内にコード記述が反映されない

kyohei_boc_

総合スコア5

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/02/24 14:46

編集2020/02/25 00:46

前提・実現したいこと

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で開いてみるも結果は同じであった

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hayato7

2020/02/24 15:31

Console(Elementの隣のタブをクリックで見れます)に出ているエラーはどんなエラーですか?
hayato7

2020/02/24 15:34

あと1つ目のメタタグの前のところに全角スペース使ってたりしてないですか?
kyohei_boc_

2020/02/25 00:48

エラー部分を画像として追加しました。 確認しましたが、半角スペースでした。
hayato7

2020/02/25 01:35

そうですか。 すみませんが、私の環境で調べて見たいので、コード(htmlとcss)をスクショでなく、コピペで貼り付けてもらえないでしょうか。
kyohei_boc_

2020/02/25 13:43

<!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>
kyohei_boc_

2020/02/25 13:44

* { 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; }
kyohei_boc_

2020/02/25 13:44

といった具合です。よろしくお願いします
kei344

2020/02/25 14:45

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
guest

回答2

0

ベストアンサー

ありがとうございます。
いただいたものをコピペで環境を構築したのですが、
同じ状況が作れませんでした。(JavaScriptのファイルもあるようなので、そこで何らかの操作をしている可能性もあります)

ただやはり、

  <meta charset="utf-8">

この行の一番最初が全角になっており、headが表示されていなかったようです。

空白が空いてしまう問題については、先ほどのべたJavaScript側で何か書いている、あるいはブラウザ側で問題が起きているのではないかと思います。

投稿2020/02/25 14:09

hayato7

総合スコア1135

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kyohei_boc_

2020/02/25 14:12

今一度、最初の行を半角で打ち直したこと改善することができました! ありがとうございました!
guest

0

なにかのバグではないですか?
ローカルにファイルを置いて確認をしてみて問題なければ、
スクリーンショットを添えてサービスの運営へ問い合わせることが良いと思います。

投稿2020/02/24 15:27

phish_tempura

総合スコア15

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kyohei_boc_

2020/02/25 00:48 編集

この質問で回答が得られなかったら、問い合わせたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問