javascript・jQuery

ページ内リンクを使う時に一瞬でリンク先に飛んでしまうと、サイトのデザインコンセプトに合わない場合があります。 そんな時は、スクロール移動させると良いでしょう。 これができると、ふんわり優しいサイトデザインなら、ゆっくり優しくスクロール移動したり、ポップなデザインなら少しアップテンポにスクロール移動させたりと、デザイ...

スクリプトプログラムが動かない時、デバッグをしていると以下のようなエラーメッセージを吐いている場合があります。 エラーメッセージ このエラーの意味と解決法を見ていきましょう。 エラーの意味 このエラーは、単純に「」ということを表しています。 javascriptやjQuery関数では、(),{}といった括弧を多...

フォーム入力などで文字数制限がある場合、入力している時に現在の文字数がリアルタイムで表示されると非常に親切です。 ここでは、についてみていきましょう。 文字カウンタースクリプト関数 対象の文字数をリアルタイムにカウントする関数は、以下のような記述となります。 引数に対象となる要素名を引き渡すことによって、その対象...

サイトの動線の要であるグローバルナビ。 グローバルナビを最初からページ上部に固定する場合には、単純にスタイルシートで「」を指定するだけで実現できます。 しかし、ヘッダーが大きい場合やスライドショー下にナビゲーションが来るデザインの時は、最初から固定しておくのではなく、スクロールの途中でページ上部に固定・解除を切り替...

ページを閲覧した人が、どの場所で離脱しているのかを調べる際に便利なjQueryプラグイン「」。 「Scroll Depth」では、離脱箇所をピクセルとパーセンテージの２種類で確認することができます。 デフォルトのプラグインでは、パーセンテージは25%刻みで認識しますが、より本格的なWEB改善を行うためには、20%刻...

WEBサイトの解析を行う時、 を知ることができれば、改善すべき箇所がより的確にわかるようになります。 通常は、ユーザーがどこまで読んでいるかを知るためにはを使う必要がありますが、多くのヒートマップツールは有料かつ利用にPV数制限などがあり、本気でWEB改善をしたいと考える方にとっては非常にコスト的なハードルが高いツー...

WEB制作を行っていて、javascriptやjQueryのスクリプトの途中で処理が止まってしまった時は、どの部分で処理が止まってしまったのかを確かめる必要があります。 そんな時は、アラートをブレークポイントの代わりとして使ったデバッグ方法を使うことをお勧めします。 ここでは、アラートの表示方法と、デバッグの基本的...

例えば、マウスオーバー・アウトで自分以外の要素のスタイルを変えたい時、１つの要素にマウスオーバー・アウトした時に複数の要素のスタイルを変えたい時など、cssのhoverクラスではカバーできないスタイルのカスタマイズを可能にするためには、jQueryでスクリプトを組むことで実現可能です。 ここでは、jQueryでマウス...

ということはありませんか？ 始めてこのエラーが出てしまった 同じプログラムでもサイトによってこのエラーが表示されたりされなかったりで原因がわからない という方もご安心ください。 ここでは、エラーメッセージ「TypeError: $ is not a function. (In '$', '$' is und...

以下のページで紹介した日本地図描画のカスタマイズとして、 日本地図をレスポンシブで表示切り替えを行う方法を紹介します。 https://rmtmhome.com/html5-canvas-japanmap-423 描画用javascriptプログラムを記述する javascriptのプログラムを記述します。 ja...