• ベストアンサー

画像を固定したい

画像の張りつけ方はわかったんですが、その画像を特定の場所に固定するやりかたがわかりません。(張り付けた順番にどんどん並んでしまってる状態です) <img src="~">に何か足したら画像を置く場所を決められるんでしょうか? わかる方お願い致します。

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

  • ベストアンサー
  • Bo_Bo
  • ベストアンサー率65% (97/149)
回答No.3

画像を ■■ ■■ のように配置したいのに ■■■■ となると言うことでしょうか? それなら、単にBRダグを置けば出来ます。 <img src="xxx.gif"...> <img src="xxx.gif"...> <img src="xxx.gif"...> <img src="xxx.gif"...>  を <img src="xxx.gif"...> <img src="xxx.gif"...><br /> <img src="xxx.gif"...> <img src="xxx.gif"...> とする。 『そんな単純な問題ではない、「画像を特定の場所に固定する」の意味が違う』のなら、 ・絶対位置指定では、カスケード・スタイル・シート(CSS)を利用する。 (ブラウザの対応状況や、他の要素との兼ね合いからすると難しいかも。) <div style="position:absolute;top:100px;left:200px;width:120px;height:120px;z-index:1"> <img src="xxx.gif"...> </div> ・大きさの違う画像を隙間なく並べるなら、テーブルを利用する。 ■とほほのWWW入門 http://tohoho.wakusei.ne.jp/www.htm に、HTML、CSSのリファレンスが掲載されています。 サイト構造をまとめてダウンロード(*.zip)できますので、ローカルに保存をしてご覧になったらいかがでしょう。

参考URL:
http://tohoho.wakusei.ne.jp/www.htm
apipiy
質問者

お礼

解りました!皆様有難うございました!!

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

  • kosa
  • ベストアンサー率25% (379/1464)
回答No.2

テーブルを使うと好きな場所に画像をおくことができますよ。 テーブルの枠線は消すこともできるので消してしまえば問題ないでしょう

全文を見る
すると、全ての回答が全文表示されます。
noname#30871
noname#30871
回答No.1

 スタイルシートを利用します。  こちらにサンプルがあります。

参考URL:
http://katikun.at.infoseek.co.jp/css.htm
全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 画像をランダムに表示するには

    <script language=JavaScript> <!-- var img=new Array(); img[0]='画像1'; img[1]='画像2'; img[2]='画像3'; img[3]='画像4'; img[4]='画像5'; ran_gazo=Math.floor(img.length * Math.random()); document.write('<IMG SRC='+img[ran_gazo]+'>'); //--></script><!--scripted by shotyan@dreamcity--> というのを使いますよね?(あるサイトで見つけました)でも、画像があるべき場所に「×」がついて、画像が出ないんです・・ どうしたら画像がランダムに表示されるんでしょうか。 教えてください。 そして、その画像を右上に固定したいんです。 注文多くてごめんなさい。

  • 画像が変わりません;教えて下さい!

    質問させて頂きます。 お知恵をお貸し下さい。 ウェブサイトを作っていて、 「画像にオンマウスで別の画像を表示、クリックでリンク先に飛ぶ」 というのをやりたかったのです。 しかし、画像1は表示され、リンク先にも飛ぶのですが、 オンマウスしても画像2が表示されません; 何が原因でしょうか? 以下のようにしているのですが… <a href="リンク先のURL"> <img src="img/画像1.gif" onmouseover="this.src='img/画像2.gif'; " onmouseout="this.src='img/画像1.gif';" border="0"> </a> 初心者なものですみません。 カテゴリ選択もここで良いのでしょうか…; ご存知の方、どうぞよろしくお願い致します。

    • ベストアンサー
    • HTML
  • 1箇所に複数画像を別々に配置は可能でしょうか?

    出来ないのかも知れませんが、もし可能かつご存知の方いらっしゃいましたらアドバイスをお願いいたします。 行いたいことは、1つの場所に複数の画像を配置し、それぞれの配置を異なる場所へ置きたいということです。具体的には…、 <div id="hoge"> ←このコンテナ内に画像を複数配置 <img src="img001.jpg" /> ←この画像はセンタリング <img src="img002.jpg" /> ←この画像は右寄せ </div> 1つのDIV内にセンタリングと右寄せで画像を配置という事です。 positionにて相対的に試してみたのですが、中央の<img src="img001.jpg" />のサイズによって<img src="img002.jpg" />の配置が変わってしまうので断念しました。その時は <div id="hoge"> <img src="img001.jpg" /><span id="hage"><img src="img002.jpg" /></span> </div> という感じで、<span id="hage">に相対positionでした…。駄目でしたが。。 条件としてはそれぞれにリンクを定義したいので背景ではなく画像として配置したいと思います。 どなたかアドバイスのほどよろしくお願いします。

    • ベストアンサー
    • CSS
  • 画像を横に並べると、枠線が出てしまう

    <table border="0"> <tr> <td><img src="画像ファイルのURL"></td> <td><img src="画像ファイルのURL"></td> <td><img src="画像ファイルのURL"></td> </tr> </table> これで、WPで作ったブログの画像を並べてみたのですが、 枠線を設定していないのに、細い枠線が出てしまいます。 <table> <tr> <td><img src="画像ファイルのURL"></td> <td><img src="画像ファイルのURL"></td> <td><img src="画像ファイルのURL"></td> </tr> </table> で、やっても枠線が出ます。 どのような記述にすれば、枠線が一切ない状態で並べることができるでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • ヤフオクに載せる4~7枚目の画像が、ど~しても小さくなります。。

    ヤフーオークションの出品時に掲載する画像についてです。 【画像の4枚目~7枚目を掲載するには、HTML式で掲載する】との事なので、Yahoo!フォトに画像をアップロードし、その画像URLを出品文に盛り込んで作成し、確認してみたところ、4~7枚目が、ものすっごい小さくなってしまいます。 ※◆以下の様にして作成しました↓◆ <center><img src="画像4URL"> <br> <img src="画像5URL"> <br> <img src="画像6URL"> <br> <img src="画像7URL"></center> そこで、ピクセルを指定して掲載してみたところ、今度はサイズは大きくなったのですが、モザイクの様になり、見るに耐えられない画像になってしまいました。 ※◆以下の様に作成しました↓◆ <center> <img src="画像アドレス" width="640" height="480"> </center> アップロードする前の画像サイズは、55KB位でヤフオクの上限基準はクリアしているのですが、どうやらYahoo!フォトにアップロードする際にとても小さいサイズ(0,5KBなど)に自動変換されている?ようなのです。それを回避できればいいのかも知れませんが、設定方法も見当たりません…。 どうやったら、4~7枚目画像が大きく綺麗に掲載できるのでしょうか?? 私では知識が乏しく、もうお手上げ状態です。どうかご教授下さい。宜しくお願い致します。 (1~3枚目の画像掲載は正常に行えるのですが…。)

  • 画像サイズを指定する

    1~6まで全て同じサイズ(200*100)の画像があります。 この画像を下記のスクリプトを使用してランダムに表示させ、 マウスを重ねるとその画像に対応した画像に切り替わる (画像1なら画像4という風に) ということをしているんですが、 表示サイズを300*150で表示させるためには どうしたらいいのでしょうか? <script language="javascript"> <!-- //ランダムにgazouを表示 img = new Array(); img[0] = "画像1.gif"; img[1] = "画像2.gif"; img[2] = "画像3.gif"; img[3] = "画像4.gif"; img[4] = "画像5.gif"; img[5] = "画像6.gif"; n = Math.floor(Math.random()*3); m = n+3; document.write("<img src='"+img[n]+"' border='0' onmouseover=src='"+img[m]+"' onmouseout=src='"+img[n]+"'>"); //--> </script> 基本的なことで申し訳ありません。 どなたかわかる方がいらっしゃれば宜しくお願い致します。

  • 画像を順番にロードする方法

    ホームページに下記のように画像を10枚ほど載せたのですが 例えば2枚目が表示されないまま3、4・・・10と残りが表示されてしまうことがあります。 1枚目を完全に表示してから2枚目をロード・・というように順番に表示する方法を教えてください。 <p><img src="images/20110801_01.jpg" alt="01" /></p> <p><img src="images/20110801_02.jpg" alt="02" /></p> <p><img src="images/20110801_03.jpg" alt="03" /></p>  ・  ・  ・ <p><img src="images/20110801_10.jpg" alt="10" /></p>

  • jquryを利用した画像切り替え

    jqury(1.3)を利用しマウスオーバー,アウトで画像切り替えを行おうとしています。 マウスオーバーで特定の箇所に画像入れ替えする事はできたのですがマウスアウトで最初の画像に 戻すにはどうすればいいのでしょうか?具体的には・・・ <div><img id="target" src="最初の画像" /></div> <div class="thumbnail"> //以下の画像はマウスオーバーでtargetに拡大表示、マウスアウトで拡大画像を消し最初の画像に戻したい <a href="1の拡大"><img src="1の縮小" /></a> <a href="2の拡大"><img src="2の縮小" /></a> <a href="3の拡大"><img src="3の縮小" /></a> </div> という具合です。jsは以下のようにしたところマウスオーバーで切り替えは可能になったのですが戻すことができない状態です。 .hover( function(){// マウスオーバー時 $(this).fadeTo(200, 1.0); var changeSrc = $(this).attr("href"); $("#target").attr("src", changeSrc); }, function(){// マウスアウト時 $(this).fadeTo(500, 0.8); //ここで戻す処理をすると思うのですが方法がわかりません } ) 詳しい方がいらっしゃいましたら宜しくお願い致します。

  • 画像を組み合わせる。

    VisualC++のMFCにて画像処理を行っています。 それぞれ二つの画像を2値化し、そのお互いの黒になっている部分を合わせ、一つの画像にしたいと思うのですが、合わせ方が分かりません。 2値化はOpenCVにて作成しました。 二つの画像はsrc_imgとtrc_imgとしています。 分かる方がいらっしゃいましたらよろしくお願いいたします。

  • それぞれの画像をオンマウスのときに違う画像にしたい

    下記【1】の通り、画像のランダムリンクはできたのですが それぞれの画像をオンマウスしたときに 違う画像を表示するにはどうすればよいでしょうか? JavaScriptを使わずに、一枚の画像だけを変える場合は↓のようにやっておりました <a href="http://~" target="_blank" ><img src="img[0] " height="" width="" border="0" onmouseover="this.src='img[0] の色違い画像など';" onmouseout="this.src='img[0] と同じ、もしくは違う画像';"></a> ※例えばimg[0]をオンマウスしたときにimg[2]にしたいのではなく、 それぞれ個別に用意した画像(通常時、オンマウス時、離した後の画像3枚)にしたいのですが。 【1】 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://~"; jmp[1] = "http://~"; jmp[2] = "http://~"; jmp[3] = "http://~"; jmp[4] = "http://~"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");

このQ&Aのポイント
  • 充電中に時間がしばらくすると、powerが赤点滅、statusがオレンジ点滅、bluetoothが青点灯になる現象について解決方法を知りたいです。
  • お使いのパソコンはWindows10で接続はbluetoothまたは無線LANです。
  • 関連するソフト・アプリや電話回線の情報は特にありません。
回答を見る