https://b.hatena.ne.jp/nors/javascript/ javascriptに関するnorsのはてなブックマーク (60) https://coliss.com/articles/build-websites/operation/javascript/js-syze-for-media-queries.html http://rezitech.github.com/syze/ nors 2012-01-16T02:02:00Z javascript <blockquote cite="https://coliss.com/articles/build-websites/operation/javascript/js-syze-for-media-queries.html" title="[JS]柔軟なclassの設定が可能なResponsive Web Design用の超軽量(1KB)スクリプト -syze"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fjs-syze-for-media-queries.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/javascript/js-syze-for-media-queries.html">[JS]柔軟なclassの設定が可能なResponsive Web Design用の超軽量(1KB)スクリプト -syze</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/javascript/js-syze-for-media-queries.html"><img src="" alt="[JS]柔軟なclassの設定が可能なResponsive Web Design用の超軽量(1KB)スクリプト -syze" title="[JS]柔軟なclassの設定が可能なResponsive Web Design用の超軽量(1KB)スクリプト -syze" class="entry-image" /></a></p><p>demo 1：幅1920pxで表示 デスクトップ用の画像（hdsize-wide-512x512.png）を表示 syzeの使い方 上記のdemo 1を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 &lt;script src=&quot;syze.min.js&quot;&gt;&lt;/script&gt; JavaScript demo1では表示サイズの数値を元に、class名にもその数値を利用し...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/js-syze-for-media-queries.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/javascript/js-syze-for-media-queries.html" alt="はてなブックマーク - [JS]柔軟なclassの設定が可能なResponsive Web Design用の超軽量(1KB)スクリプト -syze" title="はてなブックマーク - [JS]柔軟なclassの設定が可能なResponsive Web Design用の超軽量(1KB)スクリプト -syze" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/js-syze-for-media-queries.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 72 https://phpspot.org/blog/archives/2011/11/7kbjavascriptli.html http://listjs.com/examples/standard.html nors 2011-11-04T02:25:29Z javascript <blockquote cite="https://phpspot.org/blog/archives/2011/11/7kbjavascriptli.html" title="リストを検索＆ソートできる7KBのJavaScriptライブラリ「List.js」:phpspot開発日誌"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fphpspot.org%2Fblog%2Farchives%2F2011%2F11%2F7kbjavascriptli.html" alt="" /> <a href="https://phpspot.org/blog/archives/2011/11/7kbjavascriptli.html">リストを検索＆ソートできる7KBのJavaScriptライブラリ「List.js」:phpspot開発日誌</a></cite><p><a href="https://phpspot.org/blog/archives/2011/11/7kbjavascriptli.html"><img src="" alt="リストを検索＆ソートできる7KBのJavaScriptライブラリ「List.js」:phpspot開発日誌" title="リストを検索＆ソートできる7KBのJavaScriptライブラリ「List.js」:phpspot開発日誌" class="entry-image" /></a></p><p>List.js - Examples of how to use the script リストを検索＆ソートできる7KBのJavaScriptライブラリ「List.js」。 &lt;li&gt;リストを入力によって絞り込んだり、分類別で絞り込んだり、特定属性でソートするなんていうことが可能です。 7KBと軽く、サクサク動きます。サーバサイドでアイテムを絞り込む方法もありますが、ア...</p><p><a href="https://b.hatena.ne.jp/entry/s/phpspot.org/blog/archives/2011/11/7kbjavascriptli.html"><img src="https://b.hatena.ne.jp/entry/image/https://phpspot.org/blog/archives/2011/11/7kbjavascriptli.html" alt="はてなブックマーク - リストを検索＆ソートできる7KBのJavaScriptライブラリ「List.js」:phpspot開発日誌" title="はてなブックマーク - リストを検索＆ソートできる7KBのJavaScriptライブラリ「List.js」:phpspot開発日誌" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/phpspot.org/blog/archives/2011/11/7kbjavascriptli.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 43 https://coliss.com/articles/build-websites/operation/javascript/js-jsmorph.html http://jsmorph.com/ nors 2011-10-28T02:12:11Z javascript <blockquote cite="https://coliss.com/articles/build-websites/operation/javascript/js-jsmorph.html" title="[JS]多彩なアニメーションが実装できる2.3KBの超軽量スクリプト -jsMorph"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fjs-jsmorph.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/javascript/js-jsmorph.html">[JS]多彩なアニメーションが実装できる2.3KBの超軽量スクリプト -jsMorph</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/javascript/js-jsmorph.html"><img src="" alt="[JS]多彩なアニメーションが実装できる2.3KBの超軽量スクリプト -jsMorph" title="[JS]多彩なアニメーションが実装できる2.3KBの超軽量スクリプト -jsMorph" class="entry-image" /></a></p><p>Tutorial demos さまざまな基本となるアニメーションのユニット集。 [ad#ad-2] jsMorphの実装 外部ファイル 当スクリプトを外部ファイルとして指定します。 &lt;script src=&quot;js/jsMorph_min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; JavaScript jsMorphの基本書式です。 var myMorph = jsMorph( Object obj, // HTML element,...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/js-jsmorph.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/javascript/js-jsmorph.html" alt="はてなブックマーク - [JS]多彩なアニメーションが実装できる2.3KBの超軽量スクリプト -jsMorph" title="はてなブックマーク - [JS]多彩なアニメーションが実装できる2.3KBの超軽量スクリプト -jsMorph" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/js-jsmorph.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 275 https://kachibito.net/web-design/kerning-js.html nors 2011-09-20T02:15:10Z css javascript <blockquote cite="https://kachibito.net/web-design/kerning-js.html" title="CSSでカーニング（文字詰め）等を可能にするJSライブラリ・kerning.js - かちびと.net"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fkachibito.net%2Fweb-design%2Fkerning-js.html" alt="" /> <a href="https://kachibito.net/web-design/kerning-js.html">CSSでカーニング（文字詰め）等を可能にするJSライブラリ・kerning.js - かちびと.net</a></cite><p><a href="https://kachibito.net/web-design/kerning-js.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5676f414155d83a6effab3e8abb26b41cf0a4675/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2011%2F09%2Fkern000.jpg" alt="CSSでカーニング（文字詰め）等を可能にするJSライブラリ・kerning.js - かちびと.net" title="CSSでカーニング（文字詰め）等を可能にするJSライブラリ・kerning.js - かちびと.net" class="entry-image" /></a></p><p>この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 3連休も今日で最後ですねー。今日は ゆっくり過ごす方も多そうですね。 さて、休みですし、ちょっとネタ的 なライブラリをご紹介。カーニング をCSSで出来るようにしたJSライブラ リで...</p><p><a href="https://b.hatena.ne.jp/entry/s/kachibito.net/web-design/kerning-js.html"><img src="https://b.hatena.ne.jp/entry/image/https://kachibito.net/web-design/kerning-js.html" alt="はてなブックマーク - CSSでカーニング（文字詰め）等を可能にするJSライブラリ・kerning.js - かちびと.net" title="はてなブックマーク - CSSでカーニング（文字詰め）等を可能にするJSライブラリ・kerning.js - かちびと.net" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/kachibito.net/web-design/kerning-js.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 90 http://d.hatena.ne.jp/sandai/20110824/p1 nors 2011-08-24T05:58:17Z javascript <blockquote cite="http://d.hatena.ne.jp/sandai/20110824/p1" title="知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fd.hatena.ne.jp%2Fsandai%2F20110824%2Fp1" alt="" /> <a href="http://d.hatena.ne.jp/sandai/20110824/p1">知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て</a></cite><p><a href="http://d.hatena.ne.jp/sandai/20110824/p1"><img src="" alt="知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て" title="知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て" class="entry-image" /></a></p><p>(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解で...</p><p><a href="https://b.hatena.ne.jp/entry/d.hatena.ne.jp/sandai/20110824/p1"><img src="https://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/sandai/20110824/p1" alt="はてなブックマーク - 知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て" title="はてなブックマーク - 知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/d.hatena.ne.jp/sandai/20110824/p1"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 1401 https://phpspot.org/blog/archives/2011/08/umljavascriptjo.html http://www.jointjs.com/ nors 2011-08-01T02:01:37Z javascript <blockquote cite="https://phpspot.org/blog/archives/2011/08/umljavascriptjo.html" title="UMLなんかが描けるJavaScript描画ライブラリ「Joint」:phpspot開発日誌"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fphpspot.org%2Fblog%2Farchives%2F2011%2F08%2Fumljavascriptjo.html" alt="" /> <a href="https://phpspot.org/blog/archives/2011/08/umljavascriptjo.html">UMLなんかが描けるJavaScript描画ライブラリ「Joint」:phpspot開発日誌</a></cite><p><a href="https://phpspot.org/blog/archives/2011/08/umljavascriptjo.html"><img src="" alt="UMLなんかが描けるJavaScript描画ライブラリ「Joint」:phpspot開発日誌" title="UMLなんかが描けるJavaScript描画ライブラリ「Joint」:phpspot開発日誌" class="entry-image" /></a></p><p>Joint - JavaScript diagramming library. UMLなんかが描けるJavaScript描画ライブラリ「Joint」。 UMLのステートチャート図やクラス図、組織図といった図形の他に様々な図形が描画できるライブラリです。 更に描画だけではなくドラッグ＆ドロップで移動できるインタラクティブな機能も存在 組織図 UMLのクラス図（ドラ...</p><p><a href="https://b.hatena.ne.jp/entry/s/phpspot.org/blog/archives/2011/08/umljavascriptjo.html"><img src="https://b.hatena.ne.jp/entry/image/https://phpspot.org/blog/archives/2011/08/umljavascriptjo.html" alt="はてなブックマーク - UMLなんかが描けるJavaScript描画ライブラリ「Joint」:phpspot開発日誌" title="はてなブックマーク - UMLなんかが描けるJavaScript描画ライブラリ「Joint」:phpspot開発日誌" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/phpspot.org/blog/archives/2011/08/umljavascriptjo.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 40 http://mashi.tv/ nors 2011-06-13T02:02:22Z javascript <blockquote cite="http://mashi.tv/" title="mashi - javascript timeline toolkit"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fmashi.tv%2F" alt="" /> <a href="http://mashi.tv/">mashi - javascript timeline toolkit</a></cite><p><a href="http://mashi.tv/"><img src="" alt="mashi - javascript timeline toolkit" title="mashi - javascript timeline toolkit" class="entry-image" /></a></p><p>An Easier Way To Build JavaScript Animations This is the web site of the Mashi JavaScript Timeline Toolkit, an open source project that brings timeline-driven animation and interaction capabilities to your web site. Watch the short intro above to learn more. Runs online and offline in any browser...</p><p><a href="https://b.hatena.ne.jp/entry/mashi.tv/"><img src="https://b.hatena.ne.jp/entry/image/http://mashi.tv/" alt="はてなブックマーク - mashi - javascript timeline toolkit" title="はてなブックマーク - mashi - javascript timeline toolkit" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/mashi.tv/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 76 https://coliss.com/articles/build-websites/operation/javascript/js-timeline-toolkit-mashi.html http://mashi.tv/ http://mashi.tv/apidoc/index.htm nors 2011-06-13T02:02:14Z javascript <blockquote cite="https://coliss.com/articles/build-websites/operation/javascript/js-timeline-toolkit-mashi.html" title="[JS]Flashでもない、HTML5でもない、タイムラインベースの複雑なアニメーションを作成できるスクリプト -Mashi | コリス"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fjs-timeline-toolkit-mashi.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/javascript/js-timeline-toolkit-mashi.html">[JS]Flashでもない、HTML5でもない、タイムラインベースの複雑なアニメーションを作成できるスクリプト -Mashi | コリス</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/javascript/js-timeline-toolkit-mashi.html"><img src="" alt="[JS]Flashでもない、HTML5でもない、タイムラインベースの複雑なアニメーションを作成できるスクリプト -Mashi | コリス" title="[JS]Flashでもない、HTML5でもない、タイムラインベースの複雑なアニメーションを作成できるスクリプト -Mashi | コリス" class="entry-image" /></a></p><p>ぱっと見た瞬間「Flashだな」と思ってしまったくらいの、Flashで実装したような複雑なアニメーションやムービーを作成できるスクリプトを紹介します。 使用するのはHTML, CSS, JavaScriptで、こういったものにありがちなHTML5, Canvas, CSS3には頼っていません。jQueryなど他のスクリプトにも依存していません。 ※CSS3の...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/js-timeline-toolkit-mashi.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/javascript/js-timeline-toolkit-mashi.html" alt="はてなブックマーク - [JS]Flashでもない、HTML5でもない、タイムラインベースの複雑なアニメーションを作成できるスクリプト -Mashi | コリス" title="はてなブックマーク - [JS]Flashでもない、HTML5でもない、タイムラインベースの複雑なアニメーションを作成できるスクリプト -Mashi | コリス" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/js-timeline-toolkit-mashi.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 402 https://kachibito.net/web-design/slide-contents-sample.html nors 2011-06-10T07:01:17Z web design slider javascript showcase <blockquote cite="https://kachibito.net/web-design/slide-contents-sample.html" title="JSによるコンテンツスライダーを使用しているサイトのサンプル集 - かちびと.net"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fkachibito.net%2Fweb-design%2Fslide-contents-sample.html" alt="" /> <a href="https://kachibito.net/web-design/slide-contents-sample.html">JSによるコンテンツスライダーを使用しているサイトのサンプル集 - かちびと.net</a></cite><p><a href="https://kachibito.net/web-design/slide-contents-sample.html"><img src="" alt="JSによるコンテンツスライダーを使用しているサイトのサンプル集 - かちびと.net" title="JSによるコンテンツスライダーを使用しているサイトのサンプル集 - かちびと.net" class="entry-image" /></a></p><p>この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 個人的なまとめです。スライド で画像やコンテンツを実装して いるサイトのデザインサンプル です。jQuery等を使用している サイトに絞っています。 インスピレーション用のサンプル集...</p><p><a href="https://b.hatena.ne.jp/entry/s/kachibito.net/web-design/slide-contents-sample.html"><img src="https://b.hatena.ne.jp/entry/image/https://kachibito.net/web-design/slide-contents-sample.html" alt="はてなブックマーク - JSによるコンテンツスライダーを使用しているサイトのサンプル集 - かちびと.net" title="はてなブックマーク - JSによるコンテンツスライダーを使用しているサイトのサンプル集 - かちびと.net" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/kachibito.net/web-design/slide-contents-sample.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 90 http://wavded.github.io/humane-js/ nors 2011-05-10T02:05:27Z javascript <blockquote cite="http://wavded.github.io/humane-js/" title="humane.js"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fwavded.github.io%2Fhumane-js%2F" alt="" /> <a href="http://wavded.github.io/humane-js/">humane.js</a></cite><p><a href="http://wavded.github.io/humane-js/"><img src="" alt="humane.js" title="humane.js" class="entry-image" /></a></p><p>A simple, modern, framework-independent, well-tested, unobtrusive, notification system. Utilizes CSS transitions when available, falls back to JS animation when not. Includes mobile support. Select a theme: Click a code sample below to see it in action: humane.log(&quot;Welcome Back&quot;) humane.log(&quot;Reco...</p><p><a href="https://b.hatena.ne.jp/entry/wavded.github.io/humane-js/"><img src="https://b.hatena.ne.jp/entry/image/http://wavded.github.io/humane-js/" alt="はてなブックマーク - humane.js" title="はてなブックマーク - humane.js" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/wavded.github.io/humane-js/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 50 https://coliss.com/articles/build-websites/operation/javascript/js-adapt.html http://adapt.960.gs/ nors 2011-04-18T01:49:27Z css javascript <blockquote cite="https://coliss.com/articles/build-websites/operation/javascript/js-adapt.html" title="[JS]IE6でもブラウザのサイズに合わせて最適なスタイルシートを適用するスクリプト -Adapt.js"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fjs-adapt.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/javascript/js-adapt.html">[JS]IE6でもブラウザのサイズに合わせて最適なスタイルシートを適用するスクリプト -Adapt.js</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/javascript/js-adapt.html"><img src="" alt="[JS]IE6でもブラウザのサイズに合わせて最適なスタイルシートを適用するスクリプト -Adapt.js" title="[JS]IE6でもブラウザのサイズに合わせて最適なスタイルシートを適用するスクリプト -Adapt.js" class="entry-image" /></a></p><p>CSS3のMedia Queriesを使用して同様のことができますが、CSS3非対応ブラウザでも動作し、且つjQueryなど他のスクリプトに依存しないでブラウザの幅をチェックし、そのサイズに最適化されたスタイルシートのみをロードさせる超軽量（894bytes）のスクリプトを紹介します。 Adapt.js - Adaptive CSS 左：ファイル名、右：...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/js-adapt.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/javascript/js-adapt.html" alt="はてなブックマーク - [JS]IE6でもブラウザのサイズに合わせて最適なスタイルシートを適用するスクリプト -Adapt.js" title="はてなブックマーク - [JS]IE6でもブラウザのサイズに合わせて最適なスタイルシートを適用するスクリプト -Adapt.js" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/js-adapt.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 97 https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-jcontent.html http://jcontent.fahon.org/ nors 2011-04-12T02:28:39Z javascript slider jQuery plugin <blockquote cite="https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-jcontent.html" title="[JS]シンプル！高性能！超軽量！使い勝手の良いコンテンツスライダーのスクリプト -jContent"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fjquery-plugin-jcontent.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-jcontent.html">[JS]シンプル！高性能！超軽量！使い勝手の良いコンテンツスライダーのスクリプト -jContent</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-jcontent.html"><img src="" alt="[JS]シンプル！高性能！超軽量！使い勝手の良いコンテンツスライダーのスクリプト -jContent" title="[JS]シンプル！高性能！超軽量！使い勝手の良いコンテンツスライダーのスクリプト -jContent" class="entry-image" /></a></p><p>デモ：カルーセル機能付きのスライダー：垂直方向 jContentの実装 実装は簡単で、パネル内のコンテンツをdiv要素で配置し、数行のスクリプトを記述するだけです。 HTML &lt;div id=&quot;demo&quot;&gt; &lt;a title=&quot;&quot; href=&quot;#&quot; class=&quot;prev&quot;&gt;&lt;/a&gt; &lt;div class=&quot;slides&quot;&gt; &lt;div&gt;...&lt;/div&gt; &lt;div&gt;...&lt;/div&gt; &lt;div&gt;...&lt;/div&gt; &lt;div&gt;...&lt;/div&gt; &lt;/di...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/jquery-plugin-jcontent.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-jcontent.html" alt="はてなブックマーク - [JS]シンプル！高性能！超軽量！使い勝手の良いコンテンツスライダーのスクリプト -jContent" title="はてなブックマーク - [JS]シンプル！高性能！超軽量！使い勝手の良いコンテンツスライダーのスクリプト -jContent" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/jquery-plugin-jcontent.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 175 https://phpspot.org/blog/archives/2011/04/javascriptvisua.html http://www.sprymedia.co.uk/article/Visual nors 2011-04-12T02:12:17Z bookmarklet javascript <blockquote cite="https://phpspot.org/blog/archives/2011/04/javascriptvisua.html" title="ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」:phpspot開発日誌"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fphpspot.org%2Fblog%2Farchives%2F2011%2F04%2Fjavascriptvisua.html" alt="" /> <a href="https://phpspot.org/blog/archives/2011/04/javascriptvisua.html">ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」:phpspot開発日誌</a></cite><p><a href="https://phpspot.org/blog/archives/2011/04/javascriptvisua.html"><img src="" alt="ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」:phpspot開発日誌" title="ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」:phpspot開発日誌" class="entry-image" /></a></p><p>画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit... 次の記事 ≫：かなりいい感じのWordPressテーマ２０ Allan Jardine | Reflections | Visual Event ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」。 JavaScript で開発していて、jQuery等の各...</p><p><a href="https://b.hatena.ne.jp/entry/s/phpspot.org/blog/archives/2011/04/javascriptvisua.html"><img src="https://b.hatena.ne.jp/entry/image/https://phpspot.org/blog/archives/2011/04/javascriptvisua.html" alt="はてなブックマーク - ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」:phpspot開発日誌" title="はてなブックマーク - ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」:phpspot開発日誌" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/phpspot.org/blog/archives/2011/04/javascriptvisua.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 751 https://coliss.com/articles/build-websites/operation/javascript/js-tinybox2.html http://www.scriptiny.com/2011/03/javascript-modal-windows/ TinyBox2の特徴 他のスクリプトに依存しないで、単体でモーダルウインドウを実装 超軽量（5KB） iFrame, AJAX, 画像もサポート デザインはCSSで簡単にカスタマイズが可能 マスクは不透 nors 2011-04-01T02:06:14Z javascript <blockquote cite="https://coliss.com/articles/build-websites/operation/javascript/js-tinybox2.html" title="[JS]超軽量だけど、高性能なモーダルウインドウを実装するスクリプト -TinyBox2"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fjs-tinybox2.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/javascript/js-tinybox2.html">[JS]超軽量だけど、高性能なモーダルウインドウを実装するスクリプト -TinyBox2</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/javascript/js-tinybox2.html"><img src="" alt="[JS]超軽量だけど、高性能なモーダルウインドウを実装するスクリプト -TinyBox2" title="[JS]超軽量だけど、高性能なモーダルウインドウを実装するスクリプト -TinyBox2" class="entry-image" /></a></p><p>jQueryなどの他のスクリプトに依存せずにモーダルウインドウを実装する高性能で超軽量（5KB）のスクリプトを紹介します。 JavaScript Modal Windows – TinyBox2 デモページ [ad#ad-2] TinyBox2のデモ デモはシンプルなモーダルウインドウから、アニメーション付き、AJAX対応、iFrame対応、画像対応などがあり、どれも実...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/js-tinybox2.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/javascript/js-tinybox2.html" alt="はてなブックマーク - [JS]超軽量だけど、高性能なモーダルウインドウを実装するスクリプト -TinyBox2" title="はてなブックマーク - [JS]超軽量だけど、高性能なモーダルウインドウを実装するスクリプト -TinyBox2" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/js-tinybox2.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 185 https://phpspot.org/blog/archives/2011/03/html5canvascama.html http://camanjs.com/ nors 2011-03-02T05:51:27Z html5 Canvas javascript <blockquote cite="https://phpspot.org/blog/archives/2011/03/html5canvascama.html" title="HTML5のCanvasによって画像加工が出来る「CamanJS」:phpspot開発日誌"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fphpspot.org%2Fblog%2Farchives%2F2011%2F03%2Fhtml5canvascama.html" alt="" /> <a href="https://phpspot.org/blog/archives/2011/03/html5canvascama.html">HTML5のCanvasによって画像加工が出来る「CamanJS」:phpspot開発日誌</a></cite><p><a href="https://phpspot.org/blog/archives/2011/03/html5canvascama.html"><img src="" alt="HTML5のCanvasによって画像加工が出来る「CamanJS」:phpspot開発日誌" title="HTML5のCanvasによって画像加工が出来る「CamanJS」:phpspot開発日誌" class="entry-image" /></a></p><p>CamanJS - Image Manipulation in Javascript HTML5のCanvasによって画像加工が出来る「CamanJS」。 画像編集ツールによってコントラストや露光量を変えたり、ガンマ値を変えたりといった処理で画像を加工できますが、このCamanJSを使えば、Canvasを使ってJavaScriptのメソッドで色を変えられます。 ビフォア アフター ...</p><p><a href="https://b.hatena.ne.jp/entry/s/phpspot.org/blog/archives/2011/03/html5canvascama.html"><img src="https://b.hatena.ne.jp/entry/image/https://phpspot.org/blog/archives/2011/03/html5canvascama.html" alt="はてなブックマーク - HTML5のCanvasによって画像加工が出来る「CamanJS」:phpspot開発日誌" title="はてなブックマーク - HTML5のCanvasによって画像加工が出来る「CamanJS」:phpspot開発日誌" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/phpspot.org/blog/archives/2011/03/html5canvascama.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 84 https://treesaverjs.com/ nors 2011-02-08T01:50:39Z javascript <blockquote cite="https://treesaverjs.com/" title="Treesaver.js"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftreesaverjs.com%2F" alt="" /> <a href="https://treesaverjs.com/">Treesaver.js</a></cite><p><a href="https://treesaverjs.com/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/2aed703c968b3fb1dec710666dc4066d9f51e58b/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Ftreesaverjs.com%2Fwp-content%2Fuploads%2F2019%2F01%2Ftreesaver-example.jpg" alt="Treesaver.js" title="Treesaver.js" class="entry-image" /></a></p><p>Treesaver® is a JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS. Download Download the latest stable beta version, 0.9.2: treesaver-0.9.2.js (21kb minified &amp; gzipped) For uncompressed or debug versions, see the downloads section of the Treesaver.js ...</p><p><a href="https://b.hatena.ne.jp/entry/s/treesaverjs.com/"><img src="https://b.hatena.ne.jp/entry/image/https://treesaverjs.com/" alt="はてなブックマーク - Treesaver.js" title="はてなブックマーク - Treesaver.js" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/treesaverjs.com/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 60 http://thinkvitamin.com/code/tips-on-learning-javascript/ nors 2011-02-08T01:49:37Z javascript <blockquote cite="http://thinkvitamin.com/code/tips-on-learning-javascript/" title="Top 10 nhà cái uy tín nhất - Thưởng đăng ký giá trị"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fthinkvitamin.com%2Fcode%2Ftips-on-learning-javascript%2F" alt="" /> <a href="http://thinkvitamin.com/code/tips-on-learning-javascript/">Top 10 nhà cái uy tín nhất - Thưởng đăng ký giá trị</a></cite><p><a href="http://thinkvitamin.com/code/tips-on-learning-javascript/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/90ed3670248addfac47bd580fc0d6cfc3d4e48ee/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Flda.uk.com%2Fwp-content%2Fuploads%2F2025%2F10%2Ftop-nha-cai-uy-tin.png" alt="Top 10 nhà cái uy tín nhất - Thưởng đăng ký giá trị" title="Top 10 nhà cái uy tín nhất - Thưởng đăng ký giá trị" class="entry-image" /></a></p><p>Top 10+ Nhà Cái Uy Tín Nhất Hiện Nay [Cập Nhật Tháng 04/2026] Không thể phủ nhận rằng ngành cá cược trực tuyến đang ngày càng phát triển mạnh mẽ hơn bao giờ hết. Thế nhưng để chọn lựa được một nhà cái đáng tin cậy tham gia là điều không hề dễ dàng. Cập nhật danh sách những nhà cái tốt nhất thị tr...</p><p><a href="https://b.hatena.ne.jp/entry/thinkvitamin.com/code/tips-on-learning-javascript/"><img src="https://b.hatena.ne.jp/entry/image/http://thinkvitamin.com/code/tips-on-learning-javascript/" alt="はてなブックマーク - Top 10 nhà cái uy tín nhất - Thưởng đăng ký giá trị" title="はてなブックマーク - Top 10 nhà cái uy tín nhất - Thưởng đăng ký giá trị" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/thinkvitamin.com/code/tips-on-learning-javascript/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 8 https://coliss.com/articles/build-websites/operation/javascript/js-script-loader-yepnope.html http://yepnopejs.com/ nors 2011-01-28T02:03:53Z javascript <blockquote cite="https://coliss.com/articles/build-websites/operation/javascript/js-script-loader-yepnope.html" title="[JS]条件付きでJavaScriptやCSSファイルをロードできるスクリプトローダー -Yepnope"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fjs-script-loader-yepnope.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/javascript/js-script-loader-yepnope.html">[JS]条件付きでJavaScriptやCSSファイルをロードできるスクリプトローダー -Yepnope</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/javascript/js-script-loader-yepnope.html"><img src="" alt="[JS]条件付きでJavaScriptやCSSファイルをロードできるスクリプトローダー -Yepnope" title="[JS]条件付きでJavaScriptやCSSファイルをロードできるスクリプトローダー -Yepnope" class="entry-image" /></a></p><p>プレフィックス（接頭辞）を使用して、ロードのタイミング、UAごとに必要なファイルだけをロードなど、条件付きでファイルをロードさせることができるスクリプトローダーを紹介します。 yepnope.js -A Conditional Loader For Your Polyfills! [ad#ad-2] yepnope.jsの書式 yepnope.jsの基本書式は、下記のようになります...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/js-script-loader-yepnope.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/javascript/js-script-loader-yepnope.html" alt="はてなブックマーク - [JS]条件付きでJavaScriptやCSSファイルをロードできるスクリプトローダー -Yepnope" title="はてなブックマーク - [JS]条件付きでJavaScriptやCSSファイルをロードできるスクリプトローダー -Yepnope" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/js-script-loader-yepnope.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 74 https://www.publickey1.jp/blog/11/javascriptweborioneclipse.html nors 2011-01-13T05:11:54Z javascript <blockquote cite="https://www.publickey1.jp/blog/11/javascriptweborioneclipse.html" title="JavaScriptで書かれたWeb統合開発ツール「Orion」発表。Eclipseの新プロジェクトとして"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.publickey1.jp%2Fblog%2F11%2Fjavascriptweborioneclipse.html" alt="" /> <a href="https://www.publickey1.jp/blog/11/javascriptweborioneclipse.html">JavaScriptで書かれたWeb統合開発ツール「Orion」発表。Eclipseの新プロジェクトとして</a></cite><p><a href="https://www.publickey1.jp/blog/11/javascriptweborioneclipse.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/d456b001e7b1552ac62944ca10fa41df736e3920/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fwww.publickey1.jp%2Ffbico_pblky.png" alt="JavaScriptで書かれたWeb統合開発ツール「Orion」発表。Eclipseの新プロジェクトとして" title="JavaScriptで書かれたWeb統合開発ツール「Orion」発表。Eclipseの新プロジェクトとして" class="entry-image" /></a></p><p>EclipseはオープンソースによるJavaベースの統合開発環境として知られていますが、そのEclipseで新プロジェクト「Orion」が発表されました。 Orion is not a set of Java plug-ins which run in the existing Java IDE. It is browser-based open tool integration platform which is entirely focused on developing fo...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.publickey1.jp/blog/11/javascriptweborioneclipse.html"><img src="https://b.hatena.ne.jp/entry/image/https://www.publickey1.jp/blog/11/javascriptweborioneclipse.html" alt="はてなブックマーク - JavaScriptで書かれたWeb統合開発ツール「Orion」発表。Eclipseの新プロジェクトとして" title="はてなブックマーク - JavaScriptで書かれたWeb統合開発ツール「Orion」発表。Eclipseの新プロジェクトとして" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.publickey1.jp/blog/11/javascriptweborioneclipse.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 396 https://coliss.com/articles/build-websites/operation/javascript/js-framework-dhtmlx-touch.html http://www.dhtmlx.com/touch/ nors 2011-01-06T05:00:04Z javascript framework <blockquote cite="https://coliss.com/articles/build-websites/operation/javascript/js-framework-dhtmlx-touch.html" title="[JS]モバイル・タッチデバイス用のアプリケーションを構築するためのJavaScriptのフレームワーク -DHTMLX Touch | コリス"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fjs-framework-dhtmlx-touch.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/javascript/js-framework-dhtmlx-touch.html">[JS]モバイル・タッチデバイス用のアプリケーションを構築するためのJavaScriptのフレームワーク -DHTMLX Touch | コリス</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/javascript/js-framework-dhtmlx-touch.html"><img src="" alt="[JS]モバイル・タッチデバイス用のアプリケーションを構築するためのJavaScriptのフレームワーク -DHTMLX Touch | コリス" title="[JS]モバイル・タッチデバイス用のアプリケーションを構築するためのJavaScriptのフレームワーク -DHTMLX Touch | コリス" class="entry-image" /></a></p><p>DHTMLX Touch [ad#ad-2] DHTMLX Touchの主な特徴 DHTMLX TouchはUIウィジェットのセットだけでなく、モバイルやタッチデバイス用のクロスプラットフォームのウェブアプリケーションを作成することも目的とした完全なフレームワークです。 対応デバイス iPad, iPhone, Androidなど人気の高いデバイス全てに対応。 Firefox...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/js-framework-dhtmlx-touch.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/javascript/js-framework-dhtmlx-touch.html" alt="はてなブックマーク - [JS]モバイル・タッチデバイス用のアプリケーションを構築するためのJavaScriptのフレームワーク -DHTMLX Touch | コリス" title="はてなブックマーク - [JS]モバイル・タッチデバイス用のアプリケーションを構築するためのJavaScriptのフレームワーク -DHTMLX Touch | コリス" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/js-framework-dhtmlx-touch.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 79