質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.61%

  • JavaScript

    15952questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6543questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

レスポンシブで親要素のbodyの縦幅は常に変化するのですが、 heightをJQUERYで計算する方法を考えています。

解決済

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 879
退会済みユーザー

退会済みユーザー


下記質問の続きです。
https://teratail.com/questions/13141


レスポンシブで親要素のbodyの縦幅は常に変化するのですが、
heightをJQUERYで計算する方法を考えています。

恐らく、bodyの高さを取得して、その値を使って計算すると思うのですが、このようなJQUERYが見つかりません。

もしこのソースや解説があるサイトがありましたら、教えてください。


ググッても出ないときはgitで検索したりするとライセンス表記で見つかったりするでしょうか?

一般サイトは、解説が丁寧ですが、ライセンスがほぼ表記されていません。
そのようなサイトのソースを使う場合皆さんはどうしていますか?
毎度確認ですか?
変数などを少し変更して使いますか?
それともわざわざ公開しているのだから、使っても問題ないと考えてよいのでしょうか?
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

0

特定要素の高さ分の数値を別要素のtopの値に追加したい : teratail
上記リンク先に投稿した自分の回答に記載されたコードが参考になりませんかね?
指定したelementの特定のstyleの現在値を取得するものです。
(つまり計算済みのheightを手に入れることができる)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/30 00:59

    ありがとうございます。

    下記でしょうか。難しすぎてよくわかりませんが、恐らくこれでheightの計算は出来るのですね。
    これに、計算したい要素を適応するのでしょうが、jQueryと比べるとやはり圧倒的に難しいですね。

    function getStyleValue(_elem,_StyleName){
    var _Element=_elem;

    if(!_Element){
    console.error("Element is null : Elementが存在しません。");
    return "";
    }
    var style;
    if(document.defaultView){
    style=document.defaultView.getComputedStyle(_Element,"");
    }else{
    style=_Element[currentStyle].getAttribute(_StyleName);
    }
    return style[_StyleName];
    };
    function setStyleValue(_elem,_StyleName,_Value){
    var _Element=_elem;

    if(!_Element){
    console.error("Element is null : Elementが存在しません。");
    return "";
    }
    _Element.style[_StyleName]=_Value;
    };

    var contents_height=getStyleValue(document.getElementsByClassName("contents")[0],"height");
    setStyleValue(document.getElementsByTagName("footer")[0],"height",contents_height);

    キャンセル

  • 2015/07/30 23:12

    getStyleValue(document.getElementsByTagName("body")[0],"height")
    で取得できるかと

    キャンセル

0

こちらのサイトは参考になりますでしょうか?
http://www.buildinsider.net/web/jqueryref/009

一般サイトに置いてあるコードについてはライセンスについて明記が無ければ自由に使用してかまわないと考えます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/26 20:16

    ありがとうございます。


    一般サイトに置いてあるコードについてはライセンスについて明記が無ければ自由に使用してかまわないと考えます。
    良くある下記のサイトのような説明付でソースがあるサイトのHTML、CSS、JSはコピペして、ライセンス表記無しで使ってよいのですね。

    http://gakublog.com/archives/1069



    ・教えていただいたサイトは確かに、縦幅に関しての情報がありますが、計算式など、重要な部分がありませんでした。
     下記のように途中まで作ってみましたが、参考サイトでは、その後の部分が無いので完成しませんでした。
    <script>
    $(document).ready(function () {
    var top-body = parseInt( $('top-body').height();
    var top-header-height = parseInt( $('top-header').height();

    });
    </script>

    キャンセル

  • 2015/07/26 20:46

    話しが横にそれますが、JavaScriptの変数名にマイナス記号は使用できません。
    http://alphasis.info/2012/11/javascript-variable-name/
    提示いただいたコードは意図した動作になっていない可能性があります。
    少なくとも私の環境ではエラーになります。

    各サイトに置いてあるコードは、ライセンスについて明記が無ければ自由に使用しても大丈夫ですが、ほとんど同じコードで自分のライセンスとして表明するのはルール違反でしょう。そうでなければ出典元を記載する必要もないでしょう。自由に使ってほしいからわざわざ公開していると理解して、感謝して使用しましょう。そして将来はご自身も皆さんの役に立ちたいという思いで自分のコードを公開されることを期待いたします。

    キャンセル

  • 2015/07/27 17:21


    すいません。クラスになっていませんでした。
    下記ですね。単語の間を-で区切るやり方は、グーグルのコーディングルールから持ってきたのですが、HTMLでは問題がなくても、JSでは問題になるのですね。

    <script>
    $(document).ready(function () {
    var top-body = parseInt( $('.top-body').height();
    var top-header-height = parseInt( $('.top-header').height();

    });
    </script>




    各サイトに置いてあるコードは、ライセンスについて明記が無ければ自由に使用しても大丈夫ですが、ほとんど同じコードで自分のライセンスとして表明するのはルール違反でしょう。
    そうでなければ出典元を記載する必要もないでしょう。自由に使ってほしいからわざわざ公開していると理解して、感謝して使用しましょう。そして将来はご自身も皆さんの役に立ちたいという思いで自分のコードを公開されることを期待いたします。

    もちろん自分のライセンスにすることなどありえませんし、そのようなことも思っても記載もしていません。
    将来公開できる側になりたいと思っています。


    色々教えていただいてありがたいのですが、一番の本題の縦の計算部分がわからないので、BAにしたくてもこれではBAに出来ません。
    再々質問は気乗りしないので、上記の続きがわかりましたら、BAにさせて頂きます。

    キャンセル

0

$(function(){
  var topBody = $('.top-body').height();
  var topHeaderHeight = $('.top-header').height();
});
高さはこれで取得できます。
高さを取得するのにheightouterHeightがあります。
outerHeightはmarginやpaddingまで含めた高さになるので使い分けてください。
変数名は-を利用できない決まりになっている(マイナス計算と間違うため)ので、
アンダーバーで区切るかか単語のはじめを大文字にする(スネークケースとキャメルケースっていいます)
というのが基本的な書き方です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/27 20:27

    ありがとうございます。

    下記サイトを見るとコンテンツ幅とはmargin、padding、borderを含まない幅ですと記載があるので、マージンなどがない、heightを選択すればよいのですね。
    http://design-spice.com/2014/03/24/percentag/
    親要素のコンテンツ幅とはmargin、padding、borderを含まない幅です。


    変数名は-を利用できない決まりになっている(マイナス計算と間違うため)ので、
    アンダーバーで区切るかか単語のはじめを大文字にする(スネークケースとキャメルケースっていいます)
    というのが基本的な書き方です。

    クラス名の単語の間を-で区切るやり方は、グーグルのコーディングルールから持ってきたのですが、HTMLでは問題がなくても、JSでは問題になるのですね。
    BEMも-を使いますが、これらのクラス、IDのつけ方は、HTMLはあっていても、JSでは間違ったつけ方なのでしょうか?

    HTMLのクラス名は-を使ってはいけないということでしょうか?

    その後の計算式について教えていただければBAにさせてもらいます。

    キャンセル

  • 2015/07/29 09:16

    クラス名にはハイフンは使えますが、変数名には使えないということです。
    変数というのは値を格納する箱のことです。var topBodyなどですね。
    その後の計算式と言うのは、何をしたいのかが把握できておりませんので書きかねます。
    どういうことをしたい、というのを教えて頂けますか?

    キャンセル

  • 2015/07/30 01:06

    お返事遅れてすいません。

    レスポンシブの際、親要素が、bodyやコンテンツが加わるとたてに伸びてしまう場合、
    縦幅の%を自動的に計算してくれるようにJSかjQueryで出来ると聞いたのですが、皆さんそれでレスポンシブサイトを作られているのではないでしょうか?

    キャンセル

  • 2015/07/30 01:20

    縦の計算は、親の縦幅÷その要素の縦幅ですよね?

    親の横幅÷その要素の縦幅ではないですよね?

    キャンセル

0

質問内容とは関係ありませんがちょっと気になったので。

レスポンシブの際、親要素が、bodyやコンテンツが加わるとたてに伸びてしまう場合、
縦幅の%を自動的に計算してくれるようにJSかjQueryで出来ると聞いたのですが、
皆さんそれでレスポンシブサイトを作られているのではないでしょうか?

レスポンシブに限らず、Webサイトの制作では原則として高さは成り行きです。
成り行きとは、heightの指定はせずコンテンツ量に応じて高さは増減するということです。
基本的にデザインも実装も「高さ成り行き」を前提としてほとんどの場合は組んで行き、
どうしても高さ指定が必要な場合のみheightを指定する形になります。
まずは「どうしてもheight指定しないと実現できないことなのか?」ということを検討してみてください。

その上で、どうしても動的にheightを変化させる必要があるのであれば、
その時はjQueryなどで設定することになりますが、具体的にどのような計算式にするべきかは
実現したいものの具体的な仕様によって内容が変わるので、
どんなものが作りたくてどこで行き詰まっているのかをもう少しだけ具体的に説明してもらった方が
より的確な回答が得られると思います。

基本的な高さの取得と設定であれば、jQueryで以下のようにすれば良いです。
あとはどこの要素の高さを取得して、どのタイミングで、どこに適用すればいいのか、
作りたいものに合わせてロジックを考えれば良いかと。
$(function(){

 //特定の要素のheightを取得
  var a = $('セレクタA').height();

//取得した値を別の要素の高さとして設定
  $('セレクタB').height(a);
});

ちなみにレスポンシブだと「ウィンドウサイズが変更された時」のタイミングで高さの設定をする必要が出てきますので、window.resize();などと組み合わせてロジックを組み立てる必要があるでしょうね。
(その辺はググればすぐ出てきます)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/30 01:41

    ありがとうございます。


    基本的に固定のサイトでheightをつけないものは、つける必要がないということですね。

    画像もアイコンも不要ということですね。

    必要な時は、そうであれば、ほとんどないのかもしれませんね。

    キャンセル

  • 2015/07/30 01:55

    >基本的に固定のサイトでheightをつけないものは、つける必要がないということですね。

    そうですね。基本、成り行き前提で作ってますので。

    >画像もアイコンも不要ということですね。
    特定のサイズで表示したい場合以外は無くても問題ないですね。

    >必要な時は、そうであれば、ほとんどないのかもしれませんね。

    そうはいっても高さ指定が必要になることもやっぱりあるので、
    必要な場合にはもちろん使いますよ(笑)
    ただ、無駄に高さ指定しまくるといろいろ面倒になるので、
    必要最小限にした方がいいですよ、というお話です。

    キャンセル

  • 2015/07/30 18:17

    WEBフォントは、縦を指定しない、フォントサイズを%指定にすればすむということですね。
    画像はフルイドイメージで済みますね。

    後は確かにあまり、そのようなケースはないかもしれません。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15952questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6543questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。