BLOG ブログ

サイト制作でモーダルを実装することがあります。 なかにはデザインもないのに、途中から実装を依頼されることもあります。 モーダルは モーダルを開いているときは背景を暗くし、背景固定にする 閉じるボタン、または背景をクリックしたらモーダ ...

アコーディオンメニューとは、最初はメニューの一部だけが表示されていて、 クリックすると隠れていた部分が開閉するタイプのメニューです。 小さいスペースにコンパクトにメニューを設置できるため、スマートフォンでは特に頻繁に使われています。 コーディングをしていると、Webサイトのどこかに ...

ブログ一覧のサムネイル画像など、画像の枠が決まっている場合があります。 どんな比率の画像が来ても、きれいに画像が表示されるようにしたいです。 そんなときはobject-fitプロパティを使えば解決します。しかしIEで対応してないのですよね…。 まず、object-fitプロパティの ...

システム構築の案件で、ユーザーが入力するフォームを作成することがあります。 ファイルアップロードの処理は少し特殊なので、流れをまとめてみました。 今回はWordPressでのSmart Custom Fieldsを利用することを想定しています。 WordPressではなく素のPHP ...

YouTubeの動画をサイト内に埋め込むとき、関連動画を非表示にしたり、同じチャンネルの動画のみを表示させたりしたいといった要望が出てくることも多いですよね。 プラグインを使用してポップアップで表示している場合、そういった関連動画の操作が意外に難しいことがあります。 本記事では、Ma ...

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

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

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

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

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

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

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

みなさんいよいよ2016年も年の瀬、いかがお過ごしでしょうか？ 少し前にクリスマス関連のページ制作とバナー制作をしましたが、意外と参考が見つからなかったので今回探してみました。 クリスマスのWebサイトを作成する際にきっと役に立つおまけ付きでご紹介します。 Marunouchi Bri ...

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

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

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

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

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

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

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