- ベストアンサー
てきすとの回り込みをしたときの位置
<img align="left"> あいうえお<br> あいうえお<br> としたとき、イメージの右に 「あいうえお あいうえお」 と表示されますが、 画像の高さ方向の 画像の位置を中央にすることはできますか？
- HTML
- 回答数6
- ありがとう数4
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
<html> <head> <title>たいとる</title> <link rel="stylesheet" href="aiueo.css" type="text/css" media="all" /> </style> </head> <body> <div id="pic"> <img src="1.gif" width:60px; height:40px;> </div> <div id="aiueo"> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> </div> </body> </html> head 部分を外部ファイルにすると、さらにスッキリします。 上のhtmlはこのまま保存して、↓ここから下 #pic{ width:100px; height:540px; float:left; } #aiueo{ text-align:left; width:100px; height:300px; } を「aiueo.css」として、同じフォルダ内に保存すると、 二つに分かれますが、html ファイル自体は軽くなります。
その他の回答 (5)
- Bergamot
- ベストアンサー率22% (68/299)
<head>部分で「.」 <body>部分で「class」 を使ってしまいましたが、これは何回も出てくる場合で 同じ要素を一度しか使わないなら <head>部分で「#」 <body>部分で「id」 を使います。 #pic{ } としたなら <div id="pic"> </div> こんなカンジです。
- Bergamot
- ベストアンサー率22% (68/299)
<html> <head> <style type="text/css"> <!-- .pic{ width:100px; height:540px; float:left; } .aiueo{ text-align:left; width:100px; height:300px; } --> </style> </head> <body> <div class="pic"> <img src="1.gif" width:60px; height:40px;> </div> <p class="aiueo"> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> </p> </body> </html> 字がズレたけど、これでどうでしょうか？
- Bergamot
- ベストアンサー率22% (68/299)
<html> <head> </head> <body> <img src="1.jpg" align="left" width="200" height="200"> <br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> <br> </body> </html> すいません、すごく簡単に画像の大きさを入れました。 画像の高さより文字の高さが小さい場合、 簡単には<br>改行であわせられますが、 細かく指定するにはｃｓｓかなと思います。
お礼
ありがとうございます ＞細かく指定するにはｃｓｓかなと思います。 そのｃｓｓを教えて下さい
- info22
- ベストアンサー率55% (2225/4034)
イメージの右側真横に「あいうえお」を１行だけ持っていくことは出来ますが、２行目はイメージの下に表示されてます。 イメージの右横中央部に説明文をつける場合は見えない表の機能を使えば可能かと思います。 具体的には、イメージを「image.jpg」とした時、以下のように記述すればいいですね。 見えない１行２列の表を作り、左側のセルにイメージ、右側に「あいうえお」の２行をセルの縦方向ミドルに指定すればよいではないかと思います。 <table style="text-align: left;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="vertical-align: top;"> <img alt="" src="image.jpg" style="" align="middle"></td> <td style="text-align: left; vertical-align: middle;"> あいうえお<br> あいうえお</td> </tr> </tbody> </table>
お礼
やはり行き着くのはそこですよね。。 なるべくスマートに決めたかったですが、仕方ないですね ありがとうございます
- sion124
- ベストアンサー率4% (2/49)
<img src="画像のアドレス" align="middle"> おそらくコレだと思います。
お礼
ありがとうございます tableを使う方向でいきます
補足
IE6.0ですが コレだと<br>で改行すると、 ２行目が、画像の下になっちゃいますね、、 引き続きお願いします
関連するQ&A
- 画像とテキストのレイアウト
左に画像、その画像の右に複数行のテキストを、画像高さの中央に配置したいと思っています。 <table><tr><td><img></td> <td style="vertical-align:middle"> 文１<br> 文2<br> 文3<br> </td></tr></table> をテーブルを用いないでレイアウトしたいということです。 <img src="loc"> 文１<br> 文2<br> 文3<br> では、文１ のみが画像右に表示されます。 <img src="loc" style="float:left"> 文１<br> 文2<br> 文3<br> では、文全体が画像のtop位置から表示されます。 どのようにスタイルシートで指定すればいいのでしょうか？
- ベストアンサー
- HTML
- オンマウスでの拡大画像の位置指定
サムネイル画像にオンマウスした時の拡大画像の位置指定がよくわかりません。今の状態だとマウスを乗せた時に拡大画像がサムネイル画像とかぶってしまい、他のサムネイルが隠れてしまいます。できたら、拡大画像をサムネイル画像かぶらせず、左側に表示させたいのですがどう指定したらよいのでしょうか？ついでに拡大画像を右側、上、下に指定したい時の表示方法もあわせてアドバイスいただけたらありがたいです。 それと、サムネイル画像の下にちょっとしたコメントを記載したい時はどうしたら良いのでしょうか？どうかよろしくお願いします。 <script> var src1="image01.jpg" var src2="image1.jpg" var src3="image02.jpg" var src4="image2.jpg" var src5="image03.jpg" var src6="image3.jpg" var src7="image04.jpg" var src8="image4.jpg" </script> <p align="center"> <img src="image01.jpg" onmouseover="this.src=src2" onmouseout="this.src=src1"> <br> <br> <img src="image02.jpg" onmouseover="this.src=src4" onmouseout="this.src=src3"> <br> <br> <img src="image03.jpg" onmouseover="this.src=src6" onmouseout="this.src=src5"> <br> <br> <img src="image04.jpg" onmouseover="this.src=src8" onmouseout="this.src=src7"> <br> </p>
- 締切済み
- CSS
- 横幅の違う画像を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
- cssでテーブルの位置を設定するには？
<table border="1" align="left">でテーブルの位置を競ってすることはできたのですが スタイルシートで行いたいです。 そもそも他のテーブルはすべて中央に寄せたいため、 table { margin-left: auto; margin-right: auto; } としています。 そのうえで、任意のテーブルのみ左に寄せて表示したいので table.test { align:left; } としたのですが、うまくいきません。 ---------------------------------------------------------- <html> <head> <title>test</title> <STYLE type="text/css"> table { margin-left: auto; margin-right: auto; width: 40%; } table.test { width: 80%; align:left; } </STYLE> </head> <body> <table border="1"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" align="left"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" class="test"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> </body> </html> ----------------------------------------------------- このコードだと、 table.test { width: 80%; align:left; } の、 width: 80%; の部分は認識されるようですが、align:left;は無視されます。 スタイルシートでテーブルの位置を設定する方法をご教授ください。
- 締切済み
- CSS
- ＣＳＳで指定してます。プラザーによっては文字の位置
よろしくお願いします。 文字の大きさ、行間を指定しているのですが プラウザーによっては文字の位置が一行ほどずれてしまいます。 何か対策はないのでしょうか？ ＩＥは文字半角分左に、Chromeは一行上に、Operaは半角分右によってます。 ＣＳＳを自力で書き込むのは初めてで、サンプルブックを見ながらしてます。 書き方を間違えているのでしょうか。 ------------------------------------------- 【スタイルシート】 *{ margin:0; padding:0; } #boxA{ background : none 0% 0% / auto auto repeat scroll padding-box border-box #ffffff; } #boxB{ background:#ffffff; } #boxE{ background : none 0% 0% / auto auto repeat scroll padding-box border-box #ffffff; } body{ text-align:center; } #container{ width:892px; margin-left:auto; margin-right:auto; text-align:left; } h1{ font-size : 11.5px; color:#333333; font-weight : 500; text-indent:0px; letter-spacing : -0.1em; } .text1{ font-size : 11.5px; letter-spacing : -0.1em; } .text2{ font-size : 70%; } .text3{ font-size : 85%; line-height : 1.3em; } #boxA{ width : 892px; } #boxA2{ width : 708px; margin-top : 10px; margin-left : 90px; background-image : url(../img/top_img.jpg); height : 328px; } #boxA3{ width : 708px; margin-top : 10px; background-image : url(../img/porishi.jpg); background-repeat : no-repeat; background-position : 50% 50%; margin-left : 90px; height : 130px; } #boxE{ width:100%; clear:left; } #boxB{ width : 892px; float : none; } #boxB2{ margin-top : 10px; margin-left : 100px; width : 708px; } ------------------------------------------- 【webページ】 </head> <body background="img/bgcolor.png"> <div id="container"> <div id="boxA"> <br /> <div id="boxA2" class="text1"> <br /> <br /> <br /> <br /> <a href="http://www.wakayama2015.jp/" target="_blank"><img src="img/top_kokutai.png" width="106" height="276" border="0" align="left" alt="2015年紀の国わかやま国体 わかやま大会" /></a><br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <h1> 暮らしに欠かせない食・住・遊に関する事業を展開する丸長グループ。 </h1> 日々の生活が安心・快適で、そして豊かであってほしい…<br /> その想いがグループ企業の分野を超えたノウハウの共有につながり、<br /> さらなるサービスの向上へと結びついているのです。<br /> これからも郷土和歌山県を拠点に県内外に事業フィールドの拡大に<br /> 邁進してまいります。<br /> </div> <div id="boxB" style="text-align : center;" align="center"> <div id="boxB2"> <img src="img/top_mainimg.png" width="703" height="815" border="0" /> </div> </div> <div id="boxE" style="text-align : center;" align="center"> <p style="text-align : center;" align="center" class="text2"><br /> <font color="#000000">Copyright (C) 2000 MARUCHO GROUP Corporation. All Rights Reserved.</font></p> </div> </div> </div> </body> </html> 【webテスト】 http://www.dream-web.jp/test/maru/ サンプルブック見れば見るほど解らなくなってしまって困ってます。 助力よろしくお願いします。
- 締切済み
- CSS
- XOOPS カスタムブロックに htmlを配列
始めまして！ 初めて投稿させて頂きます。 XOOPSのカスタムブロックにhtmlで表示したいのですが、イメージ通り表示出来ないでおります。 htmlの知識も無い無謀者ですが、どうかご指導の程宜しくお願い致します。 【やりたい事】 ブロックの左側にアイコンに続きtxtを挿入、右側にイメージ画像のアフリエイトを配置したいのですが、表示がイメージ通り出来ません。 添付ファイル画像（１） ・配置したいイメージ 添付ファイル画像（２） ・現状 ・現状のソース <P><Div Align="left"><IMG src="file:///C:/Users/xxx/Desktop/folder858.png" width="24" height="24" border="0">test01<BR></Div> <Div Align="left"><IMG src="file:///C:/Users/xxx/Desktop/folder858.png" width="24" height="24" border="0">test02<BR></Div> <Div Align="left"><IMG src="file:///C:/Users/xxx/xxx/folder858.png" width="24" height="24" border="0">test03<BR></Div> <Div Align="left"><IMG src="file:///C:/Users/xxx/xxx/folder858.png" width="24" height="24" border="0">test04<BR></Div> <Div Align="left"><IMG src="file:///C:/Users/xxx/xxx/folder858.png" width="24" height="24" border="0">test05<BR></Div> <Div Align="left"><IMG src="file:///C:/Users/xxx/xxx/folder858.png" width="24" height="24" border="0">test06<BR></Div> <Div Align="left"><IMG src="file:///C:/Users/xxx/xxx/folder858.png" width="24" height="24" border="0">test07<BR></Div> <Div Align="left"><IMG src="file:///C:/Users/xxx/xxx//folder858.png" width="24" height="24" border="0">test08<BR></Div> <Div Align="right"><script type="text/javascript"><!-- google_ad_client = "pub-ｘｘｘｘｘｘｘｘｘ"; /* 200x200, 作成済み 09/06/15 */ google_ad_slot = "ｘｘｘｘｘｘ"; google_ad_width = 200; google_ad_height = 200; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></Div> ご指導宜しくお願い致します。
- ベストアンサー
- その他([技術者向] コンピューター)
- img の align 属性を css に変更したいが、位置がずれる
img タグで、align 属性 top, middle, bottom を使用して 文章中の図の位置を調整していました。 CSS での位置表示に変更しようと思い、 align="..." を class="..." に変更し、CSS で img.top {vertical-align: top;} img.middle {vertical-align: middle;} img.bottom {vertical-align: bottom;} と設定しましたが、alignで設定していたときと位置がずれます。 解決法について探しているのですが、以下のような説明しか見つからず、 わかりません。 ■top 上端に合わせます。 ■middle 中央に合わせます。 ■bottom 下端に合わせます。 http://www.tagindex.com/stylesheet/img/vertical_align.html 解決法をお分かりの方、どうか教えてください。
- ベストアンサー
- HTML
- 文字位置の修正方法は
初めて、ホームページを作るので、出来るだけ詳しくお願いします <center><font size=5>文字</font><center><br><br> <img src="2.jpg" height="300" width="399" align="left" hspace="15"> <font size=4><b> 文書１<br> 文書２<br> 文書３<br> </b></font> <br clear="left"><br><br> 上記のHTMLを書いたのですが、画像の右側の文書がセンターによってしまいます。どのようにしたら、文書１，２、３が左に頭がそろうのですか。 文字数が違う場合は、エクセルのように文字数を同じにするHTMLはありますか。
- ベストアンサー
- HTML
- 画像の位置を指定するCSS
画像の位置を指定するCSS 文字の前にポイント画像を<img src="~.gif" alt="" />のタグで置きたいんですが、ずれて文字の上のほうに表示されてしまいます。 すごく簡単に文字の中央に表示されるように指定できるCSSのタグがありますがどんな記述だったか忘れました。 検索しても出てこないので困ってます。 どなたか教えてください。 ちなみに background: url(hogehoge.gif) no-repeat 10px 0.5em;list-style: none;} これではないです。 もっと簡単でtext-alignのようなかんじの記述です。でもtext-alignではないです。 middleみたいな記述があった記憶があるのですが確かかどうか自信ないです。
- ベストアンサー
- HTML
お礼
ありがとうございます