リンク付き画像を右よりに表示するには？divタグ

質問

<a href="http://○○" target="_blank">
<img src="http://○○" border="0" /></a>
というタグを、ページの右に表示させたいのですが、
どうやって、表示させればいいのでしょうか？
divタグで挟むことをなんとなくわかったのですが、
divタグをどのように使えばいいのかわかりません。

cssで表示させる方法を教えてください。
今の状態でアップロードすると、自動で左寄りに表示されてしまいます

回答No.2

anonymous（@phantom0112358）

divとは”箱”です。
箱に名前をつけてcssからその名前のついた箱を指定します。

divはブロック要素なので（横幅いっぱいに広がる箱）
その中にimgを置くと”箱”の中に”画像”が左寄りに入った状態になります。
<div class="photo"><img src="http://○"></div>

この箱をCSSで指定してtext-align:rightをかけてやると箱の中で右よりになります。
div.photo { text-align: right; }

回答No.1

ORUKA1951

＞divタグで挟むことをなんとなくわかったのですが、
　DIVは、デザインのためのタグではありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
　とてもとても大事なことなのですよ。そうしないとHTMLがデザインのための意味のないDIVやSPAN---idやclassで埋め尽くされる。
　「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」のために文書構造はHTMLで、プレゼンテーションはスタイルシートで行なう意味がなくなる。
★以上のリンク先、長い文章ではないので読んでおくこと。このポイントを身につけておかないと、近いうちに大きな壁にぶつかる。

<a href=""></a>や<img src="" width="" height="" alt="">は行内要素と呼ばれる要素です。
→ブロックレベル要素と行内要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )
　行内要素は、ブロック要素の中に存在します。

1)<a href=""><img src="" width="" height="" alt=""></a>を含むブロック要素--
2)ブロックは<p>段落</p>だったり<li>リストの項目</li>であったり<address>アドレス</address>だったり、<h2>見出し</h2>であったりするでしょう。
　HTMLはそのように使います。
　<address><a href=""><img src="" width="" height="" alt="著者への連絡先"></a></address>
3) HTML4.01～XHTML1.1にはそれ以上に構造を示す要素が用意されていないためにidやclassを併用して構造を示していた。
　<p class="thumbnail">
　　<a href=""><img src="" width="" height="" alt="山中湖"></a></p>
　</p>
　※適切な要素がないときの最後の手段として「id属性及び class属性と併用して」divをつかう
　<div class="figure"><a href=""><img src="" width="" height="" alt=""></a></div>

4) スタイルシートでは、その文書構造にしたがってセレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html )--選択子--を使ってスタイルを適用したい要素を特定する。
address{text-align:right;} /* address要素は右寄せ */
p.thumbnail{text-align:right;}/* thumbnailクラスの段落は右よせ */
div.figure{text-align:right;}/* figure(挿絵)クラスのdivは右寄せ */

XHTMLのようですが、必要がなければ古臭いXHTMLでなくても良いと思う。