1. TOPページに戻る
  2. Javascript

カテゴリー:Javascript

Vue.jsを使ってFF14で使えるツールを作ってみた

よくMMORPGのFF14を遊んでいるのですが、それを進めるうえでちょっとメモ的なツールが欲しいなと思ったので […]

YOUTUBEのiframeを直書きしてapiを使う方法

YOUTUBE動画の埋め込みに使えるYouTube Player APIですが、iframeをHTMLに直書き […]

Vue.jsで数値を入力するだけで計算するWebアプリを作ってみた

Vue.jsを勉強したので、ちょっとしたWebアプリを作ってみました。

Vue.jsを学ぶ最初の一歩として参考にしたサイトとちょっとした内容

JavaScriptのフレームワークのひとつ、「Vue.js」を調べたので、調べるのに見たサイトとメモを書いて […]

位置情報をブラウザで取得するGeolocation APIを使って今いる住所を調べる

Geolocation APIの位置情報を調べることがあったので、わかったことをメモしておこうと思います。

サイトに某ほとけ風な何かを呼び出すjQueryプラグイン・hotoke.jsを作った

ご存知の方は知っている某ドラマで現れる、「ほとけ」風ななにかを自分のサイト内に呼び寄せるjQueryプラグイン […]

jQueryのIEが使えるバージョンとバージョンアップしても使えるようにする方法

jQueryもこの記事を書いている現在では3.1.1まで新しいバージョンがでています。 しかし新しいバージョン […]

ドラッグアンドドロップでファイルアップロードする方法いろいろ

ファイルをアップロードする時、選択ウインドウを開いて画像を選択するのは少々面倒ですよね。そこで今回は、ドラッグ […]

CSSとJSでブレイクポイントがずれる時の処理を使いやすくする

CSSとJSでブレイクポイントがずれる時の処理を使いやすくする

さぁ、サイトを下からグイッっとパンしてサイトのロゴがドーン!する新しいjQueryプラグインを考えてみた

本当に新しいかどうかはわからないのですが、タイトル通り「サイトを下からグイッっとパンしてサイトのロゴがドーン! […]

このWebサイトを作ったのは私だと主張するためのスタッフロールを流せるjQueryプラグインを作った

TVにあってWebサイトにはないもの。それは・・・スタッフロール!それに気づいてからはや数年・・・。そのjQu […]

CSSと同じpx数をブレイクポイントで指定するとjQueryでずれる

CSSで指定したレスポンシブのブレイクポイントに合わせてjQueryで設定をしようとし、そのままの数値を$(w […]

一人で遊べる神経衰弱ゲームを作った

前回作った都道府県当てゲームをSVGとjsonを使って作ってみたに引き続き、ちょっとしたゲームを作ってみたかっ […]

Instagramのapiを使って写真を表示する

こちらの記事を見て自分の投稿した写真を表示してみようと思い作成しました。

都道府県当てゲームをSVGとjsonを使って作ってみた

SVGとjsonとその他使って日本地図を見て都道府県を当てようゲームを作ってみました。ただSVGとjsonを~ […]

pinterest風のタイル上に並べるjQueryを作ってみた

pinterestやjQuery Masonry のようにコンテンツをタイル状に並べるレイアウトがありますが、 […]

jQuery.Deferredを使って、xml読み込んでから他の処理を実行する方法

前回の続きな感じですが、今回はxmlで内容を読み込んだあとに、それぞれの高さを合わせるために heightLi […]

xmlをjQueryで読み込んで表示する時に注意すること

xmlを利用してコンテンツを表示したりすることがあると思いますが、今回はその方法のメモです。

サイトで右クリックしたら他のサイトへ飛ばすjQuery

こんにちは、かしゅうです。 右クリック禁止!というサイトがありますが、もういっそ右クリック禁止の約束を破ったら […]

コンテンツを横にアコーディオンで表示させるjQuery

こんにちは、かしゅうです。 今回はjQueryを使って、コンテンツをアコーディオン状に表示するものを作成しまし […]

要素にぼかす効果を付けられるFoggy.jsを試してみた

「手前に小窓を出して後ろのコンテンツをぼかす」というサイトをどこかで見かけ、それをやってみたかったのでjQue […]

タスクランナー「gulp」の導入手順(Windows)

前に同じタスクランナーのGruntを導入してみましたが、gulpというのも結構話題に見るのでこちらも導入し試し […]

紹介したJavaScriptのまとめページを作りました

このブログでは自分で作ったり参考にして掲載したJavaScript(主にjQuery使用)をよく載せていますが […]

さまざまな動きをするjQueryスライダーを作ってみた

前々から自分でスライダーを作ってみようと思いつつ途中で詰まっていたのですが、本を買ったりいろいろ調べたりして出 […]

ソースコードを見やすく表示してくれるgoogle-code-prettifyが便利

ソースコードを表示する際、以前はSyntaxHighlighterを使っていたのですが指定の仕方が自分的に面倒 […]

jQueryでコンテンツをランダムに入れ替える

ページのコンテンツをランダムに表示するjQueryです。最初にHTMLには要素の記述が全部書いてある状態なので […]

複数のスライドダウンコンテンツを実装するjQuery

内容をそのまま表示するとページが長く伸びてしまう時に最初に内容を隠しておき、ある箇所を押すと内容がスルスルと表 […]

動画を簡単に設置できるHTML5の動画プレーヤー video.js

HTML5ではFlashでなくてもvideoタグを使えば動画の再生が出来ます。とはいえIE8以下が対応してなか […]

コンテンツが下からスクロールで表示されるjQueryプラグイン

前にどこかのFlashサイトで見てこの仕組みJavaScriptで出来ないかなと思い作ってみました。 プラグイ […]

今更だけどやるgrunt入門編・インストールから基本的な使い方

JavaScriptやCSSの結合や圧縮などいろいろな事を自動で処理してくれるGruntですが、もう話題になっ […]

背景にYouTube動画を流せるJQueryプラグイン「tubular」

背景全体に動画が流れてるサイトってインパクトありますよね。そこでそれを試してみようと思い今回は背景にYouTu […]

JavaScriptを使って、どのブラウザかを判定するあれこれ

JavaScript(以下JS)で実装するものが増えてきたのに伴い、古いブラウザを判定して処理を分けることもあ […]

あれ何も見えない?を防ぐ、JavaScriptがオフでもきちんと表示させる方法

Flashを使わずにJavaScriptを使ってアニメーションなど様々な演出をしているサイトが増えてきましたが […]

jQueryプラグインの作り方の初歩

自分でもjQueryを使ってjsを書くので、これをプラグイン化できたらいいなと思うこともあります。という訳で大 […]

スクロールしてフッターで止まる、下揃いのサイドバー

前回作ったものの今度は下にピタッとくっつくタイプです。 どちかというとこちらのタイプの方がよく見ます。よく広告 […]

スクロールしてフッターで止まる、上揃いのサイドバー

よく見かけるようになった、スクロールしていくとサイドバーがそのままウインドウについてきて、フッターの箇所まで来 […]

ページ内ナビをコンテンツの位置によってカレント表示させる

パララックスをつかったサイトなど、縦長のページが昔に比べれば多くなった感じがしますがその際に、ページ内用のナビ […]

jQueryの$.loadと$.ajaxを使って他のページの内容を読み込む方法

他のページのhtmlを読み込むのに使うjQueryに$.loadと$.ajaxですが、使い方を調べたので忘れな […]

jQueryでtransformをアニメーションさせるプラグイン「Transit」

jQueryのanimateではアニメーションしながらtransoformさせることが出来ないようです。 それ […]

jQueryのanimateを使ったアニメーション

今回はjQueryのanimateを使って、要素をアニメーションさせる方法を試してみようと思います。 本当はC […]

JavaScriptを使って、自サイトでの「はてなブックマーク」の人気記事一覧を表示する

ソーシャルブックマークの「はてなブックマーク」。ここで自分のサイトの記事がどれだけブックマークされているかわか […]

jQueryを使ってチェックボックスが押されたらリンクをつける

チェックボックスにチェックを入れるとaタグが出てリンクが押せるようになるというのをjQueryで作成したので、 […]

Pinterest風のデザインを実装する「jQuery Masonry」を試してみた

Pinterestのデザインは、要素が敷き詰められた感じになっています。 これはなんていうデザインの通称かわか […]

パララックスサイトの作り方の初歩

最近パララックス(視差効果)を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたか […]

動画をサイトに埋め込む際に便利な、オープンソースのFlashVideoPlayer「NonverBlaster」

動画と言えば最近はYoutubeにアップしたり、ニコ動やその他動画サイトにアップして見ることが多いと思いますが […]

shadowboxをクリッカブルマップで使う方法

lightbox風のプラグインでshadowboxというのがあるのですが、これをクリッカブルマップで使った時に […]

jQueryで実装するスクロールに伴う演出

スクロールに関する演出を調べたので、調べたものに使用しているプラグインと実装方法のメモです。 なお、デモについ […]

JavaScriptの配列を特定の順番にソートする方法

JavaScriptで作った配列の順番を特定の順番に入れ替えたい時があったので、ソートして入れ替える方法を調べ […]

ページを読み込んだらすぐにfancyBoxを実行する方法

画像などをクリックすると拡大画像をふわっと表示してくれる、いわゆるLightBox風のjQueryのプラグイン […]

IE6で簡単にfixedを使えるようにするjQuery.exFixed.js

サイトを作る際に要素を画面のとある位置に固定して配置したい時に使うposition: fixed;ですが、 ご […]

スマートフォンサイトを作る時に便利なフリックが実装できるjQueryプラグイン7選

スマートフォンを使うときによく使う操作方法としてフリックがあります。このフリックの操作でギャラリーができるjQ […]

YouTubeの埋め込み動画プレーヤーをJavaScriptで制御するYouTube JavaScript Player APIの使い方

サイトに動画を設置する際や、Youtubeにアップされている動画を紹介したい場合など、 Youtubeの埋め込 […]

スマートフォンかどうかを判断するJavascriptの条件分岐

スマートフォンかどうかを判断するJavascriptの条件分岐です。

canvasを使って地下鉄の路線図を描けるjQueryプラグインで東京の地下鉄の路線図を描いてみた

少し前になりますが、jQueryで面白いプラグインが紹介されてましたので、そちらを使って 東京の地下鉄(東京メ […]

ページを読み込んだ後、数秒後にアンカーまでスクロールするJS

いろいろ調べたので、メモ。ページを表示したら一定時間後に目的の位置までスクロールするjQueryを使ったJSで […]

IE6でpng画像にロールオーバーする方法

IE6でpng画像にロールオーバーする時に動かなかったので、そのときに調べたことのメモ。 JSの記述を書き換え […]

Flashを全画面で表示して、スクロールバーを出す方法

全画面のFlashサイトがありますが、Flashのサイズが大きいと画面サイズによっては 見えなくなる領域もでき […]

iPhone用ページUIライブラリ iUI

以前にもiPhoneサイトを作成するさいに便利なjQueryプラグイン「jQTouch」をご紹介しましたが、 […]

tableのセルに交互に色をつける方法

テーブル(表)を使うとき、見やすいよう交互に色を付ける事が多いかと思います。その際、HTML側に交互にclas […]

jQueryを使ったアコーディオン

テキストや画像などをクリックすると隠れていたコンテンツがでてくるアコーディオンのサンプルをjQueryを使って […]

ie7.jsのバグ

IE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれるie7.js これだけ聞くととても便利そう […]

画像を拡大するJavascriptいろいろ

画像を拡大をJavascriptを使って行えるものをご紹介します。

target="_blank"を簡単に指定する

target="_blank"を簡単に指定する方法

jQueryで画像をロールオーバーする方法2

jQueryを使って画像名でロールオーバーする方法

jQueryで画像をロールオーバーする方法

jQueryで画像をロールオーバー

奥行きのある回転ができるjQuery – jQuery Roundabout

奥行きのある回転ができるjavascriptのjQuery Roundaboutを試してみました。

iPhoneページ製作用jQueryプラグイン「jQTouch」

iphoneページ製作用jQueryプラグイン「jQTouch」のご紹介

jQuery – ページスクロール

ページスクロールのJSで、上に戻るだけではなくてアンカーリンクの移動はすべてスクロールがつくJSのご紹介です。 […]

jQueryの使い方

jQueryとはjavascriptのライブラリの1つです。導入することによって簡単にjavascriptが扱 […]