JavaScriptでpositionプロパティを設定する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでpositionプロパティを設定する方法について解説しています。CSSのpositionプロパティではボックスの配置方法を指定することができます。JavaScriptのstyle.positionを使ったpositionプロパティの設定方法を覚えましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
永井浩平
バックエンド、フロント、クラウドなど幅広く業務を行う。
テックアカデミーでは、フロントエンドコース / Javaコースのメンター。
JavaScriptでpositionプロパティを設定する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
- はじめに
- positionプロパティとは
- positionプロパティに設定できる値の種類
- JavaScriptでpositionプロパティを設定する方法
- 実際に書いてみよう
- まとめ
- JavaScriptを学習中の方へ
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptでpositionプロパティを設定する方法について詳しく説明していくね！
お願いします！
はじめに
今回はJavaScriptを使って、HTMLのdivなどの要素の位置を指定する方法について学びます。
KeynoteやPowerPointと違い、HTMLでは要素の位置など思うように配置できなかったという経験がある方は多いのではないでしょうか。
HTMLでは基本的には平面上で、各要素が重なる場合は回り込みされて表示されるので、思うような位置に表示できないことがあります。
positionプロパティを使うことで、要素のレイアウトを自由に配置できますので、ぜひ参考にしてみてください。
positionプロパティとは
CSSの要素が表示される位置を設定するプロパティです。
設定する値によって、表示位置を調整できます。
positionプロパティに設定できる値の種類
下記の5種類の設定値に関して、大まかな内容を紹介します。
1：static
positionの既定値で、positionを指定していない場合はstaticとなります。
つまりこの値は、通常の何も指定していない場合の表示位置です。
2：relative
staticを指定した場合の表示位置から、4つの方向（top, right, bottom, left）へ数値を指定し、指定した数値分表示位置をずらすことができます。
Webアプリの全体のメニュー・コンテンツ表示位置などのレイアウトを設定する時に使います。
3：absolute
親のHTML要素に対して表示する位置を絶対的に指定します。
指定は4つの方向（top, right, bottom, left）への数値で行います。
絶対的な位置なので、他の要素の有無に関わらず必ずそこに表示され、他の要素がある場合は重なって表示されます。
画像などの上にHTML要素を重ねたい時などに使います。
4：fixed
平たく言うと、表示位置を固定するときに使います。
4つの方向（top, right, bottom, left）へ数値を指定することで、スクロールをしても常にその位置に表示されます。
ナビゲーションバーの追従などで使います。
5：sticky
これまでの4つより後にできた設定値で、スクロールした際に指定した位置に貼り付けるような動きになります。
スクロール中に位置が固定されてついてくる感じはfixedに近いですが、stickyの対象エリアの中で位置が固定されるため、対象エリアの表示位置によってstickyを指定した要素の表示位置も変わります。
HTML上で、メニューバー内でのみ追従させたい場合などの用途で使います。
JavaScriptでpositionプロパティを設定する方法
HTMLElementにCSSのスタイルを設定するのと同様に、【HTMLエレメント】.style.positionとすることで設定できます。
合わせて4つの方向を指定する場合は、【HTMLエレメント】.style.topのように設定します。
実際に書いてみよう
企業のHPやECサイトなど、ナビゲーションバーがスクロールに追従するサイトを見たことがあるかと思います。
今回はpositionプロパティを使って、こちらを実装していきましょう。
まずはHTMLで「TECHACADEMYジュニア」と書いたヘッダーと、各コンテンツ表示用のdivを用意します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="header">
TECHACADEMYジュニア
</div>
<div class="contents con1">
コンテンツ1
</div>
<div class="contents con2">
コンテンツ2
</div>
<div class="contents con3">
コンテンツ3
</div>
<div class="contents con4">
コンテンツ4
</div>
</body>
</html>
CSSでヘッダーの表示領域やbody領域がわかりやすいように色をつけます。
body{
height:1000px;
}
.header{
background-color:bisque;
padding:10px;
width:100%
}
.contents{
padding:10px;
width:100%;
height:400px;
}
.con1{
background-color:lightyellow;
}
.con2{
background-color:lavender;
}
.con3{
background-color:lightcyan;
}
.con4{
background-color:cornsilk;
}window.onload = function() {
let header = document.getElementsByClassName('header');
let headerBottom = header[0].getBoundingClientRect().bottom;
window.onscroll = e => {
if(headerBottom < document.documentElement.scrollTop){
header[0].style.position = 'fixed';
header[0].style.top = 0;
}else{
header[0].style.position = 'static';
header[0].style.top = 'auto';
}
}
};- getElementsByClassNameでクラス名を使って、HTMLの要素（今回はpositionを設定するヘッダー）を取得しています
- 「header[0].getBoundingClientRect().bottom」にて、ヘッダーを表示している要素の下の位置を取得しています
- 「document.documentElement.scrollTop」で画面のスクロールした量を取得し、要素の位置と比較して要素が隠れたら、positionを画面の一番上（top=0）でfixed（固定）と設定します。
これによりスクロールについてくる動きになります。 - スクロール位置が、ヘッダーの最初の表示位置になったら、positionをstatic（初期表示）に戻しています。
実際にスクロールさせると、ヘッダー部分が追従することが確認できます。
まとめ
今回はpositionプロパティについて学びました。
ナビゲーションバーだけでなく、近年は検索窓やチャットボットなど、ユーザーがどのページ位置にいても操作できるように工夫しているサイトが増えてきました。
こちらの記事にある通り、仕組みが分かれば実装は比較的容易ですので、ぜひ普段のサイト作成などに役立ててくださいね。
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
