外部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>
以上をよろしくお願いします。
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-html4 … )
など・・・
ありがとうございます。丁寧なご解説誠にありがとうございました。
いろいろと織り交ぜていただいて大変勉強になります。
またよろしくお願い致します。
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/h … )
が参考になるでしょう。
★セレクタの書き方は、出来るだけ参考になるように色々なタイプを織り交ぜてあります。
{HTML]
※HTML4.01strictで書いてあります。
※タブは_に、:は:(全角)、半角スペース2個は全角スペースに置換してあります。
この掲示板のシステムへの対策です。元に戻してください。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
(例)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">
<!--
html,body{margin:0;padding:0;}
body{background:url("./images/1000.png") no-repeat gray;}
p{margin:0 1em;line-height:1.6em;text-indent:1em;}
div.section pre{padding:1em;background-color:white;white-space:pre-wrap;width:80%;margin:0 auto;}
p+p{color:red;}
p+p+p{color:green;}
p+p+p{color:black;}
p+p+p+p{color:blue;}
div.section blockquote{border-style:dotted;}
div.section blockquote p:last-child{text-align:right;}
-->
_</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>
この回答への補足
ご丁寧なご指導本当にありがとうございます。
できましたら最後に1つだけ欲張らせてください。
自分の方で以下の記述をhead要素内に記述したところ、背景設定ができました。
これはHTMLに直接書きこんでいるものです。現在自分が疑問に思っている事は
これを外部cssに書き込んで、それを通してhtmlに読み込ませる事はできないの
かという事です。複数の且つ同じスタイル(レイアウトが)でHTMLを作る場合、
背景も外部で設定した方が背景画像の修正、変更時には便利ではないのかと思い
ました。もしかすると、また思い違いをしながらを聞いているのかもしれません
が、お心当たりございましたら是非お願い致します。
<style type="text/css">
body {background-image:url('paper.gif');}
</style>
No.2
- 回答日時:
ますますわからなくなった
>画像が一部(X軸方向に3行分くらい)しか画面に現れません。
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">
と解釈させていただいてよろしいのでしょうか。
もしくわ、他に記述の必要があるのでしょうか?
よろしくお願いします。
No.1
- 回答日時:
されたいことがよくわからないのですが
>壁紙にある画像を一枚壁紙にしようと思い、
壁紙とは背景のことで、当然見えるのは一枚としてなのですが???
「一枚の画像を壁紙にしたいと」言うことでしょうか?」
「bodyではなくpに指定してあるのはなぜですか?」
・・・段落の背景にしたいということですか・・なら「一枚」と矛盾します。
>なぜかすべての画像の範囲が収まらず、一部Y軸方向に画像が現れるだけです。
段落は狭いので・・画像ははみ出ますが
段落が長くなれば下まで表示されるのでは
この回答への補足
ご回答ありがとうございます。補足させていただきます。
ある一枚の画像を(リピートさせずに)背景に設定しようと思いましたが、画像が一部(X軸方向に3行分くらい)しか画面に現れません。
おっしゃられております。
「bodyではなくpに指定してあるのはなぜですか?」
・・・段落の背景にしたいということですか・・なら「一枚」と矛盾します。
とは、上記のもので言うと、
<p class="sample5">あれ?画像欠けてない?</p>
を消して
<body class="samole5">
とさせるという事でしょうか?
よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
先日ウェブデザイン技能検定三...
-
X の仕様変更? 埋め込みフレー...
-
htmlの文字が縦書きになる
-
指定した演算を実施の結果を表...
-
指定した演算を実施の結果を表...
-
CSSのホバーエフェクト
-
htmltとcssのコードで
-
テーブルの行を折りたたみたい...
-
htmlのデータをwebページみたい...
-
トリミングで表示した画像をク...
-
css初心者 フレックスボックス...
-
角丸画像の背景色を透明にした...
-
別サイトのHTML内にある情報を...
-
コードを書いて下さい( ; ; )...
-
CSSについて教えてください。 ...
-
メモ帳の段落の揃え方
-
htmlソース編集で、各タグを何...
-
<!DOCTYPE html>あってますか?...
-
<!DOCTYPE html>あってますか?...
-
、URL化させるにはどうしたらい...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルのセルデータを自動改...
-
goo は、放置?
-
htmlソース文の 各行 改行位置...
-
1つの「ホームページビルダー2...
-
HPレイアウトが同じページのヘ...
-
CSS、Bootstrapについて contai...
-
CSSについて教えてください。 ...
-
静止画画像をクリックすると音...
-
、URL化させるにはどうしたらい...
-
テーブルの行を折りたたみたい...
-
css初心者 フレックスボックス...
-
WEBページを強制的に横画面で見...
-
Webページのリンクの貼り方を教...
-
Duolingo のソースコードの名前...
-
メモ帳の段落の揃え方
-
スマホ(android)のタッチパネ...
-
コードを書いて下さい( ; ; )...
-
HTMLで画像をポップアップで表...
-
角丸画像の背景色を透明にした...
おすすめ情報