- ベストアンサー
ホームページ作成で困っています。
ホームページを見るときウィンドウを狭くすると文字と画像が重なってしまいます。 原因は何なんでしょうか？？
- tenpuracat
- お礼率66% (40/60)
- その他（音響・映像機器）
- 回答数6
- ありがとう数4
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
では、解決策(2)です。 <BODY> <DIV style="top : 100px;left : 246px; position : absolute; z-index : 24; " id="Layer6"><IMG src="****1.jpg" width="220" height="220" border="0"> </DIV> <DIV style="top : 100px;left : 475px; position : absolute; z-index : 24; " id="Layer5"><IMG src="****2.jpg" width="220" height="220" border="0"> </DIV> <DIV style="top : 332px;left : 246px; position : absolute; z-index : 21; " id="Layer3"><IMG src="*****3.jpg" width="220" height="220" border="0"> </DIV> <DIV style="top : 100px;left : 709px; position : absolute; z-index : 9; " id="Layer16"> <P>ここにテキストの文字列が入ります画像の右側です</P> </DIV> <DIV style="top : 332px;left : 10px; position : absolute; z-index : 9; width : 234px; " id="Layer80"> <P>ここにテキスト文字が列が入ります。画像の左側です</P> </DIV> </BODY> 分からないタグは、とりあえずおまじないと思ってご入力下さい。 （たぶん、入力ではなく、コピーでいけると思いますが？） 質問はナシです。やってみてください。
その他の回答 (5)
- musekininn
- ベストアンサー率46% (143/306)
(2)において、ウインドウの大きさに拠って、画像の右の文字列が勝手に改行されるのを防ぐためには。<nobr></nobr>のタグで改行されては困る文字列を囲ってください。 (3)においては、<table>タグのwidthを使いピクセル数で指定してください。<table border width="任意のピクセル数">、この場合は画像のピクセル数との兼ね合いがありますので、塩梅はそちらでお願いします。 (3)の表は基本的にウインドウのセンターに表示されるようにしてありますが、このままだと、画像の左側に配置される文字列が右側同様にウインドウの大きさに拠って改行されません。 右側と同様に<td></td>タグの中でテキスト文字を<p></p>で囲ってください。改行されるようになります。 上記の組み合わせで、作者の意図した通りのページの構図を閲覧者のウインドウの大きさに左右されずに提示できます。 お試し下さい。
- musekininn
- ベストアンサー率46% (143/306)
(2)でピクセル数を書きませんでした。940×1200です。 数値は任意にお試し下さい。 続いて(3)です。 <BODY> <CENTER> <TABLE> <TBODY> <TR> <TD></TD> <TD></TD> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD><IMG src="*****1.jpg" width="220" height="220" border="0"> </TD> <TD><IMG src="*****2.jpg" width="220" height="220" border="0"> </TD> <TD> <P>ここにテキストの文字列が入ります画像の右側です</P> </TD> </TR> <TR> <TD>ここにテキスト文字が列が入ります。画像の左側です</TD> <TD><IMG src="*****3.jpg" width="220" height="220" border="0"> </TD> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> <TD></TD> <TD></TD> </TR> </TBODY> </TABLE> </CENTER> </BODY>
お礼
できました！ ありがとうございます！ ウィンドウの幅を変える時、文章と画像がセンタリングしたままのホームページを見かけますがそういうタグはあるんですか？
- line301
- ベストアンサー率0% (0/22)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>未記入</title> <style type="text/css"> <!-- a:link{ color:#666600; } a:visited{ color:#666600; text-decoration:none; } A:hover{position:relative; top:2px; left:2px;} a {text-decoration:none;} a:hover{ color:#darkgray; text-decoration:none; } body{ color:#000000; background:#ffffff; } --> </style> </head> <body> <img src=".jpg" align="right" hspace="" vspace="50"> <img src=".jpg" align="right" hspace="" vspace="60"> <div align="right"> <p><img src=".jpg" align="right" hspace="" vspace="60"></p> <br clear="all"> <p style="font-family: hg行書体; font-style: italic;"><a style="font-weight: bold;" href=".html" taget="_blank" title="">Concept</a> </p> <p style="font-family: hg行書体; font-style: italic;"><a style="font-weight: bold;" href=".html" title="">Dinner</a> </p> </div> </body> </html> どんな構造にしたいのかよく分からなかったのでこんな感じでいかが？
- musekininn
- ベストアンサー率46% (143/306)
＜ホームページ作成で困っています。＞ まず、「作成」している場合は、画像の回り込みをさせる『構文タグ』がありますので、その構文を御使い下さい。 例<ing src="画像の名前" align="属性"> 属性＝ＬＥＦＴ（画像は左、文字列は右側） ＲＩＧＨＴ（画像は右側、文字列は左側） ＜ホームページを見るときウィンドウを狭くすると文字と画像が重なってしまいます。＞ 閲覧する場合にその様になってしまう場合は、ページを作成した当人が上記のタグを使っていないためです。 ページをＨＴＭＬに変換して、該当する場所に回り込みをさせるタグを入れてください。 最後にこの構文を解除するために<br clear="all">を入れます。
お礼
ありがとうございます。 とてもわかりやすいです。 ちなみに自分は <img src="＊＊.jpg"HSPACE" align="right"hspace="120" vspace="50" > <img src="＊＊.jpg"HSPACE" align="right" hspace="220" vspace="60" > と二つ画像を並べているんですがどうも重なってしまいます。 前後のタグがおかしいんでしょうか？？ それと構文を解除するためってどういうことなのですか？ 素人ですみません。。
- line301
- ベストアンサー率0% (0/22)
具体的にどんな状態なのかわかりません ソースなど提示すれば答えやすいと思いますよ
お礼
お返事ありがとうございます。 具体的にはこんな感じです。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title></title> <style type="text/css"> <!-- a {text-decoration:none;} A:hover { color:darkgray; } A:hover{text-decoration:underline;} A:hover{position:relative; top:2px; left:2px;} <meta name="keywords"content=""> --> </style> </head> <body bgcolor="#ffffff" color="#000000"link="#666600"alink="666600"vlink="666600"> <img src=".jpg"HSPACE" align="right"hspace="120" vspace="50" > <img src=".jpg"HSPACE" align="right" hspace="220" vspace="60" > <div align="right"><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br> <br> <br> <br> <br> <font size="5"face="hg行書体"> <i><strong><p><b><A Href=".html"taget="_blank"title">Concept</A> <br> <A Href=".html"title="">Dinner</A> <br> <A Href=".html"title=""></A> <br> <A Href=".html"title=""></A></b></p></strong></i> </font> </div> </body> </html> 画像名、タイトルなどは省略しています。 素人が作ったものなのでぐちゃぐちゃかもしれませんが、 御診断よろしくお願います。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
確かに画像がかさなりませんでした！ これを基に作ってみたいと思います。 本当にどうもありがとうございました。