JavaScript – 東京のホームページ制作 / WEB制作会社 BRISK

サイトが重いときに！画像をふわっと遅延表示させる「lazysizes.js」【レスポンシブ対応】【PageSpeed Insights改善】

投稿日:2018年11月9日

Webサイトの表示速度を上げられるよう、スクロールをしたタイミングで画像を読み込む「画像の遅延表示」ができるJavaScriptはいくつかあると思います。私も試したことはありますが、画像がパッと出てきて画面がガタついたり、jQueryをいじらないとカスタムしにくかったりと、思った通りの動きを ...

[jQuery]スクロールに応じてホワッと表示させる効果（スクロールエフェクト）を簡単に実装する

投稿日:2017年6月29日

サイトを表示したときに、少し動きがあると目が自然とそこに注目し、その下はどうなってるのかな、と読み続けてみたくなりますよね。そんな効果をスクロールエフェクトと呼びますが、あまりゴテゴテした動きをつけると逆にサイトが読みづらくなるときもあるので、サイトのコンセプトに沿ったエフェクトを選択する必 ...

[jQuery]タブ切り替えをプラグインを使わずに自前で実装する

投稿日:2017年6月26日

タブ切り替えを実装したいときに、jQueryのブラグインを利用するやり方もありますが、タブ切り替えくらいならプラグインを使わずに、自前で実装したほうがいろいろと軽快です。 js部分だけだと６～７行で記述できてしまいます。ちなみに、このページのタブ切り替えは自前で作ったjsです。 ...

星形レーティングプラグイン「RATE YO!」をスマホ対応してみた。

投稿日:2015年6月25日

口コミサイトなどでよく見かける星形レーティング。 RateYo!というプラグインは、動きが軽快で使える関数もなかなかあり満足な動作をしてくれます（ただし、IE9以上）。他のプラグインではあまりない機能として小数点２桁までつけることもできます。 (function ($) { ...

Google Mapの背景色を変えたり、地名を減らしてシンプルにしたりする

投稿日:2014年10月20日

ホームページにGoogleマップを載せたい時は、 Google → マップ → 設定 → 地図を埋め込むで、埋め込みコードをコピーして貼り付ければできます。ホームページのテイストに合わせてGoogleマップを少し装飾したいときには、Google Map API を利用します。以前の ...

Google Mapにマーカー（ピン）やアイコンを表示して、クリックでコメントを出す

投稿日:2013年12月24日

ホームページに地図を設定したい時ありますよね。よく使われるのがGoogleマップを埋め込む方法です。地図を表示させたい目的は、たいてい、ある特定の地点（例えば会社の場所）を指し示すためであり、マーカーを置くのはほぼ必須となります。そしてマーカーをクリックした時に何らかの動作をさせ ...

[ jQuery ] select要素（プルダウン・セレクトボックス）を装飾する　easyselectboxの使い方

投稿日:2013年11月28日

デザインされたフォームを設置したいとき、select要素（プルダウン・セレクトボックス）の装飾はcssだけではなかなかうまくいきません。背景や枠線をいじってみても、ボタンのところを装飾するのは普通の方法ではうまくいかないようです。 select要素の装飾用に作成されたjQueryのプラグイ ...

[ jQuery ] フォームの入力チェックをするその２

投稿日:2013年8月26日

フォームの入力チェックをするでフォームの入力チェックの拡張機能を作成しましたが、もうすこし使いやすくしました。 jQuery を読み込んだ後に読み込んでください。 20130826.js まず HTML 側にクラスを指定します。使用するクラス名は以下のとおりです。 ...

[ jQuery ] フォームの入力チェックをする

投稿日:2013年8月20日

フォームの入力チェックは地味に手間のかかるものですので、ちょっとした拡張機能のベースをを作成してみました。 jQuery 拡張 [crayon-5d8742fd43fd7820589227/] 呼び出し [crayo ...

モーダルウィンドウでリンク先を表示する

投稿日:2013年4月26日

リンクをクリックした際、自ページ内でモーダルウィンドウとしてリンク先を表示する。という処理を考えてみます。例）クリックして表示 BRISKトップページ Yahoo! amazon JavaScript [crayo ...

初めてのjQuery

投稿日:2013年1月28日

jQuery（というより JavaScript）はブラウザで動くので簡単に書き始めることができます。既存のコードの改変や追加をしたり、script タグにサンプルのコピーを貼り付けたりしても結構うまくできてしまいます。それも悪くないですが、ここでは jQuery の準備～基本的な ...

[jQueryプラグイン]いろいろなアニメーションが用意されたコンテンツスライダー | Adaptor, a jQuery 3D content slider

投稿日:2013年1月7日

jQuery を利用したコンテンツスライダーはいろいろな方法やいろいろなプラグインがありますが、CSSの 3Dプロパティを使ったエフェクトを選べるプラグインを紹介します。 Adaptor, a jQuery 3D content slider デモページ GitHub ...

Google Chrome エスクテンション [ jsshell ] 上で jQueryを実行し Webサイトを見やすく。

投稿日:2012年11月16日

Webサイトの構築する際、デバッガやユーザースクリプトの実行環境は各々利用されていると思いますが、実際の開発時以外でも Webページを読みやすくしたり jQueryの学習をはじめるときなどでも便利です。 Google Chrome でスクリプトを実行するエクステンション [ jsshell ] ...

フェードイン・フェードアウトによる画像スライドショーを jQuery で簡単に

投稿日:2012年11月9日

画像をフェードイン・フェードアウトしながらスライドショーをするサンプルです。jQuery を利用すれば、数行のコードを追加するだけで実装できます。サンプルサンプルのソースです。 ...

jQuery 1.8 になって CSSベンダープレフィックスが自動で追加されるようになったみたいなので試してみる

投稿日:2012年10月5日

jQuery 1.8 がリリースされています。 jQuery 1.8.2 Released モジュラー化やCSSベンダープレフィックス自動化が加わった「jQuery 1.8」 jQuery 1.8の更新内容をまとめたよ。おもな改善点は、セレクタエンジン「Sizzle」の高速化 ...