JavaScript
-
クリックで開閉するドロップダウンメニューの作り方
サイトのデザインで表示スペースが限られている場合に役に立つのがドロップダウンメニューです。 PC上でのドロップダウンメニューはホバーした時（マウスを乗せた時）に…
-
スライダーSwiperの使い方と動かない時に確認すること
Swiperはスライダーやカルーセルが簡単に実装できるJavaScriptライブラリです。jQuery不要で軽量・高機能なためWebサイトで広く使われていますね…
-
カルーセルスライダーslickの使い方、カスタマイズのまとめ
ちょっと古いですがカルーセルスライダーが簡単に実装できるSlickを久しぶりに触る機会がありました。 slickはレスポンシブ設定が可能でスワイプにも対応してい…
-
フォームの年齢・生年月日セレクトボックスを動的に作るJavaScript,PHP
問い合わせや資料請求フォームで、生年月日や年齢はよくある入力項目です。 でもこれをHTMLで一つ一つ作るのって面倒ですよね。ここではJavaScriptとPHP…
-
CSSでできるローディングアニメーションと作り方
ページの読み込み中を表すLoadingのアニメーション。 シンプルなCSSだけで表現できるので簡単に設置できるものいいところです。 CSSでできるローディングア…
-
コピペできるCSSアニメーション・ホバーエフェクトのジェネレーターまとめ
vov.css https://vaibhav111tandon.github.io/vov.css/ <head></head>にcs…
-
MW WP Form, Contact Form 7でYubinBango（住所自動入力）を使う方法
WordPressでフォームを設置するときの定番プラグインはContact Form 7とMW WP Formです。 専らContact Form 7を利用して…
-
Dreamweaver,Illustrator レスポンシブなイメージマップを作成する方法
ウェブページで画像やイラストの一部をクリックすると新しいページが開くという動作はイメージマップで実現できます。 クリッカブルマップとも言われます。 最近はあまり…
-
Contact Form 7で郵便番号から住所を自動入力する方法
WordPressで問い合わせフォームによく使われるプラグイン Contact Form 7 。 Contact Form 7で郵便番号から住所を自動入力させる…
-
スマホ・PCを判別してリダイレクトする方法まとめ
ウェブサイトでPC用ページとスマホ用ページが別々に存在する場合、ユーザーエージェントで振り分けるのが一般的です。 .htaccess , JavaScript …
-
一定時間でオーバーレイ表示したり、バナーを一定時間表示するjQuery
Webサイトでお知らせや告知をしたい時、CTAを促すためなどによく使われる方法として一定時間で処理を実行するjQueryを紹介します。 指定した期間だけバナーを…
-
スマホ or PCのみでJavaScript, jQueryを実行する
レスポンシブウェブサイトを制作で必要になる機会が多いデバイスによって表示を切り替えたり、処理を変更したりする時に。 デバイス（スマホ・タブレット・PC）ごとにJ…
-
フォームで住所を自動入力するJavaScript -ajaxzip3, jquery.j-postal.js
問い合わせや資料請求フォーム設置の際、郵便番号を入れると住所を自動入力させるのはユーザービリティの向上と住所の入力ミスなどを防ぐ効果もあるので積極的に使っていき…
-
簡単・使いやすくレスポンシブなカルーセルスライダー8選
カルーセルスライダーは、複数の画像や動画、コンテンツを省スペースに効率よく表示できます。シンプルで使いやすいカルーセルスライダーは、ウェブサイトのユーザーエクス…
-
FlexSliderレスポンシブなスライダー作成方法とカスタマイズ
FlexSlider2は、スライドショー、カルーセル、ヒーロー画像の背景など、さまざまなコンテンツをスライド表示できるオープンソースのjQueryプラグインです…
-
レスポンシブ対応コーディングのやり方と注意点
スマホやタブレットなど様々なデバイスでの閲覧に対応したレスポンシブデザインのやり方と注意点のまとめです。 モバイルデバイスでのウェブ閲覧がPCよりも多いというの…
-
クリックで開閉アコーディオンメニューの作成例 jQuery、CSSのみ
スマホサイトで利用する機会の多いアコーディオンメニュー。スペースを節約しつつ、多くの情報を表示できるので、ウェブサイトやアプリのUIによく使われます。 この記事…
-
一定期間、Newマークやバナーを表示・非表示
指定の月日が来たら非表示にする 新しく更新したページに「New!」を付けて、一定期間がすぎたら自動的に消えるようにする。 マークを表示したい場所に下記スクリプト…
-
bxSlider カスタマイズとオプション一覧
bxSliderは、レスポンシンデザインに対応したカルーセルスライダーが作成できるライブラリです。 レスポンシブ対応なので様々な画面サイズに対応できて、ナビゲー…