ウィンドウの縮小に合わせて変化させる方法 | WEBデザインの質問
- ウィンドウの縮小に合わせて画像を自動的に縮小する方法を教えてください。
- 指定した位置に配置した画像がウィンドウの縮小に合わせて変化しない問題について、解決策を教えてください。
- HTMLとCSSでウィンドウの縮小に対応するためにはどのようなコードを書けばよいですか？
- ベストアンサー
ウィンドウの縮小に合わせて変化させるには？
WEBデザインの質問です。 添付画像のようなものを作りたいのですが、ウインドウの幅を小さくした時に、 自動的にそれに合わせて画像も小さくなってもらいたのですができません。 どのようにhtml,cssを書いたらいいですか？ 画像4の上に、画像1,2,3があって、背景、画像1,2,3がメニュー(後で画像にリンクを追加したい)のようなイメージです。 そこで今、画像4は縮小に合わせて一緒に縮んでくれるのですが、 画像1,2,3は色々試してみたのですが変化がありません。 html↓ <body> <article> <div class="relative"> <img src="/../../画像4.gif" class="img-responsive" alt="" /> <img src="/../../画像1.gif" alt="" class="absolute" /> <img src="/../../画像2.gif" alt="" class="absolute2" /> <img src="/../../画像3.gif" alt="" class="absolute3" /> </div> </article> </body> CSS↓ @charset "utf-8"; .img-responsive { display: block; max-width: 100%; height: auto; } .relative { position: relative; } .absolute { position: absolute; top: 515px; left: 185px; } .absolute2 { position: absolute; top: 515px; left: 535px; } .absolute3 { position: absolute; top: 515px; left: 888px; } 初めてhtmlを書いているので、変な質問をしていたらすみません。 お早めな回答をいただけると助かります。 よろしくお願いいたします。
- maikofu
- お礼率70% (63/89)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
.absolute3 { position: absolute; top: 515px; left: 888px; } だと、スマホでは表示すらされないですよね。 単位を%または、vwで再挑戦してみてください。 ◆蛇足 (1)画像4.gifは背景なので、親要素の背景としてcssに書く方が正しい気がします。 (2)(1)の上で横並びにする方法は、配置だけではありません。 他の方法、 ・imgの連続ならほっといても横に並びます。paddingやmarginで間隔を調整すればOK. ・flex ・float ・display:table-cell; なども、学習されることをお勧めします。どの場合にも、単位は%やVWで行ってください。 絶対配置はコストが高く現在あまり使われていない気がします。
関連するQ&A
- jQueryでn秒後に要素を最後に移動
$("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:0px;" class="banner banner2"><img src="01.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:245px;" class="banner"><img src="02.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:490px;" class="banner"><img src="03.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:0px;" class="banner banner1"><img src="04.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:245px;" class="banner"><img src="05.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:490px;" class="banner"><img src="06.jpg" width="100%" alt="" /></div>'); $(".banner").click(function(){ $(this).prependTo("#top_banner"); }); $(".banner1").delay(1000).prependTo("#top_banner"); $(".banner2").delay(2000).prependTo("#top_banner"); <div style="width:750px; background-color:#808080; height:90px; padding-top:6px;"> <div style="width:735px; margin:auto; position:relative;" id="top_banner"> </div> </div> 上記のように記述し、n秒後に自動でバナーが切り替わるプログラムを作成しようしましたが、 うまく動作しません。 クリックすると切り替わるので、その要領で「delay(1000).prependTo("#top_banner")」と記述しました。 1秒後に画像が切り替わるかなと思いましたが、動作しませんでした。 delayはprependToには効かないのでしょうか。 また、上記ソースをもう少し完結にまとめることは可能でしょうか。
- ベストアンサー
- JavaScript
- タグの修正に力をかしてください
ホットペッパーに出てくるお店のページのバナーのように、 「アクセス」「TEL」の文字を表示させたいのですがうまくいきません。 タグの修正にちからをかしていただけないでしょうか。 以下、タグです。よろしくおねがいします。 <table width="702" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="color3" colspan="3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> <tr> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> <div style="position:relative;"><img src="images/hotpot_bannar.gif" alt="バナー" width="700" height="151"></div> <div style="position:absolute; top:70px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">アクセス</div> <div style="position:absolute; top:50px; left:450px; color:#ffffff; font-size:10px;>JR環状線：「福島駅」・・・</div> <div style="position:absolute; top:70px; left:450px; color:#ffffff; font-size:10px;>JR東西線：「新福島駅」・・・</div> <div style="position:absolute; top:120px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">TEL</div> <div style="position:absolute; top:120px; left:450px; color:#ffffff; font-size:10px;>06-****-****</div> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> </table>
- ベストアンサー
- HTML
- 画像を重ねて表示する方法を知りたいです。
おせわになっております。 下記のようなソースを作りました。 ------------------------------------------------- <div style="position: relative;"> <img src="sideback.gif" width="182" height="812" alt="sideback"> <div style="position: absolute; top: 30px; left: 15px;"> <span style="position:absolute; top:10px; left:10px"><img src="sidemanu-canner.gif" alt="メニュー"> </span> </div> </div -------------------------------------------------- 画像を重ねたいんですが、firefoxでプレビューすると （IEでも同じです。） 下の画像（背景）の上に上の画像が表示されるはずだった場所に四角い3つぐらい色のついたマークがでて （IEは小さな資格に×マーク） 上に表示されるはずだった画像が表示できません どうしたらいいでしょうか？
- ベストアンサー
- HTML
- htmlについて教えてください
サイトを一から作っているのではなく、 ショッピングサイトの商品ページの一部分を htmlタグを使って作っています。 macで確認するとレイアウトは問題なくきれいに見れるのですが、 windowsで確認すると画像やテキストが崩れています。 これはなぜなのでしょうか？ このような感じで記述していました。 画像の上に画像を重ねて表示し、テキストをその上に表示したいのですが... <div style="position: relative;"><div align="center"> <img src="http://○○○.jpg" alt=""></div> <div style="position:absolute;left:40px;top:40px"> <b>テキスト</b></div> <div style="position:absolute;left:380px;top:100px;width:240px;"> テキスト</div> <div style="position:absolute;left:60px;top:100px"> <img src="http://○○○.jpg"></div> <div style="position:absolute;left:370px;top:22px"><img src="http://○○○.jpg"></div> </div></div> htmlの知識がほとんどないので、 なるべく易しく説明していただければ有り難いです・・・。 よろしくお願い致します。
- 締切済み
- HTML
- CSSで画像を同じ位置に重なり合わせるには？
お世話になります。 2枚のTOP画像(一枚は差し替え可能なJPG、もう一枚はその画像の上に位置するフレーム枠のような役割を果たすGIF画像)をぴったり重ね合わせて配置したいと考えています。 調べたところz-indexという方法があるらしく、position:relativeしてtop,left指定でいろいろ試してみたのですが、上に重なる画像の分だけ、下部コンテンツに空きが出ます。（添付画像のような現象です） これはCMS化して画像を差し替える時のためにページなのですが、こういう現象をなくして普通のWebサイトページのように配置することはできないのでしょうか？ 素人ゆえおかしな質問しているかもしれませんが、どうかご教授お願いします。 現時点のHTML/CSSはこんな感じです。 HTML--- <div id="contens"> <div id="top_img_a"> <p class="img_top"><img src="images/dammy_img02.jpg" alt="新規投稿ダミー画像" /></p> <p class="flame"><img src="images/new_entries_img_flame.gif" alt="新規投稿フレーム枠" /></p> </div> CSS---(本意ではありませんが、やむなくtop,left調整で位置を作っている段階です。) #top_img_a { width:900px; margin:0; padding:0; position:relative; top:0px; } .img_top { position:relative; z-index:1; top:0; left:25px; } .flame { position:relative; z-index:2; top:-216px; left:25px; }
- ベストアンサー
- CSS
- jqureryスライドショーが上手くいきません。
こんにちは。 web初心者です。 今、jqueryを使いスライドショーを作っているのですが 上手く行きません。 5枚の画像を重ねてフェードイン フェードアウトみたいな形にしてるのですが、最後の画像だけdisplay: none;が適用されなくてきれいに表示出来ません。 どなたか詳しい方、宜しくお願い致します。 <HTML> <div id="contents"> <div class="slideshow"> <img src="top30.jpg" width="950" height="450"> <img src="top21.jpg" width="950" height="450" class="alt"> <img src="top20.jpg" width="950" height="450" class="alt"> <img src="top22.jpg" width="950" height="450" class="alt"> <img src="top23.jpg" width="950" height="450" class="alt"> </div> </div> <CSS> #contents { width: 950px; margin-right: auto; margin-left: auto; height: auto; .slideshow { width: 950px; border-top-width: 1px; border-top-style: solid; clear: both; padding-top: 60px; height: auto; position: relative; float: left; } .slideshow img { position: absolute; } .slideshow img .alt { display: none; }
- ベストアンサー
- その他（プログラミング・開発）
- left (right) プロパティについて
次のように、ベース画像の上に別の画像をのせて表示させています。 <style> <!-- .box { position:relative; left:50%; } .baseimage { position:relative; z-index:1; left:-225px; } .image1 { position:relative; z-index:2; left:-100px; top:-200px; } .image2 { position:relative; z-index:2; left:-100px; top:-300px; } --> </style> <div class="box"> <img src="baseimage.jpg" class="baseimage"> <img src="image1.jpg" width="30" height="30" class="image1"> <img src="image2.jpg" width="30" height="30" class="image2"> </div> このとき、image1 と image2 の左端からの距離が一致せず、ずれてしまいます。 それは何故なのでしょうか？ コーディングに問題があるのでしょうか？ お教えいただけると幸いです。よろしくお願いいたします。
- ベストアンサー
- HTML
- こんばんは。
こんばんは。 今仕事でコーディングの作業をしていまして、上手く表示させることができず、悩んでおります。i-Tunesの楽曲リスト（添付画像を参照）のようにコーディングをしたいのですが、これをcss+javascriptで実装したいのですが、どういうふうにやればよろしいのでしょうか。アドバイスをいただければ幸いです。 【仕様】 １．一行目をマウスオーバーしたら背景画像が変わるようにする。 （マウスアウトしたら元の背景画像に戻します。） ２．ボタン画像もマウスオーバーしたら背景画像が変わるようにする。 【htmlソース】 --------------------------------------------------------------- <div id="down_bottom"> <div id="list_top"><img src="img/music_list_top.gif" /></div> <div class="list_middle"><img src="img/music_list_middle.gif" onmouseover="this.src='img/music_list_over.gif'" onmouseout="this .src='img/music_list_middle.gif'"></div> <span class="no_down">1.</span> <span class="title_down">タイトル名</span> <span class="time_down">時間</span> <span class="money_down">値段</span> <span class="sample_down"><a href="#"><img src="img/btn_sample.gif" width="19" height="20" border="0" /></a></span> <span class="buy_down"><a href="#"><img src="img/btn_list_buy.gif" alt="購入する Buy" border="0" /></a></span> <div id="list_bottom">合計：３曲</div> 【cssソース】 --------------------------------------------------------------- #down_bottom { clear:both; padding-top:20px; margin-left:20px; width:647px; } #list_bottom { text-align:center; background: url(../download/img/music_list_bottom.gif) no-repeat; height: 34px; width: 647px; padding-top:5px; font-size:0.8em; font-weight:bold; } .list_middle { background: url(../download/img/music_list_middle.gif) no-repeat; width:647px; height:30px; float:left; } .no_down { position: relative; top:-25px; left:15px; float:left; } .title_down { position: relative; top:-25px; left:50px; width:300px; } .time_down { position: relative; top:-30px; left:320px; width:20px; } .money_down { position: relative; top:-30px; left:360px; width:30px; } .sample_down a:link,.sample_down a:visited,.sample_down a:hover { position: relative; top:-30px; left:380px; width:19px; height:20px; } .buy_down a:link,.buy_down a:visited,.buy_down a:hover { position: relative; top:-30px
- ベストアンサー
- HTML
- 【CSS】画像を重ねたいのですが動きません
ウェブサイトを作っているのですが、 positionを使って、ひとの写真と影の画像を重ねたいのですが、影がピクリとも動いてくれません。 ちなみに他のスタイルはCSSから読み込めているので、 CSSのインポートエラーではないようです。 難しいことをしているわけではないと思いつつも、 二時間くらいここで止まっておりまして、悲しいです・・・。 下記のコードを書いております。 ご教示頂ければ幸いです。 よろしくお願いいたします。 ☆HTML <div id="staffphoto"> <img src="写真.jpg" width="160" border="0"> <img src="影.gif" border="0" width="160" class="shadow"> </div> ☆CSS #staffphoto{ position: relative; } #staffphoto img.shadow{ position: absolute; top: 5px; left: 5px; }
- ベストアンサー
- CSS
- CSSのdivで、ページ全体をセンタリング出来ない
質問させて頂きます。 <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> というように、全体をdivで囲んだにもかかわらず、何故かセンタリング出来ません。 最も簡単に、このページをセンタリングするには、どうすればよいでしょうか？ ホームページビルダーで「どこでも配置モード」で作ったものを、dreamweaverで作り直す場合に該当します。 下記にHTMLを記載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows"> <title>タイトル</title> <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> <body background="blue_p7b.gif"> <div id="contena"> <div style="top : 0px;left : 20px; position : absolute; z-index : 20; " id="Layer22"><img src="anim.gif" width="373" height="93" border="0" alt="ようこそ"></div> <div style="top : 18px;left : 575px; position : absolute; z-index : 2; " id="Layer4"><a href="http://www.dodgeball.or.jp/"><img src="jdba1.gif" border="0" width="106" height="30"></a></div> <div style="top : 60px;left : 143px; position : absolute; z-index : 1; " id="Layer1"><img src="logo111.gif" width="488" height="69" border="0" alt="リンク"></div> <div style="top : 219px;left : 317px; position : absolute; z-index : 27; width : 580px; height : 51px; " id="Layer28"> <p><font color="#0000ff" size="+2">コンテンツ</font></p> </div> <div style="top : 161px;left : 647px; position : absolute; z-index : 22; " id="Layer23"></div> <div style="top : 255px;left : 284px; position : absolute; z-index : 28; " id="Layer2"><img src="frendlyindx.gif" width="546" height="410" border="0"></div> <div style="top : 216px;left : 652px; position : absolute; z-index : 23; " id="Layer24"></div> <div style="top : 304px;left : 50px; position : absolute; z-index : 26; " id="Layer27"></div> <div style="top : 754px;left : 47px; position : absolute; z-index : 19; width : 707px; height : 154px; " id="Layer21"><iframe frameborder="1" src="saishijoho.html" width="709" height="150" scrolling="AUTO"></iframe></div> <div style="top : 953px;left : 40px; position : absolute; z-index : 7; " id="Layer9"><a href="taikaikekka.html"><img src="button41.gif" width="57" height="54" border="0" alt=" "></a></div> <div style="top : 659px;left : 48px; position : absolute; z-index : 6; " id="Layer8"><img src="logo1.gif" width="194" height="65" border="0" alt="最新情報 "></div> <div style="top : 1020px;left : 34px; position : absolute; z-index : 12; </div> </body> </html> 詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
