日本地図を簡単に扱えるjQueryプラグイン「JapanMap」 Japan Map ( jQuery plugin ) 都道府県をクリックできる日本地図 甲子園が始まるので代表校をまとめてみようと思い、日本地図をHTMLやCSSで表現できないかなーと探してみるとなかなか無いんですよね。テーブルで書くともの凄くややこしくなりそうだなと思っているところに「Japan Map」というjQueryプラグインに遭遇しました。 「canvas」というHTML5の機能を使用しており、美麗な日本地図が画像無しで使用できます。すごい！ プラグインをダウンロードする このページ上部にあるリンクから作成者様のサイトへ行き「Japan Map」の本体をダウンロードします。 「tar.gz」と「zip」がありますのでお好みの方でどうぞ。 そして、jQueryを動かすにはjQuery本体も必要ですので、無い場合は公
Quick Start Include jquery-japan-map.js after jQuery. Then $(selector).japanMap(options) method will create most simple clickable canvas map of prefectures of Japan. The $.japanMap method take an object as argument which defines options. At least, you may have to implement onSelect event handler, which runs when a prefecture of the map is clicked or touched. Here is most simple example. <!DOCTYPE
どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 いろいろなスライダー・カルーセルjQueryプラグインを利用してみて、一番簡単でカスタマイズ性に富んだものがこのslickです。非常に便利な分、注意しなければならないこともあるので、その点も含めて紹介したいと思います。 導入 ダウンロード http://kenwheeler.github.io/slick/ サイト上部のメニューのget it nowをクリックします。 Download Nowをクリックでダウンロードすることができます。 読み込み <head> ... <link href=".../path/to/slick.css" rel="stylesheet"> </head> head 内で slick.css を読み込みます。 ... <script src="https://ajax.google
世の中にはたくさんのスライダープラグインがありますが、今回はレスポンシブ・タッチデバイスに対応、オプション設定も豊富なスライダープラグイン「slick」の使い方を詳しく解説していきます。 slickの機能概要 レスポンシブ対応 ブレークポイントごとに別々の設定が可能 スワイプ・マウスドラッグ可能 無限ループ スライドの追加、削除、フィルタリング、除外など 導入 ファイルのダウンロード まずは公式サイトからファイルをダウンロードします。 slick または、以前紹介した「jsDelivr」というサイトにもCDNでホストされています。 （ちなみに2017年11月時点ではslickが1位です。） jsDelivrの使い方はこちらの記事をチェックしてみてください。
人気のfancyBoxの使い方 How to use fancyBox3 jQuery lightbox script fancyBox((c) Janis Skarnelis)は、画像など多くのコンテンツのビューアとして人気のあるjQuery系のLightboxです。 2017年春リリースされたfancyBox3は、旧版fancyBox2に比べ大きくバージョンアップされたようです。 モバイルなどすべてのデバイスのタッチジェスチャーのサポート - 画像を見るためのダブルタップ、ピンチイン、ピンチアウト。 ナビゲーションのための水平スワイプの対応。 クイック＆簡単セットアップ - たった2つのファイル（JS、CSS)のインクルード、1行のJavaScriptを記述することなく実装。 自動コンテンツ認識 - YouTube、Vimeo、Googleのような人気サイトをサポート。 パフォーマンス
Hello. I'm Yuki Iwanaga, a software engineer pursuing beauty in both design and engineering
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
最近ではページ内でリンクを飛ばす際には当然の仕様となっているスムーススクロールを簡単なタグで実現します。 どうだい？スムースだろ？ デモページ 個人的にこの動きが大好きです。 1時間くらいならずっとスクロールを見ていられます。 鬱の時なら半日はいけます！ HTML <a href="#bottom">下へスムース！</a> なにも工夫しなくて良いです。 ただ＃をつけてアンカーポイントへリンクを貼るだけです。 jQuery依存のスクリプトなので、head内でjQueryを呼び出しましょう。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> その後に以下のスクリプトを書きます。 <script type="text/java
Fancybox #Fancybox is the ultimate JavaScript lightbox alternative that sets the standard for premium user experience in multimedia display. Supports images, videos, maps, inline content, iframes and any other HTML content. This is the fifth generation of Fancybox. Both Carousel and Panzoom components are used under the hood and that's what makes this project so unique. In addition, Fancybox is ea
divなどで配置したパネル内の要素の量が異なっていても、全てのパネルの高さを揃えるjQueryのプラグインを紹介します。 高さを揃える系としては後発のスクリプトですが、レスポンシブにしっかり対応しているのがポイントです。 一列のパネルはもちろん、段組でもOK、省スペースのスマフォ用に成り行きもコントロールできます。
サイトのトップページなどでキ―ビジュアルにあたる部分を、複数枚ある画像を単純なフェードで切り替えるような動作を組み込むことはよくあること。 そんなちょっとした画像の切り替えが必要な際に使える、凝った動きも無く、画像がひたすらクロスフェードし続けるシンプル画像ビューアーのサンプルを作ったので紹介してみます。 まずは動作のサンプルから。 jQuery CROSS FADE IMAGE VIEWER【SAMPLE】 サンプルでは4枚の画像を切り替えています。 自動で再生され、4枚の画像が永遠にループし続けます。 全体構成についてHTMLから。 ◆HTML <div id="viewer"> <img src="img/photo01.jpg" width="400" height="300" alt="" /> <img src="img/photo02.jpg" width="400" hei
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
