- ベストアンサー
文字の両側に画像を配置するCSSのやり方
●AAAAA● ●BBBBB● ●CCCCC● 上記のように文字の両側に●画像をCSSにて配置したいのですが。 HTML <div class=R> <a href=".html">AAAAA</a> <a href=".html">BBBBB</a> <a href=".html">CCCCC</a> </div> CSS div.R a { background-image: url("●.gif"); background-repeat: no-repeat; background-position: left center; margin-right: 12px; padding-left: 7px } この状態では、左に●は表示されるます。 もうひとつ重ねればとおもい <div class=R>の中に<div class=R2>なるものを配置し、 div.R2 a { background-image: url("●.gif"); background-repeat: no-repeat; background-position: right center; margin-left: 12px; } を重ねてみたんですが、うまくいきません。 右にも表示させてい場合は、どのような記述にすれば表示されるのでしょうか？
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
> ●AAAAA● ●BBBBB● ●CCCCC● > 上記のように文字の両側に●画像をCSSにて配置したいのですが。 ANo.2の回答者様の言及された通り、疑似要素が使えるならそちらの方がベターなんですが、肝心のIEめが未実装ですので…逃げ道を考えてみました。 検証条件として、 ・各リンクは横並びにできるのであれば、マークアップは自由 ・「●」は全て同じ画像を指す ・各リンクのテキスト幅が違っても、一定の余白を保つ 上記の様に解釈させて頂いた上でのサンプルが以下です。"mark.gif"という背景画像は10px×10pxと想定しています。 IE6.0/7.0、Firefox2.0～、Opera9.25 on Windows XPでほぼ同様表示の結果が得られています。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <?xml version="1.0" encoding="EUC-JP"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <link rel="stylesheet" href="./css/common.css" type="text/css" media="all" /> <title>サンプル</title> </head> <body> <ul class="sample"> <li><span><a href="a.html">AAAAA</a></span></li> <li><span><a href="b.html">BBBBBbb</a></span></li> <li><span><a href="c.html">CCCCCccc</a></span></li> </ul> </body> </html> ---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- ul.sample { list-style: none; font-size: 12px; line-height: 140%; padding: 0; margin: 0; } ul.sample li { display: inline; background: url(../images/mark.gif) left center no-repeat; padding: 0 0 0 15px; margin: 0 1em 0 0; } ul.sample li span { background: url(../images/mark.gif) right center no-repeat; padding-right: 15px; } ---------------------------------------------------------------------- 背景を両側に配置する為だけの意味を持たない入れ子（<span>）が増えるので、あまり気持ちの良い方法ではありませんが、論理構造上はまあ間違ってはいません。もしも、テキストの一方の背景画像部分だけ、リンクに含まれてしまってもよい、ということであれば、<span>を使わず<a>に対してスタイルを定義する事でも実装できますが。 ↓ ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- （省略） <ul class="sample"> <li><a href="a.html">AAAAA</a></li> <li><a href="b.html">BBBBBbb</a></li> <li><a href="c.html">CCCCCccc</a></li> </ul> （省略） ---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- ul.sample { （同上） } ul.sample li { （同上） } ul.sample li a { background: url(../images/mark.gif) right center no-repeat; padding-right: 15px; } ---------------------------------------------------------------------- こちらのサンプルの方が、<span>を使わずに済む分、マークアップはすっきりしますが、右側の背景画像の箇所までリンクが貼られている状態になります。この状態だと、環境（ブラウザの種類・テキストに対する画像の大きさ等）によっては、<a>のスタイルに下線が引かれている場合は、その部分までリンクが続いている事が一見でわかってしまうので、ちょっと見栄えが悪いかもしれません。その場合はtext-decoration: none;と定義して下線の出ないスタイルにする、という手もあります。 ちなみに、 > もうひとつ重ねればとおもい > <div class=R>の中に<div class=R2>なるものを配置し、 <div class="R"> <div class="R2"> <a href="a.html">AAAAA</a> </div> </div> この記述では、各リンクがブロック要素<div>で囲まれてしまう事により、質問者様が希望する様な横並びの状態にはならなくなります。スタイルを実現するのに適切なマークアップ、というのをまず考える様にして下さい。 ※アトリビュートの値（value）はダブル・コーテーションで囲む記述にすることをお奨めします。
その他の回答 (3)
- Nine-nine
- ベストアンサー率49% (25/51)
幅が決まっているなら、「● ●」を１つの●.gifにしてしまうのが楽です。
- yambejp
- ベストアンサー率51% (3827/7415)
cssでやるならこんな感じ。 firefox2、ネスケ7.1、opera9などではいけそうです。 例によってIEには未実装です。 <style type="text/css"> div.R a:before,div.R a:after{ content: url("●.gif"); } </style> <div class=R> <a href=".html">AAAAA</a> <a href=".html">BBBBB</a> <a href=".html">CCCCC</a> </div>
- asamixxx
- ベストアンサー率35% (15/42)
div.R a div.R2 a どちらも、「<a href=".html">AAAAA</a>」などのa要素に対してのスタイル指定です。 この2つを記述しても、片方（この順で記述しているなら「div.R2 a」）しか表示されません。 これは、一つの要素に対して、一つの属性（background-imageなど）は一つの値（A.gifなど）しか反映されないからです。 （どの値が反映されるかという点については割愛します） 方法としては、 <div class="bg"><a href=".html">AAAAA</a></div> などと、a要素を別のdivで囲んで、a要素の背景とdiv要素の背景にそれぞれ指定するとか、 <div class="left"></div> <a href=".html">AAAAA</a> <div class="right"></div> などとして、floatで横並びするなどがとれると思います。
お礼
abrilさん ご回答ありがとうございました。 早速、spanタイプを設置しました所、希望通りの表示になりました。 ありがとうございます。