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

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

新規登録して質問してみよう
ただいま回答率
85.50%
MacOS(OSX)

MacOSとは、Appleの開発していたGUI(グラフィカルユーザーインターフェース)を採用したオペレーションシステム(OS)です。Macintoshと共に、市場に出てGUIの普及に大きく貢献しました。

HTML

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

CSS

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

Q&A

解決済

1回答

2545閲覧

position: relative; が反映されない

kaho819_tr

総合スコア13

MacOS(OSX)

MacOSとは、Appleの開発していたGUI(グラフィカルユーザーインターフェース)を採用したオペレーションシステム(OS)です。Macintoshと共に、市場に出てGUIの普及に大きく貢献しました。

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/03/25 17:32

エディタの内容と検証の内容が一致しない

Atomでhtmlとcssを書いてます。今、ドットインストールに従って進めている段階です。
指示通りに書いているはずなのですが実行すると上手く表示されません。
具体的には
・atomでheadに書いたlinkが検証ではbodyに表示される。
・検証で勝手に""が入り込む
これと同時にposition: relative; も反映されないです。
長くなりますがわからないんでコード全部載せます、、

Atomのコード

html

1 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <meta charset="utf-8"> 6 <title>Dotinstall Paneを使ってみよう</title> 7 <link rel="icon" href="favicon.ico"> 8 <link rel="stylesheet" href="css/styless.css"> 9 </head> 10 <body> 11 <header> 12 <div class="container"> 13 <h1>Dotinstall Pane</h1> 14 <p> 15 ドットインストールを見ながら<br> 16 コーディングができるAtomパッケージ 17 </p> 18 <a href="#" target="_blank" class="btn">詳細を見る</a> 19 <img src="img/top.png" width="400" height="270" alt="Dotinstall Paneの画像"> 20 </div> 21 </header> 22 </body> 23</html> 24

css

1 2ody { 3 font-size: 16px; 4 font-family: Verdana, sans-serif; 5 color: #333; 6 margin: 0; 7} 8 9header { 10 color: #fff; 11 background: url(../img/bg.png); 12 background-size: cover; 13} 14 15header h1 { 16 margin-top: 0; 17 font-weight: normal; 18 font-size: 36px; 19 margin-bottom: 8px; 20} 21 22header p { 23 margin-top: 0; 24 margin-bottom: 50px; 25} 26 27header .container { 28 width: 820px; 29 margin: 0 auto; 30 padding: 60px 0; 31 position: relative; 32} 33 34header img { 35 position: absolute; 36 bottom: 0; 37 right: 0; 38} 39 40.btn { 41 display: inline-block; 42 width: 290px; 43 background: #fff; 44 color: #f39800; 45 text-align: center; 46 text-decoration: none; 47 padding: 8px 0; 48 border-radius: 5px; 49 opacity: 0.9; 50} 51 52.btn:hover { 53 opacity: 1.0; 54} 55

検証のコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Dotinstall Paneを使ってみよう</title> 6 </head> 7 <body> 8 "" 9 <link rel="icon" href="favicon.ico"> 10 <link rel="stylesheet" href="css/styless.css"> 11 <header> 12 <div class="container"> 13 <h1>Dotinstall Pane</h1> 14 <p> 15 ドットインストールを見ながら<br> 16 コーディングができるAtomパッケージ 17 </p> 18 <a href="#" target="_blank" class="btn">詳細を見る</a> 19 <img src="img/top.png" width="400" height="270" alt="Dotinstall Paneの画像"> 20 </div> 21 " 22 " 23 </header> 24 </body> 25</html> 26

試したこと

検証の方のコードをatomと同じように書き換えてみたら上手く表示されるときもありましたが、もう1度読み込むと戻ってしまいます。Atomの方でどうしたらいいのかわかりません。

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

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

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

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

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

guest

回答1

0

ベストアンサー

動くサンプル:https://jsfiddle.net/sa3nh1y5/


サンプルのエラー表示部分を見てください。意図しない部分に意図しない制御文字が入っていることがわかると思います。
エディタの固有の問題かもしれません。(最近同じ回答をしたところなので)


追記:

Macでおきると書かれた記述がちらほら見つかります。

【HTML - Atomのエディターで目に見えない文字が入ってしまう|teratail】
https://teratail.com/questions/124949

【Macで不可視な文字が入力されてしまう問題への対処法 – 未来的ライフスタイル】
https://blog.right-apps.com/develop/2018/post-62/

【テキストエディタ内の「見えない何か」を見つける #atom #sublime | DevelopersIO】
https://dev.classmethod.jp/non-programming/texteditor_garbled_letter/

【【VSCode】Macで文章作成中に制御文字(0x08)が勝手に混ざるので、とりあえず対策した | DevelopersIO】
https://dev.classmethod.jp/etc/vscode-mac-control-character-0x08/

【Visual Studio Codeでバックスペースに悩まされたら - Qiita】
https://qiita.com/kyoh86/items/8f459bf1a8a2aedbf74a

【macで制御文字(�)が入力されてしまう問題】
http://fridles.xyz/articles/6

投稿2019/03/25 17:40

編集2019/03/25 17:56
kei344

総合スコア69364

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

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

yoshinavi

2019/03/26 02:04

横からスミマセン。 この質問の閲覧時、コードブロック部分でも、ブラウザによっては制御文字の混入がわかります。 os:win10 Chrome・Edge→分かる。 Firefox・IE11→分からない。 対策の参考のひとつにでもなるでしょうか。
kei344

2019/03/26 02:13

To: yoshinaviさん 補足ありがとうございます!
kaho819_tr

2019/03/26 06:28

該当箇所書き直したら上手くいきました。 参考になるurlも貼っていただき、ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問