CSSで言語アイコンを指定

質問

サイト右上に国旗画像を置き、それをクリックすると言語の切り替えができるようにするサイトを造ろうとしています。
HTMLで
<ul><li><a href="#"><img src="img/gb.gif"></a></li><li><a href="#"><img src="img/fr.gif"></a></li></ul>
と指定すると、HTMLファイルのディレクトリが変わると、画像の場所を指定しなければなりません。
これがわずらわしいので、CSSで画像を背景とし、文字列をスペースにすることで画像指定を一括できるようになりました。しかし、画像のサイズと、文字列のサイズをぴったりにできません。どうしたらよろしいでしょうか？

回答No.2

ORUKA1951 · ベストアンサー

img要素は行内要素--置換インライン要素--ですからサイズは自身で決めてしまいます。そこで、親コンテナブロックのli要素をposition:relativeにしたうえで、img{display:block;width:100%;height:100%;}とすると、li要素の内寸いっぱいに表示されます。
　画像の位置は絶対パスで指定すれば、どこにおいても問題ないです。
　<img src="/images/logo/en.gi">

　画像を背景にする場合は、CSS3のbackground-size:containを使いますが、非対応ブラウザが結構多い(IE8以前)なので、後方互換を考えると画像のほうが良いでしょう。

　なお、通常はa要素--非置換インライン要素--もblockにすることが多いですから、最終的には
<div class="langSelect">
　<ul>
　　<li><a href="/en/index.html">English</a></li>
　　<li><a href="/fr/index.html">French</a></li>
　　<li><a href="/ch/index.html">中国語</a></li>
　</ul>
</div>
とかでしたら
div.langSelect{position:absolute;top:10px;right:10px;text-align:right;}
div.langSelect ul,div.langSelect ul li{
list-style:none;margin:0;padding:0;
line-height:2em;
}
div.langSelect ul{display:block;}
div.langSelect ul li{display:inline-block;text-align:center;position:relative;}
div.langSelect ul li a{display:block;height:100%;width:100%;text-decoration:none;}
div.langSelect ul li a img{display:block;width:100%;height:100%;}
とか・・・
　走り書きなのでテストしてません。後で時間が取れたらテストしてみます。

※背景の画像サイズが決まっていて、li要素をそれにあわせたいなら、
div.langSelect ul li a[href="/en/index.html]{width:80px;height:40px;background-img:url();}
とかで指定します。

　状況に合わせて様々な書き方がありますよ。

補足

もっと簡単な方法がありました！
#en{display:inline-block;width:16px;height:11px;background-image:url('gb.gif');}
#fr{display:inline-block;width:16px;height:11px;background-image:url('fr.gif');}！

<ul><li><a href="index.html" id="en"></a></li><li><a href="files/fr.html" id="fr"></a></li></ul>

回答No.4

ORUKA1951

＞言語の画像にaltを指定するとSEOに良いとはどういうことでしょうか？
　一番よくわかるのは、googleのガイドラインの
『Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。 ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769#2 )』でしょう。
　Lynxで見ると、画像ではなくaltの内容で
英語のページへ
　と読めます。

　h1なども同様です。<h1><img alt="旅日記--2012/08/30--富士五湖へ"></h1>と書いてあれば、どのように理解されるかわかるでしょう。

　後方互換とは、古いブラウザへの互換性です。古いブラウザにはスタイルシートへの対処が未完成のものもありますから、またガラケーにも。
　画像は、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
alt属性は、画像についての短い説明を提供する。 その内容は、ユーザにとって、 longdesc属性が指定する長文説明――この例では「sitemap.html」――へのリンクを辿るかどうかを判断するのに十分な内容である必要がある。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Objects, Images, and Applets in HTML documents( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#edef-IMG )］より
　こともあり必須なのです。ただ、borderなどの画像に関しては、スクリーンリーダーなどが読んでしまわないように、alt="" と空白でよいです。--空白にすべきです。

　今は慣れてしまったので使用することはほとんどありませんが、Lynxは邪魔にならないので入れておくと良いです。私は、firefoxがメインの開発環境ですが、Open Withで、色々なブラウザを指定していて、右クリックからIE Tester,IE,Opera,・・,Lynxが選択できます。

回答No.3

ORUKA1951

＞もっと簡単な方法がありました！
　それは、確かに可能ですが、実用的には簡単じゃないですよ。
　ひとつひとつにidをつけなければならない。id--# 一意セレクタは詳細度が高く、かつ一箇所しか指定できないためにHTMLもスタイルシートも肥大化してしまいます。一箇所ならまだしも、デザインのために、あちこちにidをつけていったら全体として肥大化してしまいます。
div.langSelect ul li a[href="/en/index.html"]
　と子孫セレクタと要素セレクタで指定してあると、たとえこのリンクが本文中にあっても、そこには適用されませんね。後で見直してもHTMLを開かなくても、langSelectクラスのdiv内にあるリスト中のa要素のうちリンク先が/en/index.htmlの場合の画像とわかりますから、必要があればここを書き換えれは良いです。

　ただ、後方互換やSEOを考えるなら、<a href"***"><img src="/***"></a>と絶対パスで画像を指定しalt属性で代替テキストを書くほうが良いでしょう。

お礼

ありがとうございます！
後方互換とはどういうことでしょう？
また、たとえばヘッダーのロゴをなら、altがSEOに良さそうなのは直感的にわかりますが、
言語の画像にaltを指定するとSEOに良いとはどういうことでしょうか？

回答No.1

Gletscher

CSSではなく、Japascriptではないですか？
カテゴリーを変えて質問し直した方が良いと思いjます。

補足

en.js

<li id="EN"></li>

en.jsノ中身

document.getElementbyId("EN").innerHTML="<img src="EN.png">"