様々な追尾するヘッダーのズレに対応する万能なjquery

2022年7月1日

スクロールするとヘッダーやそのグローバルメニューが追尾するサイトで、ページ内リンクをクリックすると、ヘッダーやグローバルメニューに被って少し上にスクロールを戻さないと見られないよって場合のjQueryを使った万能な対処法です。ページ内リンクのアンカーが#で始まらない場合にも使える記述になります。……

スクロールバーの幅を含むブラウザのサイズを取得するjQuery

2022年6月23日

今回の記事はスクロールバーの幅を含むブラウザのサイズ（横幅）が今何pxなのかを調べるjQueryのご紹介です。前回の記事と違い、スクロールバーの幅を含むというのが今回のポイントです。……

ブラウザのサイズを取得するjQuery

2022年1月12日

今回の記事はブラウザのサイズ（横幅）が今何pxなのかを調べるjQueryのご紹介です。レスポンシブWebデザインでWebサイトを作成したい時、何pxにブレイクポイントを設定するかといった時に役立ちます。……

【input、radio、select、checkbox、textarea】form関連のタグに値が入力されているかチェックするjQuery

2021年12月15日

form関連の主要タグ全種、input、radio、select、checkbox、textareaの全てのパターンの未入力チェックをする方法をご紹介します。……

郵便番号を入れると自動で住所が補完されるjQuery

2021年11月7日

お問い合わせフォームや会員登録画面等でユーザーに郵便番号を入れてもらうケースがありますが、その際に自動で住所を補完してくれるjQueryプラグインのご紹介です。
ステップはたったの2つだけ。……

iframeの内容を呼び出して直近5件のみを表示させるjQuery

2021年9月10日

iframeを使って特定のhtmlファイルを呼び出して表示させる方法は一般的ですが、iframeで呼び出したものを抜粋して一部だけ表示させるとなると一気に難しくなります。
今回の記事はその方法のご紹介になります。……

iframeの高さを指定せずにiframeの内容を全て表示させるjQuery

2021年9月9日

iframe（インラインフレーム）タグでは通常高さを指定しますが、レスポンシブWebデザインで作成している場合等、高さを指定したくないという場合があるかと思います。……

他のページのclassの値を呼び出して使うjQuery

2021年5月30日

他のページにあるclassやidの値を呼び出して、このページで書き出したいってことありませんか？今回の記事は他のページにある.hogeの値を取得する方法のご紹介です！……

URLのパラメータの値によってコンテンツの表示・非表示を切り替えるjQuery

2021年5月15日

https://www.web-officer.com/?genre=1の?genre=1の部分のことをURLパラメータといいます。このURLパラメータを使うことによって、実際は1つのページにも関わらず、アクセスするURLパラメータの値によって、コンテンツの表示・非表示を切り替えたりと色々な見せ方をすることが出来ます。……

JavaScript（jQuery）のよく使う比較演算子一覧と使い方

2021年1月31日

JavaScriptの構文にif文があります。当サイトでも過去のjQueryの記事で幾度となく出てきておりますが、改めてif文とセットでよく使う比較演算子についてご紹介します。よく使う比較演算子の一覧は下記の表の通りです。……

フォームのクリアボタンの作り方のご紹介

2021年1月27日

フォームの値を取得したい時に使うjQueryのval()ですが、実は変更する時にも使うことが出来ます。この記事ではフォームのクリアボタンの作り方をご紹介します。……

特定の文字列が含まれているテキストの色を変えるjQuery

2021年1月24日

特定の文字列が含まれている場合にその文字色を変えたいとかって場面ありませんか？動的なサイト、例えば掲示板のようなユーザーが投稿する形式の場合は自動で文字色を変えてくれるのでとっても便利です。……

マウスオーバーした画像を徐々に透過させるjQuery

2021年1月15日

画像をそのままimgタグを使って配置するのもいいですが、お洒落な画像や魅せたい画像については何か一味つけたくなるもの。例えば画像の上にマウスを置いた際に徐々に透過させる効果を付けているサイトは最近多いですよね。この記事ではその方法をご紹介します。たった一文のjQueryの記述だけで簡単実装出来ます。……

現在見ているページのメニューの色を変更（ハイライト）する方法2

2021年1月10日

現在見ているページのメニューの色を変更させることにより、ユーザビリティ（ユーザーサイトの使い勝手の良さ）の向上に繋がります。昨今では今まで以上にユーザビリティやUI、UXについて言われることが多くなってきました。
以前の記事でも現在見ているページのメニューの色を変更（ハイライト）する方法について記載していますが、DreamWeaverを使っている人しか使うことの出来ない機能を使っていた為、今回は誰でも使えるという点がミソになります。……

パン屑リストとハンバーガーメニューを一体化させたものを作成してみた

2017年8月6日

スマホ対応となると、メニューにはハンバーガーメニューがよく採用されます。
誰もが見たことがあるかと思いますが、白の三本の横線の入ったアレです。
そんなよく使われるハンバーガーメニューを作成してみたのでご紹介します。そのまま使って頂いてもいいですし、カスタマイズして使って頂いても問題ございません。勿論商用フリーです。……

マウスオーバーした場所に連動して画像とテキストを入れ替えるjQuery

2017年7月15日

マウスオーバーした時にそのマウスオーバーした要素自身を入れ替えたり、変化させるjQueryの記述はよく見掛けますが、マウスオーバーした要素とは違う別の要素を入れ替えたり、変化させるjQueryの記述はほとんど見掛けなかった為、記事を作成してみました。……

入力された日付の範囲が不正か否かを判別するjQuery

2017年6月4日

日付のは範囲を選択してデータを絞り込み検索したいって場面があった時に、もしも日付の形式がおかしかった場合に「日付の形式が不正です。」とアラートを出すjQueryのご紹介です。……

決められた文字列が入力された時にその文字列の色を変化させるjQuery

2017年2月26日

掲示板で書き込みがあった時やウェブサイトが更新された時等、何かしら変化があったとしてもブラウザを更新しなければ掲示板やウェブサイトの最新の状態は反映されません。ブラウザの更新、ショートカットキーでいうと、WindowsでいえばF5ボタン、Macでいえばcommand + Rの同時押しになりますね。……

ページを自動で更新（F5）させるjQuery

2017年2月19日

フォームの入力欄に入力された文字数によって分岐処理するjQuery

2017年2月10日

フォームの入力欄に入力された文字数が8文字であれば形式的に合っている、逆に8文字でなければ形式的に確実に間違っている場合があるとします。
例をあげるのであれば下記のようなパターンでしょうか。
20170210……

フォームの入力欄に何も入力されていない場合、送信前にアラートを出すjQuery

2017年2月5日

お問い合わせページのようなフォームに情報を入力するページで、必須項目部分の入力欄に何も入力されていない状態で送信されてきては困ってしまいますよね。
ネット通販で何かを買う時、住所や電話番号を入力しますが、何か抜けがあった場合に「必須項目が記入されてませんよ」みたいな警告が出された経験誰しもありますよね。……

下へスクロールした時に「TOPへ」ボタンを表示させるjQuery

2017年1月3日

下へスクロールした時に「TOPへ」ボタンを表示させるってどういうこと？って思う方はまずはいつもの如く完成デモをご覧下さい。このページに実装していますので。
このページを下までスクロールしていくと「TOPへ」と書かれたボタンが何処からともなく表示され、それをクリックするとページの上部まで自動でスクロールしてくれます。……