- ベストアンサー
背景の画像を左上に一つ固定する方法
いつもお世話になっております。 web初心者です。環境はMac OS 9.2、Dreamweaver 4です。 タイトルの通り、背景の画像を左上に一つ固定する方法をどなたか教えてください。 ●左上に背景画像として各ページごと違う画像を入れたい。（大きさは同じ） ●テーブルやセルで画像を入れることはNG（背景画像なので） ●リピートはしたくない。 下の方法をネットで得たのですが、 できればCSSを使わずに作成したいのですが。 また、下の方法であればURLは相対パスでもできるのでしょうか。 <style type="text/css"> <!-- body{ background:url(画像のURLを記入) no-repeat fixed; } --> よろしくお願いします。 </style>
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
>多分、私がやりたいことをするのにはその方法が有効のようです。一つのCSSで全ページ分設定ができてしまう、という解釈で良いのでしょうか？ページごとに、背景画像を変えたいのです。（サイズは同じですが。）例えばTOP、NEWS、PROFILEにそれぞれimage1、image2、image3を入れたい場合のCSSとそれぞれのページのhtmlはどうなるのでしょうか？教えていただけますか？よろしくお願いします。。。ちなみにページ数は７ページです。 ●ＣＳＳは、 body { background-color: #FFFFFF background-repeat:no-repeat; background-position: left top; background-attachment: fixed; } #top-image { background-image:url(../image/img001.gif); } #news-image { background-image:url(../image/img001.gif); } #profile-image { background-image:url(../image/img001.gif); } ●ＨＴＭＬは、それぞれ <body id="top-image"> <body id="news-image"> <body id="profile-image"> のようになります。 私も以前は、Dreamweaver4を使ってましたが、実際のブラウザ（IE等）と表示が微妙に異なる。HTMLやCSSの記述が自分が思っている通りにならない。テンプレートや、複数の人とネットワークを介してホームページを作成するなどの機能を利用しない。等の要因から、利用しなくなった経緯があります。 今ではフリーのテキスト系のHTMLエディタを使用するようになりました。 HTMLやCSSがある程度理解できれば、他のホームページのソースも参考にできるようになるし、もっと応用を利かせることでCSSの利用価値は上がると思いますので、がんばってホームページを作成してください。(^_^)。 また、分からなければ質問してください。
その他の回答 (5)
- hiro_izushi
- ベストアンサー率40% (72/178)
CSSファイルは、html毎に作成するのではなく、1つ（とは言いませんが、少ない数）を、複数のhtmlで共有する使い方が賢い方法と思います。 そうすると、 body { background-color: #ffffff; margin: 0; } h1 { font-family: "MS UI Gothic",Osaka,sans-serif; font-size: 140%; color: #222222; } のような基本スタイルは、複数のページ(html)でも共通になると考えられるので、タグに対して設定します。 一方、サブコンテンツ（テーマ）毎に背景を変えたいなど、ページ毎にわずかな変化を持たせたい場合は、これだとうまくできないので、idを使用します。 ●ＣＳＳは、 #back-image_favrite { background-image:url(../image/img001.gif); } #back-image_profile { background-image:url(../image/img002.gif); } ●ＨＴＭＬは、 <body id="back-image_favrite"> のようになります。 idは基本的に、1ページに1つしか設定できない（複数のidを1ページで、各1つだけ設定するのは可能！）ので、ページ中で何回か設定する要素にはclassを使います。 ●ＣＳＳは、 .block_href { width: 49%; margin: 0; padding: 2px; float: left; } ●ＨＴＭＬは、 <div class="block_href"> <h1>目次</h1> <div /> <div class="block_href"> <h1>お知らせ</h1> <div /> こんな感じです。更に、 .block_href h1 { font-size: 80%; } のように、クラス属性の中の特定のタグにだけ、スタイルを設定することもできます。 長い内容になりましたが、説明はかなり端折りましたから、分かりにくいところも多分にあると思います。また、分からないところがあれば、ご質問ください(^_^)
- うぃず（@Wizard_Zero）
- ベストアンサー率69% (344/495)
#1 #2 Wizard_Zeroです。 スタイルシートの指定方法は３つあり、適用される優先順位が違います。優先順位が高い方から書きます。 １．タグにSTYLE属性で記述 <BODY STYLE="xxxx : xxxx"> ２．<HEAD>内に<STYLE>で記述 <HEAD> <STYLE TYPE="TEXT/CSS"> .body { xxxx : xxxx } </STYLE> </HEAD> ３．外部ファイル(.css)で記述 <LINK REL="STYLESHEET" HREF="xxx.css"> つまり、２の方法でBODYに「background : blue」を指定していても、１の方法で「background : white」にしていれば、背景色は白になります。 利用方法の違いとしては... １の場合、ピンポイントでスタイル適用 ２の場合、ページ全体で共通のスタイルを適用 ３の場合、サイト全体でスタイルを共有可能 といったところでしょうか。上手に使い分ければ、スタイルシートの指定がとても楽になりますよ。
お礼
度々の回答ありがとうございます。なるほど。とてもわかりやすいです。参考にします。ありがとうございます。
- hiro_izushi
- ベストアンサー率40% (72/178)
例えば、ファイル（□）とフォルダ（■）下のような構成の場合、 ■<root> □index.html ■css □style.css ■image □img001.gif index.htmlは、次のような記述になります。style.cssファイルは、index.htmlから見た相対パスになります。 <html> <head> <link rel="stylesheet" charset="Shift_JIS" media="all" href="css/style.css" type="text/css" /> </head> <body class="aaa"> </body> </html> style.cssは、次のような記述になります。img001.gifファイルは、style.cssから見た相対パスになります。 .aaa { background-color: #FFFFFF background-image:url(../image/img001.gif); background-repeat:no-repeat; background-position: left top; background-attachment: fixed; } この例、スタイルをclassで指定してますが、直接 body 要素にスタイルを指定しても良いです。その場合 body { background-color: #FFFFFF background-image:url(../image/img001.gif); background-repeat:no-repeat; background-position: left top; background-attachment: fixed; } となります。
補足
すごくわかりやすい回答ありがとうございます。そうです、ファイルとフォルダの関係はまさにそうです。ちなみに >この例、スタイルをclassで指定してますが、直接body 要素にスタイルを指定しても良いです。 とありますが、classで指定するのと、bodyに直接指定するのとでは、何か差が出るのでしょうか。見たところ、bodyに直接指定する方が私にはやりやすそうですが。お時間ありましたら教えてください。
- うぃず（@Wizard_Zero）
- ベストアンサー率69% (344/495)
#1 Wizard_Zeroです。 可能です。 簡単に言えば、HTMLのhrefやsrcの使い方と同じです。 xxx.jpg で同じフォルダ image/xxx.jpg でimageフォルダ ../xxx.jpg でひとつ上のフォルダ /xxx.jpg でルートフォルダ
お礼
度々ありがとうございます。近日中に作業にはいるのでまたわからないことがあったらご指導下さい。
- うぃず（@Wizard_Zero）
- ベストアンサー率69% (344/495)
Wizard_Zeroと申します。 スタイルシートを使うしかないと思います。 相対パスも可能です。この場合、HTMLファイルと同じ場所からの参照になります。
補足
早速の回答ありがとうございます。 >相対パスも可能です。この場合、HTMLファイルと同じ場所からの参照になります。 ということは同じ階層にないといけないと言うことですか？例えばimageというフォルダに一括して画像を入れてそのフォルダと同じ階層にHTMLファイルをおいて、imageフォルダから画像を呼び出すことは可能でしょうか？
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
補足
度々ありがとうございます。 >一方、サブコンテンツ（テーマ）毎に背景を変えたいなど、ページ毎にわずかな変化を持たせたい場合は、これだとうまくできないので、idを使用します。 多分、私がやりたいことをするのにはその方法が有効のようです。一つのCSSで全ページ分設定ができてしまう、という解釈で良いのでしょうか？ページごとに、背景画像を変えたいのです。（サイズは同じですが。）例えばTOP、NEWS、PROFILEにそれぞれimage1、image2、image3を入れたい場合のCSSとそれぞれのページのhtmlはどうなるのでしょうか？教えていただけますか？よろしくお願いします。。。ちなみにページ数は７ページです。