外部ＣＳＳで画像の挿入は出来ますか？

質問

外部ＣＳＳで、背景画像ではなく、「画像」の挿入は出来ますか？

<IMG SRC="●●">をＣＳＳで。

もし出来ましたら、外部ＣＳＳとHTML両方の記述を教えていただけると助かりますm(_ _)m

回答No.6

tracer · ベストアンサー

ちょっと全体の構成がよく理解できていませんが、CSSの読み込み前に既に端末の特定ができていて、端末毎のCSSを読み込めるのであれば、以下のようにすればCSSだけで端末ごとの画像を表示することはできると思います。

---------HTML--------------
<img id="mobile" class="logo" src="mobile.jpg" alt="モバイル用画像" />
<img id="pc" class="logo" src="mobile.jpg" alt="PC用画像" />

---------CSS--------------
#共通CSS
img.logo{
　display:none;
}
#モバイル用CSS
img#mobile{
　display:inline;
}
#PC用CSS
img#pc{
　display:inline;
}

お礼

ご回答ありがとうございます！なるほど、CSSで画像表示が出来ないなら画像を消すという方向で考えれば
良かったのですね。教えていただいた記述通りにやってみて成功しました！
（記述の一部、HTMLのPC用画像のsrc=は"pc.jpg"ですね）

「CSSで(背景画像ではない)画像表示は出来るのか？」
「出来ないならば、他の方法はないのか？」この２点が知りたかったので助かりました。
本当にありがとうございました(ToT)

回答No.5

tracer

画像の挿入以前の話になりますが、モバイルとPCを見分ける方法は既に実装されていますか？
端末を見分ける方法を既にお持ちであれば、その延長でCSSを用いて画像を切り替えることは可能です。
逆に言うと、HTML/CSSのみで端末を見極めることができません。
一般的には、JavaScriptやPHPなどでアクセスされた端末を処理するかと思います。
参考までに。

お礼

ご回答ありがとうございます。モバイルとパソコン、各外部CSSファイルを作りそれぞれ別のスタイルを読み込ませています。しかしやはりCSSでは背景画像だけしか表示できないようですね。

回答No.4

ORUKA1951

＞単純にモバイルとパソコン、それぞれ別の画像(トップロゴ)を表示させたかっただけなのですが、

　それでしたら、そもそも画像をHTMLに書くのは厳密に言うと誤りかもしれません。
「テキストを画像に置き換えて表現する。」と具体的に指摘されています。
14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )より

その場合、HTMLはいくつかありますが、そのロゴがドキュメント内のどの構成要素に該当するかによって変わります。
　たとえば、トップバナー画像でしたら
<h1><img src="./images/Logo.gif" width="640" height="180" alt="何たらのページ"></h1>
　にするとかでしょう。通常の携帯やi-phoneのブラウザでしたら、このままでも画像は縮小して表示されるはずです。

　また、携帯電話のようにディスプレイが小さく帯域の狭い端末を優先するなら
<h1><span>何たらのページ</span></h1>
　としたり
<h1><span>何たらのページ</span><img src="./images/Logo.gif" width="240" height="40" alt="何たらのページ"></h1>
　とかでも良いでしょう。

★初心者との事ですが、最初の一歩を誤った方向に踏み出す と、先で道を間違えたと気がついたとき、大変な苦労をすることになります。

　HTMLは、何であるかをまず学んでください。
2.2 HTMLとは何か? ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2 )

　ワープロやDTP( http://ja.wikipedia.org/wiki/DTP )とまったく異なるものです。HTMLはどのように表示するかではなく、文書がどのような要素(タグで囲まれたエレメント)で構成されているかをマークアップするためのものです。

　それが出来た上で、それをどのように見せるかをスタイルシートで記述します。(スタイルシートは簡単なものはブラウザ自体が持っていますけど、それを上書きしていくと考えると良い)

＞単純にモバイルとパソコン、それぞれ別の画像(トップロゴ)を表示させたかっただけなのですが、
と言われても、私にも誰にもHTMLは解らないのです。なぜなら、そのロゴがその文書でどのような要素にあたるのかは、著者であるあなたでないとわからないのです。そのため、繰り返しHTMLを教えてといっている。

　いずれにしても、最初は意味不明でも、
HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
　には目を通しましょう。特に、[2.HTML 4の概説][14 スタイルシート]あたりは・・

　HTMLさえきちんと書ける様になれば、「端末によって画像を変えたい」「ウィンドウ幅が小さいと１カラムで」「ウィンドウが大きいと３カラムで」「ナビゲーションはプルダウンメニューで」「いや、左側に固定して」と、あなたのお好きなようにデザインできます。
　逆にHTMLがないと、アドバイスしようにも出来ない。

補足

ありがとうございます。難しそうですがurl見てみます。
「どのような要素にあたるか」とはどういう意味なのかちょっとわからなかったのですが、
トップバナー画像、とかで良いのでしょうか。

「テキストを画像に置き換えて表現する」のはたしかに誤りかもしれませんが、
モバイルとパソコン、それぞれ別の画像を表示させる方法があるのか？知りたいです。

回答No.3

ORUKA1951

＞モバイルとパソコン共通のページで、各外部CSSファイルを作って

　それは解りますが、肝心なことはそれがそのHTMLドキュメントにおいて、表示されるべき画像か、そうでないかです。「HTMLを教えてください」とはそういう意味です。

たとえば、アルバムのようなページで画像自体が目的である場合HTMLは
<ul class="album">
＿<li class="start">出発
＿＿<p><img src="./photo/start_s.jpg" alt="キャンプ用品を満載した車" width="240" height="180"></p>
＿＿<ul>
＿＿＿<li class="comment">予定より10分遅れていよいよ出発</li>
＿＿＿<li class="time">2011/08/14</li>
＿＿</ul>
＿</li>
＿<li class="inter">出発
＿＿<p><img src="./photo/inter_s.jpg" alt="インターチェンジを通過、意外と車が少ない" width="240" height="180"></p>
＿＿<ul>
＿＿＿<li class="comment">立川インターチェンジから高速へ</li>
＿＿＿<li class="time">2011/08/14</li>
＿＿</ul>
＿</li>
</ul>
　とかだったりします。モバイルでも負担にならないようサムネイル画像でHTMLを書きます。スタイルシートを読まないブラウザ、画像を読まないブラウザ、読み上げソフト、検索エンジンなど様々なユーザーエージェントで解釈できるように書きます。HTMLは文書構造を記述するものです。

　その上で、幅広のブラウザ用に
ul.album,ul.album li,ul.album ul{display:block;display:block;margin:0;padding:0;}
ul.album li p{
＿width:480px;
＿height:360px;
＿background-color:rgb(255,255,200);
}
ul.album li img{display:none;}
ul.album li.start p{background-image:url("./photo/start.jpg");}
ul.album li.inter p{background-image:url("./photo/inter.jpg");}

とすればよいです。HTMLがちゃんとしたものなら、どのようにもデザインできます。

お礼

回答ありがとうございます。
単純にモバイルとパソコン、それぞれ別の画像(トップロゴ)を表示させたかっただけなのですが、
ごめんなさい、当方初心者すぎるのでおっしゃる意味がよくわからないです…。

回答No.2

ORUKA1951

スタイルシートで画像を表示する理由を示してください。
HTMLとCSSの関係は理解されていると思いますが、HTMLは文書構造をマークアップするもので、CSSはそれをどのようにプレゼンテーションするかを指定するものです。
　たとえば、アルバムのように画像自体がその文書を構成する要素でしたら、CSSを利用できない、利用しないユーザーエージェント--検索エンジン、点字端末、読み上げブラウザ、テキストブラウザには代替テキストを(alt="")をきちんと書いたHTMLで指定すべきものです。
　一方、文書構造に関係しない画像--主に背景--はスタイルシートで指定すべきです。もちろん、ナビゲーションリンクリストのようなものを画像に置き換えてHTMLで記述するのは誤りです。

　それらを考慮したうえで、どういう文書構造のHTMLであるかをお示しください。

お礼

ご回答ありがとうございました。
モバイルとパソコン共通のページで、各外部CSSファイルを作って
それぞれ別な画像を表示させたかったのですが、
やはり背景画像ではない画像はCSSで出来ないようですね。

回答No.1

noname#138894

imgタグは画像を持つことが文書構造的に正しいので、
CSSで（背景ではない）画像をもたせることは出来ませんし、
やるべきではありません。

どのような用途で必要なのかの提示があれば、いい代替方法があるかもしれませんよ。

お礼

ご回答ありがとうございました。
やはり背景画像ではない画像はCSSで出来ないのですね。
知りたかったので助かりました。ありがとうございました。
ちなみに、用途はモバイルとパソコン共通のページで、各外部CSSファイルを作って
それぞれ別な画像を表示させたかったのです。