• ベストアンサー

CSS内で指定している画像の呼び出し範囲

テーブルレイアウトからCSSへ移行したいと思っています。 CSSについての知識は、ほとんどなく 慣れるために、とりあえずテンプレートをいじって テストサイトを作成した程度です。 それで教えて頂きたいのですが 1つの外部CSSファイルで、全てのページに適用した場合 閲覧ページで使用していない、(CSS内では指定している)画像ファイルも読み込まれてしまうのですか? HPビルダーで作成していて、ページの容量を調べる事が出来るのですが CSSで指定した画像を全て読み込んだ状態で、トータルサイズが出ます。 一部のページに大きな画像を使った為、ページの容量が200kbを超えてしまったので心配です。 基本が全く分からず、お恥ずかしいのですが よろしくお願いいたします。

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

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.3

根拠は無くて、簡単に作ったサンプルで実際に試した結果では、 使用されない画像が読み込まれる事はありませんでした。(ブラウザ-サーバ間の通信の様子をモニタして確認しました。) CSSファイルを読んだ後、内容の解析、ページの構築を行うので、その過程で適用されないスタイルでの使用画像は読み込まなれないのではないかと思います。 (HPビルダーの容量の算出値が違う件についてはメーカー問い合わせてみては? あなたの質問によって製品が改善されるかもしれません。)

fesmy2
質問者

お礼

お礼が遅くなり申し訳ありません。 わざわざサンプルまで作っていただき、ありがとうございます。 そのようなスキルが無いので、とても助かりました。 先程ふと思いついたので、私も少しテストをしてみました。 ブラウザの一時ファイルフォルダの中身を削除して、テストサイトを閲覧してみました。 そのページで使われているファイルしか、読み込んでいないようです。 steel_grayさんと同じ結果になったので、自分も読み込まれないのかなと思います。 でも1つのCSSに全てを記述してしまうと、重くなってしまうので 他の方のアドバイスの通り、画像を多用するページのCSSは また別のCSSファイルを作って呼び出そうと思います。 ビルダーはバージョンが低いので、今は違うのかもしれませんが 他に気になっていることもあるので、これを機会に問い合わせてみようと思います。 今回はありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

  • vista2446
  • ベストアンサー率46% (131/279)
回答No.2

cssでタグやclass、idで画像を表示させる記述をすればページは読み込みます。だから、きめ細かくclassで表現してみては?とアドバイスをさせていただいたつもりだったのですが… 言葉足らずだったようで、すみません。

fesmy2
質問者

お礼

お礼が遅くなり申し訳ありません。 他の回答者様とお答えが違ったので、悩んでしまいましたが 統一デザインなので、メインCSSは普通に作り 大きな画像を呼び出すような、特別なデザインページの場合は メインCSSと一緒に、デザインCSSを呼び出そうと思います。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  • vista2446
  • ベストアンサー率46% (131/279)
回答No.1

せっかくのcssですからidやclassを使って、それぞれのページをきめ細かく表現してみてはどうですか?

fesmy2
質問者

補足

アドバイスありがとうございます。 勉強中でまだサイトを公開するつもりはありませんので 公開までには、きめ細やかにする予定ですが 知りたいのはCSSで記述した画像を表示させないページでも 画像を読み込んでしまうのかどうかなのです。 よろしければ、またご教授お願いいたします。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • CSSでのレイアウトについて

    私は現在サイトを開設しているのですが、一から独学でHTMLを学んで分からない事があれば調べて作成してきました。 使用しているのはHTML、CSS、JavaSceript、SSIです。 見た目は自信あります。ただある程度知識がある方がソースを見たら”全然分かってないだろうな”というのがすぐにバレるぐらい酷いです。 調べて分かった事は積極的に取り入れてきました。 以前はHTMLのみで作成していたんですが、外部ファイルを使いJavaScriptやCSSをまとめています。以前に比べだいぶ簡潔なソースになり、汎用性も上がったと自負しています。 ただレイアウトは依然tableレイアウトです。 その為レイアウトをいじろうと思うと全てのファイルを修正しなければなりません。ファイル数は100を超えてます。 そこで詳しい方にお聞きしたいのですが、 ・tableレイアウトからCSSでのレイアウトに移行するのは難しい事ですか? レイアウトって聞くだけで避けてきたので、いざ移行してみて今まで作成してきたデザインが崩れるのではないかと不安になってきます。 ・下記のサイトのようなレイアウトを最近結構見かけます。 http://www.yamaga-fc.com/ 私もいづれこのようなレイアウトにしたいのですが、これは何というレイアウトでしょうか? 検索してもこのようなレイアウトの作り方が掲載されてるサイトが見つからなくて困ってます。 ヘッダーとフッターが100%。真ん中が80%ぐらいのレイアウト。 ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • テンプレートファイルでCSSファイルを読み込む指定をしましたが、うまく

    テンプレートファイルでCSSファイルを読み込む指定をしましたが、うまく読みこめていないようで、 CSSファイルで指定した項目を意図した位置に表示することができません。 SMARTYを使ってます。テンプレートファイルにHTMLを記述しています。 環境は、WINDOWS VISTAにApacheを入れて動かしています。 このテンプレートファイル(reg.tpl)の中でのCSSファイルの読み込みやCLASSの指定では次のように書いてます。 (1)reg.tplの内容です。 <HTML> <HEAD> <TITLE>{$title}</TITLE> {$form.javascript} <link rel="stylesheet" href="layout.css" type="text/css" />  →ここでCSSファイルの読み込み指定 </HEAD> <BODY bgcolor="#FFFFFF"> <CENTER> <HR size="1" noshade> <B>{$title}</B> <HR size="1" noshade> <DIV id="l1" CLASS="userid"> →ここでCSSファイルで設定したものを指定 <FONT size="2">{$form.user_id.label}:</FONT> {if $form.user_id.error } <font size="2">{$form.user_id.error}</font><BR> {/if} {$form.user_id.html} </DIV> ~中略 (2)layout.cssの内容です。 .userid { position : absolute; top: 545px; left: 150px; width: 5%; border:0px solid #FFB6C1; } (3)ファイルの設置場所は次の通りです。 ┳templates━reg.tpl ______┗layout.css (4)layout.cssをサーバーにアップロードして、上記(1)のreg.tplの<link …の指定部分を次のように絶対パスに変更すると layout.cssが正常に読み込めます。(userid項目がcssファイルに指定した位置に表示されます) <link rel="stylesheet" href="http://www.****.com/layout.css" type="text/css" /> (5)<link …で(1)のように指定した場合、layout.cssとreg.tplが同じフォルダにあれば実行しても cssファイルが読み込めると認識していたのですが読み込めません。 index.htmlファイルとcssファイルを同じフォルダにおいて、index.htmlの中に(1)の<link …のようにファイル名のみの記述をするとうまく読み込めます。 テンプレートファイルの中で使う項目にCSSファイルを利用して自由なレイアウトを実現したいのですが、絶対パスでCSSファイルを指定する方法以外にないのでしょうか? 分かる方、ご教授下さい。

    • ベストアンサー
    • HTML
  • (DW)CSSテンプレートを使用してCSSでの編集可能流域を作れますか?

    宜しくお願いします。 DW MXで制作しています。 CSSを研究中です。 完全にCSSでレイアウトしたテンプレートを使用して、 編集可能領域を作り、 HTMLファイルにそのテンプレートを適用して、 さらにその編集可能領域にCSSでレイアウトしていくのは、 無理があるのでしょうか? といいますか、 CSSで完全にレイアウトしたら、 テンプレート化せずに普通にページを増やせばいいんですよね? まだ、基本がわかっていないのでよろしくお願いします。

    • 締切済み
    • CSS
  • ホームページビルダーcssテンプレート編集について

    ・ホームページビルダー17でのccsテンプレートを利用しての編集について教えてください。 当方HP編集ど素人です。   ビルダー17に入っているcssテンプレートをほぼそのまま利用してサイトを作成しています。 テキスト等はテンプレートのまま文書を打ちかえて替えられたのですが、画像を追加してテンプレートにない位置に画像を入れたのですが、転送してみると画像が表示されません。 追加で画像を増やした分や、css素材のレイアウトコンテナーを利用して画像を挿入した部分などがダメです。ビルダー内で、プレビューするとしっかり表示されているのに、転送すると表示されません。 画像のファイル名は半角英数小文字にしていますがダメです。画像は転送後の状態です。 どなたか詳しい方で素人でもわかるように教えていただける方いらっしゃいましたら何卒ご回答よろしくお願いいたします。

  • cssが長くなってしまう。他に良い方法は?

    サイトのレイアウトをCSSで行なっているのですが、例えばノーマルなテキストの色・スタイル、リンクの色などの設定がぺージ(コンテンツ)ごとに違います。なので「pタグ内のスタイルはこれ」と絶対的に定めることが出来ません。 全ページでテンプレートを使用していて、それが既に外部CSSを1つ呼び出しています。コンテンツごとにCSSを用意するのがスマートに思えますが、そうすると外部CSSを複数指定することになります。どこかでこの方法は推奨されないと聞いたんですが、本当ですか? もしそうである場合、その1つのCSSに全ページ分のスタイルを記述することになりますが、それもまたCSSのソースがバカでかくなってしまいます。 これはどうするべきでしょうか?

  • ホームページビルダーでの外部CSS

    ホームページ作成しています。 ど素人なりに頑張っていますが、内容が増えていくにつれ、だんだん動作が遅くなってきました。 そこで、最近「外部にスタイルシートを作る」ということを学びましたが、「div」あたりになると、さっぱり理解できず、結局「body」や「A」などのCSSを外部にするという段階にとどまっています。 もうすでに、レイアウトやデザインは決まっているので、今ある「manu」や「head」などを外部CSSに固定すれば、あとは記事を書くだけでページが作れると思うのですが…。 CSSのサイトはいろいろ拝見したのですが、レイアウトの段階になると、途中でわからなくなってしまいます。 ホームページビルダー付属のスタイルシートでは、デザインが合いません。そこで、素人にもわかりやすい、レイアウト枠としての外部CSS作成法をご指導ください。また、そのようなフリースタイルシートのソースなどがあればご紹介ください。 とにかく、外部CSSで、レイアウトを固定したいのです。 よろしくお願いいたします。

  • CSSで作ったテンプレートがのレイアウトが崩れます

    はじめまして。 今、初心ながらにdreamweaverでサイトを作っています。 CSSスタイルを使用し、テンプレートを作成して作ってるのですが、サイトはよくある左にサイドのバーがあって、上にタイトルがあるようなレイアウトなんです。 そこでサイドに画像スペースはheightをautoにしているんですが、ある一定以上高さを大きくすると、画像よりしたのスペースが画像の右側に引っかかるように回り込んでしまいます。 しかし、実際にテンプーレートを適用したファイルを見てみると、レイアウトは崩れていません。 原因はおそらくですが、メインの右部分のコンテンツがテンプレートだとCSSスタイルを指定しているだけで、高さがないためだと思うのですが、これはこのままでも問題ないのでしょうか? 初心な質問かとは思いますがどうかよろしくお願いします。

    • ベストアンサー
    • HTML
  • ホームページビルダーV9でCSSテンプレートを開くとレイアウトが崩れる

    インターネット上で見かけるCSS無料テンプレートを使ってホームページをつくろうとしています ホームページビルダーV9でファイルを開きページ編集タブで見ると画面が崩れています 黄色の改行マークのような表示も出ます プレビュータブをクリックすると正常に戻ります ●ホームページビルダーV9ではCSSテンプレートが使えないのでしょうか ●また、設定を直すなどの操作が必要なのでしょうか テーブルでレイアウトしてあるタイプのテンプレートはそんなことはないようです しかし、今回はCSSをマスターしたいので、CSSのみのホームページにこだわっています よろしくお願いします

  • CSSで背景画像指定

    どなたかアドバイスお願いします。 CSSを使って<p></p>の中に背景画像を指定した場合<p></p>の中は背景指定のみでタグの中は内容が何も無い状態です。 テーブルを使ってのレイアウトの場合spacer.gifなどを使えば解決できるのですが。 CSSのみでのレイアウトの場合はHTMLタグの中の要素が空になってしまう場合 は、どのように対処すればよろしいのでしょうか?

    • ベストアンサー
    • CSS
  • lightbox風なもののCSSの使い方

    http://www.e-magine.ro/web-dev-and-design/36/moodalbox/ ↑のサイトのlightbox風の機能を使って、HTMLファイルをページ遷移なしで読み込もうとしています。読み込むページと読み込まれるページは違うフォルダにあり、それぞれに違うCSSを適用しているのですが、どうやっても読み込まれるページで画像が取得できません。外部CSS内のbackgroundやHTML内のimgも表示されません。その他の配置に関するCSSはちゃんと適用されているので、なぜ画像だけが取得できないのかが理解できません。 読み込まれるページのCSSを読み込むページのheadで読み込んでみたり、読み込まれるページのHTMLに直接CSSを書いてみたりもしましたが、変化がありませんでした。CSSはおろか画像やリンクなどすべてを全ページで相対指定しているので、そういうところに差異が出たのかなと疑っています。 そこで、こういう風なツールを使った時、読み込まれるCSSは読み込むページと読み込まれるページのどちらで読み込むべきなんでしょうか。また、ページ遷移していない以上、読みこまれるページの相対指定も読み込むページからの指定とするべきなんでしょうか。よろしくお願いします。