JavaScript

JavaScript

GatsbyJSで生成したサイトにAlgoliaでサイト内検索を実装する方法

Algoliaを使ってGatsbyJSで生成したサイト内の検索を実装する方法です。 GatsbyJSで生成されたサイトは静的なHTMLサイトとなるので、動的なサイト内検索などを行うことができません。 …

はにわまん
JavaScript

超シンプルなコードからReactの動きとJSX、Babelの関係を理解しよう

ReactはFacebook社が開発したjavaScripのフレームワークです。WordPressのGutenbergで使われている技術として個人的には馴染みがあります。 公式は以下です。丁寧すぎるく…

はにわまん
JavaScript

スクロールが特定のエリアに入ったかどうかを検知するjQuery

スクロール時に特定のエリアに入ったかどうかを検知するためのjQueryの書き方です。 背景色とのコントラスト比で色を追従するアイテムの色を変更したい場合や、特定のエリアのみ表示するようなアイテムを作る…

はにわまん
JavaScript

スマホのみ電話番号をリンクにするJavaScript

スマホのみ電話番号をリンクにするJavaScriptの書き方の紹介です。PCページに電話リンクがあると邪魔になるケースのほうが多いと思います。 電話リンクを付けていても、PC時(スマホ以外)では無効化…

はにわまん
JavaScript

【jQuery】fixedで固定したフローティングアイテムをフッターの上で止める方法

フローティングアイテムをフッターの上で止める方法です。フッターと色が被ったりしてフッター上で止めるという実装もたまにやりたくなります。 jQueryを使ってフッターの高さやスクロールの位置をゴリゴリと…

はにわまん
JavaScript

要素をクリックした時の処理をjQueryで制御する方法【on / off】

ある要素をクリックされた時の挙動をjQueryで制御することはよくあります。1枚のLPページから、コーポレートサイトまで、サイトの形態は関係なく、ページ上で(遷移なしに)動的に動かしたい場合によく登場…

はにわまん
JavaScript

画像をポップアップ風に拡大表示できるライトボックスのJavaScriptライブラリ

画像を手軽にポップアップで拡大表示させることができるjavaScriptのライブラリを紹介します。一般的にこのような仕組みのことを「ライトボックス」と読んだりします。 この記事ではMITライセンスでサ…

はにわまん
JavaScript

パララックスには色んな種類がある!3パターンの実装例を紹介

パララックスって言葉は聞いたことあるけど、具体的にどういう動きすればパララックスなのか分からないって方は意外といるかもしれません。 ちょっとの前のわたしはセクションが重なる紙芝居風の動きをするのがパラ…

はにわまん
JavaScript

ヘッダー固定でページ内リンクをページ遷移で指定した時のズレを解消するJavaScript

ヘッダー固定にしていると頻発する問題として、「ページ内リンク先の位置がズレる!」があると思います。ズレるというか、ほとんどの場合は固定したヘッダーに隠れますね。 同じページ内でのページ内リンクだったら…

はにわまん
JavaScript

スムーズな移動!「smooth-scroll.js」で固定ヘッダーも考慮したページ内リンク

1ページで完結するようなLPでよく使われるのが、ヘッダーのグローバルメニューが各見出しへのページ内リンクになっているというもの。 普通に設置してもいいのですが、グイーンと移動してくれた方が、ページ内を…

はにわまん
1 2 4