追跡する2人

様々な追尾するヘッダーのズレに対応する万能な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つだけ。……
jqueryタグ

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

2021年9月10日

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

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

2021年9月9日

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

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

2021年5月30日

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

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日

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

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

2017年2月10日

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

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

2017年2月5日

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

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

2017年1月3日

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

クリックされたボタンの色を変更するjQuery

2016年9月25日

画像のボタンがあったとして、そのボタンをクリックした時に何らかのアクションを与えたい時があるとします。例えばそのボタンの色を変更したり、別の画像に差し替えたりとかですね。……
カフェでパソコン

クリックされたボタンによってリンクの指定先を変更するjQuery

2016年7月14日

通常はa.htmlにリンクされているリンクがあったとします。でもあるボタンを押すと、b.htmlにリンクされているリンクに変更されるというものです。
はて…どうすればいいんだろうって思った方、jQueryならちょちょいのちょいで簡単に実装することが出来るんですよ。……
メモ帳

Ajaxでテキストファイルを読み込んでクリックでHTMLに書き出すjQuery

2016年5月18日

エクセルに記入しているデータをウェブサイトに表示させたいのだけど、頻繁に更新されるデータの為、その都度ウェブサイトに反映させるのは大変ですよね?何か良い方法はないでしょうか?
こんな質問を受けること……
検索する少女

検索ボックスに入力された値や数を取得するjQuery

2016年5月15日

検索ボックスに入力された値や半角スペース区切りで入力された複数の値、または入力された値の数をjQueryで取得したいのに思うように取得出来なくて困ったという経験をしたことのある方は少なくないのではないでしょうか?……
アコーディオン

【簡単シンプル】プラグインを使わずにクリックで展開するアコーディオンの作り方

2016年4月6日

使い所の多すぎるアコーディオンメニュー。作り方を調べてみたら、意外と難しそうで読むのを途中で辞めちゃったなんて方も少なくないのではないでしょうか?
プラグインを読み込んでたり、異様に長いソースだったり……読むのを辞めちゃう気持ちもよく分かります。
でも当サイトの作り方は超簡単で、単純明快です。……
痒くてかきかきする猫

スクロールして画面内におさまった時点でコンテンツを表示させるjQuery

2016年4月2日

通常ウェブページを開いたと同時にコンテンツは全て表示されますが、今回はスクロールして画面内におさまった時点でコンテンツを表示させるjQueryのご紹介です。……
固定しているネジ

スクロールしてもページ上部にメニューを固定するjQuery

2016年2月7日

1ページ毎のボリュームがあまりないサイトでは必要性を感じませんが、ボリュームがあるサイトではどうしてもページが縦に長くなってしまいますよね。……
木の裏に隠れている男性

jQueryでselectタグの選択された値によって表示・非表示を切り替える方法

2016年1月24日

jQueryでselectタグの選択された値によってある要素を表示させたり、あるいは非表示にしたりといったことは非常に使う機会が多いです。……
チェックリスト

jQueryでチェックボックスの状態取得する方法

2015年10月25日

お問い合わせ画面や会員登録画面を作る際、必須の項目が未入力だった場合にそのまま送信されてきては困りますよね。送信される前に未入力であれば未入力であると、入力して頂くお客様にお知らせしなければなりません。……
煌びやかなネオン

超簡単にページをふわっと表示させる

2015年9月21日

サイトの印象って少し効果を付け足すだけでも大きく変わるものです。例えばページが表示される際にふわっと表示されるだけでも、お洒落なサイトに見えたりするものなんです。……
マウス

jQueryでページ内リンクをなめらかにする

2015年9月6日

ページ内リンクはクリックした瞬間にリンク先に飛びます。
いうなれば瞬間移動するといった感じです。
ただ、あまりにも瞬間的過ぎて素っ気ない為、もう少しアニメーションの効果が欲しくなるといった場合もあるかと思います。……
jQuery

jQueryの実行タイミングの操作

2015年8月23日

jQueryでプログラムを書いたものの、何故かうまいこと動かないってことありませんか?
通常jQueryのソースは<head>タグ内に記述するのが一般的ですが、それでは動かないことがあります。……