独学で学ぶWebスキル/テクニックコミュの何故でしょう・・・？

初めてトピ立てます。

最近になって趣味でＨＰ作成を始めたのですが、
本を参考にタグを打ち込んでいます。

HTMLすらロクに理解していない超初心者なのですが、
逆に全く知識が無いのであれば最初からXHTMLベースで
記述すれば余計な知識が入らなくて良いのかな？
と思い、挑戦している次第です。

参考にしている書籍は↓の書籍です。

　発行所　　　ソーテック社
　タイトル　　HTML　&　スタイルシート　レイアウトブック
　　　　　　　改訂版
　著者　　　　外間かおり

実際にどこでつまずいているかと言いますと、
body要素やcontentsの背景に画像を表示するために、
CSSに例えば

body {
background-image: url(img/bkimg1.jpg);
}

と書き込んでも反映されません。
今のところ仕方なく画像ではなくbackground-colorで色を
指定して誤魔化しているのですが・・・。

更にタイトルにh1を適用し、バックに画像を配して
表示しようと思い、CSSに

h1 {
text-align: right;
background-image: url(img/toplogo.jpg);
height: 155px;
letter-spacing: 5px;
padding-right: 10px;
margin-bottom: 40px;
}

HTMLテキスト側に

<h1><a href="･･･">サイトタイトル</a></h1>

と記入しても、画像が反映されずh1が表示されるだけ。

こちらは仕方なくHTMLテキスト側に

<h1>
<a href="index.html">
<img src="img/h1img.jpg" padding-right="2px"border="none"></a>
</h1>

と直接書き込んで誤魔化しています。

上記全てをcontents内に表示したかったので、
contentsのwidthは700pxに設定しているのですが、
h1imgもtoplogoも700pxに合わせてイラレで作成しました。

画像やカラー、文章以外は基本的に本の通りに
打ち込んでいるので間違っては無いと思うのですが・・・。

色々なサイトを調べてみても、CSSでレイアウトをデザイン
する方法に関して分かりやすいサイトがありませんでした。

画像に問題があるのでしょうか？それとも基本的な部分で
何か勘違いをしているだけなのでしょうか？

上記の情報だけでは答えようが無いかも知れませんが、
もし何か少しでもアドバイスを頂けると助かります。

こんな入り口にも立っていない所でつまずいている超初心者ですが、
よろしくご指導願います。

コメント(10)

最初
全て
最新の40件

[1] mixiユーザー 04月15日 03:15

ＣＳＳを使った背景設定ですよね。

「'」が抜けているのが原因な気がします。

background-image: url('img/toplogo.jpg'); としてみてください。

[2] mixiユーザー 04月15日 09:37

＞うるめさん
早速のアドバイスありがとうございます！

早速試して見ました。
しかし、昨日と同じで表示は無しでした・・・。
(h1に指定した文字サイズや表示位置は反映されてます。)

うるめさんの言っておられる「」の中の記号って
「'」であってますよねぇ？？

使用したいロゴ画像にはイラレで作成時に
右下にフォントが埋め込んであるのですが、
それが関係してくる事などあるのでしょうか？
(h1の文字は右上に表示させるつもりです。)

CSSもベースとなるCSSで基本的な共通指定をして、
各ページごとの個別の細かい指定は、それぞれのページの
追加CSSで指定しています。

せっかくアドバイスを頂いたのに質問で返してしまって
申し訳ありません。

う～ん、何故でしょう・・・・。

[3] mixiユーザー 04月15日 09:57

もしかしてですが。
画像のURL、スタイルシートからどこの場所か合っていますか？
htmlからの場所になっていませんか？

[4] mixiユーザー 04月15日 10:25

＞凛々朱さん
ご指摘ありがとうございます。

現在製作中の為、もちろんローカルでデスクトップに
「ＨＰフォルダ」を
作成して、そこに全て保存しているのですが、

その中に
「index.html」「gallery.html」と言う名前で
テキストデータが２種類。

「img」「css」「sozai」と言う名前のフォルダが３種類。

その「img」の中に「toplogo.jpg」等の画像データを、
「CSS」の中に「base.css」「top.css」「page1.css」
と言う名前でCSSデータを３種類。

「sozai」の中に細かい画像データを

保存しています。

これに対する指定って

background-image: url(img/toplogo.jpg);

では間違っているのでしょうか？？
img/が必要無いとか？？
ちなみにこの画像はgallery.htmlに表示させたいと考えてます。

何度も質問で返してしまって申し訳ありません。

[5] mixiユーザー 04月15日 10:41

つまり、
htmlﾌｫﾙﾀﾞ
　└index.html
　└gallery.html
　└image
　　　└画像
　└css
　　　└ｽﾀｲﾙｼｰﾄ
のような階層ですよね。
そうしたら、ｽﾀｲﾙｼｰﾄからみて画像は一つ上の階層のimgﾌｫﾙﾀﾞの中なので、
URL('../img/～.jpg')
になるはず。

[7] mixiユーザー 04月15日 11:06

>あずけんさん

試してみましたが，問題なく表示されています．

http://osugi.jounin.jp/test/test.html

※cssの記述は，あずけんさん掲示のものをコピーし，画像の
　パスのみ変えています

5: 凛々朱さんご指摘の通り，今一度画像のパスをご確認下さい．

[8] mixiユーザー 04月15日 11:12

＞凛々朱さん
できた！！出来ました！！

なるほど指定する階層が間違っていたとは・・・orz

ありがとうございました！
いや～嬉しいです！！

＞うるめさん
細かな部分のご指摘ありがとうございました！
独学だとなかなか気付く事の出来ない部分なので
非常に勉強になりました！

ありがとうございました！！

たぶんこれからも問題が山積みで待っているかと思われますので、
その時は改めて質問させて頂きたいと思います。

これからも勉強して少しでも良いサイトを作りたいと思います。

本当に助かりました！！

[9] mixiユーザー 04月15日 11:17

＞おすぎさん
先ほど修正してみたのですが、確かに表示されました＾＾；
根本的な部分の理解が足りていないようでお恥ずかしい限りです。

ありがとうございました！
また質問させて頂く事もあるかと思いますので
その際はよろしくお願い致します！！

[10] mixiユーザー 04月15日 13:59

>あずけんさん
ちゃんと表示できたみたいで良かったですね。
ここって結構多くの人が間違いやすいところな気がします（私も含めて）。

サイト製作がんばってくださいね～。

ログインすると、みんなのコメントがもっと見れるよ