Q&A
質問する際は「ここに質問の内容を詳しく書いてください。」は削除してください。
あとCSSは「コードを入力」で追加をお願いします。
https://teratail.com/help#about-markdown
前提・実現したいこと
ドットインストールを見ながら同じ内容を作って練習中の者です。
HTMLを終え、現在CSSをやっているのですが、どうやっても一部文字が反応しないので困ってます。
書き込んでも太字（濃い字）にならず細字のままなのです。当然反映もされません。画像同士がくっついてしまっている状態です。
css
1header{ 2 text-align: right; 3 padding:10px; 4 background-image: url(../img/header.png); 5 height: 240px; 6 background-size: cover; 7 background-position: 50% 50% 8 margin-bottom: 60px; 9}
これの一番下のmargin-bottom: 60px; という箇所がなぜか反応しないのです。
動画の先生の方は問題なく反応されていてそれを見ながら同じ様にやっている筈なのですが...
コードはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/help#about-markdown
コメントも回答も被っちゃいましたね・・・；
同じ内容を書いていて動かないなら絶対に同じ内容で作れてないのだから、もう一度初めから動画見なおして同じ内容真似して作ったらいいじゃない。
「Atom」は今回の件とはまったく関係がないので
質問のタイトルの修正をお願いします。
yasutomiさん
Atomに構文チェックカーのプラグインがあるので「それ入れたら間違い分かるよ」って指摘もありかなと思います。
あでも、タイトルは修正したほうがいいですね。
結局「ブラウザで動作確認をして」反応しないわけですから。
エディタが原因ではないです。
アホみたいな質問にご丁寧に有難うございます！code入力のやり方を知ることができました。そしてAtomが原因じゃない事もわかりました。
回答2件
0
ベストアンサー
CSSの書き方が間違っています。
background-position: 50% 50%の語尾に;を付けなければ
margin-bottom: 60px;は効かないです。
CSS
1header { 2 text-align: right; 3 padding:10px; 4 background-image: url(../img/header.png); 5 height: 240px; 6 background-size: cover; 7 background-position: 50% 50%; 8 margin-bottom: 60px; 9}
投稿2019/05/23 22:49
総合スコア2937
0
太字指定がないように思いますが、明らかな構文ミスがあります。
css
1background-size: cover; 2background-position: 50% 50% /* ここに終端を示す ; がない */ 3margin-bottom: 60px;
Atom詳しくはないですが、構文チェックのようなものはないですか？
色が変わったり何かしら警告が出てそうには思います。
下記のような検証サービスも利用してみてください。
投稿2019/05/23 22:54
総合スコア80850
これすっごく便利ですね！こんなものがあるとは！！
ご丁寧に有難うございました。
Atomにもこれとほぼ同等の仕組みが実装されたプラグインがあるようですよ。
http://creating-homepage.com/archives/6512
W3CはHTMLやらCSSの策定・勧告を行っている機構なので公式の構文チェックの概念が盛り込まれています。
わざわざWeb上のサービスを開くよりもエディタ上で出てくれたほうが早いと思いますのでプラグイン入れてください。
拝見いたしました。この様に便利なプラグインがあるのですね。Atomを使われてないとおっしゃっていたのに有難いアドバイス感謝いたします。早速入れてみます。
まあ、それなりのプログラミングに特化したエディタだとプラグインで機能を追加していくのが通例なので「ありそう」と。
ものによっては構文チェック機能が最初から入っているものもあるので（私はそちらを使ってますが）
あなたの回答
tips
プレビュー
