• ベストアンサー

固定タグ内の画像サイズの変更

こちらにあるようなタグを、前後を変えることで画像を拡大(縮小)させることは出来るでしょうか? ■の部分に入れるようにするだけで、挟まれたタグ自身は変更できません。 よろしくお願いします。  (例)■<img src="/test.gif">■

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

  • ベストアンサー
  • is_may
  • ベストアンサー率65% (58/89)
回答No.1

こんな感じでどうでしょう。 <html> <head> <style type="text/css"> <!-- div.sc img{ width : 100px; height : 100px; } --> </style> </head> <body> <div class="sc"><img src="A.jpg"></div> <div class="aa"><img src="B.jpg"></div> <img src="C.jpg"> </body> </html> 上のようにすると、<div>クラス「sc」の中にある<img>、「A.jpg」は100x100で表示されますが、 それ以外の「B.jpg」や「C.jpg」は普通のサイズで表示されます。

peugeot206CC
質問者

お礼

長くまで引き伸ばしてしまいましたが、 一番近い形は、is_may さんの書かれているような内容だと思います。 ただ、ボディー部分から外れる部分を指定できるのか?っていうところと、クラス指定が使えるのか?というところでしょうか。 最近制約が多いフリーのウエブ環境で利用するので、皆さんの描いているイメージそのままで利用できないことが多いです。 ありがとうございました。

peugeot206CC
質問者

補足

文章のように、色を変えたりサイズを変えたり、全体ではなく部分指定するような簡単な方法は無いでしょうか? 全体は指定も変更も出来ませんが、前後なら変更できるという感じで、お願いします。

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

その他の回答 (2)

  • goldfox
  • ベストアンサー率49% (123/249)
回答No.3

<img src="/test.gif"> これには何も手を加えず(サイズ指定できず?) 他の部分でサイズ指定がしたいのでしたら、 No.1 の方法(子要素への継承…だっけ?)しかないと思いますよ。 (alt属性くらいは加えてほしいですが) divがいやならspanに変えるだけですし。 もしかして、head要素にも書き込めないという話だったり?

peugeot206CC
質問者

お礼

少し分かりにくいかと思いますが、書いておきますと、 例で示した画像のタグは自動生成されるため、自分で触ることは出来ません。内容も変化しますが、前後は加工できるので、タグなどで挟むことで、変化させられるのか?という感じで質問していました。 自分で色々と考えてみましたが、やっぱり、自動生成される画像の属性などがないことが一番加工を難しくしているように思いました。

全文を見る
すると、全ての回答が全文表示されます。
  • NTJ
  • ベストアンサー率44% (46/103)
回答No.2

> 文章のように、色を変えたりサイズを変えたり、全体ではなく部分指定するような簡単な方法は無いでしょうか? 勘違いされているようですね。 文章の場合でも、以下の場合には、■部分の仕掛けではなにも変更できないとおもいますよ? (例)■<span style="font-size:100;color:red;">文章</span>■ あたしには #1 さんの回答が、良回答に見えますねぇ。

peugeot206CC
質問者

補足

文章のように…ということで書いているので、文章でないということが理解できていないことから、例の内容も的を得ていないですね。それに、四角の部分に何かが入るということで書いているので、例の中に■が残っているのもおかしいです。■を置き換えないとエラーでますよ。

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

関連するQ&A

  • 画像タグについて

    画像タグについて テキストエディタにHTML(タグ)を入力してホームページの作成を目指して勉強しています。 ボタンの画像を横一列で4つ並べる場合のでタグの入力の仕方なんですが、 使用しているテキストでは改行せずに横に並べてタグを入力していきましょう。 となっています。 正解→<img src="A" ><img src="B" ><img src="C" ><img src="D" > 不正解↓ <img src="A" > <img src="B" > <img src="C" > <img src="D" > 理由としてはブラウザできれいに表示されるからだそうです。 実際にやってみると確かに不正解パターンより正解パターンの方がブラウザで隙間なくきれいに表示されています。 疑問なのですが、同じタグを縦で入力するか横に入力するかで なぜ、ブラウザの表示に違いで出るのでしょうか? また、<img src="" >タグ以外でも,改行しないで横に入力するタグはあるのでしょうか? それはどうやって見分けるのでしょうか? よろしくお願いいたします。

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

    教えてください。初心的な質問で申し訳ございませんがよろしくお願いします。 次のタグで <img src="../images/img39.gif"> ここの部分がわからないので具体的に教えてほしいのですが! "../images/ "これはどのような場合に使うのか宜しく!

  • ロールオーバー画像のリンク設定にTARGETタグを加えたい(度々すみません。)

    質問No.864692でロールオーバーの画像の枠線の消し方を質問した者です。 そちらは、ご協力を得て、無事解決したのですが、新たな問題が発生(私の知識不足)してしまいました。 下記のタグに TARGET="○○(任意に名付けたname)"を最後に書き加えたのですが、エラーになってしまいました。 <問題のタグのひな形> <a href="http://www-------"onmouseover = "document.bt.src = 'img1.gif'" onmouseout = "document.bt.src = 'img2.gif'"onclick = "document.bt.src = 'img3.gif'"><img src = "img2.gif" border="0" name="bt" (ここに記入した)></a> 重ね重ね申し訳ありませんが、よろしくお願いします!

  • 正規表現でタグの置換をしたいと試行錯誤しております。

    正規表現でタグの置換をしたいと試行錯誤しております。 もう1歩のところだと思いますがなかなかうまくいきません。 imgタグのsrcの中身を置換したいと思っております。 <img src="/uploads/abc.gif"><img src="/uploads/test/aaa.jpg"> 上記のタグを下記のように置換 <img src="cid:abc.gif"><img src="cid:aaa.jpg"> ディレクトリの部分を「cid:」とし、その後にファイル名とする。 preg_replace('/<img[^>]*src="([^"]+).+>/', "<img src=\"cid:$1\">", $body); 上記のようなコードにまではたどり着きましたがディレクトリの削除がうまくいきません。 良い方法があれば教えてください。

    • ベストアンサー
    • PHP
  • 画像サイズを指定する

    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> 基本的なことで申し訳ありません。 どなたかわかる方がいらっしゃれば宜しくお願い致します。

  • ロールオーバー画像の枠線を消したい

    初めてホームページ作成中の超初心者です。 ロールオーバーで、下記のタグで表示させたのですが、画像の枠線が出てしまいました。 普通に<img src="img1.gif">と書くと出ない画像なんですが・・・ リンク画像の枠線を消すのと同じ要領でborder="0"とも書き加えてみましたが、(4ヶ所とも)今度は何も表示されなくなってしまいました。 <問題のタグのひな形> <a href="http://www-------"onmouseover = "document.bt.src = 'img1.gif'" onmouseout = "document.bt.src = 'img2.gif'"onclick = "document.bt.src = 'img3.gif'"><img src = "img2.gif" name="bt"></a> どうぞ宜しくお願いします!

  • フォームに入力された値により画像を変更

    【質問概要】 フォームのInput type="text"エリアに入れた文字列により、HTMLページのテーブル内の画像を他の画像に変更するにはどうすればよいかお分かりの方おられますか? できれば、コードをお教え下さい。 しばらくJavascirptを使っていなかったためコードの書き方を忘れてしまいました。 【詳細】 例えば3つのgif画像ファイルを予めimgフォルダー内に用意しておきます。 画像名は、それぞれ test1.gif test2.gif test3.gif としておきます。 通常 この画像は、 <table> <tr> <td><img src="img/test1.gif"><td> <tr> </table> などでHTMLページに表示できると思いますが、このHTMLページに表示されている画像(test1.gif)をフォームの入力欄に他の画像のファイル名(test2.gif又はtest3.gif)を入れることによりtest2.gif又はtest3.gifに変更したいのです。もちろんJavascriptにアクションを起こさせるためにフォームに画像のファイル名を入れた後は、「画像変更」等の予め作成しておいたボタンを押す必要があると思いますが。 画像のファイル名を入力するフォームの入力欄設置場所は次の二つのタイプが必要です。 タイプ1: 画像を表示するHTMLページと同じページに設置してあるもの タイプ2: 画像を表示するHTMLページと別ウィンドウのHTMLページに設置してあるもの タイプ1とタイプ2は、別々のプログラムでかまいません。 また、画像の名前(test1.gif、test2.gif、test3.gif)は「.gif」部分が共通のため、「.gif」部分はフォームの入力欄に入力する必要がなくtest1, test2又はtest3と入力すればJavascirptの方で勝手に「.gif」部分は画像名に付加して処理するようにしたいのですが。 よろしくお願いします。 キャサリン

  • auの携帯サイトで画像と画像の間に隙間ができる

    現在、auの携帯サイトを作成しています。 3枚の画像を縦に隙間無く並べたいのですが、 どうしても画像と画像の間に隙間ができてしまいます。 隙間をなくす方法は無いのでしょうか?? ドコモとソフトバンクでは隙間はできず、 綺麗に3枚の画像が縦に並びました。 auでは無理なんでしょうか・・・?? <img src="xxx.gif"><img src="xxx.gif"><img src="xxx.gif"><br /> のようにimgタグの間にスペースやBRタグを無くしても、 隙間は開いてしまいました。 ご教授、宜しくお願いいたします。

  • 画像を縦に並べたら隙間ができることについて

    画像を縦に並べたところ隙間ができてしまいます。 隙間無くくっつけたいのですがどうすればいいのでしょうか。 以下htmlです。 <img src="img/nakama_img01.gif" width="687" height="227" alt="画像1" /><br /> <img src="img/nakama_img02.gif" width="687" height="197" alt="画像2" /><br /> <img src="img/nakama_img03.gif" width="687" height="244" alt="画像3" /> <br />で改行せずくっつけてタグを並べても同じ結果でした。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 画像枠のタグ

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