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

Question

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

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

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

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

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

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

Answer 1

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

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

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

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

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

$(function(){

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

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

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

Comments

[退会済みユーザー]

ありがとうございます。

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

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

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

[aKusano]

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

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

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

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

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

[退会済みユーザー]

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

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

Answer 2

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

Comments

[退会済みユーザー]

ありがとうございます。

下記でしょうか。難しすぎてよくわかりませんが、恐らくこれで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);

[Cf_cwd]

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

Answer 3

$(function(){
  var topBody = $('.top-body').height();
  var topHeaderHeight = $('.top-header').height();
});

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

Comments

[退会済みユーザー]

ありがとうございます。

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

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

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

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

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

[YashaWedyue]

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

[退会済みユーザー]

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

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

[退会済みユーザー]

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

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

Answer 4

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

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

Comments

[退会済みユーザー]

ありがとうございます。

＞
一般サイトに置いてあるコードについてはライセンスについて明記が無ければ自由に使用してかまわないと考えます。
良くある下記のサイトのような説明付でソースがあるサイトの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>

[rik]

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

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

[退会済みユーザー]

すいません。クラスになっていませんでした。
下記ですね。単語の間を-で区切るやり方は、グーグルのコーディングルールから持ってきたのですが、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にさせて頂きます。