Q&A
・・・CSSって同一ファイルにいますか？別ファイルですか？
初心者です、絶対パスにある画像.pngを背景に設置したいのですが、調べたやり方をしても入れることができません。
どのように直せばよいのでしょうか。
html
1<!DOCTYPE html> 2<html> 3<head> 4<link rel="stylesheet" type="text/css" href="practice.css"> 5<meta charset="UTF-8"> 6</head> 7<body > 8<title>Page Title</title> 9 10<h1 style="text-align:center;">Practice and Test</h1> 11<p style="color:blue;text-align:center;">This is a practice.</p> 12<p>I'm now practicing writing html.</p> 13<hr> 14 15<h1>Practice2</h1> 16<p>HTML links are defined with the a tag:</p> 17<a href="https://phys.org/news/2012-03-pulses-quantum.html">This is a link(quantum walk)</a> 18<hr> 19 20<p>HTML images are defined with the img tag:</p> 21<img src="menger.png" alt="menger" width="200" height="200"> 22 23</body> 24</html> 25
cssは以下になります。
css
1<!DOCTYPE html> 2<html> 3<head> 4<style> 5body {background-image: url("menger.png"); } 6 7</style> 8</head> 9</html>
menger.pngの画像は> こちら
ご教授いただけたら幸いです、よろしくお願いいたします。
なぜCSSに!doctype宣言などが入っているのでしょうか？HTMLになってませんか？
・・・？？？
HTMLファイルの中にCSSがいて、親切心でわけたのか、
それともCSSファイルが上記のようになっているのか・・・
「調べたやり方」を差し支えなければ追記してください。
参考にした記事URLなど。
同一ファイルです
practice.cssって読み込んでるところあるし、もしかして cssファイルをこの形式でかいてる・・・？？？？？
んんんん？？？？
すいません、分けて書いており、実際のファイルの中はこのように書いて言います。
ごめんなさい、何もわかっていないので、めちゃくちゃであったら申し訳ないです。
え、拡張子 .cssで保存してるファイルにこのままかいてあるってことですか？？？？？？？？？？
あ、そうです。HTMLのところは.htmlファイル、cssのところは.cssにそれぞれ同じフォルダに保存しています
・・・CSSファイルの作り方からお勉強しなおしですね
回答2件
0
CSS
1body { 2 background-image: url("menger.png"); 3}
CSSって中身これだけでいいんですよ・・・。
えぇ・・・？
うーん。
これでも直らなかったらまた教えてください・・・。
投稿2019/02/21 06:34
総合スコア2341
私のほうでこれだけで動作確認できたので質問者さんがきちんと取り入れられたなら大丈夫です。
0
ベストアンサー
CSSファイル内はHTMLファイルで言うと**<style></style>の中だけ**を書きます。
つまり、下記だけで良いです。
css
1body {background-image: url("menger.png"); }
※CSSファイルと同じ階層にmenger.pngあることが前提
あと気づき：
- titleがbodyの中にある（head内に書くものです）
- インラインスタイル(style=の記述)が混じってるので一緒に外部CSSに書いては
- たぶん本来は関係ないんだろうけど、menger.pngの背景の中にimageでmenger.pngが置いてあるのはなんか変
投稿2019/02/21 06:36
総合スコア80850
できました！ありがとうございます！頑張ります
解決されたようで何よりです。
HTML構造の基本も含めてきちんとおさえられたほうが良いです。
書籍を買っても良いですし、入門系の記事はネット上に幾らでもあるので、読んで試して身につけてください。
あなたの回答
tips
プレビュー
