- ベストアンサー
文字の回りこみについて
7タグという、ホームページ作成参考ページをみながら作り始めています。かずかずあった問題も、これまで自分で解決してこれたのですが、文字の回りこみについて、質問があります。 <IMG SRC="画像名.jpg" align="left"> <A HREF="profile.html">自己紹介</A> <br> <A HREF="link.html">日記</A> <br> <A HREF="link.html">掲示板</A> <br> <A HREF="link.html">リンク</A> と、align="left"という属性を入力すると「自己紹介」という文字が画像の右に表示されず、下に回りこみます、という説明があったのですが、どうやっても無理です。 ふと、ひらめいて、画像の下にスペース<br>を入れてみたら、自己紹介以下の文字列は下にゆくようになりましたが、こんな解決でいいのかなぁと思います。この場合、align="left"も必要ありませんでした。
- jasu
- お礼率40% (188/466)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
「align="left"」というのは、「画像の右に文字を回り込ませる属性」です。 何故、文章が右なのに「align="left"」なのかというと、 『画像は左、文章（画像等でも可）は右』というような意味合い…とご理解下さい。 「align="right"」ならば、文章が右、画像が左となります。 つまり、<img>タグ内に、「align="left"」を入れると、 □（画像）□ □（画像）□文章いろいろ …と、こんな風な表示となります。 この、「文章いろいろ」の文章が長ければ、 □（画像）□文章いろいろ……～～～ □（画像）□～～～長文。 と、画像の高さ分、左に来る文章が２行３行となる場合もあります。 「align="left",align="right"」の属性を解除するには、 「<br clear="left">,<br clear="right">」を使います。 （align="left"を使用するなら、<br clear="left">を使う。属性と解除は１セット、と覚えた方が良いと思います） なぜこれを入れるかというと、例えば大きな画像を扱った時、延々と画像の右に文章が回り込んでしまいます。 以下の場合、 □（画像）□１）○○ □（画像）□２）○○ □（画像）□ □（画像）□※追記 『※追記』を、画像の下に回り込ませたかったら、 『２）○○<br clear="left">』と打てば、『※追記』は、画像の下に文章が来ます。 さて、 <img>タグは元々、属性を記さなくても、「画像最下部の右の位置に文章を回り込ませる」性質があるようです。 なので、質問者さんがひらめいた方法、 <IMG SRC="画像名.jpg"><br> は、この段階では、別に間違いではない…と思います。 （「画像の下にスペース<br>を入れてみたら…」とありますが、<br>の前にスペースを入れる必要はありません。 <br>は改行タグなので、「画像の後に改行する」という意味合い…とご理解下さい） ちなみに… HTMLタグでの属性記述は、最近では『非推奨』となっています。 どういう事か簡単に説明すると、 「デザイン等はHTMLタグではなく、CSSで行うべき」 というのが現在のHTML規格である…という感じです。 HTMLを一通り覚えたら、CSSについて学び、HTML+CSSへと移行された方が良いと思います。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
何をされたいのかいまいちぴんと来ないのですが・・ 画像の【右ではなく】下に、リンクリストを配置したいということだとして。 HTMLの要素には、inline(インライン=行内)要素と、block(ブロック)要素があります。 絶対に覚えておかなければならない区別なので、初心者向きのマニュアルでは最初に書かれているはずです。 さて一つのブロック要素内に、画像のようなインライン要素を置いても改行はされません。強制改行(BR＝forced line break）という要素はありますが、これは特別なもので普通は使わないこととされています。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから BR要素は、現在のテキスト行を強制的に区切る(終了させる)。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Paragraphs, Lines, and Phrases (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#edef-BR )］より 言い換えると段落とは意味が違う。たとえば次のような場合に使用します。 ・住所を書くときに、郵便番号、広域住所、住所、氏名、所属のように本来は一つの要素であるが視覚的に分けたい場合 あなたのソースの場合は、異なるリンク先を示しているのですから、内容が異なるため、ブロック要素段落要素として<p></p>でマークアップするか、リストでマークアップすべきです。 ★なお、align属性は、非推奨なので以下では使用していません。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから align = bottom|middle|top|left|right 推奨しない。 この属性は、IMG、OBJECT、APPLET要素の、周囲の文脈に対する位置取りを指定する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Objects, Images, and Applets in HTML documents( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#adef-align-IMG )］より また、img要素には必ずalt属性を書きましょう 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから alt属性は、IMG要素とAREA要素では必ず指定しなければならない。 INPUT要素とAPPLET要素では任意選択である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Objects, Images, and Applets in HTML documents( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#adef-alt )］より 【例】画像の下にリンクを羅列する。 注意）下記ソースは分かりやすいように全角スペースでインデントさせています。 使用するときは、全角スペースをタブなどの空白文字に変換すること。 [例]HTMLソース <div id="menue"> <h3> <img src="URL" width="200" height="数値" alt="リンクの一覧"> </h3> <ol> <li><a href="profile.html">自己紹介</a></li> <li><a href="link.html">日記</a></li> <li><a href="link.html">掲示板</a></li> <li><a href="link.html">リンク</a></li> </ol> </div> [例]CSSソース・・・<head></head>内に記述する。 ★画像幅200px、メニューも200pxとして、 <style type="text/css"> <!-- div#menue{ position: relative; width:200px; top:0px;border:solid 1px blue;} div#menue h3{font-size: 1em; font-weight:normal;margin:0px;text-align:center;} div#menue ol{display: block;margin:0px; padding:5px;} div#menue ol li{display:block;line-height: 1.4em; margin:0.5px 1em; padding:0px;} --> </style>
関連するQ&A
- fc2 画像と文字の間をあける方法
皆様 お世話になります。 左側に画像があり、その右に文字やアフィリを入れる場合、 <a href="画像のＵＲＬ" target="_blank"><img src="画像のＵＲＬ" alt="bi" border="0" /align="left" ></a>文字をココに入れる<br clear="all" /> とやることはわかりましたが、もう少し画像と文字の間を開けたいという場合はどうすればいいのでしょうか？ どなたか知ってらっしゃいましたら教えて下さい。 宜しくお願いします。 どうすればいいのでしょうか？
- ベストアンサー
- ブログ
- 画像を横に並べるには？
ブログでアフェリエイトをしたいのですが、画像の横に紹介文を回り込ませたり、また、画像の下に紹介文を入れたものを横に複数並べるにはどうしたら良いでしょうか？tableを使ったところレイアウトがずれてしまいした（忍者ブログを借りています）。 <a href=""><img src="" align="">紹介文</a><br clear""> <a href=""><img src=""><br>紹介文</a> まではできます。
- ベストアンサー
- ブログ
- 文字とテーブルの間の間隔について
質問させていただきます。 以下のhtmlをフレームの左側として使っているのですが、 <center> <b><font size="5" color="pink" face="'Comic Sans MS'">文字</font></b><img src="画像" align="middle"><br /> <img src="ライン画像"><br /> </center> <table border="0" height="100%" width="260" align="center"> <tr><td align="left"><blockquote><br /> <b><font size="4" color="deeppink">タイトル</font></b><br /><br /> <font size="2">ジャンル<br /> <a href="URL" target="right">仮</a>/<a href="URL" target="right">仮2</a>/<a href="URL" target="right">仮3</a><br /> </font><br /><br /><br /><br /><br /><br /><br /><br /><br /> </blockquote></td></tr></table> ライン画像とテーブルの間の改行は一つしかないのですが、かなりスペースが空いてしまいます。 反転して見てましたが、やはりスペースと改行と言うように、しっかりと改行は一つだけでした。 しかし、このスペースは健在です。 どうしたら、このスペースをなくすことが出来るのでしょうか？
- ベストアンサー
- Windows XP
- 画像の横に文字をうまく配置できない
htmlで、画像の横に文字を配置したいのですが、下記の文章を入力しても、一行目の「タイ王国の伝統灰皿 \1,500」が画像の右下に配置され、「商品番号:a111」は画像の下に配置されてしまいます。ちなみにalign="right"と設定しても、なぜか上記（align="left"）と全く同じ配置になってしまいました。何か根本的に間違っているのでしょうか？ドリームウィーバーのデザインビュー上では思い通りのデザインになっているのですが・・・ ちなみにIEのバージョンは８です。どなたかアドバイスをお願いします。 <div id="contents"> <img src="img/商品（仮）.JPG" width="300 height="300"align="left"/> タイ王国の伝統灰皿 \1,500<br> 商品番号:a111<br clear="left"> </div>
- ベストアンサー
- HTML
- 横幅の違う画像をalignを使って左寄せ
画像A 文字A 画像B 文字B というような表示をさせたくて、alignを使って左寄せにしたのですが、画像Bの横幅が画像Aより狭いためか、画像Aの隣に表示されてしまいます。 画像A画像B文字A 文字B という感じです。 タグは <img src="画像A" alt="" align="left"> <img src="画像B" alt="" align="left"> <br><br> 文字A<br> 文字B と記述しています。 Fire foxではちゃんと狙い通りに表示されたのですが、IE7だとダメでした。 なぜIE7では表示されないのでしょうか？IE7で表示されるようにするにはどうしたらいいのでしょうか？ わかりにくい説明だと思いますが、よろしくお願いいたします。
- 締切済み
- HTML
- 画像の横にリンクボタンを置きたいんですが
画像の横にリンクボタンを置きたいんですが <img align=left src="m38.jpg><br> <A HREF="right.html" STYLE="text-decoration:none;color:006633;">在りし日1</A> <br> <br> <A HREF="right1.html" STYLE="text-decoration:none;color:006633;">在りし日2</A> <br> <br> <br clear="all"><br> とやってみましたがうまくいきません。画像がでてきません。どうしたらよいでしょうか？
- ベストアンサー
- HTML
- 携帯HPナノ ナノという文字について
携帯ホームページナノさんでホームページを作成しています。 検索しても見つけられなかったので、質問させてください。 アルバム機能を使ってイラストを掲載しているのですが、画像画面で「ナノ」という文字がイラストにかぶってしまっています。 サイトはPC•スマホ向けに作成していて、CSSを使用しています。 かぶってしまうのはPCから見た場合です。 スマホから確認すると、ちゃんとページの一番下に「ナノ」と表示されます。 ◼︎画像画面レイアウトの内容 <div style="text-align:right" align="right" > <center>#title#<br><a href="子ページ"><img src="#img_url#"border="0"/></a> <br> #text#<br> <BR> <BR> 新← →古<BR> #prev_next_next# #next_prev_prev#</center><br> <BR> <right>>><a href="子ページ">Original</a></right><BR><BR> <BR> </div> ◼︎イラストの大きさ 600*800（端末によって大きさを自動で最適化する文章をCSSに組み込んであります） どうかよろしくお願いします。
- ベストアンサー
- CSS
- サムネイル画像をリンクにしたとき align="top"が効かない
サムネイル画像をリンクにしたときに横に"＊"を画像topと揃えて表示したいのですが、 <A HREF="リンク先"><img border="0" src="image.gif" align="top"></a>＊<br> 上記ソースで"＊"が下になってしまうのはなぜでしょうか。 解決策がありましたら、ご教示お願いします。
- ベストアンサー
- HTML
- 画像の下に文字が来ないようにするには
画像の下に文字が来ないようにするにはどうすればいいでしょうか？ <li>タグの中に、左に画像、右に文字を改行して表示させたいのですが、 改行すると画像の下に2行目が来てしまいます。 これをを避けるにどうすればいいでしょうか？ 下記のコード、すべて思い通りになりません。 <!DOCTYPE html> <html lang="ja"> <head> <title>test</title> </head> <body> <li> <a href="#"> <img src="C:\UsersDesktop\test.jpg"> <span>test</span><br><span>test</span> </a> </li> <li> <a href="#"> <img src="C:\UsersDesktop\test.jpg"> <span>test<br>test</span> </a> </li> <li> <a href="#"> <img src="C:\UsersDesktop\test.jpg"> <p>test<br>test</p> </a> </li> </body> </html>
- ベストアンサー
- HTML
- 文字の回りこみについて
画像の回りこみ方法をいろいろと調べてみたのですが、文字を右に回り込ませる場合、「align = "left"」や「<br clear="all">」をつけるというところまではわかったのですが、例に挙がっている画像のＨＴＭＬとはやや異なるようで、うまくいきません。例えば以下のような画像の場合どこにつければ良いのでしょうか？よろしくお願いします。 <a href="http://px.a8.net/svt/ejp?a8mat=1HNMYP+5TKMHM+V5O+BWGDT&a8ejpredirect=http%3A%2F%2Fwww.towerrecords.co.jp%2Fsitemap%2FCSfCardMain.jsp%3FGOODS_NO%3D1897407%26GOODS_SORT_CD%3D103" target="_blank"> <img border="0" alt="" src="http://img.towerrecords.co.jp/images/jacket/tower/4988005528353.jpg"></a> <img border="0" width="1" height="1" src="http://www13.a8.net/0.gif?a8mat=1HNMYP+5TKMHM+V5O+BWGDT" alt="">
- ベストアンサー
- ブログ
