jQuery
-
クリックで開閉するドロップダウンメニューの作り方
サイトのデザインで表示スペースが限られている場合に役に立つのがドロップダウンメニューです。 PC上でのドロップダウンメニューはホバーした時（マウスを乗せた時）に…
-
カルーセルスライダーslickの使い方、カスタマイズのまとめ
ちょっと古いですがカルーセルスライダーが簡単に実装できるSlickを久しぶりに触る機会がありました。 slickはレスポンシブ設定が可能でスワイプにも対応してい…
-
特定のタブへダイレクトにリンクする[jQuery,Bootstrap,Foundation]
タブレイアウトで、別のページから特定のタブへリンクしたい時に。 BootstrapやFoundationを導入して入れば実現するのは優しいですね。こういう時はC…
-
Contact form 7 日付入力でカレンダーDatepickerを表示する方法HTML5,jQuery
予約フォームやイベント申し込みフォームを作成する際にユーザーに日時選択をしてもらう項目を作ることはよくあります。 日付や時間を選択するのにカレンダーを表示すれば…
-
Dreamweaver,Illustrator レスポンシブなイメージマップを作成する方法
ウェブページで画像やイラストの一部をクリックすると新しいページが開くという動作はイメージマップで実現できます。 クリッカブルマップとも言われます。 最近はあまり…
-
一定時間でオーバーレイ表示したり、バナーを一定時間表示するjQuery
Webサイトでお知らせや告知をしたい時、CTAを促すためなどによく使われる方法として一定時間で処理を実行するjQueryを紹介します。 指定した期間だけバナーを…
-
スマホ or PCのみでJavaScript, jQueryを実行する
レスポンシブウェブサイトを制作で必要になる機会が多いデバイスによって表示を切り替えたり、処理を変更したりする時に。 デバイス（スマホ・タブレット・PC）ごとにJ…
-
フォームで住所を自動入力するJavaScript -ajaxzip3, jquery.j-postal.js
問い合わせや資料請求フォーム設置の際、郵便番号を入れると住所を自動入力させるのはユーザービリティの向上と住所の入力ミスなどを防ぐ効果もあるので積極的に使っていき…
-
position:fixed 固定時にアンカーリンクがずれるのを解決する
ヘッダーナビゲーションなどを固定するスタイルは良くみかけるデザインですよね。 ヘッダーをスクロールに追従させることで、ユーザーがわざわざページ上部に戻らなくても…
-
簡単・使いやすくレスポンシブなカルーセルスライダー8選
カルーセルスライダーは、複数の画像や動画、コンテンツを省スペースに効率よく表示できます。シンプルで使いやすいカルーセルスライダーは、ウェブサイトのユーザーエクス…
-
FlexSliderレスポンシブなスライダー作成方法とカスタマイズ
FlexSlider2は、スライドショー、カルーセル、ヒーロー画像の背景など、さまざまなコンテンツをスライド表示できるオープンソースのjQueryプラグインです…
-
クリックで開閉アコーディオンメニューの作成例 jQuery、CSSのみ
スマホサイトで利用する機会の多いアコーディオンメニュー。スペースを節約しつつ、多くの情報を表示できるので、ウェブサイトやアプリのUIによく使われます。 この記事…
-
bxSlider カスタマイズとオプション一覧
bxSliderは、レスポンシンデザインに対応したカルーセルスライダーが作成できるライブラリです。 レスポンシブ対応なので様々な画面サイズに対応できて、ナビゲー…