・「position()」と「offset()」の違い・「position()」の注意点などの応用的な使い方に関しても解説していきます。まとめ「position()」とは?それでは、まず最初に「position()」について基本的な知識から学習していきましょう!「position()」は、特定のHTML要素の位置座標を取得することができるユニークなメソッドです。ポイントは、画面上の座標ではなくあくまでも親要素から見た位置座標であるという点です!このように、親要素の左上を原点としてX軸・Y軸の座標を取得することが可能です。画面上の座標を取得できる類似メソッド(offset())もあるのですが、そちらに関しては本記事の後半でご紹介します。left」プロパティの使い方について学んでいきます。基本的な構文と書き方についてまずは、もっとも基本となる構文から見ていきましょう。「position()」は、位置座標を取得したHTML要素を対象にして実行するのが基本となります。対象要素.position()position()の引数は無いので、そのまま実行することで位置を取得することが可能です。取得した位置座標は、「top(Y軸)」「left(X軸)」プロパティにそれぞれ座標が格納されています。注意点としては、親要素にCSSのpositionプロパティが設定されている必要があるので忘れないようにしましょう!対象のHTML要素の位置を取得する方法それでは、「position()」を使った実際のプログラミング手法について見ていきましょう!サンプル例として次のようなHTML要素があるとします。<h1>サンプルタイトル</h1></div>divタグを親要素としてh1要素が配置されています。親要素にCSSでpositionが設定されている必要があるので、次のように記述しておきます。0;}div要素にpositionプロパティを設定し、ついでにh1要素のmarginをリセットしておけばデフォルトの位置が取得できます。そこで、このh1要素の位置座標を取得するには次のように記述します。left」プロパティにそれぞれ位置座標が格納されています。親要素から見た位置になっているので、X軸・Y軸それぞれデフォルトの「0」になっているのが分かりますね。left」の座標が分かりやすいように、h1要素の位置をズラしておきましょう。leftに少し変化をつけておきます。「position()」を使ってh1要素の位置を取得してみます。}1030取得した位置座標はオブジェクト形式になっているため、「result.top」のように記述すれば「top」の値を使えるわけです。これをIF文などの条件式に利用することも可能なので、活用範囲は広いと言えるでしょう。「position()」と「offset()」の違いjQueryには「position()」とよく似たメソッドとして「offset()」もあるので、合わせてご紹介しておきます。大きな違いとしては、「position()」が親要素からの位置座標なのに対して「offset()」は画面上の位置になる点です。この画像のように「親要素」がどこにあっても関係はなく、あくまでも画面の端からどのくらいの位置にあるかを取得します。「offset()」は引数に座標を指定することでjQuery側から任意の位置に設定することも可能です。「position()」の注意点この章では、「position()」を利用する上で注意するべきポイントを見ていきましょう!主に、対象要素が非表示の場合と親要素のposition設定について学んでいきます。対象要素が非表示の場合は位置が取得できない「position()」は、条件によって上手く実行できないケースがあるので解説をしておきます。その条件というのは、対象となるHTML要素が「非表示」になっている場合です。hidden>サンプルタイトル</h1>この場合、h1要素に「hidden」属性が付与されているため非表示扱いとなり画面には表示されていません。この状態でh1要素に「position()」を実行しても位置座標は取得できないため、結果は「0」となります。「hide()」メソッドを使って次のように記述した場合も同様です。$('h1').hide().position();この場合も、h1要素が非表示になるため結果は「0」となり、位置座標が取得できないことが分かります。親要素にpositionが設定されてないと位置が取得できない冒頭でも解説しましたが、「position()」は実行する対象要素の親要素がCSSのpositionを設定されている必要があります。次のようなHTMLがあるとします。<h1>サンプルタイトル</h1></div>この場合に、親要素であるdiv要素には次のようにCSSでpositionを設定します。0;}これにより、親要素からの相対的な位置座標を取得できるようになるわけです。CSSでpositionが設定されていないと画面の端からの位置が結果として返ってくるので注意しましょう!まとめ今回は、jQueryから特定のHTML要素の位置座標を取得することができる「position()」について学習しました。left」プロパティに格納されてる・対象要素が非表示の場合、親要素にpositionが設定されてないと取得できない上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。