遅延読込「Lazy Load」とCSSのbox-shadowを滑らかにアニメーションする方法の記事を書きました。

遅延読込「Lazy Load」とCSSのbox-shadowを滑らかにアニメーションする方法の記事を書きました。

技術ブログの方に以下2つの記事を書いたのでこちらでも紹介します。 まだまだこちらのブログのほうからの流入が多いのと、技術ブログはインデックスされるまで時間が掛かるのでもう少しこちらブログでの紹介も続けようと思います。 (こちらのブログは殆ど即日インデックスしてもらえます)

「ページ遷移しないけど、ブラウザの戻るボタンを有効にする方法」についての記事を書きました!

「ページ遷移しないけど、ブラウザの戻るボタンを有効にする方法」についての記事を書きました!

シームレスな Web サイトを設計しているとユーザからの操作を受けて、ページ遷移をさせないでポップアップなどで必要な情報を表示させたいことが良くあると思います。 Javascript や CSS を使ってポップアップを表示させることは簡単ですが、ユーザが誤ってブラウザの「戻る」ボタンを押してしまうことが想定されます。 そんな時にユーザにストレスを与えずにブラウジングしてもらえる方法を簡単にまとめました。詳細は以下の記事をご参照下さい。 pjax と同じ考え方でブラウザの履歴を操作する history.re

Read More

インスタグラムのタイムラインを表示しよう!「Instagram API」の使い方

インスタグラムのタイムラインを表示しよう!「Instagram API」の使い方

流行りの SNS と言えばインスタグラムがあるでしょう。 せっかくなのでタイムラインを Web サイト上に表示したいですよね。 しかし、いざやろうとタイムラインを表示しようと思っても簡単にはできません。 そこで、今回はインスタのタイムラインを Web サイト上に表示させる方法を紹介します。

Javascriptのイベント登録に於けるイベントハンドラとaddEventListenerの使い分け

Javascriptのイベント登録に於けるイベントハンドラとaddEventListenerの使い分け

9月も終わりに近付き猛暑だった日が懐かしく感じる季節となりました。 さて、今回は Javascript でイベント処理をさせる時に使う「イベントハンドラ」(要素セレクタ.on****) と「addEventListner関数」の使い分けについてです。 どちらもイベントを同じように登録できますが、微妙に違うところがあります。

Google Chrome の開発者ツールでできることアレコレ

Google Chrome の開発者ツールでできることアレコレ

毎日毎日、最高気温を更新している今日ですが如何お過ごしでしょうか? 私は幸いにも暑さには慣れているので割と快適に過ごしております。 そんなうだるような日常の休閑話題として、Google Chrome や Opera の開発者ツールのアレコレについて紹介します。 どちらのブラウザも殆ど同じなので Google Chrome を使っていきます。 ※開発者ツール自体についてはいくらでも紹介記事があるので、本記事では “痒い所に手が届く” 小技を紹介することとします。

Javascriptでウィンドウのリサイズやスクロールイベントの発生回数を抑える小技

Javascriptでウィンドウのリサイズやスクロールイベントの発生回数を抑える小技

Javascriptでウィンドウのリサイズやスクロールを検出して処理を実行することがあります。 そんな時に使う「window.onresize」や「window.onscroll」は何も対策をしないともの凄い数のイベントが発生してしまいます。 そこで、そんなイベント発生回数を抑える小技を紹介します。 スクロールイベントに重い処理を行おうと考えている方は一考の価値があると思います。

WebサイトのIE5~11までの動作確認をする方法とCSSプロパティが有効か調べる方法

WebサイトのIE5~11までの動作確認をする方法とCSSプロパティが有効か調べる方法

Webサイトをデザインしていると古いブラウザへの対応が気になりますよね。 特に昔からずっと鬼門だったIEへの対応は骨が折れます。 2018年現在では既にIE10以前はMicrosoftのサポート外になりました。 (最終アップデートは2016年1月) しかし、サポートが切れたブラウザも少なからず使っている人もいます。 そこで、古いIEで作成したWebサイトがどのように表示されるのか確認する方法を紹介します。