• 締切済み

取得した高さを利用してサイズを決めたい。

dct18の回答

  • dct18
  • ベストアンサー率28% (21/74)
回答No.1

とある場合って何ですか？ もし画面サイズの大きさが変わったときに変化するなんて 代物ならかなりウザイものが出来上がりそうですが window.outerHeightの値をaにいれてa-20でいいかと もし足りなくても分岐すればいいし、 その前にaが20以下か確認すれば良いですしね 外部ファイルのCSSを変化させられるJavaScriptは知らないので HTMLに直接かかれたCSSの要素を変更するしかないと思いますが そうした場合他のページでも使用する際、直接記入必須になります ajaxで出来るみたいですが難しいと思います (私が知らないだけでJavascript単体で出来るかもしれませんが) 正直普通のサイトなら固定サイズにした方がいいです ゲーム性があるようなサイトなら別ですが

978
質問者

補足

ありがとうございます。 >とある場合って何ですか？ height:30px; のことですけど？ 外部ファイルのＣＳＳなんて言ってませんし。 >window.outerHeightの値をaにいれてa-20でいいかと そのa-20の値をＣＳＳに書き込む際にどうやって書くのかが知りたかったんですが… 回答していただいて申し訳ないですが… 私の質問の意図と回答が一致していないようでした。 説明不足のようでいらない手を煩わせてしまったようで、 申し訳ないです。

この回答がついた質問に戻る
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • jqueryでdata-の画像サイズの取得方法

    通常の場合、 <img src="hoge.png" /> $("img").on("load",function(){ var w = $(this).width(); var h = $(this).height(); $(this).css({"width":w +"px", "height":h +"px"}); }); でサイズは取得できますが、 <img src="hoge.png" data-src="hoge2.png" /> の場合でhoge2.pngの画像サイズを取得する方法を探しています。 分かる方がいらしたら教えてください。 よろしくお願いします。

  • ウィンドウサイズを取得するjQuery

    レスポンシブ対応の際、jQueryでリアルタイムにウィンドウサイズを取得する方法について質問です。 例えば「ウィンドウサイズが700以下の時、文字色を赤に変える」としたい時、検索すると下記のようにすればよいとでてきます。 ■ HTML <p>サンプルテキスト</p> ■ jQuery var WindowWidth = $(window).width(); $(window).resize(function(){ if(WindowWidth < 700){ $("p").css({ color: 'red' }); } else { $('#sample').css({ color: 'black' }); } }); 確かにこの記述をするとウィンドウサイズを変更すれば適用されるのですが、元々のサイズが700px以下のときには適用されません。 なので、今は下記のように記述しています。 ■ jQuery var WindowWidth = $(window).width(); $(function(){ if(WindowWidth < 700){ $("p").css({ color: 'red' }); } }); $(window).resize(function(){ if(WindowWidth < 700){ $("p").css({ color: 'red' }); } else { $('#sample').css({ color: 'black' }); } }); こう書くと希望通りの動作（ウィンドウサイズが700px以下のときは文字が赤色になり、ウィンドウサイズを変更するとリアルタイムで変更される）をしてくれるのですが、もう少しきれいにまとめられるのではないかな？と考えております。しかし、うまい記述方法がわからず…。 ご教授いただけると助かります。

  • javascriptで高さの取得ができない

    cssで#A{height=auto;} としている"A"の高さを取得するため/bodyの手前に alert(document.getElementsByID("A").style.height); といれてみますが、取得できません。 cssで#A{height=1000px;}とすればalertに1000pxが返ってきます。 なぜでしょうか。Aの高さを取得することは不可能なのでしょうか。

  • google mapのサイズのcssによる変更

    現在webページをスクリーンサイズによってPCとスマホにCSSを切り替えることによって 振り分けています、この場合google mapのサイズを切り替えたいのですがうまくいきません。 google mapは <div id="map" style="width:606px; height:420px;"> のように指定しています。 やってみたのはPC用CSSをpc.css、スマホ用CSSをsm.cssとすると <div id="pcmap"> <div id="map" style="width:606px; height:420px;"> </div> <div id="smmap"> <div id="map" style="width:406px; height:420px;"> </div> と記述し、それぞれのCSSでdisplay:none;したのですが無条件で2件目のmapが表示されないためうまくいきません、CSSに関わらず二重設置になるからだと思います。 なにかいい方法はないでしょうか？

    • ベストアンサー
    • CSS
  • 画面サイズを取得し、テーブルの高さ、幅を指定したい

    以下のような方法で、画面に合わせたテーブルを作成したいのですが、 うまくいきません。 幅の変数を単にタグ属性の値にしても動かない事が判りました。 どのようにしたら、値をセットできるのでしょうか。 ご存知の型がおられましたら教えてください。 よろしくお願い致します。 <html> <head> <title>ウィンドウサイズを取得する</title> </head> <body> <script Language="JavaScript"><!-- w = window.outerWidth; h = window.outerHeight; // --></script> <table width="w" height="h"> <tr> <td> test </td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • CSSで画面サイズを縮小するとレイアウトが大きく崩れてしまう

    CSSとXHTMLで、左と右に分かれただけのデザインという少し変わったレイアウトで作ってみたのですが、画面サイズを変更（縮小）すると右側のBOXがすべて左側の下に回り込んでしまいます。 できればスクロールバーなどを出現させて、レイアウトが崩れないようにしたいと考えています。 色々いじくっていたらめちゃくちゃになってしまったのですが、一応CSSを掲載しておきます。 また、左側を○○pxで、右側を残りのサイズというようなwidthの指定の仕方ってあるのでしょうか？ frameとかだと*で対応するみたいなんですが・・・ ひとまず、周り込を回避する方法が優先です。 どうかよろしくお願いいたします。 @charset "shift_jis"; body { margin: 0px; height: 100%; padding: 0px; font-size: 12px; line-height: 150%; } html { height: 100%; } img { border: none; vertical-align: bottom; } #left { background-color: #666666; width: 350px; float: left; min-height: 100%; height: 100%; } #right { height: 100%; padding: 35px 0 0 0; min-height: 100%; width: auto; margin: 0 0 0 350px; }

    • ベストアンサー
    • HTML
  • フォントサイズと行間

    フォントサイズと行間についてご質問します。 フォントサイズ12px。文字上下に3pxのアキをとり行高18pxとする場合、 スタイルシートは下記ようになると思います。 font-size: 12px; line-height: 1.5 フォントサイズが13pxで文字の上下に4pxのアキをとり行高21pxとする場合、line-heightは21/13=1.61538462と計算されます。 font-size: 13px; line-height: 1.61538462 このように小数点以下が多い場合でもスタイルは正常に動作するのでしょうか(ちなみに13pxで行高19の場合1.46153846になります)。 普段、YUI 2: Fonts CSSを利用しております。デフォルト(100%)は13pxです。文字の上下に4pxのアキをいれ、行高を21pxに設定したいと思っております。その場合 font-size: 100% line-height: 1.61538462 というのは正常に動作するのでしょうか。

    • ベストアンサー
    • CSS
  • jQueryでボックスのサイズ変更

    jQueryで表示済みのボックス要素（div#box）のサイズを変更しています。 ※ 元のサイズは100×100px $("#box").css("width","250px"); $("#box").css("height","250px"); この時、サイズの変更をスムーズにアニメーションさせるようにするには、何か方法があるのでしょうか？ イメージとしては、lightbox2のように、画像のサイズによってウインドウがスムーズにアニメーションするアレです。 「このページに書いてあるよ」や「こうすればできるよ」など、情報をお待ちしています。 よろしくお願いします。

  • フォントサイズでレイアウトがずれる？

    cssでページレイアウトをしているのですが、 外部cssでサイト全体のフォントサイズを13pxにした場合 body { font-size: 13px; } 同じ画像なのに（四角のボタン）下部分の1pxの底辺が表示されるものとされないものが出てきました。 HTMLの記述内容は以下の通りです。 <div class="menu"> <p><img src="/img/**1.png" alt="" width="180" height="33"></p> <p><img src="/img/**2.png" alt="" width="180" height="33"></p> <p><img src="/img/**3.png" alt="" width="180" height="33"></p> <p><img src="/img/**4.png" alt="" width="180" height="33"></p> </div> <p>にmargin、paddingなどは設定していません。 この場合、画像、ｃｓｓ共に同じ条件であるはずなのに、3番目の画像だけ上記のような不具合がおこりました。 フォントサイズを14pxにした場合、問題なく表示されます。 firefoxで確認したところは13px,14px共に、きちんと表示されていました。 ちなみにブラウザはIE6です。 ブラウザのバグか何かでしょうか？？ 申し訳ありませんが、どなたかご教授お願い致します。

    • ベストアンサー
    • HTML
  • CSSで記述した数値が取得できない

    あるdivタグのサイズを640px*480pxにしようと思い、以下のように記述しました。 （省略） <style type="text/css"> <!-- #oshiete { width: 640px; height: 480px; } //--> </style> </head> <body> <div id="oshiete"></div> （省略） その後、これをJavaScriptで動的に変化させようとしたのですが、 document.getElementById("oshiete").style.width などでの数値の取得が出来ません。 調べてみたところ、divタグに <div id="oshiete" style="width: 640px; height: 480px;"></div> と直接スタイルを記述していれば数値の取得が出来ました。 しかしスタイルシートを使う以上、タグに直接スタイルを書いていたのではせっかくの効果が発揮できません。 スタイルシートをheadタグに記述、あるいは外部CSS呼び出しを使いつつ、JavaScriptから数値を取得する方法を教えてください。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する
質問する