- ベストアンサー
リンク画像をCSSを使って背景画像にするメリット
リンク画像をCSSで設定するメリットは何ですか? 左上の「OKwave」のロゴマークもそうですが、なぜHTML言語のimgタグとaタグの組み合わせで、リンクを作っていないのでしょうか? CSSで画像を背景画像として設定するメリットは何なのでしょうか? すいません、ご教示願います。
- CSS
- 回答数3
- ありがとう数4
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
>imgタグとaタグの組み合わせで、リンクを作っていないのでしょうか? 一言で言うと「その画像は文書構造には無関係な背景だから」です。 説明すれば長くなりますが、そもそもHTMLの最大の目的は、 【引用】____________ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[HTML4.01仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )]より ですね。ウェブページにアクセスするユーザーエージェントは、上記の例に加えて検索エンジンも含まれますが、画像が負担になる携帯電話などの帯域の狭いものもいます。画像の絵柄の意味を理解できるのは人だけです。人意外も訪問する・・ それ以外にも随所に 「文書構造とプレゼンテーションとのより明解な区別。従って、プレゼンテーション目的の場合HTMLの要素や属性ではなくスタイルシートの使用を奨励する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.3.2 )」 「テキストを画像に置き換えて表現する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )のはまずい」 「HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )」 たとえば、 <a href="htt://hge.com"><span>ほげ</span></a> と書かれていれば、スタイルシートで a[href="htt://hge.com"]{background:url()****} a[href="htt://hge.com"] span{display:none;} とすれば、携帯電話や検索エンジン、点字端末や読み上げソフトは率直にテキストとして理解します。また、さきでデザインを変えようとしたときにHTMLを書き換える必要もありませんね。 リンクボタンやリンク画像は、多くの場合は単なる背景以上の意味は持ちませんので、画像を使わないほうが良いでしょう。逆に画像(たとえば製品群が一目でわかるような画像)にリンクを張りたいときは、画像にリンクを張ると考えると良いでしょう。その場合でも、altにはきちんと代替文字を帰すべきですし、マークアップがナビゲーションリストのひとつでしたら、<div class="nav></div>(HTML4.01)、<nav></nav>(HTML5)で括るべきです。 後者の場合も、 <div class="nav"> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> としかマークアップしないことが圧倒的に多いです。私は・・ だって先でデザインを変えたくなったとき、すべてのホページの該当部分を変えると考えるとぞっとしますモン。
その他の回答 (2)
- 神崎 渉瑠(@taloo)
- ベストアンサー率44% (1016/2281)
ロゴマークをコンテンツの一部と見なすかどうかという、考え方によるものです。 <img>なら画像ファイルを変更すれば、その画像は変更されます。 CSSのbackground-imageなら画像ファイルを変更すれば、その画像は変更されます。 画像を変更する(アップロードする)ことに違いはありませんから、<img>をCSSで書き直すメリットはありません。
お礼
>>ロゴマークをコンテンツの一部と見なすかどうかという、考え方によるものです。 たしかにどちらに分類すべきか曖昧ですね。 どちらを使うかは好みの問題ですか。 回答ありがとうございました。 参考にします。
- dscripty
- ベストアンサー率51% (166/325)
画像がコンテンツの一部のときは、img タグ。 例えば、説明のための図とか、絵とか、写真とか、スクリーンショットとか。 それ以外は装飾だから CSS で HTML と分離すれば、 装飾を変更するだけなら、CSS を変更するだけで、一度に全ページへ変更が反映されるから、 個々の HTML を編集する必要がなくて楽だし、コンテンツ管理も楽。 「コンテンツ」と「装飾」の分離がポイント!
お礼
>>それ以外は装飾だから CSS で HTML と分離すれば、 装飾を変更するだけなら、CSS を変更するだけで、一度に全ページへ変更が反映されるから、 個々の HTML を編集する必要がなくて楽だし、コンテンツ管理も楽。 なるほど。そういうことだったのですか! たしかに、その方が大変楽ができます。 使い分けが、よくわかりました。 回答ありがとうございました。
関連するQ&A
- CSSでのリンク指定(?)
現在、外部CSSで、<h1>タグの背景にタイトル画像を表示するように設定しています。 HTML上の<h1>タグ内では、タイトルに値するテキストを入れていますが、ブラウザの表示できない所においやってあります。 その表示されているタイトル画像(h1で表示している部分)に他ページへのリンクを設定したいのですが、こうした場合のリンク設定はどのようにすればよろしいのでしょうか? CSS内で設定することは可能なのでしょうか? それとも、HTML上でなんらかの形でリンク設定を行うものなのでしょうか? よろしくお願いいたします。
- ベストアンサー
- HTML
- cssで、imgタグに、背景画像を敷きたい
cssで、imgタグに、背景画像(影)を敷く方法を教えてください。 ※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。 ■現状 <HTML> <div id="hoge"> <img src~ <CSS> #hoge img { background-image:url(/images/background_shodow.jpg); background-repeat: none; background:position: ? width:? height:? margin:? padding:?; <影の大きさ> ・width400px ・height200px <写真のサイズ指定> ・width390px ・height190px ※これまでは、 写真のサイズが違うので、 css部分の#hoge img で、 画像の大きさを強制指定してました。 出来れば、 画像の大きさは、html側で指定せずに、 css側で調整したいです。 ムリなら、html側で大きさ指定します。 div枠にcss設定できれば早いかと思いますが、 それが出来ないため(img タグにしかcss指定不可)の相談です。 よろしくお願いします。
- ベストアンサー
- HTML
- 背景画像にリンク
背景に画像を固定して表示したページに、リンクを貼りたいのです。 フレームページで縦に2分割、左のページにスタイルシートで背景固定、BODYタグ内には何もなし、右のページも同じくスタイルシートで背景固定、こちらに左のページの背景画像内にある文字からリンクを貼り、そのリンクをはったページを右ページ内に反映させたいのです。 一枚の大きな画像を2分割して左と右のページでそれぞれ固定しているので、IMGタグはなるべく使いたくありません。 (IMGタグでスタイルシートでの背景固定ように、right bottomと出来るのならば全く問題ないので、その場合は教えてください^^;)
- 締切済み
- HTML
- 外部CSSで画像にリンクを貼りたい
まだCSS初心者ですので宜しくお願いします。 外部CSSに位置指定した「画像」にリンクを貼りたいのですが いろいろ調べてもその方法がわかりません。 以下のタグにどのようにリンクの指定をすればよいでしょうか? div#index{ margin-top:5px; background:url(../img/oribox.gif) no-repeat right bottom; } また、HTMLにはどのように記述したらよいかも宜しくお願いいたします。
- ベストアンサー
- HTML
- 画像をリンクさせると紫の枠がでるんですが、、、
WEBを勉強しています。 ロゴやバナーをつくってAタグで囲んでリンクさせたのですが 画像の外枠に紫の線が入ってしまいます。 borderを設定したわけでもなく、バリデーションしても ミスはなかったのですが何が原因なんでしょうか?? ちなみに背景は白なので余計に目立ってしまい、困っています。 HTML+CSSで作っています。 もしわかる方いましたらよろしくお願いいたします。
- ベストアンサー
- HTML
- CSSを用いた背景画像の表示方法
お世話になります。 ホームページ作成の初心者です。 H1タグ(大見出し)の箇所に、文字付きの画像を貼付けようと思ったのですが、重くなる、との考えから、CSSにて背景画像で表示したいと考えております。 本来ならば、HTMLファイルとは別途、CSSファイルを作成し、これを読み込ませるのが一般的とお聞きしました。 ですが、添付画像ファイル(中に、”猫集まれ”と記載したいです)を、HTMLソース内部に、直接書き込みたいと思っております。 どのようにすればよろしいでしょうか? 因に、以下の情報を載せさせていただきます。 <h1>猫集まれ!</h1> url("img/flower10.gif") background-repeat: no-repeat; padding-left: 30px; line-height: 120%; ご教示の程、よろしくお願い申し上げます。
- ベストアンサー
- CSS
- 画像の背景を透明にしたい
HTMLで<img src=>を使ってロゴ画像を貼り付けました その後背景の画像をSSCで書いたのですが ロゴの本来透明な部分が透明になりません よくわからなかったので、フォーマットはPNGとGIFで試しましたがだめでした JPGは背景を透明にはできなかったですよね? そもそも背景を透明のまま保つことは不可能なのでしょうか?
- ベストアンサー
- HTML
- 固定背景画像にリンクをはりたいです。
固定背景画像にリンクをはりたいです。 今、HPの隠しページを作っています。 右下固定の背景画像にリンクをはりたくて 透明の別画像を用意したんですが、 その画像を固定させる方法(HTMLタグ)が分かりません。 ピクセルなどではなく、右下に固定させたいです。
- 締切済み
- HTML
- CSSの背景色について
HTMLにCSSを挿入して、背景色で、グラデーションを作っていますが、その背景色を、画面の真ん中から上のみに設定したいんですが、 そのようなタグはなく、どうしても、そのような設定を考えているんですが、何かいい方法はありませんか? 私が作ったタグです、 <style type="text/css"> <!-- body{ filter:progid:DXImageTransform.Microsoft.Gradient (startcolorstr='#7A99EE',endcolorstr='#FEFFD7',gradienttype='0' ) } --> </style> 何かいいアイディアがあったらお願いします
- ベストアンサー
- その他(プログラミング・開発)
- CSSで背景画像指定
どなたかアドバイスお願いします。 CSSを使って<p></p>の中に背景画像を指定した場合<p></p>の中は背景指定のみでタグの中は内容が何も無い状態です。 テーブルを使ってのレイアウトの場合spacer.gifなどを使えば解決できるのですが。 CSSのみでのレイアウトの場合はHTMLタグの中の要素が空になってしまう場合 は、どのように対処すればよろしいのでしょうか?
- ベストアンサー
- CSS
お礼
>>リンクボタンやリンク画像は、多くの場合は単なる背景以上の意味は持ちませんので、画像を使わないほうが良いでしょう。逆に画像(たとえば製品群が一目でわかるような画像)にリンクを張りたいときは、画像にリンクを張ると考えると良いでしょう。 リンク先の文章やHTMLとCSSの役割のちがいを挙げて説明していただいたので、とてもよくわかりました。 私は全てのリンクボタンを、画像を使って設定していました。 仰るとおり、デザインを変えるときどうするのか? という疑問にぶつかったとき、ものすごく手間がかかることに今、気づきました。 >>だって先でデザインを変えたくなったとき、すべてのホページの該当部分を変えると考えるとぞっとしますモン。 私も今頃、ぞっとしてきました^^; 回答ありがとうございます。 背景を使うか、画像を使うかは、No.1さん、No.3さんのご回答通り、それに装飾以上の意味があるのか、ないのかを判断基準にします。