cssで画像と文字を同じ位置にする方法

質問

よろしくお願いします。
cssで画像を挿入して、その右側に文字を入れようと思い以下のようにやってのですがうまく行きません。

<div id="photo7">
<p><img src="img/ANI_059.GIF" alt="テスト画像" width="20" height="20" /></p>
</div>

<p>テスト、てすと、テスト</p>

cssの部分には以下のように記述しました。

div#photo7 {float: reft
}

上記のようにしたところ、以下のように表示されました。

■（画像の部分です）
テスト、てすと、テスト

私は以下のようにしたいのですが・・・

■テスト、てすと、テスト

そして更には、上記のようなものを幾つも作りたいと考えております以下のような感じです

■テスト、てすと、テスト
■テスト1、テスト2
■テスト3、テスト5

どなた様か、ご指導の程よろしくお願い致します。

回答No.3

abril · ベストアンサー

> cssで画像を挿入して、その右側に文字を入れようと思い以下のようにやってのですがうまく行きません。

現状「うまく行」ってないのは、No.1様のご指摘通りfloatプロパティの値にスペルミスがある為ですが、内容にも依りますが、どうも構造に無駄がある様な気がします。

「■」画像は全て同じですか？それともアイテム事に（縦横サイズは同じだが内容が）違いますか？このソース中のサイズや名称からして、アニメーションGIFのアイコンの様な画像かと推測されるのですが。そしてそれに続くテキストはそのアイコンを行頭に付けた箇条書きの様なイメージですか？
もし、そういったものであるなら、No.2様のコメントの通り、形状はリストですので、ulでマークアップするのがそもそも適切だと思いますが。
それでいいなら、例えば下記の様なすっきりしたマークアップで済んでしまいますよ。

【HTML】

<ul class="hoge">
<li>テスト、てすと、テスト</li>
<li>テスト1、テスト2</li>
<li>テスト3、テスト5</li>
</ul>

【CSS】

ul.hoge {
list-style: none;
margin: 0;
padding: 0;
}
ul.hoge li {
min-height: 20px;
_height: 20px;
margin: 0 0 1em 0;
padding: 0 0 0 25px;
background: url(img/ANI_059.gif) left top no-repeat;
}

No.2様の様にlist-style-imageに画像を指定しても良いですが、画像の大きさがある程度あると、結構レイアウトが微妙な感じになってしまいがちですので、background-imageとして設定する方が位置の調整などはしやすかったりします。ただし、background-imageに設定した場合、list-style-imageと違ってあくまで「背景」扱いですので、その画像の描画領域を、続くテキスト側は認識していません。その為、そのままではテキストは画像の後にインデントする事無く重なってしまいますし、テキスト側の高さの方が画像の高さより低くなってしまうと（今回の場合、画像の高さが20pxですから、テキストのfont-sizeが12pxぐらいで一行しかない様な場合など）画像の下部が表示されきれず切れることになります。
それを回避する為に、padding-leftで画像の幅以上の余白を与え、min-heightでテキスト量に関わらず画像の高さと同じ値を与えて描画領域に最低限の高さを確保しています（ただし、IE6以下ではこのmin-heightプロパティが無効の為、変わりにアンダースコア・ハックでheightプロパティを設定併用してあります）。

もしもulでのマークアップが相応しくない事情などおありでしたら、詳細を補足して下さい。

補足

abril様。pcckitと申します。この度は初心者の私にご丁寧にご指導頂きまして誠にありがとう御座います。早速前回ご指導頂いた通りに実行させて頂きました。確かに文字の左側に画像が挿入されました。本当にありがとう御座いまし。この度此処までご指導頂いたのですが、もしよろしければ再度ご質問させて頂けませんでしょうか？
まずは、下記のサイトをご覧頂けませんでしょうか？
http://technocompany.web.fc2.com
上記には画像は表示されておりませんが、画像フォルダと同じ場所に保存したところ、お陰さまで表示されました。

ソース内の様々なところに<div id="header">や<div id="fontcolor5">
<div id="photo3">と設定をしておりますが、このまま作成を進めていくと、<div id="ooooo>等がどんどん増えていきますが、その点は特別問題は無いものなのでしょうか？私は、もっとまとめて設定が出来ないものかと考えていたのですが、それは難しいものでしょうか？

例えば画像は全て中央揃えとか、文字はwidthを設定して700pxとか
一部の文字についてはwidth800px等・・・まとめて設定するのは難しいものでしょうか？

私は、参考書を見ながら作成しているのですが、もしかすると所々に
不要な記述などがあるかもしれません。よろしければご指導頂けませんでしょうか？

また、前回頂いたcssの記述なのですが、marginやpaddingは余白だと思いますが、その他の部分が何を意味しているのかが分かりません。
今後のためによろしければご指導頂けませんでしょうか？

この度は、ご丁寧にありがとう御座いました。

【CSS】

ul.hoge {
list-style: none;
margin: 0;
padding: 0;
}
ul.hoge li {
min-height: 20px;
_height: 20px;
margin: 0 0 1em 0;
padding: 0 0 0 25px;
background: url(img/ANI_059.gif) left top no-repeat;
}

回答No.2

grumpy_the_dwarf

見た目はまんまulですね。

p.mark {
display:list-item;
list-style: url("img/ANI_059.GIF") circle;
}

<p class="mark">適当な文字列</p>
<p class="mark">それはもう、可能な限り適当な文字列</p>

これだけ。

お礼

grumpy_the_dwarf様
ありがとう御座いました。
また、ご縁が御座いましたときはご指導の程よろしくお願い致します
初心者ですがよろしくお願いします。
ありがとう御座いました。

回答No.1

salonpath

■html
<div class="box">
<p class="photo"><img src="img/ANI_059.GIF" alt="テスト画像" width="20" height="20" /></p><p>テスト、てすと、テスト</p>
</div>

■css
.box{
clear:both;
}
.photo{
float:left;
}

試してませんが、こんな感じです。
float:reft←reftはありません
あとひとつのhtml中に同じidは1回しか記述できないので、こういった何度も使いまわす場合はclassを使ったほうがいいと思います。

お礼

salonpath様
ありがとう御座いました。
また、ご縁が御座いましたときはご指導の程よろしくお願い致します
初心者ですがよろしくお願いします。
ありがとう御座いました。