- 2021.07.15
JS フォームセレクタによる表示切替え
ASPなんかで見るフォームのセレクタの切り替えで以下に続くコンテンツの切り替える仕組みってあるじゃない？あれどうやるの？ あれはJSとCSSで作成可能だよ。早速やってみよう！！ JSを採用したフォームセレクタによるコンテンツの切り替え表示。 あらかじめ切り替えで表示させたいコンテンツをすべてHTMLで作成し、それをcssで非表示に設定したものをJSで呼び起こすという仕組みになります。 （今回はjQ […]
- 2021.03.25
JSで実現するサイト離脱防止ポップアップ
ネットショッピングいろんなサイト見てると、ページを離脱しようとするとポップアップ画像が出るやつありよね？微妙にウザイやつ・・・ ああ、あのウザイやつね。あれはJSで作成するんだよ。せっかくなのでやってみよう！ JSをで作成するサイト訪問者離脱防止用ポップアップ表示です。（jquery必要） 難しい知識は置いといて以下に説明するソースをコピペで表示できる仕様にしています。 jqueryとJSの設置 […]
- 2020.12.28
CSSだけで可能！JSを使わなく実装できるスライドショー
スライドショーを組み込みたいんだけどjavaScriptとかってよくわからないし・・・知識がないと難しいよね 大丈夫！今回はCSSだけで実装可能なスライドショーのやり方を教えるよ。 CSSだけで利用できるスライドショーの紹介になります。 コピペでOKですし、コードも簡単なので活用の場は多いと思われます。 CSSコードの設置 [crayon-67d4567154da7880544585/] まず、上 […]
- 2020.12.15
cookie（クッキー）を利用して2回目以降の訪問者に違う要素を表示させる
ブログやサイトに訪問した方に初回と二回目以降で違うものを表示させたいんだけど・・・ それなら cookieを利用するのがいいね。 cookieのデータを利用してjavaScriptでそのデータを制御してみよう。 サイト訪問者のブラウザに残る cookieを利用して、再度サイトを訪れた方には 初回訪問時には違う要素を表示させます。 jqueryとcookie.jsの設置 今回の施策にはおなじみのjq […]
- 2020.10.17
FontAwesomeのアイコンをアニメーション化する
FontAwesomeのアイコンで動きのあるものを見つけたんだけど、あれってどうやってやってるの？ あれはFont AwesomeにCSSコードを追加することでできるよ。せっかくだからやってみよう！ Font Awesome。アイコンに様々なアニメーションをつける Font Awesome Animationという専用のスタイルシートを読み込めば、アイコンに多くのアニメーションをつけることができる […]
- 2020.09.13
FontAwesomeの使い方
最近いろんなサイトで見かけるけど、画像じゃなくて矢印、チェック、コピー、TwitterやFacebookなんかのアイコンをよく見かけるんだけど・・・あれはどうやって設置してるの？ あれはFont AwesomeっていうWEBフォントアイコンになるんだよ。せっかくだから使い方を紹介するね。 Font Awesomeとは Font Awesomeとはウェブサイトやブログ、WordやPDFなどのドキュメ […]
- 2020.08.17
CSSで作成するLINE 風の吹き出し
このサイトで会話しているこのLINEのトークみたいな吹き出しってどうやって作ってるの？ よく有料のワードプレステーマについている機能だよね。これはCSSで実現できるよ。早速やってみよう CSSで作成するLINE 風の吹き出し 画像やイラスト同士が会話しているLINE 風の吹き出しを作成します。 まず、cssのソースは以下の通りです。 [crayon-67d456715577e645350623/] […]
- 2020.08.12
cssとJqueryで動かすマーカーアニメーション
サイトスクロールすると小見出しの部分がシューっとマーカーが引かれたりするエフェクトあるよね？ワードプレスではプラグインでそんな機能のものもあるけど、あまりプラグイン増やすとサイトが重くなったりするし・・・・なんとかならないかな・・・？ スクロールマーカーアニメーションだね。cssとJqueryの組み合わせでプラグインを使わずとも比較的簡単に実装できるよ。 今回はcssとJqueryによるスクロール […]
- 2020.08.11
cssとJSで動作するフローティングバナー（スティッキーバナー）
スマホサイトなんかでよく見るけど途中から出現してずっとついてくるバナーってあるよね。あれってどうやって設置するの？ フローティングバナーだねスティッキーバナーともいうけど、cssとJSの組み合わせでできるよ。 今回はふわっと出現してそのままスクロールに追従するフローティングバナーの設置になります。 cssで画像バナーを追従する仕組みをつくり、JSで設置場所に近づいたらふわっと出現させる仕掛けを作成 […]
- 2020.08.07
Swiper.js カルセルスライダー作成
トップページに横いっぱいに広るスライダーのあるサイトって格好いいよね。 カルセルスライダーの事だね。Swiper.js を使用すれば簡単に設置できるよ。 Swiper.js によるカルセルスライダーの作成方法になります。 ※前提条件としてSwiper.jsのCDNをcss・JSの両方読み込んでおいてください。 ▼ HTML [crayon-67d4567155eac712672232/] ▼ JS […]
