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

解決済

質問者：naonao321
質問日時：2012/02/16 08:09
回答数：4件

外部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-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>
<p class="sample5">あれ？画像欠けてない？</p>
</body>
</html>

以上をよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

No.1

回答者： ORUKA1951
回答日時：2012/02/16 09:09

されたいことがよくわからないのですが

＞壁紙にある画像を一枚壁紙にしようと思い、

　壁紙とは背景のことで、当然見えるのは一枚としてなのですが？？？
　「一枚の画像を壁紙にしたいと」言うことでしょうか？」
　「bodyではなくpに指定してあるのはなぜですか？」
　　・・・段落の背景にしたいということですか・・なら「一枚」と矛盾します。

＞なぜかすべての画像の範囲が収まらず、一部Y軸方向に画像が現れるだけです。
　段落は狭いので・・画像ははみ出ますが
　段落が長くなれば下まで表示されるのでは

この回答への補足

ご回答ありがとうございます。補足させていただきます。
ある一枚の画像を（リピートさせずに）背景に設定しようと思いましたが、画像が一部（X軸方向に３行分くらい）しか画面に現れません。

おっしゃられております。
「bodyではなくpに指定してあるのはなぜですか？」
　　・・・段落の背景にしたいということですか・・なら「一枚」と矛盾します。

とは、上記のもので言うと、
<p class="sample5">あれ？画像欠けてない？</p>　　
を消して
<body class="samole5">
とさせるという事でしょうか？

よろしくお願いします。

補足日時：2012/02/16 21:43

通報する

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2012/02/17 08:30

ますますわからなくなった

＞画像が一部（X軸方向に３行分くらい）しか画面に現れません。
　x方向だと、行ではなく列・・・何文字？？
　行と言うと、y軸方向ですが？

ページの背景ならbodyに、段落の背景ならpに対して設定します。

no-repeatなら、繰り返されませんから、画像サイズ以上にはなりません。

この回答への補足

度々に渡り申し訳ありません。
先に書いた事は忘れてください。
以下の内容にお答えいただければ幸いです。

ある画像を壁紙にする事を意図して、以下の記述をしました。

以下html

<!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>

以下css

@charset "UTF-8";
/* CSS Document */

p.sample5{background-image: url("akete.gif");
bakcground-repeat:no-repeat;
background-attachment:fixed;
}

これでは何も現れませんでした。

ご回答いただきました「ページの背景ならbodyに」
とは
<body　class="samole5">
と解釈させていただいてよろしいのでしょうか。
もしくわ、他に記述の必要があるのでしょうか？
よろしくお願いします。

補足日時：2012/02/17 15:47

通報する

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2012/02/17 19:19

ページ自体の背景なら、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/h … )
が参考になるでしょう。

★セレクタの書き方は、出来るだけ参考になるように色々なタイプを織り交ぜてあります。

{HTML]
※HTML4.01strictで書いてあります。
※タブは＿に、:は：(全角)、半角スペース２個は全角スペースに置換してあります。
　この掲示板のシステムへの対策です。元に戻してください。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
(例)div.section pre クラスセレクタと子孫セレクタ
(例)p+p 隣接(兄弟)セレクタ
(例)p:last-child 擬似要素
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
　(オプションで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>

この回答への補足

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

<style type="text/css">
body {background-image:url('paper.gif');}
</style>

補足日時：2012/02/17 22:49

通報する

- 0
- 件

通報する

No.4ベストアンサー

回答者： ORUKA1951
回答日時：2012/02/17 23:22

　これは、あくまでサンプルであるためHTML内に書いていますが、基本はスタイルシートは外部に置くものです。

特にXHTMLは外部に置くのが基本です。置くべきです。
　その場合は、
<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/standard.css">
　のように指定します。

外部スタイルシートには、
外部スタイルシート ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　など・・・