No.3ベストアンサー
- 回答日時:
>imgタグとaタグの組み合わせで、リンクを作っていないのでしょうか?
一言で言うと「その画像は文書構造には無関係な背景だから」です。
説明すれば長くなりますが、そもそもHTMLの最大の目的は、
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[HTML4.01仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
ですね。ウェブページにアクセスするユーザーエージェントは、上記の例に加えて検索エンジンも含まれますが、画像が負担になる携帯電話などの帯域の狭いものもいます。画像の絵柄の意味を理解できるのは人だけです。人意外も訪問する・・
それ以外にも随所に
「文書構造とプレゼンテーションとのより明解な区別。従って、プレゼンテーション目的の場合HTMLの要素や属性ではなくスタイルシートの使用を奨励する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
「テキストを画像に置き換えて表現する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )のはまずい」
「HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
たとえば、
<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>
としかマークアップしないことが圧倒的に多いです。私は・・
だって先でデザインを変えたくなったとき、すべてのホページの該当部分を変えると考えるとぞっとしますモン。
>>リンクボタンやリンク画像は、多くの場合は単なる背景以上の意味は持ちませんので、画像を使わないほうが良いでしょう。逆に画像(たとえば製品群が一目でわかるような画像)にリンクを張りたいときは、画像にリンクを張ると考えると良いでしょう。
リンク先の文章やHTMLとCSSの役割のちがいを挙げて説明していただいたので、とてもよくわかりました。
私は全てのリンクボタンを、画像を使って設定していました。
仰るとおり、デザインを変えるときどうするのか? という疑問にぶつかったとき、ものすごく手間がかかることに今、気づきました。
>>だって先でデザインを変えたくなったとき、すべてのホページの該当部分を変えると考えるとぞっとしますモン。
私も今頃、ぞっとしてきました^^;
回答ありがとうございます。
背景を使うか、画像を使うかは、No.1さん、No.3さんのご回答通り、それに装飾以上の意味があるのか、ないのかを判断基準にします。
No.2
- 回答日時:
ロゴマークをコンテンツの一部と見なすかどうかという、考え方によるものです。
<img>なら画像ファイルを変更すれば、その画像は変更されます。
CSSのbackground-imageなら画像ファイルを変更すれば、その画像は変更されます。
画像を変更する(アップロードする)ことに違いはありませんから、<img>をCSSで書き直すメリットはありません。
>>ロゴマークをコンテンツの一部と見なすかどうかという、考え方によるものです。
たしかにどちらに分類すべきか曖昧ですね。
どちらを使うかは好みの問題ですか。
回答ありがとうございました。
参考にします。
No.1
- 回答日時:
画像がコンテンツの一部のときは、img タグ。
例えば、説明のための図とか、絵とか、写真とか、スクリーンショットとか。
それ以外は装飾だから CSS で HTML と分離すれば、
装飾を変更するだけなら、CSS を変更するだけで、一度に全ページへ変更が反映されるから、
個々の HTML を編集する必要がなくて楽だし、コンテンツ管理も楽。
「コンテンツ」と「装飾」の分離がポイント!
>>それ以外は装飾だから CSS で HTML と分離すれば、
装飾を変更するだけなら、CSS を変更するだけで、一度に全ページへ変更が反映されるから、
個々の HTML を編集する必要がなくて楽だし、コンテンツ管理も楽。
なるほど。そういうことだったのですか!
たしかに、その方が大変楽ができます。
使い分けが、よくわかりました。
回答ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS 差し込み画像にをcssで大きさ指定したい 1 2022/11/23 23:14
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS svgクリップパスの応用コーディング方法 2 2022/04/09 09:07
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS HTMLとCSSコードを教えてください 1 2022/04/27 09:47
- HTML・CSS HTMLとCSSによるWebページ生成について。この絵で「ochawan」の文字を枠全体の上から10 4 2023/02/28 23:17
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- Windows 10 zoomで自分の顔の背景 3 2023/06/07 22:34
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
form以外でのpostってできますか?
-
ボタンを押したままにする。
-
バナーのURLについて
-
カウンターのHTMLソースを教え...
-
ブラウザで画像を表示させない方法
-
webサイトを作っているのですが...
-
リンクの上にマウスカーソルを...
-
スライドショーの上にロゴマー...
-
崩れたレイアウトが更新すると...
-
windowsは画像にマウスオンで画...
-
画像を入れ替える方法
-
バナーの貼り方とバナーにリン...
-
WEBサイトの一部コンテンツがス...
-
カーソルを合わせると文字が出...
-
画像のリンクタグで、オンマウ...
-
タイトルバーに画像を入れるHTM...
-
Dreamweaver:マウスオーバーで...
-
HTMLにQRコードを挿入する方法
-
VB.netで線を引きたい
-
gifアニメの動作が変わった
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
IMGタグでTIFF画像を表示
-
ボタンを押したままにする。
-
スライドショーの上にロゴマー...
-
pngやjsの後ろの英数字の意味は...
-
バナーの貼り方とバナーにリン...
-
HTMLにQRコードを挿入する方法
-
背景が透明なリンクボタンで、...
-
CSSなどでHTML全体の表示を拡大...
-
画像クリックでクリップボード...
-
スマホで、画像をクリックする...
-
form以外でのpostってできますか?
-
「DecareステートメントにPtrSa...
-
クリックしても、リンクに飛ば...
-
<area></area> 部分にボーダー...
-
カーソルが画像に触れたら文字...
-
カーソルを合わせると文字が出...
-
拡張子無しで画像を表示したいです
-
HTMLの画像表示時のキャッシュ...
-
背景画像がちらつく原因は?
-
フォルダ内の画像をウェブでラ...
おすすめ情報