Q&A
前提・実現したいこと
- HTML+CSSで静的なコーポレートサイトを作成したい。
- 開発環境
Mac
VScode
発生している問題・エラーメッセージ
- Macで各種ブラウザ(chrome, safari etc..)の閲覧時にヘッダーの上に謎のスペースが入ってしまう。
chrome検証ツールで確認したところ、<body>の開始タグ直下に謎の空白文字列が入っている。
ee529d535fb884d2b47d528481239bf.png)
- windowsで確認したところヘッダーの左上に文字化けした文字が出現している。
chrome検証ツールで確認したところ、<body>の開始タグ直下に謎の空白文字列が入っている。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Hoge</title> 6 <meta name="description" content="Hoge"> 7 <meta name="keywords" content="Hoge,Hoge"> 8 <meta name="viewport" content="width=device-width,initial-scale=1"> 9 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 10 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 11 <link rel="stylesheet" href="css/index.css"> 12 <script src="js/index.js"></script> 13 <script src="js/common-templates.js"></script> 14 </head> 15 <body> 16 <div id="top-wrapper"> 17 <header id="common-header"></header> 18 <div id="main-container"> 19 ~~ 中略 ~~ 20 </div> 21 <div id="common-profile"></div> 22 <footer id="common-footer"></footer> 23 </div> 24 </body> 25</html>
試したこと
- BOMっぽいなと思いましてfileコマンドで確認してみたところ、以下の様に表示されました。
bash
1index.html: HTML document text, UTF-8 Unicode text, with overstriking
- テキストエディタで手打ちで同じ様に<html> ~ <head> ~ <body>タグまで書いて見ましたが、overstrikingは付きませんでした。
- Atomで開いて新しいファイルを別名で作成し、中身にコピペしたところ同じくwith overstrikingになりました。
- 様々にググってみましたが、linuxのfileコマンドの解説ページなどで「重ね打ち文字がfileに含まれている場合にそれも表示します」との文言を発見出来たのみでした。
- vscode上で該当のファイルからhtmlタグを全て削除して、適当な文字列を数文字打ってからfileコマンドで確認すると以下の様に文字コードは変わりました。
bash
1index.html: ASCII text, with no line terminators
- nkfコマンドを用いてutf-8にし直してみましたが解決しませんでした。
最終的な質問
- なぜこの様な事象が発生しているのか。
- with orver striking状態を解消するにはどうすれば良いのか。
こちら片方でも良いので分かる方がいましたらご回答頂けますと大変嬉しく思います。
何卒よろしくお願いいたします。
回答1件
0
ベストアンサー
</head>の後にBS文字（バックスペース）がありますので、それを削除してください。html
1</head>
投稿2020/11/30 12:19
総合スコア34073
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/11/30 13:01