クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

「 jQuery 」 一覧

jQuery クラスの追加・クラスの削除 クリックで色が付くメニュー(addClass・removeClass)

2018/09/17   -jQuery

jQueryを使えば、タグにクラスを追加したり削除したりすることが簡単にできます。 今回はクリックされた「li」にクラスを追加して、クリックで色が付くメニューを作成してみようと思います。 こんなイメー …

jQuery ページの最上部へスクロールする処理(サンプル付き)

2018/04/28   -jQuery

よく見かける「トップへ戻る」を作ってみます。 ホームページをいくらかスクロールしていくと、右下に出てくきて、ずっと付いてくるやつですね。 それをクリックすると、ページの最上部まで「ぎゅいーん」とスクロ …

jQuery ブロックレベル要素をリンクにしたい(aタグで囲まない)

2017/12/19   -jQuery

インライン要素をブロックレベル要素で囲ってはいけないというHTMLの文法規約があります。 そのため、divで作ったグローバルメニューなどをaタグで囲むことができません。 ※実際は動作する場合もあります …

jQuery 絞り込み検索サンプル(正規表現)

2017/12/03   -jQuery

jQueryを利用すれば、絞り込み検索機能も簡単に作成できます。 絞り込み検索機能とは、テキストボックスに入力した値とマッチするものを表示・マッチしないものを非表示にするような機能です。 以下のような …

jQuery アコーディオンメニューを自作サンプル(slideToggle)

2017/12/02   -jQuery

クリックすれば開閉される「アコーディオンメニュー」は良く使うと思います。 プラグインも多く出ており簡単に実装することができますが、プラグインだとデザインを変更する時に苦労したりします。 プラグインから …

jQuery ローカルストレージ で入力値の保存と読み込みをする

2017/11/30   -jQuery

ブラウザごとに値を保存しておくことができるローカルストレージについて学びたいと思います。 ブラウザの機能として提供されているものなので、特別なものは不要です。 クッキーとは少し違い、保存の有効期限など …

CSS Animate.css の基本サンプル(通常・クリックされた・マウスオーバー)

2017/11/29   -jQuery, CSS

テキストだけのサイトだと「さびしい」「少しだけ動きが欲しい」という場合には「Animate.css」が便利です。 Animate.cssは、あらかじめ定義されているクラスを追加するだけで要素にアニメー …

jQuery 文字の大きさ(フォントサイズ)の変更(小中大)

2017/11/28   -jQuery

jQueryで文字サイズの大きさを変更するボタンを作ってみようと思います。 行政のサイトで良く見かけますよね。 これもjQueryで簡単に実現できます。 昔からある機能なので古いイメージがありますが、 …

jQuery CSSクラスの追加と削除

2017/11/27   -jQuery

jQueryを使うとHTMLやCSSだけでは実現できないような動きをサイトに付けることができます。 今回は例としてボタンクリックされた時に「CSSのクラスを追加」もう一度クリックすると「CSSクラスを …

jQuery テキストボックスのフォーカス時にテキストを全選択

2017/11/26   -jQuery

サイトのUI(ユーザーインターフェイス)向上のためにテキストボックスがフォーカスされた時に、テキストボックスの内容を選択済みにして内容を変更しやすくしたい場合があります。 バックスペースで1文字ずつ削 …