- ベストアンサー
画像 文章の流し込み表示で
ちょっと段差の違いがありますが、気にしない場合、 上と下の違いはなんですか？ どっちでも良いですか？ おすすめはどちらですか？ 全く違う表示になってしまう場合もありますか？ <p><img src="cooking_3.gif" width="200" height="200" alt="料理3" style="float:right" />ここは長い文章・・・・・・・・</p> <img src="cooking_3.gif" width="200" height="200" alt="料理3" style="float:right" /> <p>ここは長い文章・・・・・・・・</p>
- takumana20
- お礼率91% (434/473)
- HTML
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
HTMLの考え方から言うと、画像をその段落内の文字の代替と考える場合は、段落内に書くでしょうし。別の段落と考えると分けた方がよいでしょう。imgはインライン要素ですから、基本的には<p></p>内にあるべきもので、全体を<div>などで括られている場合はエラーにはなりませんが、趣旨からいうと段落で囲むべき。 [段落内の画像]・・alt内の文字列に置き換えて問題ない場合 <p>魚を腹を手前に頭を左において、<img src="cooking_3.gif" width="200" height="200" alt="庖丁を魚の腹に水平に当てて" style="float:right" />引く。この時、皮だけを切るように注意しましょう。</p> ・・・この場合、画像を読み組まない設定にしている場合でも問題ないですね。 [別段落] <p><img src="cooking_3.gif" width="200" height="200" alt="庖丁と魚の位置関係を示す図" style="float:right" /></p> <p>魚を腹を手前に頭を左において、庖丁を魚の腹に水平に当てて図のように引く。この時、皮だけを切るように注意しましょう。</p> いずれの場合も、 <p class="subFig"><img src="cooking_3.gif" width="200" height="200" alt="庖丁と魚の位置関係を示す図" /></p> とすれば、一括して指定できますね。 HTMLを作成するときに、Lynx for Win32( http://lynx-win32-pata.sourceforge.jp/index-ja.html )のようなテキストブラウザで閲覧したらどうなるかを念頭に置いて作成すると良いでしょう。これは、検索エンジンがどのように読んでいるかを理解するのに便利なので入れておいてもよいかも。
その他の回答 (1)
- salonpath
- ベストアンサー率48% (194/399)
htmlの意味としては上です。 dl,dt(ここにimg),dd(ここにp)を使うのもありです。
お礼
ありがとうございました。
関連するQ&A
- 画像を右下から詰めて表示したい
画像を、テーブルを使わずに右下から詰めて表示したいのですが方法がわかりません。 少し歪ですが、下のようにしたいのです。中抜きの四角（□）の方向に随時増えていく予定です。 ←□■■ ■■■■■■■■ ■■■■■■■■ ■■■■■■■■ ←ここからスタート htmlとcssは次のように書いてみたのですが、そうすると上から詰めているような かんじになってしまいました。あまり詳しくないのですが、そもそもリストで表示しようとするのが いけないのでしょうか…？どなたかよろしくお願いいたします。 <ul> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> </ul> ul{ list-style:none; text-align:center; } li{ width:21px; height:17px; float:right; }
- ベストアンサー
- HTML
- テーブル内に画像表示するとき。
自サイトでレイアウトにテーブルを使っています（邪道って言わないで……）。 で、サイトロゴをセル内に表示させてネスケで確認したところ、 画像が半分テーブルの外にはみ出したようになってしまいました。 ちなみにはみ出した部分は少ししか表示されず、 つまり絵がぱっつんと途中で切れてしまった状態です。 普段はIE派ですが、こちらでは問題なく表示されます。 ネスケは4.7なのですが、まさかそういうバグがあるのでしょうか。 タグ手書きでいつも何かしらミスがあるので、今回も探したのですが、 何故か何が悪いのかわかりません。 以下にソースを載せますので、一緒に考えてくださると嬉しいです。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <table bgcolor="#ffffff" width="580" height="210"> <tr> <td width="210" height="210" rowspan="5"> <img src="×××.gif" width="210" height="210" alt="コメント"> </td> <td width="370" height="7"> <img src="1.gif" width="1" height="1"> </td> </tr> <tr> <td align="right" height="15" class="orange2"> 文章文章文章文章 </td> </tr> <tr> <td height="166"> 文章文章文章文章 </td> </tr> <tr> <td height="15" align="right"> 文章文章文章文章 </td> </tr> <tr> <td height="7"> <img src="1.gif" width="1" height="1"> </td> </tr> </table> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 問題の画像は4行目の「×××.gif」。 ちなみに1.gifはこれまたレイアウトの強い味方、 1ピクセル四方の透明画像になっております(笑)。 どうぞ宜しくお願いします。
- 締切済み
- HTML
- 画像を縦に並べたら隙間ができることについて
画像を縦に並べたところ隙間ができてしまいます。 隙間無くくっつけたいのですがどうすればいいのでしょうか。 以下htmlです。 <img src="img/nakama_img01.gif" width="687" height="227" alt="画像１" /><br /> <img src="img/nakama_img02.gif" width="687" height="197" alt="画像２" /><br /> <img src="img/nakama_img03.gif" width="687" height="244" alt="画像3" /> <br />で改行せずくっつけてタグを並べても同じ結果でした。 よろしくお願いします。
- ベストアンサー
- HTML
- 1つの画像オンマウスで3つの画像を切り替えたい！
現在、下記のような感じで一つの画像オンマウスでその画像を含む3つの画像が切り替わるようにしています。 ---------------------------------- <a href="#" onMouseOver="11111.src='a.gif';22222.src='b.gif';33333.src='c.gif'" onMouseOut="11111.src='a_01.gif';22222.src='b_01.gif';33333.src='c_03.gif'"><img src="aaaaaa.gif" alt="" width="94" height="32" border="0" name="11111" /></a> <img src="b_01.gif" alt="" width="572" height="50" name="22222" /> <img src="c_01.gif" alt="" width="96" height="32" border="0" name="33333" /> ---------------------------------- IE6だと、きちんと表示されるのですが、 Firefoxだと表示がおかしくなります。 改善方法はありませんでしょうか？ 助けてください！
- ベストアンサー
- JavaScript
- css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（
css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（超初心者です。） 現在、Kompozerをつかってホームページを作成しています。 添付画像のような配置にしたいので、いろいろなサイトを参照したのですがどうしてもうまくいきません。 現在のソースは以下のようになっており、ブラウザで表示すると背景画像が表示されません。 あまりにも知識がなく、不快な思いをさせてしまったら申し訳ございません。 ご指導いただければうれしいです。 よろしくお願いします。 ＊ソース <html><head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>ページタイトル</title> <style type="text/css"> </style> </head><body> <div style="text-align: center;" background-image:="" url ＊＊.jpg ;width:450px;height:450px;=""><br> <br> <img style="width: 137px; height: 137px;" alt="" src="＊＊.gif" border="0"><br> <br><p style="text-align: center;"> <a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><img style="width: 92px; height: 230px;" alt="" src="＊＊.jpg"><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><br></p> </div> </body></html>
- ベストアンサー
- HTML
- CSSで画像を横並びに
CSSで画像を3枚横並びにしたいのですが、 IEで見ると右肩下がりになってしまいます。 詳しくないので、教えていただけると幸いです。 ◆html <ul> <li><img src="images/xx.gif" alt="" width="118" height="189" border="0" class="fleft mgr42 mgl30 mgt10"></a></li> <li><img src="images/xx.gif" alt="" width="118" height="189" border="0" class="fleft mgr42 mgt10"></a></li> <li><img src="images/xx.gif" alt="" width="118" height="189" border="0" class="fleft mgt10"></a></li> </ul> ◆css .fleft { float:left } .mgr42{ margin-right:42px } .mgl30{ margin-left:30px } .mgt10{ margin-top:10px }
- ベストアンサー
- CSS
- tableの作成方法について
よろしくお願いします。 表を以下のように作成しました。 表の横のラインに罫線を引きたいのですが記述方法が分かりません。 表の周りにはcssで記述して2pxの罫線を引いてあります。 どなた様か、ご指導の程よろしくお願いします <table> <tr> <td rowspan="3" class="b"><img src="img/wg.jpg" alt="パソコンノウハウ" width="190" height="250" /></td> <td class="c"><img src="img/txt21.gif" alt="" width="168" height="24" /><br /> </td> </tr> <tr> <td class="d"><img src="img/9.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/ten.gif" alt="パソコンノウハウ" width="21" height="63" /><img src="img/8.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /><img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/en.gif" alt="パソコンノウハウ" width="131" height="63" /></td> </tr> <tr> <td class="e"><a href="http://www."><img src="img/enter_off.gif" alt="" width="349" height="83" /></a></td> </tr> ----------------------------------------------------------------ここに横の罫線を引きたいのですが記述方法が分かりません。 <tr> <td rowspan="3" class="b"><img src="img/wg.jpg" alt="パソコンノウハウ" width="190" height="250" /></td> <td class="c"><img src="img/txt22.gif" alt="" width="103" height="23" /><br /> </td> </tr> <tr> <td class="d"><img src="img/1.gif" alt="パソコンノウハウ" width="41" height="63" /><img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/ten.gif" alt="パソコンノウハウ" width="21" height="63" /><img src="img/8.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /><img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/en.gif" alt="パソコンノウハウ" width="131" height="63" /> </td> </tr> <tr> <td class="e"><a href="http://"><img src="img/enter_off.gif" alt="" width="349" height="83" /></a></td> </tr> </table>
- ベストアンサー
- HTML
- floatで左右に分けて配置した2個の画像の中央にテキスト
floatで左右に分けて配置した2個の画像の中央にテキストを回り込ませた後にテキストの続きの内容の画像を配置するとIE6でレイアウトが崩れしまします。 （NN7、Opera9、Firefox2では表示されるのですが…。） 初心者ですので困っています。お力をお貸し下さい。 ↓このように表示したいです。 ■■■■ テキスト ■■■■ ■画像■ テキスト ■画像■ ■■■■ ■画像■ ■■■■ ■■■■ ■画像■ ■■■■ ↓IE6ではこのような表示になってしまいます。 ■■■■ テキスト ■■■■ ■画像■ テキスト ■画像■ ■■■■ ■■■■ ■■■■ ■■■■ ■画像■ ■画像■ タグは以下のとおりです。 ☆HTML☆ <div id="contents01"> <div id="contents01_left"> <img src="img/contents01_01.gif"> </div> <div id="contents01_right"> <img src="img/contents01_02.gif"> </div> <p>テキストテキスト</p> <p><img src="img/contents01_03.gif"></p> <p><img src="img/contents01_04.gif"></p> <p><img src="img/contents01_05.gif"></p> </div> ☆CSS☆ #contents01{ width:480px; height:140px; padding:10px; } #contents01_left{ float:left; width:150px; padding-right:10px; } #contents01_right{ float:right; width:150px; padding-left:10px; } どうぞよろしくお願い申し上げます。
- ベストアンサー
- HTML
- tableの内側の線を表示したい
タイトルどおり、テーブルの内側の線を書きたいのですが、CSSなどが影響しているようで縦の線が表示されません。 私個人のサイトではないので、他のページのテーブルは変更できないので、私が書いている文章の途中にだけ出てくるテーブルのみに、縦線を表示させたいです。 今後は使うことはないと思うので、できれば、CSSのファイルをいじることなくやりたいのですが、方法がわかりません。アイデアを貸してください。 <table style="height: 614px;" width="496" > <tbody> <tr> <td><img class="size-medium wp-image-1624 aligncenter" src="" alt="12" width="225" height="300" /> <p style="text-align: center;">テキスト</p> </td> <td><img class="size-medium wp-image-1626 aligncenter" src="" alt="11" width="300" height="225" /> <p style="text-align: center;">テキスト</p> </td> </tr> <tr> <td><img class="size-medium wp-image-1584 aligncenter" src="" alt="1022" width="300" height="339" /> <p style="text-align: center;">テキスト</p> </td> <td><img class="size-medium wp-image-1585 aligncenter" src="" alt="1082" width="300" height="339" /> <p style="text-align: center;">テキスト</p> </td> </tr> <tr> <td><img class="size-medium wp-image-1586 aligncenter" src="" alt="1092" width="300" height="339" /> <p style="text-align: center;">テキスト</p> </td> <td><img class="size-medium wp-image-1627 aligncenter" src="" alt="13" width="254" height="339" /> <p style="text-align: center;">テキスト</p> </td> </tr> <tr> <td><img class="size-medium wp-image-1583 aligncenter" src="" alt="P1000231" width="300" height="225" /> <p style="text-align: center;">テキスト</p> </td> <td><img class="size-medium wp-image-1625 aligncenter" src="" alt="15" width="300" height="225" /> <p style="text-align: center;">テキスト</p> </td> </tr> </tbody> </table>
- 締切済み
- CSS
- FireFoxでのレイアウト表示崩れについて
現在ホームページを作成しています。 CSSでのレイアウトに挑戦しており、ページ上部に横型のメニューを設置しました。 IEではうまく表示が出来たのですが、FireFoxで表示した際、横にメニューが並ばずに縦に並んでしまいます。google等で検索し調べたのですがうまくいきません。 よろしくお願いします。 以下ソース ◇HTML部分◇ <body> <div id = "wrap"> <div class = "header"> <div id = "h_wrap"> </div> <div id = "u_wrap"> <u class="hnavi"> <li><img src="img/top-menu-1.gif" alt="会社概要" width="149" height="60"</li> <li><img src="img/top-menu-2.gif" alt="業務内容" width="150" height="60"</li> <li><img src="img/top-menu-3.gif" alt="実績" width="151" height="60"</li> <li><img src="img/top-menu-4.gif" alt="店舗案内" width="149" height="60"</li> <li><img src="img/top-menu-5.gif" alt="採用情報" width="150" height="60"</li> <li><img src="img/top-menu-6.gif" alt="お問合せ" width="151" height="60"</li> </u> </div> </div><!-- /header --> <div class = "topwrap"> topimg </div><!-- /topwrap --> <div id = "inner"> <div = "mainwrap"> mainwrap </div><!-- /mainwrap --> <div = "sidewrap"> sidewrap </div><!-- /sidewrap --> <div class = "clear"><hr /></div> </div><!-- /inner --> <div id = "footer"> footer </div><!-- /footer --> </div><!-- /wrap --> </body> ◇CSS部分◇ body {text-align:center;} #wrap {width:900px; margin:0 auto; text-align:left; } .header {height:130px; } .topwrap {height: 300px;} #inner { margin:0 10px; } #mainwrap {width:690px; float:left; } #sidewrap {width:170px; float:right;} .clear {clear: both;} .clear hr {display: none;} .footer {height:118px;} /*----------------------------------------------------- headder ---------------------------------------------------- */ #h_wrap {height: 80px;} #u_wrap { height: 60px; margin: 0; padding: 0; } .hnavi { margin: 0; padding: 0; } .hnavi li { display: inline; list-style:none; float: left; margin: 0; padding: 0; } 以上です。 宜しくお願いします。
- ベストアンサー
- HTML
お礼
良い例で参考になりました。ありがとうございます。