画像枠のタグで写真画像の枠をつける方法とは?

このQ&Aのポイント
  • 写真画像に枠をつける方法として、<img>タグのborder属性を使用します。
  • border属性を使って枠の色や太さを変更することができます。
  • ただし、一部のブラウザ(例:MacのSafari)では変更が反映されない場合があります。
回答を見る
  • ベストアンサー

画像枠のタグ

何度しても写真画像の枠ができないのですが、 枠をつけて枠の色と枠の太さを変更したいのですが。 このタグのどこが違うのでしょうか? (枠をつけて画像のサイズだけ変更している状態です↓) <img src="http://@@@@@.JPG" border=3 width="300" height="200"> <img src="http://@@@@@.JPG" width="300" height="200"border=3> 両方してみたんですが、両方共できませんでした。どこが違うのでしょか?これ↑に枠と枠の色をつけて枠の太さを調節する時はどこにどのようにタグを入れたらよいのでしょうか? 写真画像枠のタグの種類はborder=3、3のみでしょうか? 以前聞いたことがありますが、Macのブラウザー サファリでは変更しても反映されず見ることができないのでしょうか? お手数をお掛け致しますが、ご存知の方がおられましたら お知らせ頂けますととても助かります、宜しくお願い致します。

  • lkask
  • お礼率100% (2/2)

質問者が選んだベストアンサー

  • ベストアンサー
  • gura_
  • ベストアンサー率44% (749/1683)
回答No.2

 こういうことではだめですか↓ <img src="http://oshiete1.goo.ne.jp/images_goo/goo_h1_50b.gif" border=9 width="300" height="200" style="border-color: #dddd00;"> <img src="http://oshiete1.goo.ne.jp/images_goo/goo.gif" width="300" height="200" style="border:5px red solid; "> 参考URL↓ http://www.tagindex.com/html_tag/img/img_border.html http://www.tagindex.com/stylesheet/img/border.html

lkask
質問者

お礼

すごい!できました!!! 何度しても出来ずにおりました、やっと解決しました。 本当に有難うございます。すぐにご回答下さり有難うございます。 URL参考にさせて頂きます。ありがとうございました。

その他の回答 (1)

  • times3
  • ベストアンサー率23% (858/3649)
回答No.1

枠はTABLEタグで作ってるのでしょうか? そのTABLEタグの記述はどーなってますか?

lkask
質問者

お礼

解決しました。ご返信下さり有難うございました。

関連するQ&A

  • テーブルで画像を並べるときに・・

    今ホームページをつくっていて 幅600pxのロゴ(jpg画像)の下に幅280px,80px,80px,80px,80px画像を並べています。 全部の画像をぴったりくっつけたいんですが、上のロゴと下の5つ並んだ画像の間に1pxくらいの隙間が出来てしまいます。 ソースは <table width="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/title.jpg" width="600" border="0"> </td> </tr> <tr> <td> <img src="img/1.jpg" width="280"height="35" border="0"> </td> <td> <img src="img/2.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/3.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/4.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/5.jpg" width="80" height="35" border="0"> </td> </tr> </table> http://web-channel.com/index.html このホームページのようにしたいんですがどこを直したらいいんでしょうか? 環境は、WinMEでエディタにタグ打ち込んで作ってます。

    • ベストアンサー
    • HTML
  • テーブル高さ指定タグについて

    テーブル高さ指定タグについて サイズがバラバラの4枚の画像をテーブルを使って同じ幅・高さ縦横各2枚並べて表示したいと思っています。 下記のとおり高さ・幅300と指定をしているにもかかわらず、400×400pixの画像が高さを超えて目いっぱい表示してしまいます。 <table border="1" width="600" height="600" cellspacing="0" cellpadding="0"> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_1.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_2.jpg"></td> </tr> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_3.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_4.jpg"></td> </tr> </table> どうすれば、すべて300×300pixの範囲内におさめることができるのでしょうか?

    • ベストアンサー
    • HTML
  • ビルダー9 表の枠(罫線?空白?)を完全になくすには?

    会社のHPを作っています。 下記のタグを見て頂くとわかると思うのですが、 一番大きい画像と、その右の画像の間に細い線が入ってしまっています。 (ファイル名は消してあります) 最初は上下にも入っていたのですが、それはどうにか消すことができました。 (どうやったか覚えてないですけど) この線をないものとすることはできますか? 周りに詳しい人がいなくて、ほんっっとうに困ってます!助けてください(T_T) <TABLE width="785" cellspacing="0" cellpadding="0"> <TBODY> <TR align="left" bgcolor="#ffffff"> <TD colspan="4" rowspan="3" width="691" height="73"><IMG src="" width="691" height="76" border="0"></TD> <TD colspan="2" width="77"><IMG src="" width="94" height="19" border="0" hspace="0" vspace="0"></TD> </TR> <TR> <TD colspan="2" width="77"><IMG src="" width="94" height="20" border="0" hspace="0" vspace="0"></TD> </TR> <TR> <TD colspan="2" width="77"><IMG src="" width="94" height="37" border="0" hspace="0" vspace="0"></TD> </TR> <TR> <TD colspan="6" height="18"><IMG src="" width="84" height="21" border="0"><IMG src="" width="130" height="21" border="0"><IMG src="" width="156" height="21" border="0"><IMG src="" width="126" height="21" border="0"><IMG src="" width="114" height="21" border="0"><IMG src="" width="175" height="21" border="0"></TD> </TR> </TBODY> </TABLE>

  • imgタグについて

    imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。 最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。 そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。 ですが、html的に<img2~ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか? もし他に方法がございましたら教えてください。 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • ALT属性に見出しタグをつけると画像がズレます。

    見出しタグをHTMLで製作後、画像とALT属性に採用すると 画像がずれてしまいます。 <img src="images/img6.jpg" alt="●●●●●●●●●●●●" width="745" height="511"> を <h2><img src="images/img6.jpg" alt="●●●●●●●●●●●●" width="745" height="511"> </h2> 以下のコーディングにすると画像がずれます。 HTMLバージョンは、DTD HTML 4.01 Transitional となります。 CSSなどで画像の位置固定をするのではなく、そのままHTML内で完結したいと考えています。 どのように変えれば良いでしょうか また、alignタグなどは、HTML4.01非推奨で使えません。 バグで探したのですが見付かりませんでした。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • cssで、imgタグに、背景画像を敷きたい

    cssで、imgタグに、背景画像(影)を敷く方法を教えてください。 ※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。 ■現状 <HTML> <div id="hoge"> <img src~ <CSS> #hoge img { background-image:url(/images/background_shodow.jpg); background-repeat: none; background:position: ? width:? height:? margin:? padding:?; <影の大きさ> ・width400px ・height200px <写真のサイズ指定> ・width390px ・height190px ※これまでは、 写真のサイズが違うので、 css部分の#hoge img で、 画像の大きさを強制指定してました。 出来れば、 画像の大きさは、html側で指定せずに、 css側で調整したいです。 ムリなら、html側で大きさ指定します。 div枠にcss設定できれば早いかと思いますが、 それが出来ないため(img タグにしかcss指定不可)の相談です。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 正方形のセルに縦画像、横画像を中央に配置

    よろしくお願いいたします。 テーブルを使って、写真のサムネイル一覧表を作成しています。 100x100 の2つのセルをペアとして横に並べ、横画像(100w x 75h)または縦画像(75w x 100h)を入れています。 この時、横画像だけを入れたペアは、セルの高さが画像と同じ(75)になってしまいます。 常にセルの高さを 100に保つにはどのようにしたらよいのでしょうか。 現在は次のように記述しています。 <TR><!---- 高さ 100 OK --> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="H_100.jpg" width="75" height="100" border="0"></TD> </TR> <TR><!---- 高さ 75 NG!! --> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> </TR>

    • ベストアンサー
    • HTML
  • HTML CSS 表示画像のサイズ

    表示画像のサイズについて。元の画像サイズはばらばらです。 初歩的な質問ですがよろしくお願いします。 <tr> <td><img src="images/A.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/B.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/C焼.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> これをCSSで書く場合なのですが、 img{   width:100 height:100 border:2 } としたのですが、うまくいきません。なぜでしょうか?

    • ベストアンサー
    • HTML
  • HTMLタグ

    画像にもありますが、取り扱い商品・液晶モニタ・パソコンパーツなどの横に横2列縦3列のテーブル、その横に縦5列横1列のテーブルを付けたいのですが、どうしてもわかりません。 わかる方居ましたらお願いします。 現在こんな感じです <p><font color="#f70006">&nbsp;&nbsp; <strong>他には無いアイテムがここにはあります</strong> </font> <br> <img style="WIDTH: 983px; HEIGHT: 102px" border="0" alt="" src="素材/top.png" width="1000" height="118"><br> <img border="0" alt="" src="素材/home.png" width="200" height="73"><img border="0" alt="" src="素材/商品一覧.png" width="200" height="73"><img border="0" alt="" src="素材/輸入.png" width="200" height="73"><img border="0" alt="" src="素材/買付.png" width="200" height="73"><img style="WIDTH: 169px; HEIGHT: 73px" border="0" alt="" src="素材/問合.png" width="170" height="73"><br> <br> <br> <br><img border="0" alt="" src="素材/取り扱い.png" width="164" height="49"><br> <img border="0" alt="" src="素材/液晶.png" width="164" height="49"><br> <img border="0" alt="" src="素材/apareru.png" width="164" height="49"><br> <img border="0" alt="" src="素材/pasokon.png" width="164" height="49"><br> <img border="0" alt="" src="素材/周辺機器.png" width="164" height="49"><br> <img border="0" alt="" src="素材/マルチメディア.png" width="164" height="49"><br> <img border="0" alt="" src="素材/自動車.png" width="164" height="49"><br> <br> <br> <br> <img border="0" alt="" src="素材/サポート.png" width="166" height="63"><br> <img border="0" alt="" src="素材/輸入について.png" width="166" height="63"><br> <img border="0" alt="" src="素材/お問い合わせ.png" width="166" height="63"><br> <img border="0" alt="" src="素材/会社概要.png" width="166" height="63"> </p> 他にいい作り方など、オススメ等ありましたら何でもお願いします

  • JPEG写真がアップロードされない

    多分、超基本的な質問です。 ビルダーを使っています。 3つのフレームと3枚の写真がありますが 一番左の写真(image5.jpg)だけがアップロードされません。 同じように処理した<つもり>ですが、なにが 原因なのでしょうか。 タグを記しますのでご指摘ください。 <TD width="237"><IMG src="image5.jpg" border="0" width="247" height="205"></TD> <TD></TD> <TD></TD> <TD></TD> <TD width="237"><IMG src="image.jpg" border="0" width="247" height="205"align="middle"></TD> <TD></TD> <TD></TD> <TD></TD> <TD width="283"><IMG src="image1.jpg" border="0" width="250" height="202"></TD>

専門家に質問してみよう