CSS初心者が壁紙画像を設定したが一部が表示されない理由は？

2023/08/16 01:46

このQ&Aのポイント

外部CSSを使用して壁紙となる画像を設定しましたが、一部の画像が表示されない問題が発生しています。
CSSの記述に誤りがある可能性があります。具体的には、background-imageプロパティの設定に誤りがある可能性があります。
画像が欠けて表示される原因として、background-repeatプロパティやbackground-attachmentプロパティの設定にも誤りがあるかもしれません。

ベストアンサー

css　初心者です。（壁紙について

2012/02/16 08:09

外部cssにて、壁紙にある画像を一枚壁紙にしようと思い、以下の記述を行いましたが、なぜかすべての画像の範囲が収まらず、一部Y軸方向に画像が現れるだけです。どのような事が現なのでしょうか？お心当たりございましたら、お願い致します。 //css部分// @charset "UTF-8"; /* CSS Document */ p:hover { padding:10px; border:1px dotted #ff0000; color:red; } a:hover{color: blue;} h1:first-line{color:green;} p.sample1{color: red;} p.sample2{background-color:#3366ee;margin:30px 20px;padding:45px 50px} p.sample3{background-color:#ff7799;margin:-70px -40px;padding:70px 100px} p.sample4{background-color:#33bb77;margin:-70px -2px;padding:70px 100px} p.sample5{background-image: url("akete.jpg"); bakcground-repeat:no-repeat; background-attachment:fixed; } //html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Untitled Document</title> <link rel="stylesheet" href="begin.css" type="text/css" /> </head> <body> <p class="sample5">あれ？画像欠けてない？</p> </body> </html> 以上をよろしくお願いします。

naonao321
お礼率66% (58/87)

HTML
回答数4
ありがとう数1

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/02/17 23:22 回答No.4

　これは、あくまでサンプルであるためHTML内に書いていますが、基本はスタイルシートは外部に置くものです。特にXHTMLは外部に置くのが基本です。置くべきです。　その場合は、 <link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/standard.css"> 　のように指定します。外部スタイルシートには、外部スタイルシート ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html#toc ) 　など・・・

質問者

お礼 2012/02/19 01:32

ありがとうございます。丁寧なご解説誠にありがとうございました。いろいろと織り交ぜていただいて大変勉強になります。またよろしくお願い致します。

その他の回答 (3)

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/02/17 19:19 回答No.3

ページ自体の背景なら、bodyにスタイルを指定します。sample5など書く必要はありません。 ★スタイルを適用するためにclass名を書くのではありません。class名はあくまで文書構造を示すためです。　それを利用してスタイルを適用させますが、どの要素に適用させるかはclass名だけではありません。セレクタ(選択肢)を使います。その、ひとつがclassです。下記サンプルは、その見本となるように書いておきました。class名は、この文書のheader,section(本文),footerを示すために書いています。　これらのclass名は、将来のHTML5では、要素名となります。 <div class="header"> ---(HTML5)---><header> <div class="section"> ---(HTML5)---><section> <div class="footer"> ---(HTML5)---><footer> 　どんなclass名がベストなのかは、 →HTML5 における HTML4 からの変更点/新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) が参考になるでしょう。 ★セレクタの書き方は、出来るだけ参考になるように色々なタイプを織り交ぜてあります。 {HTML] ※HTML4.01strictで書いてあります。 ※タブは＿に、:は：(全角)、半角スペース２個は全角スペースに置換してあります。　この掲示板のシステムへの対策です。元に戻してください。　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ (例)div.section pre クラスセレクタと子孫セレクタ (例)p+p 隣接(兄弟)セレクタ (例)p:last-child 擬似要素 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input+with_options ) 　(オプションでCSSレベル3を選択) でチェック済み <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>見出し</h1> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>度々に渡り申し訳ありません。</p> ＿＿<p>先に書いた事は忘れてください。</p> ＿＿<p>以下の内容にお答えいただければ幸いです。</p> ＿＿<p>ある画像を壁紙にする事を意図して、以下の記述をしました。</p> ＿＿<p>以下html</p> ＿＿<pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http：//www.w3.org/1999/xhtml"> 　　<head> 　　　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 　　　　<meta http-equiv="Content-Style-Type" content="text/css" /> 　　　　<title>Untitled Document</title> 　　　　<link rel="stylesheet" href="begin.css" type="text/css" /> 　　</head> 　　<body　class="samole5"> 　　</body> </html></pre> ＿＿<p> ＿＿＿class名は、その部分が文書全体にとってどのような構成要素であるかを記述するものです。＿＿</p> ＿＿<blockquote> ＿＿＿<p> ＿＿＿＿DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。各々、内容が行内であるか(SPAN)ブロックレベルであるか(DIV)は定めるが、他のプレゼンテーション的語彙を示すことはない。従って著者は、この両要素をスタイルシートやlang属性等と併用することで、HTMLを自身の必要や好みに応じられるようにできる。＿＿＿</p> ＿＿＿<p>HTML4.01仕様書より</p> ＿＿</blockquote> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>

質問者

補足 2012/02/17 22:49

ご丁寧なご指導本当にありがとうございます。できましたら最後に１つだけ欲張らせてください。自分の方で以下の記述をhead要素内に記述したところ、背景設定ができました。これはHTMLに直接書きこんでいるものです。現在自分が疑問に思っている事はこれを外部cssに書き込んで、それを通してhtmlに読み込ませる事はできないのかという事です。複数の且つ同じスタイル（レイアウトが）でHTMLを作る場合、背景も外部で設定した方が背景画像の修正、変更時には便利ではないのかと思いました。もしかすると、また思い違いをしながらを聞いているのかもしれませんが、お心当たりございましたら是非お願い致します。 <style type="text/css"> body {background-image:url('paper.gif');} </style>

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/02/17 08:30 回答No.2

ますますわからなくなった＞画像が一部（X軸方向に３行分くらい）しか画面に現れません。　x方向だと、行ではなく列・・・何文字？？　行と言うと、y軸方向ですが？ページの背景ならbodyに、段落の背景ならpに対して設定します。 no-repeatなら、繰り返されませんから、画像サイズ以上にはなりません。

質問者

補足 2012/02/17 15:47

度々に渡り申し訳ありません。先に書いた事は忘れてください。以下の内容にお答えいただければ幸いです。ある画像を壁紙にする事を意図して、以下の記述をしました。以下html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Untitled Document</title> <link rel="stylesheet" href="begin.css" type="text/css" /> </head> <body　class="samole5"> </body> </html> 以下css @charset "UTF-8"; /* CSS Document */ p.sample5{background-image: url("akete.gif"); bakcground-repeat:no-repeat; background-attachment:fixed; } これでは何も現れませんでした。ご回答いただきました「ページの背景ならbodyに」とは <body　class="samole5"> と解釈させていただいてよろしいのでしょうか。もしくわ、他に記述の必要があるのでしょうか？よろしくお願いします。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/02/16 09:09 回答No.1

されたいことがよくわからないのですが＞壁紙にある画像を一枚壁紙にしようと思い、　壁紙とは背景のことで、当然見えるのは一枚としてなのですが？？？　「一枚の画像を壁紙にしたいと」言うことでしょうか？」　「bodyではなくpに指定してあるのはなぜですか？」　　・・・段落の背景にしたいということですか・・なら「一枚」と矛盾します。＞なぜかすべての画像の範囲が収まらず、一部Y軸方向に画像が現れるだけです。　段落は狭いので・・画像ははみ出ますが　段落が長くなれば下まで表示されるのでは

質問者

補足 2012/02/16 21:43

ご回答ありがとうございます。補足させていただきます。ある一枚の画像を（リピートさせずに）背景に設定しようと思いましたが、画像が一部（X軸方向に３行分くらい）しか画面に現れません。おっしゃられております。「bodyではなくpに指定してあるのはなぜですか？」　　・・・段落の背景にしたいということですか・・なら「一枚」と矛盾します。とは、上記のもので言うと、 <p class="sample5">あれ？画像欠けてない？</p>　　を消して <body class="samole5"> とさせるという事でしょうか？よろしくお願いします。

関連するQ&A

CSSがうまく読み込まれません
いつもお世話になっています。 Dreamweaver CS4でホームページ作りをしているのですが、突然CSSが読み込まれなくなりました。 htmlのソースは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <link href="CSS/test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="1"> <p>1</p> </div> <div id="2"> <p>2</p> </div> <div id="3"> <p>3</p> </div> <div id="4"> <p>4</p> </div> <div id="5"> <p>5</p> </div> </body> </html> cssのソースは body { padding: 20px; width: 850px; margin-right: auto; margin-left: auto; border: 1px solid #999; } #1 { width: 850px; background-color: #666; } #2 { width: 850px; background-color: #999; } #3 { background-color: #CCC; width: 850px; } #4 { background-color: #999; width: 850px; } #5 { background-color: #666; width: 850px; } です。どちらもエンコーディングはUTF-8です。ちなみにDreamweaverで制作中の表示ではCSSは反映されているのですが、プレビューまたはサーバーにアップすると反映されません。なにが原因なのでしょう。。。何卒よろしくお願いいたします。
- ベストアンサー
- HTML
css初心者です。プラウザの表示について
以下のような記述を行い、確認為にプラウザに表示させようとしましたが、なぜかsafariではうまくいかずに、googlecromeでは表示されました。どのような事が原因なのでしょうか？よろしくお願いします。 //html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <link rel="stylesheet" href="box1.css" type="text/css"> </head> <body> <div class="box">箱の表示を作ろうと思います。</div> <p class="box2">こちらはどうなのでしょうか？</p> </body> </html> //css @charset "UTF-8"; /* CSS Document */ .box{ border:4px solid #9C3; width:50px; height:60px; padding:15px 15px; margin:50px 0px 0px 50px } .box2{ width:300; height:200; border:3px solid #F33; padding:10px; } よろしくお願いします。
- ベストアンサー
- HTML
CSSレイアウトでの中央寄せ
　おせわになります。 bodyに背景画像を指定し、CSSで中央寄せをしているのですが、動作確認でブラウザ幅をこまかく拡大・縮小を繰り返すと、背景画像とコンテンツ部とが1pxずれる事があります。 Win IE6.0、7.0、MacOSX safari2.0でこの現象がおき、FF2.0はWin&Macともに問題ありません。この解決方法はありますでしょうか。ご教授のほど、よろしくお願いいたします。 ▼HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>テスト</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <p>テスト</p> </div> </body> </html>
- ベストアンサー
- HTML
CSSーfloatについて
divの中にp要素を三つ作成して、最初のp要素にfloat:leftを指定しました。結果MacIEとIE6では2番目のpのみ右に並び、3番目のpは1番目のpの下にある状態です。しかも、FirefoxやSafari・Operaでは3つとも縦に並んだままです。単純なミスのようなきがするんですが解決できません。どなたか助けてください。よろしくお願いします。以下のコードです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div id="box"> <p id="A">AAA</p> <p id="B">BBB</p> <p id="C">CCC</p> </div> </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
CSSでの背景色の指定について
以下のソースで右下に空白ができます。それはいいのですが、背景色を指定がうまく行きません。 heightは動的に変わるので、idやclassを増やさずに実現したいと考えています。 IEでは実現できてきますが、Firefoxではダメでした。よい方法はないでしょうか？ ■test.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <link href="css/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="wrap"> <div id="left"> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> </div> <div id="right"> ああああ<br /> ああああ<br /> ああああ<br /> ああああ<br /> </div> </div> </body> </html> ■test.css body { margin-top: 20px; margin-left: 70px; margin-bottom: 0px; padding: 0px; line-height: 1.4em; font-size: 12px; font-weight: normal; color: #333333; } #wrap { width: 690px; background-color: #000000; } #left { margin: 0px; padding: 0px; width: 510px; height: 100%; float: left; background-color: #ffff00; } #right { margin: 0px; padding: 0px; width: 180px; float: right; background-color: #ff00ff; }
- ベストアンサー
- CSS
ホームページの上下の隙間を消すには
左右にだけ背景があるよくあるページを作ろうと一から自分で作り始めたのですが色々いじってもなぜかどうしても上下に隙間ができてしまいます。上下がぴったりつく方法を教えて下さい。 ------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <html> <style type="text/css">  </style> </head> <body> <div id="main"> <p><img src="images/head_01.gif" width="800" height="1000" /></p> </div> </body> </html>
- ベストアンサー
- ブログ
CSSのチェックをお願いします。
<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta name="robots" content="noindex,nofollow,noarchive" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> .r { color : #407133;} .t { color : #454580;} p { color : #222222;} body { background-color:#e0ffe0;} a:link { color : #0000ff;} a:visited { color : #003333;} a:hover { color : #660000;} a:active { color:#660066;} １．改行に何か意味はあるのでしょうか？２．記述の順番や付け足し、削除すべき項目がありましたら、お願いいたします。
- ベストアンサー
- HTML
CSSで画像１枚によるロールオーバー
CSSの勉強をしているのですが、Fire Fox2.0ではうまく表示されるのに対し、IE6,7では何も表示されず困っています。どこが間違っているのか教えて頂けませんでしょうか？よろしくお願い致します。作っている物は以下の通りです。（すべて同じ階層にあります） --------------------------------------------------------------- navi.gif(100*30のメニューが横3縦2で300*30の１枚の画像) --------------------------------------------------------------- list.html（とりあえずメニュー１つだけです） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>リストお勉強</title> <link href="list1.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="globalnavi"> <ul> <li id="btn01"><a href="#">リスト１</a></li> </ul> </div> </body> </html> --------------------------------------------------------------- list.css /* CSS Document */ .globalnavi { width:300px; height:30px; margin:0px; padding:0px; text-align:left; } .globalnavi ul { margin:0px; padding:0px; } .globalnavi li { display:block; list-style-type:none; float:left; width:100px; height:30px; margin:0px; padding:0px; background:url(navi.gif)no-repeat; text-indent:-9999px; } .globalnavi li a { display:block; list-style-type::none; float:left; width:100px; height:30px; margin:0px; padding:0px; background:url(navi.gif)no-repeat; text-indent:-9999px; } .globalnavi li#btn01{ width:100px; background-position:0 0; } .globalnavi li#btn01 a{ width:100px; } .globalnavi li#btn01 a:hover{ width:100px; background-position: 0 -30px; }
- ベストアンサー
- HTML
外部CSSと　HEAD内のCSSの違い
現在、macで Dreamweaver8を使用してHPを作っています。外部のcssがうまく反映されません。そこで、head内に同じcssを入れたところ、きちんと反映されました。どうして違いがでるのか教えてください。『head内に入れた時』 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> body { font-family: "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } </style> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> 『外部cssの時』 [styel.cssは] body { font-family: "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } [反映されるhtmlは] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> です。誰かお答えくださいませ。
- ベストアンサー
- Mac
HTMLで○や■などをテキストの代用とした時
HTMLで○や■などをテキストの代用とした時レイアウトが崩れてしまうのはなぜでしょうか？教えてください。よろしくお願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>無題ドキュメント</title> <style type="text/css">  </style></head> <body> <div class="container"> <div class="header"> </div> <div class="main"> <p>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</p> </div> <div class="footer"> </div> </div> </body> </html>
- 締切済み
- その他（インターネット・Webサービス）

CSS初心者が壁紙画像を設定したが一部が表示されない理由は？

css　初心者です。（壁紙について