文字の両側に画像を配置するCSSのやり方

Question

●AAAAA●　●BBBBB●　●CCCCC● 上記のように文字の両側に●画像をCSSにて配置したいのですが。 HTML

CSS div.R a { background-image: url("●.gif"); background-repeat: no-repeat; background-position: left center; margin-right: 12px; padding-left: 7px } この状態では、左に●は表示されるます。もうひとつ重ねればとおもい

の中に

なるものを配置し、 div.R2 a { background-image: url("●.gif"); background-repeat: no-repeat; background-position: right center; margin-left: 12px; } を重ねてみたんですが、うまくいきません。右にも表示させてい場合は、どのような記述にすれば表示されるのでしょうか？

abril · Accepted Answer

> ●AAAAA●　●BBBBB●　●CCCCC● > 上記のように文字の両側に●画像をCSSにて配置したいのですが。 ANo.2の回答者様の言及された通り、疑似要素が使えるならそちらの方がベターなんですが、肝心のIEめが未実装ですので…逃げ道を考えてみました。検証条件として、・各リンクは横並びにできるのであれば、マークアップは自由・「●」は全て同じ画像を指す・各リンクのテキスト幅が違っても、一定の余白を保つ上記の様に解釈させて頂いた上でのサンプルが以下です。"mark.gif"という背景画像は10px×10pxと想定しています。 IE6.0/7.0、Firefox2.0～、Opera9.25 on Windows XPでほぼ同様表示の結果が得られています。 ---------------------------------------------------------------------- 【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; } ---------------------------------------------------------------------- 背景を両側に配置する為だけの意味を持たない入れ子（）が増えるので、あまり気持ちの良い方法ではありませんが、論理構造上はまあ間違ってはいません。もしも、テキストの一方の背景画像部分だけ、リンクに含まれてしまってもよい、ということであれば、を使わずに対してスタイルを定義する事でも実装できますが。 ↓ ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- （省略）

（省略） ---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- ul.sample { （同上） } ul.sample li { （同上） } ul.sample li a { background: url(../images/mark.gif) right center no-repeat; padding-right: 15px; } ---------------------------------------------------------------------- こちらのサンプルの方が、を使わずに済む分、マークアップはすっきりしますが、右側の背景画像の箇所までリンクが貼られている状態になります。この状態だと、環境（ブラウザの種類・テキストに対する画像の大きさ等）によっては、のスタイルに下線が引かれている場合は、その部分までリンクが続いている事が一見でわかってしまうので、ちょっと見栄えが悪いかもしれません。その場合はtext-decoration: none;と定義して下線の出ないスタイルにする、という手もあります。ちなみに、 > もうひとつ重ねればとおもい >

の中に

なるものを配置し、

AAAAA

この記述では、各リンクがブロック要素

で囲まれてしまう事により、質問者様が希望する様な横並びの状態にはならなくなります。スタイルを実現するのに適切なマークアップ、というのをまず考える様にして下さい。 ※アトリビュートの値（value）はダブル・コーテーションで囲む記述にすることをお奨めします。

Nine-nine · Answer

幅が決まっているなら、「●　　　●」を１つの●.gifにしてしまうのが楽です。

yambejp · Answer

cssでやるならこんな感じ。 firefox2、ネスケ7.1、opera9などではいけそうです。例によってIEには未実装です。

AAAAA BBBBB CCCCC

asamixxx · Answer

div.R a div.R2 a どちらも、「AAAAA」などのa要素に対してのスタイル指定です。この2つを記述しても、片方（この順で記述しているなら「div.R2 a」）しか表示されません。これは、一つの要素に対して、一つの属性（background-imageなど）は一つの値（A.gifなど）しか反映されないからです。（どの値が反映されるかという点については割愛します）方法としては、

AAAAA

などと、a要素を別のdivで囲んで、a要素の背景とdiv要素の背景にそれぞれ指定するとか、

AAAAA

などとして、floatで横並びするなどがとれると思います。

文字の両側に画像を配置するCSSのやり方

> ●AAAAA● ●BBBBB● ●CCCCC●

幅が決まっているなら、「● ●」を１つの●.gifにしてしまうのが楽です。

cssでやるならこんな感じ。

div.R a

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

> ●AAAAA●　●BBBBB●　●CCCCC●

幅が決まっているなら、「●　　　●」を１つの●.gifにしてしまうのが楽です。