CSSで全体の表示サイズを拡大する方法はある？
- HTML全体の表示を拡大する方法について質問です。
- カラーミーでショップのカスタマイズをしている中で、画像を読み込ませると全体の表示が130%程度拡大してしまう現象が発生しています。
- この現象について、CSSやJavascriptでどのように対処すればいいのか教えていただきたいです。
- ベストアンサー
CSSなどでHTML全体の表示を拡大するってことはできるんでしょうか？
カラーミーでショップのカスタマイズをしているのですが、画像を読み込ませると、画像の比率が１３０％程度上がってしまい、表示がかなりぼやけてみえてしまいます。 修正しようと何度も見直しているのですが、特に間違った表記がありません。 よく見ると、全体の表示も１３０％程度上がっています。 （全体 ＝ widthで指定したもの全て） 初めて見たエラー？なので、どう対処すればいいのかわかりません。 たぶんCSSのような気がするんですが、なんて調べればいいのか検討がつきませんので、どなたかご存知の方がいらっしゃったら、教えてください。 ●CSSで全体の表示サイズを拡大指定できるのでしょうか？ ●CSS以外で、例えばJavascriptで上記の内容はできるのでしょうか？ ●この内容を解除するにはどうしたらいいのでしょうか？ よろしくお願い致します。
- egtomo
- お礼率59% (101/170)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
javascriptだったらの参考URL http://javascript123.seesaa.net/article/112850382.html http://iswebmag.hp.infoseek.co.jp/139/sample01.html CSSだったらの参考URL http://www.tagindex.com/stylesheet/img/zoom.html テキストも拡大されているならjavascriptの可能性の方が高いですかねー 希望通りの表示に直るようにお祈りしております
関連するQ&A
- CSSだけでサムネイルから拡大画像チェンジ
1ヶ所の指定場所に拡大画像が表示された状態で、下段にいくつかのサムネイルを設置し、マウスをそのサムネイルに乗せると拡大画像がチェンジして、マウスを外すと元画像に戻るみたいな事をCSSだけで表現したいのですが可能でしょうか？感じとしては http://curucuru-select.com/?pid=7429014 のCSS版みたいなものをのぞんでいるのですが・・・多分このサイトはjavascriptでやってるみたいなんですけど・・できたら、サンプルソースをいただけるとありがたいのですが・・どうかよろしくお願いします。
- 締切済み
- CSS
- ホームページ全体を拡大・縮小表示するには
px値を指定して作ったページがあって 読み込んだ時にホームページ全体を拡大・縮小表示の指定するには どうしたらいいでしょうか？ ipadのブラウザから見たらスクロールしないと 全体が見れなかったので、ページ全体を縮小させたいです。 $(document).ready(function(){ $("body").css("zoom","70%"); }); これを追加してみたんですが変わらなかったです。
- 締切済み
- JavaScript
- cssで背景画像をランダム表示する
現在cssで背景画像をランダム表示するよう指示をしたいです。 テンプレート配布サイトからDLしたcssには以下のように指定されています。 ---- .menu{ float :left; background-image:url(img/menu_01.png); background-repeat:no-repeat; width :270px ---- このようなcss表記から画像をランダム表示に指定するには どのように加筆、修正をしたらよいのか教えて頂けますでしょうか。 似たような質問もたくさんされていたのでとても申し訳ないのですが、自力で色々試してみたものの、 どうしてもわからなかったので、お力を貸して頂ければ幸いです。 よろしくお願い致します。
- 締切済み
- CSS
- ページ全体の拡大／縮小が行える、JavaScriptのサンプルを教えていただけますでしょうか？
ページ全体の拡大／縮小をJavaScriptにて行いないたい（対象はIEのみ）のですが、検索をしてみると、「文字サイズの拡大／縮小」や「画像の拡大／縮小」はよく見つかるのですが、ページ全体の拡大／縮小のサンプルを掲載しているページはあまり見かけません。 検索（"ページ ズーム javascript"等のキーワードで）で何件か見つかって、試してはみたのですが、それらのプログラムですと、私のほうのHTML＋CSSで使用すると、何とも説明しがたいおかしな挙動をしてしまいます。HTML＋CSSの見直しも色々行ってみたのですが、なかなか改善されません。 みなさんがご存知のJavaScriptのサンプル（ページ全体の拡大／縮小）が掲載されているURLを教えていただけますでしょうか？ 教えていただいたサンプルを実装し、色々探ってみたいと思っています。 ※ちなみに、イメージは↓このような感じです。 http://appleworld.com/4tr/
- 締切済み
- JavaScript
- イラストレーターの拡大縮小について
WindowsXPでイラストレーターCS5を使っています。 下記の画像の例を使って質問したいのですが、 okwaveの高さを指定して2段とも同じ比率で拡大したい場合どうすればいいのでしょうか？ 単純にokwaveの高さを指定して拡大した場合Illustratorと間のスペースが拡大できません。 かといって全体を選択してまとめて拡大しようとするとokwaveの高さを指定できません。 とりあえず今はokwaveの元の高さと拡大したい高さから比率を出して全体を拡大しているのですが、1000分の数ミリ程度ですが余分が出来てしまいます。 わかりにくい例で申し訳ありませんが、よろしくお願いします。
- ベストアンサー
- 画像・動画・音楽編集
- iモードって自動的に拡大表示されるのですか？
iモードってウェブページを見ると自動的に拡大表示されてしまう仕様なのでしょうか。 私の液晶は480x854の超高解像度です！！ これは10ピクセルの文字なら、1行に48文字表示できる計算なのですが、実際には10文字ぐらいしか表示されません。 文字が4倍ぐらいに拡大されていると思われます。 CSSで厳密に文字サイズを指定しても無視されてしまうようです。 画像に関しては、横の長さが240ピクセルの画像が画面の横幅いっぱいに表示されています。ようは2倍に拡大されてしまっているわけです。 <IMG width="240">のように厳密に画像の横幅を指定しても無視されてしまうようです・・・。 iモード専用のHTMLタグが存在するのでしょうか。 iモードの文字を4倍、画像を2倍に拡大表示する機能を無効にしたいです。
- ベストアンサー
- docomo
- CSSでの画像指定について。
CSSでの画像指定について。 ファイルパスの指定について教えてください。 フォルダ１の中に「sample.html」、「sample.css」、「img」フォルダが入っており、 「img」フォルダの中に、「nature_01.gif」が入っています（下図）。 -------------------------------------------------------------------------- フォルダ１ L sample.html L sample.css L img（フォルダ） img(フォルダ) L nature_01.gif ---------------------------------------------------------------------------- このファイル構成だと、sample.css の中で 『background-image:url(/img/nature_01.gif)』のようにパスを指定すれば良い と理解していたのですが、背景に画像が表示されませんでした。 その後、下記のように修正すると、画像が表示されるようになりました。 firefox3.5 →修正後は画像が表示される。 Internet explore 8 →修正前、修正後ともに表示されない。 ----------------------------------------------------------------------- 【修正前】 #contents{ width:750px; background-image:url(/img/nature_01.gif); 【修正後】 #contents{ width:750px; background-image:url(../img/nature_01.gif); ------------------------------------------------------------------------ OS・・・windows xp なぜ、こうなるのか、わかるかたがいましたら教えてください。 よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- Flashで表示されたサムネイルをJavaScriptで拡大表示したい
HTMLはある程度わかるようになってきただけのJavaScript初心者なのですが、HP制作の途中、Flashを使っていて分からないことが出てきました。 教えていただけるとうれしいです。 Flashのメニューを使っていて、そのメニューはリンク先がカスタマイズ可能です。 リンク先の指定は、テキストファイルの中に記述されている、 「 &url5=http://www.xxxxx.xxx.xx/& 」という場所で指定することになっています。 フォトギャラリーの写真のサムネイルをメニュー項目にして、Flashメニューでサムネイル選択したいと思っているのですが、そのサムネイルをクリックしたときに、同じページの別のテーブルに、そのサムネイルの大きな画像を表示させるということをしたいのですが、できるのでしょうか。 もしできるのなら、教えてほしいです。 Flashメニューでないサムネイルをクリックして拡大画像を表示ということはJavaScriptでできるのですが、Flashメニューで、となると不可能なのでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 画像表示の拡大表示について。
画像の拡大表示について？ やじりたいこと、画面上に表示している画像を拡大ボタンが押されたときに 表示しているウィンドウ／画像が拡大表示し、 拡大表示している場合、「前へ」「後へ」が押されたとき、拡大表示している ウィンドウ／画像でページが切り替えたい。 以下のソースでは 「拡大」ボタンを押したときにウィンドウ・画像を表示しますが 拡大した状態で、「前へ」「後へ」押したとき、ウィンドウは拡大しているが 画像が元のサイズに戻ってしまいます。 ソースの<img name = "dspimg" src="..... 部分でwidth/height をピクセルで 指定してるため、元に戻ってしまうと思います。width/height を%で指定した 場合、ＩＥ８ではやりたいことができますが、ＩＥ７だと画像がウィンドウ前面に出たりして うまくいきません。 長々と申し訳ありませんが、 どうすれば、うまくいくか、ご教授ください。 よろしくお願いします。 ■ＰＨＰソース <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>画像拡大</title> <meta http-equiv="Pragma" content="No-Cashe" /> <meta http-equiv="Cache-Control" content="No-Cache" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type="text/javascript"> <!-- function zoom(){ window.resizeTo(900,750); document.all("dspimg").style.width = 880 ; document.all("dspimg").style.height = 650; } //--> </script> </head> <body> <?php $fold = $_GET['fold']; $no = $_GET['no']; $jpgFiles = glob($fold . "*.JPG"); $cnt = count($jpgFiles); ?> <?php // ここで、 width=800 height=600にしているから、再度、呼ばれたときに画像が元に戻る。 echo '<img name = "dspimg" src="' . $jpgFiles[$no] . '" alt="' . $jpgFiles[$no] . '" width=800 height=600 " />'; ?> <input <?php print $bt ?> type="button" value="< 前へ" onclick="location.href='./view.php?fold=<?php print $fold; ?>&no=<?php print $no - 1; ?>'" /> <?php //次の10件 if($cnt - 1 != $no) { $bt = ""; } else { $bt = "disabled"; } ?> <input <?php print $bt ?> type="button" value="次へ >" onclick="location.href='./view.php?fold=<?php print $fold; ?>&no=<?php print $no + 1; ?>'" /> <?php //閉じる //"#" onClick="window.close(); return false; ?> <INPUT type="button" Value="閉じる" onClick="window.close(); return false;"> <?php //拡大 ?> <INPUT type="button" Value="拡大" onclick="zoom();" > </div> </body> </html>
- ベストアンサー
- PHP
- HTML5＋CSS3 でしかできないこと
長年、趣味や一部仕事で XHTML+CSS のサイトを作っています。 数年前から、サイト内にCGIを入れたり、色んな動きを楽しむため javascriptを導入してサイト作成を楽しんでいたりもします。 言語も html css javascript jquery php など、色々楽しみながら勉強してきました。 ほんの数年前から、HTML５＋CSS３ が登場しましたが、 様子を見ていると、どんどん独創的なサイトが出てきています。 スマートフォン用のサイトも作れるようになりたいな、と思っていましたが ようやく重い腰を上げて作業に取り掛かろうと思っています。 そこで質問なのですが、HTML5＋CSS3で作られたサイトで まるでjavascriptで制御されたような軽快なスクロールや動きが散見されます。 こうしたサイトを見ると、javascriptで動かしているのかHTML5で動かしているのか 判別がつきません。 HTML5やCSS3で新しく実装された機能については、ネットで調べると色々出てきます。 例えば、リンクタグをブロック要素化することが簡単になったとか、 角が丸い四角形を充てることができるようになったとか、電話番号をタップすると 「通話」ボタンが出るようになったとか、個別の機能についてはなんとなく把握しました。 しかし、「HTML5+CSS3で作られたサイト全体」で見ると、 いまいちピンと来ないのです。 そこで、お詳しい方に是非、以下のような形で 教えてもらえたらと思い、投稿しました。 ------------------------------------- 実際にHTML5+CSS3で作られたサイトを基に、 どこをどのように設定したのかを見せて欲しい ------------------------------------- 例えば、 http://www.hotakubo-seikei.com/ は、ソースを見るとHTML５で作られていますが（section タグや header タグがありますね） XHTML+CSSでサイトを長年作ってきた人間からすると、 どうしてこんなサイトができるのか全く分からないのです。 javascriptもいくつか利用されていますが、どれがjavascriptによるもので どれがHTML5+CSS3によるものなのかわかりません。 また、一番驚いたのが、サイトの構成です。 サイト全体の横幅が無く全画面表示になっており、 ３カラムで、縦スクロールするとディレクトリが変わるなんて XHTML+CSSの常識では考えられません。 もちろん、デザイナーによるデザインでこうなったと言ってしまえばそれまでですが、 それを実装できていることに感動しているのです。 ↑↑↑ こんな感じで、何かサンプルサイトを基に XHTML+CSSとの違いや、HTML5+CSS3だからこそ実現できることを 分かりやすく教えてもらえたらとても有難いです。 サンプルサイト付きで、なるべく詳しく教えて頂いた方に ポイントを付与させていただきたいと考えております＾＾ どうぞ宜しくお願い致します！
- ベストアンサー
- その他（インターネット・Webサービス）
お礼
javascriptで解決しました＾＾ ありがとうございました＾＾