画面サイズ、イベント発生座標、スクロール量の取得方法

「画面サイズ」や「イベント発生座標」を取得する方法について取り上げます。似たようなプロパティがいくつかあり、目的のプロパティを利用するには、違いを理解しておく必要があります。各プロパティがどういった値を持っているのか実例とともに確認します。

サイズ(幅、高さ)を取得

モニターサイズ ウィンドウサイズ などのサイズを取得するためのプロパティが存在します。

iframeの中なのでイメージがつきづらいですが、CODEPEN上の例を表示します。

プロパティ 概要
screen.width
screen.height
モニターの解像度
screen.availWidth
screen.availHeight
モニターの利用可能な画面サイズ
window.outerWidth
window.outerHeight
ウインドウサイズ
window.innerWidth
window.innerHeight
ウインドウの表示領域のサイズ

イベント発生座標(X, Y)を取得

イベントが発生した座標を取得できるEventプロパティについて確認します。

プロパティ 概要
screenX
screenY
スクリーン上での座標
clientX
clientY
ブラウザ上での座標
pageX
pageY
ページ上での座標(スクロール量が影響)
offsetX
offsetY
要素上での座標

スクロール量を取得

スクロール量を取得できるプロパティについて確認します。

プロパティ 概要
window.scrollX
window.scrollY
スクロール量

スクロールさせるメソッドも存在します。

メソッド 概要
window.scroll(x, y)
window.scrollTo(x, y)
特定の座標までスクロール(絶対的) scrollTo(0, 100)

「x座標=0px」「y座標=100px」にスクロールする。
scrollBy(x, y) 現在の位置から指定量だけスクロール(相対的) scrollBy(0, 100)

現在位置から「右に0px」「下に100px」スクロールする。
【エンジニア向け】仕事を見つける方法

転職する

転職エージェントを活用する

転職サイトの場合、自身でサイト上から企業を探す必要があります。 一方「レバテックキャリア」 などの転職エージェントの場合、エージェントが企業を紹介してくれます。エージェントが間に入ることにより、日程調整や、条件交渉などもサポートしてくれます。

転職ドラフトを活用する

転職ドラフト」は、 企業がITエンジニアをドラフトという形で指名するサービスです。年収が最初に提示されるなどのメリットがあります。 ただ、初回登録時にレジュメ作成が必要で、すでにエンジニア経験が豊富にあるエンジニア向けのサービスかと思います。 レジュメ作成が手間ですが、自身のキャリアを見直す機会になり、他の仕事探しにも役立つはずです。

エンジニア転職保証のあるスクールを活用する

ある程度、開発経験のあるかたであれば、独学で必要なスキルを身につけることができるはずです。ただ、別業種からエンジニアに転職したい場合など、1から独学で学ぶのはハードルが高いです。そういった方は、スクールの活用を検討しても良いと思います。 「TechAcademy」は、エンジニア転職保証コースを提供しています。給付金制度の対象講座として認定されているため、金銭面の負担も抑えることができます。

フリーランスとして活動する

レバテックフリーランス」「ITプロパートナーズ」「ギークスジョブ」は、フリーランスエージェントサービスです。 エージェントによって、支払いサイトなど細かい違いはありますが、まずは良い案件を見つけることが重要です。 登録自体は無料なので、複数エージェントに登録して、より多くの案件を紹介してもらうのがおすすめです。

logo
わくわくBank.
技術系の記事を中心に、役に立つと思ったこと、整理したい情報などを掲載しています。