画像の横にテキスト

質問

画像の右側にテキストを配置したいです
テキストが画像の上付近から始まるようにしたのですがどんな方法が一番良いのですか?

他にも方法はありますか？

<img src="sample.gif" alt="" align="top">テキスト

<img src="sample.gif" alt=""style="float: left">テキスト

<img src="sample.gif" alt=""style="vertical-align: top;">テキスト

また、HTML5ではどんな方法がいいでしょうか？

よろしくお願いします

回答No.3

ORUKA1951 · ベストアンサー

HTML5は、HTML4.01以上に文書構造とプレゼンテーションの分離が徹底されています。よって
「画像の右側にテキストを配置したい」という考え方自体なくなります。(HTML4.01でもそうだった)
　HTML5は、CSS,DOM,WAI,APIも含む巨大な仕様です。まず、HTML4.01をしっかり確実に身につけましょう。

　すなわち、次のようになります。
Q:画像とその説明をdl(定義リスト)でマークアップされたHTMLがあります。これを、画像の右側にテキストが表示されるようにしたいのですが・・どのようにスタイルシートを書けば良いでしょうか？
　★決して「画像の右側にテキストを配置したいがHTMLは？」にはならないし、なってはならないのです。

※タブは＿に置換してあるので戻す。
<dl class="stepByStep">
＿<dt><img src="./images/BIBLO/01.jpg" width="320" height="240" alt="ビスをはずす"></dt>
＿<dd>本体裏側にある合計12本のビスをはずします。</dd>
＿<dd>中央にあるビスはCD/DVDドライブの固定も兼ねていますから、ビスをはずしたらドライブを取り外してください。</dd>
＿<dt><img src="./images/BIBLO/02.jpg" width="320" height="240" alt="裏蓋をあける"></dt>
＿<dd>FDDのボタンを押しながら裏蓋を注意深く開けていきます。一度に広げようとすると割れます。</dd>
＿<dt><img src="./images/BIBLO/03.jpg" width="320" height="240" alt="HDD固定ビスをはずす"></dt>
＿<dd>HDDを固定している４本のビスをはずし、横にスライドさせてマウントごと取り外します。</dd>
＿<dd>ひっくり返してリボンケーブルをはずします。</dd>
</dl>
<ol class="stepByStep">
＿<li><img src="./images/BIBLO/01.jpg" width="320" height="240" alt="ビスをはずす">
＿＿<p>本体裏側にある合計12本のビスをはずします。</p>
＿＿<p>中央にあるビスはCD/DVDドライブの固定も兼ねていますから、ビスをはずしたらドライブを取り外してください。</p>
＿<li><img src="./images/BIBLO/02.jpg" width="320" height="240" alt="裏蓋をあける">
＿＿<p>FDDのボタンを押しながら裏蓋を注意深く開けていきます。一度に広げようとすると割れます。</p>
＿</li>
＿<li><img src="./images/BIBLO/03.jpg" width="320" height="240" alt="HDD固定ビスをはずす">
＿＿<p>HDDを固定している４本のビスをはずし、横にスライドさせてマウントごと取り外します。</p>
＿＿<p>ひっくり返してリボンケーブルをはずします。</p>
＿</li>
</ol>
というHTMLがあるとして・・定義リスト/序列リストのいずれでマークアップされていても、
*.stepByStep{
width:600px;
margin:5px auto;padding:5px;
list-style:none;
border:ridge 3px gray;
}
*.stepByStep img{
float:left;
margin-bottom:10px;
}
*.stepByStep:after{
content:"";display:block;
clear:left;
}
dl.stepByStep dt,
ol.stepByStep li{
clear:left;
margin:0;padding:0;
}
dl.stepByStep dd,
ol.stepByStep li p{
margin:0 0 0 340px;
line-height:1.6em;text-indent:1em;
}
で全く同じようにデザインできます。
★発想を根本から変えることから始めましょう。
そのためには、まず仕様書くらいは一応目を通しましょう。
　⇒HTML 4.01 Specification (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
　⇒Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html )

HTML5でも、このマークアップは変わらない。文書構造によったら
<section class="stepByStep">
＿<figure><img src="./images/BIBLO/01.jpg" width="320" height="240" alt="ビスをはずす"></figure>
＿<p>本体裏側にある合計12本のビスをはずします。</p>
＿<p>中央にあるビスはCD/DVDドライブの固定も兼ねていますから、ビスをはずしたらドライブを取り外してください。</p>
＿<figure><img src="./images/BIBLO/02.jpg" width="320" height="240" alt="裏蓋をあける"></figure>
＿<p>FDDのボタンを押しながら裏蓋を注意深く開けていきます。一度に広げようとすると割れます。</p>
＿<figure><img src="./images/BIBLO/03.jpg" width="320" height="240" alt="HDD固定ビスをはずす"></figure>
＿<p>HDDを固定している４本のビスをはずし、横にスライドさせてマウントごと取り外します。</p>
＿<p>ひっくり返してリボンケーブルをはずします。</p>
</section>
のマークアップをされる場面もあるでしょう。
★プレゼンテーションではなく、文書構造だけをHTMLに書く。そうすれば、自在にデザインできるということ。

お礼

回答ありがとございます
マークアップとCSSの分離ですね
次から分離して書きます。すいません

回答No.4

神崎 渉瑠（@taloo）

>どんな方法が一番良いのですか?
厳密、厳格に言えば文書構造にあわせた書き方です。
（デザインを一切無視して、文書構造だけを意識して書く書き方が、正しい書き方になります。
画像を左に表示したいからと言って、<img>を先に書かなければならないというわけではありません。）

align属性、valign属性は使わずに、スタイルシートでデザイン（レイアウト）してください。

文書構造としてテキストが先に記載されるべきというのであれば、

テキスト<img style="float:left">

としておいて、CSSで、画像を左に、テキストを右に表示させるという書き方になりますし、
文書構造として画像が先に記載されるべきであれば、

<img style="float:left">テキスト

という書き方になります。

その画像が背景画像であれば、<img>を使っては行けません。

<p style="background:略">テキスト</p>

一覧表であれば
<table>
<tbody>
<tr><td><img></td><td>テキスト</td></tr>
</tbody>
</table>
かもしれませんし、（テーブルの場合は文書構造とレイアウトが一致します。）

挿入画像などを示す

<figure>
<p><img></p>
<figcaption>テキスト</figcaption>
</figure>

または

<figure>
<figcaption>テキスト</figcaption>
<p><img></p>
</figure>

かもしれません。

>また、HTML5ではどんな方法がいいでしょうか？
HTML4でもHTML5でも基本は変わりませんが、
HTML4/XHTMLでは上記、<figure>のかわりに<div>、figcaptionの変わりに<p>や<span>が使われます。

お礼

回答ありがとうございます
float:leftが一番多いようですね。参考になりました

回答No.2

yui125132

レイアウトはcssで行うのがいいのでは無いでしょうか。
imgにcssでfloat: left;を設定しましょう。

以下のサイトが参考になると思います。
>>●画像の左右にテキストを回り込ませる
>>http://www.xml.vc/property/gazou/float.html

お礼

回答ありがとございます
やはりcssでやったほうがいいですよね

回答No.1

play_with_you

＞どんな方法が一番良いのですか?
レイアウトや目的に合わせた方法です。
つまり「どれがいい/正しい」というのは無い。

＞HTML5ではどんな方法がいいでしょうか？
同じです。

お礼

回答ありがとうございます
マニュアル的なことはないってことですね。参考になりました