- 締切済み
img
noname#150436の回答
イメージタグ <img src="×××.gif"> 画像をスクロールさせる http://iswebmag.hp.infoseek.co.jp/sample186.html
関連するQ&A
- imgタグは何で囲むのが良いか
皆さんはimgタグは何で囲んでいますか？ <div> <h3>タイトルタイトル</h3> <p>テキストテキストテキストテキストテキストテキスト</p> <img src="xxxx.jpg" alt=""> </div> 例えばこういうような時に、何で囲むべきかというのをいつも迷います。 ブロック要素で囲むべきである、というのは何となく認識していますが、ここをdivで囲むのも何か違うような気がするし、 pで囲むのも「段落」と見なせるような画像でないと何となく気持ち悪いです。 最近はaltのある画像は「これは段落だろう」と自分を納得させてpで囲み、 altを空にしているものは囲まずにそのまま置いたりしています。 レイアウト上、ブロック要素が必要になった時にはdivで囲んでみたり…。 私はイメージ的な画像（情報としては必要ない画像や、直前のテキストとかぶっている画像文字等）にはあえてaltは付けずに空にすることが多いので、ちょいちょいこういう事で迷います。 スマートなやり方をご教授ください。
- ベストアンサー
- HTML
- imgタグとレスポンシブについて
imgタグとレスポンシブについて imgタグなどのようなインライン要素は、 ブロック要素で囲まないといけないと聞いたのですが、下記のような形でナイトいけないのですよね 下記のように直前にブロック要素で囲まれていないといけないのでしょうか？ <div class="copyright"> <img src="img/base/copyright.png" alt="のコピーライト" width="382" height="24" /> </div> 下記のように直前にブロック要素で囲まれていないといけないのでしょうか？ それとも直接ブロック要素で囲まれていなくてもずっと先にブロック要素があってそこから入れ子になっていればいいのでしょうか？ ～ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td> ～ 下記はだめですよね。 <H2>画像</H2> <IMG src="img/img0.jpg" width="120" height="90" alt="写真" border="0" align="top"> 文字が上揃えになります<BR> <BR> <IMG src="img/img1.jpg" width="120" height="90" alt="写真" border="2"> 枠の太さを２にしています<BR> <BR> <IMG src="img/img2.jpg" w また、もうひとつになってしまうのですが、下記のimg をフルイドイメージにしたい場合は画像のたて、横はば割る直前のブロック要素のtdのwidthと縦幅（クロームのf12で出てくるpx）で出した％を ul.futtnavi+img { width: 67.3%; height: 18%; } のように入れれば良いのですよね。 tdのサイズは567px,133px imgは382、24です。 うまくぴったりのサイズになりません。 スマホでは消えます。 またtdの中の内容が増えた場合毎回計算しなおさないといけないのでしょうか？ ～ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td>
- ベストアンサー
- CSS
- IE7の<div>のバグ
IE7でgooglemapの表示がおかしくなります。 <div id=～>で指定した、googlemapを表示させる部分だけ、 スクロールしても左下に必ず表示されるようになってしまいます。 しかもスクロールバーの上にマップが出てくる状態になってしまっています。 親ページのcssに overflow:hidden その下に overflow:auto が設定されています。 フレームが上下に分かれていて、外枠のスクロールは表示せず、フレーム下部のスクロールだけ表示させるためです。 mapはフレーム下部に設定しているのですが、どうやら外枠のスクロールの設定に依存しているようです。 floatは使用していません。 <div id～>にposition:relativeを指定してもだめでした。 一番上位のoverflowではなく、そのひとつ下のoverflowの設定にさせたい場合はどうしたらよいのでしょうか。 他のdivタグはそのようになっています。 また、IE8、IE9でも目的の動きになっています。 IE7だけが上位を見てしまうようです。
- 締切済み
- HTML
- cssで画像を中央に表示する方法
http://wayohoo.com/programming/css/how-to-center-the-img-tag.html を参考にしたのですが、 「imgをdivで囲って画像を中央揃えする方法。」なら、画像を中央に表示できるのに、 「imgに埋め込んだclassを使って画像を中央揃えする方法。」だとできません。 【サンプル】 <style type="text/css"> img.line{ width: 700px; margin-left: auto; margin-right: auto; } div.center{ text-align: center; } </style> </head> <body> <img class="line" src="http://test/line.jpg"> <div class="center"><img src="http://test/line.jpg" /></div> </body> のように２つの画像を表示させた場合、divタグのほうは、ちゃんと真ん中に表示されますが img class="line" のほうはされません。 しかし、img class="line" の方でも、画像のサイズは調整できています。 margin-left: auto; margin-right: auto; の部分の何が間違ってるのでしょうか？
- 締切済み
- CSS
- イメージをセンタリングさせてかつ改行させない
イメージをセンタリングさせるために <img ...> を <div> で囲んで <div> に対して「text-align: center; 」か「display: block; margin-left: auto; margin-right: auto;」を指定すると中央に表示されますが、前後に改行がはいってしまいます。 イメージの前後で改行させないように「display: inline-block; _display: inline;」を指定すると今度は端によってしまいます。 中央に表示してかつ前後に改行をいれないような指定方法はあるのでしょうか？
- ベストアンサー
- CSS
- <div style="overflow">でこんなことは出来ませんか？
<div style="overflow: auto; height: **px;width:**px;"> というタグについて教えてください。 <div>で囲まれた内容が、height: **pxに満たない場合、 スクロールバーは出ませんが スペースはheight: **px分、空いてしまいます。 やりたいことは、<div>で囲む内容が height: **px未満の場合はスペースもあけず スクロールバーも出さず、overflow未指定の状態にする。 height: **pxの場合はheight: **pxで高さを固定して スクロールバーを出す。ということです。 何か良い方法はありませんでしょうか。 よろしくお願いします。
- ベストアンサー
- 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
- HTMLのIMGタグについて
HTMLのimgタグで(1)と(2)のようにした場合、表示が異なります。 (1)のほうが画像間のスペースが広くなります。また(2)の場合でも ほんの少しスペースが開くようです。 (1) <img src="image1"> <img src="image2"> (2) <img src="image1"><img src="image2"> HTMLは文章の構造タグなので(1)でも(2)の場合でも、改行は関係ないので 同じ表示になるべきなのではないでしょうか？ なぜ異なった表示になるのでしょうか。 また画像間のスペースを0にしたいのですが、何か方法を教えてください。
- ベストアンサー
- HTML
お礼
> <img>タグのみでスクロールを表示させる方法を探しています。 回答していただいて申し訳ないのですが、<img>タグのみでの対応を探しています。 しかし、こんなタグもあるんですね。 勉強になりました。 回答ありがとうございます。