jQueryで動的なページを作ろうと考えているこの記事を読んでいる方は，on()メソッドの使い方やイベントの種類にどんなものがあるか知りたくて調べたのではないでしょうか！今回はjQueryでは必須の「on()メソッド」について解説していきます！
続きを読むこれだけは押さえておきたい！on()メソッドの使い方と主要イベント –TamoTechBlog–
jQuery
【jQuery】Webページにおける縦方向の現在位置を示すインジケーターをjQueryで実装する
この記事では，Webページにおける縦方向の現在位置を示すインジケーターをjQueryで実装します．ウィンドウのスクロール量に応じてインジケータが指し示す点も上下に移動します．また現在のインジケーター以外のインジケーターをクリックすることで，その高さのウィンドウまで自動スクロールするように実装します．Webページ全長がとても長い場合等に有効な方法です．それではインジケーターの作り方を見ていきましょう．
続きを読むコピペで実装！jQueryでレスポンシブなハンバーガーメニューを実装する
ハンバーガーメニューとは，三本線のボタンのことです．クリックまたは，タップするとメニューが表示されます．一般的にはスマートフォン用のデザインで採用されることが多く，画面領域の有効活用ができます．もちろんPC等の画面が広いデバイスでも使用されることはありますが，今回はスマホ用の画面で，ハンバーガーメニューを表示し，大きい画面ではメニューを横並びにヘッダーに表示させます．これはCSSのみでは難しいので，jQueryを交えて実装していきます．
続きを読むSNSアイコンのレイヤー展開するマウスオーバーアニメーションをjQueryで作る
この記事ではSNSアイコンのホバーエフェクトを作っていきます．CSSだけでも実装することはできるのですが，CSSが冗長になってしまうので，アニメーションはjQueryで作成していきます．今回は複数のレイヤーがマウスオーバー時に縦に展開するアニメーションを作成します．単純なボタンにするより，おしゃれでモダンなサイトに近づくことでしょう！
続きを読むjQueryで作るWebページ最上部へ戻るスムーズスクロールボタン
Webページってコンテンツが増えると，どんどん長くなっていきますよね．ヘッダーにサイトメニューを置いていたりすると，一番上まで戻らないといけません．結構めんどくさかったりします．もちろんスティッキヘッダーを使ったり，サイドバーを使ったりすれば，解決できますが，上の方のコンテンツを見るために戻ることもあると思います．そこで下から上へ戻るスムーズスクロールボタンがあれば，親切なサイトになるでしょう．今回はWebページ最上部へ戻るスムーズスクロールボタンをjQueryとCSSで作っていきます．
続きを読むjQueryで小さな領域で情報を重ねて表示するタブを作る（画面の有効活用）
Webページを作っているときに，画面が狭くて全ての情報を載せられない！！ってなったりしませんか？今回はメニューをクリックするとページ内で切り替わるタブをjQueryで実装していきます．jQueryではクリックに合わせてactiveクラスを追加したり消去したりするだけなので，そこまで難しくはないでしょう．
続きを読むjQueryでスティキーヘッダーを実装してイケサイに近づく！
今回はスティッキーヘッダーをjQueryで作っていきます．スティッキーヘッダーとは，メニュバーやサイト名がついている横長のバーのことです．Webページが長くなればなるほど，ヘッダーのメニュー情報を見るために上まで戻らなければなりません．フッターにも同じ情報を載せてもいいのですが，あまりスマートじゃないですよね．そこで，スクロールしても常時上にあるようなヘッダーを作っていきます．
続きを読む見せる！！jQueryで流れるテキストを実装
少し前では<marquee>タグで流れるテキストを実装できていたのですが，このタグは廃止されてしまいました．まだ動作するブラウザもあるかもしれませんが，いつ動かなくなるか分からないので使わないようにしましょう．今回はjQueryで流れるテキストを実装してみましょう．サイトのアクセントにとても有効なデザインなので，是非使ってみてください！
続きを読む
このサイトを運営している太門です。
技術系のブログを運営しています．
現在はIT系の会社に勤めています！ 不明点などあればお気軽にコメントください！