- 締切済み
画像をページの中心にレイアウトしたい
現在、ホームページをHTMLタグ手打ちで作っています。初心者です。 画像をページの中心に配置してシンメトリーな印象のページにしたいと思っています。 使っているPCはMac OS Xです。 画像を中心に表示するのに以下のような形をとっています。 <center><img src="●●●.jpeg" alt="○○○"></center> このようなタグ設定の画像をsafariでチェックしたところ、ばっちりページの中心に表示されました。 しかしIEで確認したところ、ページの左端に寄ってしまっておりとても見栄えの悪いものになっていました。 画像を中心に持ってくるために<center></center>を用いるのは間違いなのでしょうか？ ベストなタグをお教えください。
- comch
- お礼率50% (3/6)
- レンタルサーバ・ASP
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- abukuma06
- ベストアンサー率51% (43/83)
オーソドックスな方法ですが、<TABLE>タグを使ってはいかがでしょうか？ <TABLE border="0" width="100%" height="100%"> <TR> <TD valign="middle" align="center"><IMG src="●●●.jpeg" alt="○○○"></TD> </TR> </TABLE>
- 345itati
- ベストアンサー率48% (795/1639)
スタイルシートを使われる方がよろしいかと。 .center { width: 200px; //幅は必ず指定 margin-right: auto; margin-left: auto; text-align: center; //本来は不要ですが、WinIEの互換モードでのバグに配慮 } HTML部分 <div class="center"><img src="****" alt="***" width="200" height="200"></div> 蛇足ですが、Mac IEは開発もDLもサポートも終了したブラウザなので、推奨環境には入れられない方がいいかと思われます。動作確認をするのはいい事なのですが・・・。
関連するQ&A
- ｇｏｏブログで画像をセンターに貼るタグ
<a href="画像のショートカットURL" target="_blank"> <img src="画像のショートカットURL" border="0" width="240*240px" align="center"></a> ↑このタグを使って画像をＵＰしているのですが、 センターに指定しているにも関わらず、左端に貼ってしまいます。 他に、クリックして拡大させて、中心に貼り付けられるタグがありましたら教えてください。
- ベストアンサー
- ブログ
- 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
- 画像にリンクを張ったら、レイアウトが崩れました。
ホームページを制作しているのですが、リストにして並べた画像にリンクを張ったら、レイアウトが崩れてしまいました。 まず、リンクを張らずにやってみました。 HTML部分 <ul id="main_center"> <li id="1"><img src="http://***.jpg" /></li> <li id="2"><img src="http://***.jpg" /></li> <li id="3"><img src="http://***.jpg" /></li> </ul> CSS部分 #main_center #1,#2,#3 { display: block; width: 220px; height: 20px; list-style-type: none; margin-bottom: 10px; } タグは以上の通りでやったところ、問題なく画像が綺麗に並んだのですが、 <ul id="main_center"> <li id="1"><a href="http://***/"><img src="http://***.jpg" /></a></li> <li id="2"><a href="http://***/"><img src="http://***.jpg" /></a></li> <li id="3"><a href="http://***/"><img src="http://***.jpg" /></a></li> </ul> といった感じで、画像にリンクさせたところ上下に余分なスペースが出来てしまいました。 リンクを張っただけで、レイアウトが崩れてしまうということはあるのでしょうか。 または、なにかタグが間違っているのでしょうか。 どなたかアドバイスをお願いいたします。
- ベストアンサー
- HTML
- JPEG画像が表示されません
知人に頼まれ見よう見まねで初めてホームページを作成してみました。 無料のテンプレートを利用、alphaEDITで編集したのですが、完成したHTMLファイルをいざFTP転送するとJPEG画像が表示されません。 alphaEDITのプレビュー画面やHTMLファイルを直接ブラウザーで確認すると画像は全て表示されるのですが、FC2のサーバーにアップロードすると表示されなくなってしまうのです。 いろいろググってみて試行錯誤したのですが、ファイル名の間違いやアップロード先の間違い、転送モードの間違いも無く、タグ自体が間違っているのでは？という結論に達したのですがいかがでしょうか？（ならば何故、alphaEDITやブラウザーではきちんと表示されるのかは不明ですが．．．） 以下のタグをご覧頂き、間違いをご指摘いただければ幸いです。 <img class="head_photo" border="0" alt="" src="img/head_img.jpg" > <img border="0" alt="" src="img/top_banner.jpg" > <img class="picture" border="0" alt="写真" src="img/mama.jpg" > <img class="head_photo" border="0" alt="" src="img/head_img_slim.jpg" >
- 締切済み
- ホームページ作成ソフト
- 画像を縦に並べたら隙間ができることについて
画像を縦に並べたところ隙間ができてしまいます。 隙間無くくっつけたいのですがどうすればいいのでしょうか。 以下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
- テーブル（HTML）と画像のレイアウトについて
WEB画面のレイアウトについて質問があります。 HTMLのtableタグを使ってその中のtdタグにimgタグで画像をセットすると 高さ（height）に微妙な間ができてしまいます。 この現象を回避するにはどうすればよいでしょうか？ ↓HTMLソース <table> <tr> <td><img src="GIF画像" alt="XXX" width="755" height="26"></td> </tr> </tabld> ※heightが指定値より若干高くなる どなたか良い回避策をご存知でしたらご教示下さい。 お願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- HTMLで画像が表示されない
イラストサイトを作っているのですが、imgsrcのタグを使ってバナーを貼ろうとしたら、 （×ではないのですが）画像が表示されません。 HTMLのデータは「１」フォルダに入っていて、その「１」の中に「banner」フォルダを作って、その中にtestという名前で画像を入れています。 今使ってるタグはこんなかんじです。↓ <img src="banner/test.jpeg" alt="200*40" border="0"> 配布されているテンプレートを使って作成しているので、元から入っていた画像はちゃんと表示されています。 いろいろ検索して試してみたのですがどうしても直らなくて・・。 初心者の為おかしいところもたくさんあると思いますが、回答宜しくお願いいたします＞＜ 現在表示されている画像を添付しておきます。
- ベストアンサー
- HTML
- 画像切り替え
<div> <img src="image1" alt="" width="300" height="300" /><br /> <img src="image1" alt="" width="80" height="80" /> <img src="image2" alt="" width="80" height="80" /> <img src="image3" alt="" width="80" height="80" /> <div> 下の小さい画像にマウスが乗ったら、上の大きい画像に表示させたいのですが、どのように組んだらよろしいでしょうか、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- css 画像を表示・設定
cssでimgタグを使って画像を表示させたいのですが、 css内でsrcは使えないのでしょうか？ img{ background-image:url( http://orange.jpg ) } このような書き方しかできないのでしょうか？ 上記の書き方だと、画像の周りに線ができて、更にhtmlソース内のaltの文字まで表示されてしまいます。
- ベストアンサー
- HTML
- マウスオーバーで複数の画像を非表示
マウスオーバーで画像を非表示にしています。 以下の例で、複数の画像を非表示にするにはどうすればよいでしょうか？ 例では画像はjpeg1.jpg～jpeg3.jpgの３つですが、実際には個数は毎日変化します。 <a>タグに画像の個数分のonMouseOverを書けばよいのでしょうが、もっと簡単に書く方法はないでしょうか。 PerlからHTMLを吐き出します。 <html> <a href="Javascript:" onMouseOver="jpeg1.style.display='none';" onMouseOut="jpeg1.style.display='';">非表示</a><br> <img src="./jpeg1.jpg" name="jpeg1"><br> <img src="./jpeg2.jpg" name="jpeg2"><br> <img src="./jpeg3.jpg" name="jpeg3"><br> </html>
- ベストアンサー
- JavaScript
