ブログBLOG

Ajaxを解説！javascriptで非同期通信【画面遷移せずにデータを取得】

TAKAYA OHTAやOPERAのようにシームレスな画面遷移を実現する場合にAjaxが使われます。 SPA（Single Page Application）などデスクトップアプリのように操作できるのですが、それにもAjaxなどの非同期通信が使われています。具体的なサービスを挙げるとF ...

【スマホアプリ開発】ハイブリッドアプリ開発が楽になる js のみのデータベース【indexedDB + Dexie.js】（動作例付き）

システム開発にあたってMySQLなどのデータベースを用いることが多いですが、スマホアプリ開発では端末内にいわゆるデータベースを保持できないので、通常はデータベース用のサーバーを用意する必要があります。 もちろん、データベース用サーバーが必須な場合（他ユーザーと連携するようなアプリの場合）も多い ...

slick sliderの使い方からカスタマイズまで【スライダープラグイン決定版】

「スライダーを実装したい！」「でも何を使えばいいの？」という方に朗報です。 この記事ではスライダーを作成するプラグイン「slick」の設定方法から使い方、カスタマイズまでをしっかりばっちり説明していきます。 slickを使えばデザイナーやディレクターの要望にばっちり応えられること間違いな ...

【css】テキストにマスクをかけて途中から色を変える + 1文字ずつ動かすアニメーション [clip-path][mix-blend-mode]

タイトルが上手くまとめられなかったのですが…そのままの内容です！ 写真の上に被っているテキストだけ色が変わっているデザインのコーディングを依頼されたことがあって（最終的には別のデザインになりましたが）、もしアニメーション付けるならどうコーディングするかな？と考えた結果のサンプルです。 mix ...

日付入力フォームをinput type=”date”でカスタマイズ【IEにも対応】

  「日付入力フォームを作ってほしい」 あなたはそう言われたら、どうやって実装しますか？ HTML5になって追加された「input[type=date]」を使うでしょうか。それともプラグインを使うのでしょうか。 どちらにも一長一短があり、設置するサイトの目的に応じて柔軟 ...

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

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

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

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

～2022年・2016年新旧比較～クリスマスのWebデザイン＋おまけ[雪を降らせるjQuery]

みなさんいよいよ年の瀬、いかがお過ごしでしょうか？ 今回はクリスマスのイベントやキャンペーンに向けてデザインを作成する際に参考になるサイトを探してみました。 このブログは2016年に公開したBLOGを2022年度バージョンを追加して更新いたしました！ 他にもクリスマスのWebサイトを作 ...

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

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

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

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