タグ

ブックマーク / lab.syncer.jp (5)

  • JavaScriptでスクロール量を取得する方法

    2017/06/22 JavaScriptで、ページ内の現在位置(スクロール量)を取得するには、window.pageYOffsetを参照します。 サンプルコードpageXOffsetがページの左端から水平方向の、pageYOffsetが上端から垂直方向のスクロール量(ピクセル単位の数値)です。横スクロールが発生するサイトはあまりないので、参照する機会が多いのは後者でしょう。 // 水平方向 var x = window.pageXOffset ; // 垂直方向 var y = window.pageYOffset ;デモこのページでのスクロール量を取得して表示しています。

    JavaScriptでスクロール量を取得する方法
  • 色のコントラストチェッカー | 文字色と背景色の組み合わせを確認

    通常文字(22px未満)は、4.5 以上でAA、 7 以上でAAAです。 巨大文字(22px以上)は、3 以上でAA、 4.5 以上でAAAです。 太文字(14px以上)は、3 以上でAA、 4.5 以上でAAAです。 Web Content Accessibility Guidelines (WCAG) 2.0Web Content Accessibility Guidelines (WCAG) 2.0とは、ウェブコンテンツをよりアクセシブルにするための一定の基準を設けたガイドラインで、従うことで人々にとって利用しやすいウェブサイトとなります。達成レベルとして、AA(達成)、AAA(高いレベルで達成)があります。その中で、色のコントラスト比は次のように定められています。 文字の種類AAAAA通常文字 (22px未満)

    色のコントラストチェッカー | 文字色と背景色の組み合わせを確認
  • Google Maps Embed APIの使い方まとめ

    2017/07/05 Google Mapsを自分のサイトやブログに埋め込んで表示できる「Google Maps Embed API」の使い方をまとめています。JavaScriptを利用しないので、プログラミングが苦手な方でも手軽に利用できます。 Google Maps Embed APIGoogle Embed APIの公式リファレンスです。詳しい仕様、プログラミング方法などを確認できます。準備 (APIキーの取得)Google Maps Embed APIを利用するには、APIの有効化と、認証情報(APIキー)が必要です。この章では取得方法を説明します。 アカウントの用意APIキーを取得するためには、Googleのユーザーアカウントが必要です。まだ持っていない人は作成して下さいね。 Googleアカウントの作成Googleのアカウントを作成するには、このページから操作を行なって下さい。

    Google Maps Embed APIの使い方まとめ
  • 16

    サンプルコード// 切り捨て var a = Math.floor( 1.5 ) ; // 切り上げ var b = Math.ceil( 1.5 ) ; // 四捨五入 var c = Math.round( 1.5 ) ;デモMath.random(n)で、0〜nまでのランダム数を取得できます。取得できる値は少数を含むので、整数を得たい場合はMath.floor()などで切り捨てましょう。 切り捨て

    16
  • JavaScriptで要素の位置座標を取得する方法

    2017/06/22 要素の位置座標を取得するには、getBoundingClientRect()というメソッドを利用します。 サンプルコード要素の位置座標を取得するには、対象要素のgetBoundingClientRect()というメソッドを利用します。このメソッドで取得できるのは「ビューポート(画面内)」における位置なので、スクロール量によって値が変わります。 // 要素の位置座標を取得 var clientRect = targetElement.getBoundingClientRect() ; // 画面の左端から、要素の左端までの距離 var x = clientRect.left ; // 画面の上端から、要素の上端までの距離 var y = clientRect.top ;「ページ全体」における位置を取得するには、先ほどの値に現在のスクロール量を加えましょう。 // ページ

    JavaScriptで要素の位置座標を取得する方法
    led-centipede
    led-centipede 2016/01/25
    “var y = positionY + scrollY ;”
  • 1