- ベストアンサー
画像の表示方法について
- HTMLのimgタグよりもCSSで画像を指定する方法について質問しています。
- 具体的な方法が書籍に載っていなかったため、div要素の背景画像に画像を指定する方法を考えました。
- ただし、div要素の中には何も入れなくても良いのかどうか分からないという疑問があります。
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
HTMLやCSSを身につけようとしたら、最初にすべきこと、常にすべきことは仕様書を参照することです。 どうもその一番根本が抜けているから、おかしな質問になります。 ＞画像に関してですが、HTMLの中にimgでマークアップするより、cssで画像を指定した ほうがいいとある書籍に書いてありました。 その書籍が間違っているか、あなたの理解が間違っている。 HTMLは、文章をその(意味的な)構造によってマークアップするものです。そしてCSSは、HTMLをさまざまなユーザーエージェントに対して、どのように表現するかを指定するものです。 2.2 HTMLとは何か? ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2 ) 14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) 画像自体がアルバムのようにHTMLで記述する文書の主役でしたら「背景にすることは、けっしてない」ですし、画像が単なる背景ならbackgroundにしています。 たとえば、そのHTMLが写真を公開するための物ではない場合、読み上げブラウザや点字端末、あるいは検索エンジンにとっては画像は無用なのですから背景にすべきですね。 ＞適当にテキストを入れて、それをcssのtext-indentで表示を消したらいいと言われました。 などは、最低の考え方で、時には検索エンジンから悪質なスパムと判断されて、一切検索エンジンに引っかからなくても苦情は言えない。 #photoという一意セレクタもおかしいですが、そこから、そのページは画像(写真)を紹介ないし、使用するページのようです。 だとしたら、きちんと<img>や<object>などでマークアップすべきです。 <div class="album"> <h2>富士山へいく</h2> <p>今日は5合目から・・・・<p> <p class="photo sub"><img alt="山小屋の写真"></p> <p>しばらくすると、天候が回復して視界が・・・・</p> <p class="photo main"><img alt="眼下に広がる眺望の写真"></p> <p>地図をみると・・・</p> <p class="fig main"><img alt="コースを右にとって進む"></p> <p>・・・</p> </div> とかね。・・スタイルシートなしで、あるいは画像を読み込まずに見ても【意味】が伝わるようにマークアップして、それからCSSでスクリーン用スタイルシートを書く。必要なら印刷用のCSSや、読み上げブラウザ用のCSSや、携帯電話用のCSSを追加する。 HTMLは見栄えをデザインするための物ではありません。ワープロやDTP ( http://ja.wikipedia.org/wiki/DTP )をつかって、PDFにでもしなさい。HTMLは、携帯端末だろうが、小さな画面だろうが、読み上げソフトだろうが、情報を伝えるものです。 それをスクリーン(あなたが今使っているビジュアルなディスプレイ)にどのように表示するかを指定するのがCSSです。それであってもCSSを外しても、何が書かれているか ・見出しはどこ？ ・これはリストだ ・これは画像だ ・これは表だ だけは、守らないとならない。 一度仕様書を、最初から最後まできちんと目を通してください。 今のまま、先に進んでもその道は「行きどまり」ですよ。
その他の回答 (6)
- metametamu
- ベストアンサー率51% (153/295)
＞現状では、というのは、今後よくなるかもしれないということでしょうか？ まず、list-itemでの画像置換に関してですが、この方法はcssを用いてもかなりシビアな調整が必要になり、html側にも変更が必要なので使い勝手も悪いです。なのでこれは現状では利用できても、今後新しいブラウザが普及するにつれ使われないテクニックになっていくと思います。 before擬似要素とcontentの組み合わせはhtml側への修正が必要ないのですが、IE7以下が対応していません。なので今後IE8以降とモダンブラウザがほとんどのシェアをしめれば利用可能になるテクニックの一つです。そういう意味では今後よくなります。 また、operaでは既に独自拡張としてbefore・after擬似要素を利用しないcontentでの置換が可能となっています。 ちょっと期待しているのですが、まだこれからどうなるかわからない実装という感じだと思います。
お礼
なるほどですね。詳しく教えていただきありがとうございました。 とにかく、ブラウザーによって異なった見え方になってしまうのは本当に困った ものですね。ウェブマスター泣かせです。早く、統一されればいいですね。 ありがとうございました。
- rurino
- ベストアンサー率55% (38/68)
否というほどの否ではないかと思いますがSEO部分の話で 最近はGoogleさんはtext-indent: -9999px;が好きでないようで というよりかは text-indent: -9999px;に限らずテキストを隠す、飛ばすものは隠したい情報、 つまり重要情報ではないと見なす傾向にあるようです。 そのため、この手法で設定された見出しは軒並み無視される傾向にあります。 むしろimgでaltをしっかり指定したほうが良い ということになります。
お礼
rurinoさん、ありがとうございました。 大変参考になりました。 確かに、隠したいものを隠すと捉えられても仕方ないですよね。 そういう見方もあるのか、と思いました。検索エンジンの中は 誰も分からないものですが、誤解される使い方は避けるべきですね。 ありがとうございました。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
> 特に問題ではなさそうなので安心しましたが、 > 賛否の否の意見をお持ちの方にも聞いてみたいですね。 <div></div>が書かれることは文法上問題ないですし、必要があれば使っても良いと思いますが、 あくまで必要があれば、であって、どこでも使って良いというわけではないと思います。 <img>と書くべき所を<div></div>としてbackground-imageにするのはNGだと思います。
お礼
必要かどうか、という判断基準が難しいですが、ほかの方からもご指摘があったように、 imgとbackground-imageはしっかりと使い分けたいと思います。初心者はどっちでも いいと思いがち（というか、誰も間違いを指摘してくれないので）ですが、基本を しっかりと身につけていきたいと思います。ありがとうございました。
- metametamu
- ベストアンサー率51% (153/295)
＞HTMLの中にimgでマークアップするより、cssで画像を指定したほうがいい これはhtml的に <p><img src="head.jpg" alt="テキスト" /></p> と書くのを <p>テキスト</p> と書く方がいいという意味なので、divの間に何も書かないというのは全く別の意味を持ってきますよ。<div></div>というマークアップはやらない方がいい部類のものです。 上のimg要素を置き換えるやり方は多分SEOに関わってくることだと思うんですが、これ実は言われているだけでデータを取った人がいないんですよ。しかも、実際テストしてみるとimg要素のalt属性もちゃんとキャッシュされてるという結果になっていて、しかも順位に影響がなかったと言っている人もいるくらいです。 なのでimg要素に適している画像はimg要素で、backgroundに適している画像はbackgroundで指定するのが今後スパムと判定されないためにも最適だと思いますよ。 img要素 ・・・ 写真とかイラストとか画像化した文字とか、HTMLとして見たときに無いと困る画像 background ・・・ フレームやちょっとした効果など、HTMLとして見たとき無くても困らない画像 例えばOKWaveのトップページであれば、OKWaveというロゴはimg要素で、その下の検索マークは背景画像が適していると思われます。 cssを勉強する時にオススメのサイトです。ここはdivを使わないという理念があるようなので結構勉強になります。 http://adp.daa.jp/ あと、いわゆるCSSでの画像置換は現状まだやらない方がいいと思います。どうしてもやるのであれば、backgroundではなくlist-itemを使うか、もしIE7以下を切って良いのであればbefore擬似要素とcontentを使ってください。それ以外の方法は避けるべきです。
お礼
metametamuさん、ありがとうございました。 すみませんが、もしお時間があれば、以下の内容についてもう少し説明していただけませんか？ >あと、いわゆるCSSでの画像置換は現状まだやらない方がいいと思います。 現状では、というのは、今後よくなるかもしれないということでしょうか？ もちろん、皆さんご指摘のように、imgとbackgroundはしっかり使い分けなくては いけないということがわかりましたので、それだけでも大きな進歩です。 この他にも、これとこれはどう違うの？という内容もありますが、一つ一つ確認しながら、 また常に基本に立って判断していこうと思います。ありがとうございました。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
>No.1 倫理的じゃなくて論理的ですね。 たとえば国語（日本語）では、カギ括弧に挟まれた部分が強調、という意味ですが、（カギ括弧には他の意味もあります） 記号と記号の間になにか文字を入れなければならない、というルールはありませんので、 「」という書き方は強調された部分があるが、その内容は文字が含まれていない。 ということになります。 文法上は正しい書き方になると思いますが、 文字を書かずに強調するのは国語として正しいか、と言うことに対しては賛否両論あると思います。
お礼
ありがとうございました。 よく分かりました。特に問題ではなさそうなので安心しましたが、 賛否の否の意見をお持ちの方にも聞いてみたいですね。 また機会があればよろしくお願いいたします。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
背景画像はbackground-imageで指定する方が良いですが、 前景画像は<img>で指定する方が良いです。 <div></div>と言う書き方は、文法上は正しいです。 倫理的に良いか悪いかは、私は問題ないと考えますがダメという人もいます。
お礼
ありがとうございました。 特に何も入れてなくても、いろんなブラウザーで見てみましたが、 問題なさそうなので、おかしくはないと思っていましたが、ずっと 気になっていました。 また機会があればよろしくお願いいたします。
お礼
ORUKA1951さん。詳しい説明をありがとうございました。 >どうもその一番根本が抜けているから、おかしな質問になります。 ↑そうなんです。自分でもおかしい質問じゃないかと思いながら質問しました。 失礼しました。でも、ずっと聞けずにいたことなので、思いきってどんな反応が あろうとも覚悟の上で質問させていただきました。 ちょっとHTMLやCSSをかじったばかりで、何をどのように聞けばいいのか、または こんな質問したらまずいんじゃないかと思っている人も多いのではないかと思います。 自分も会社でサイトを立ち上げることになって、外注もできないから担当することに なったのですが、ホームページビルダーから入ったので、最初は意外に楽だなと 思っていました。しかし、レイアウトをきれいにしようとか、同じレイアウトは CSSを使うと便利だとか、いろいろなことが分かってきて、それでHTML、CSSを 学び始めたのですが、書籍を見ても、単純なページの作り方は分かるのですが、 細かい注意事項やなぜそうするかなど、初心者にはなかなか難しくて、それで 見よう見まねの自己流でやってきてしまった感じです。 あらためて基礎から学ばないといけないし、まずは仕様書を読むところから始めたいと 思います。でも、また基礎的な質問をしてしまうかもしれませんが、機会とお時間が あれば、是非よろしくお願いいたします。ありがとうございました。