Web Design Wallのエントリー「jQuery Tutorials for Designers」から、JavaScriptのライブラリ「jQuery」が視覚的にどのように動作するかデモと共に解説してる10のチュートリアルを紹介します。
[JS]デザイナーのためのjQueryのチュートリアル
Web Design Wallのエントリー「jQuery Tutorials for Designers」から、JavaScriptのライブラリ「jQuery」が視覚的にどのように動作するかデモと共に解説してる10のチュートリアルを紹介します。
jQuery＋CSSによるカルーセルパネルの作り方 (1/3)
「カルーセルパネル」は、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。Amazonの「この商品を買った人はこんな商品も買っています」で利用されているので、名前は知らなくてもご存じの方は多いでしょう。カルーセル（Carousel：回転木馬）は、メリーゴーラウンド（merry-go-round）のことで、パネルをスライドしていくと一周して元のスライドに戻ることから「カルーセルパネル」と呼ばれています。今回はjQueryでカルーセルパネルを作成する方法を解説します。 HTML/CSSでカルーセルのベースを作成する 今回作成するカルーセルパネルのHTML／XHTML（以下、HTML）は次のようになっています。カルーセル全体を囲むdiv要素を配置し、id属性に「carouselWrap」を設定します。div要素の内側にはパネルを左方向にスライドさせる「戻る」ボタン用のp
[JS]スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ
パララックスをはじめ、パスに沿ってスクロールさせたり、スクロールに合わせてパネルを表示するなど、スクロール時に面白いエフェクトを与えるjQueryのプラグインを紹介します。
[JS]jQueryのプラグイン33 1選 -2008年3月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Galleria 画像ギャラリー。 jQuery Multimedia Portfolio 画像・動画・音声のスライドショー。 Ea
[JS]jQueryのプラグイン33+1選 -2010年7・8月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Shadow animation シャドウをアニメーション。 bgFade マウスホバーで背景をフェードでアニメーション。 hove
iOSとAndroidに最適化したJavaScriptフレームワーク「jqMobi」登場。jQuery Mobileより小さくて高速
iOSとAndroidに最適化したJavaScriptフレームワーク「jqMobi」登場。jQuery Mobileより小さくて高速 jQuery Mobileと同様に、HTML5のマークアップでモバイルアプリケーション開発を実現するオープンソースのJavaScriptフレームワーク「jqMobi」のβ版が公開されています。 jqMobiのコンセプトは、jQueryとjQuery Mobileの機能のサブセットを、iOSとAndroid向けに最適化したものといえるでしょう。 すでにjQueryやjQuery Mobile、あるいはSencha Touchなど、さまざまなモバイル向けHTML5/JavaScriptフレームワークが登場する中で、jqMobiの特徴はどこにあるのか、ブログで次のように説明しています。 jQuery - still focuses on the desktop.
一工夫でページのクオリティをアップするCSSとJavaScriptのソリューション集
Silverback Giveaway 一見、背景画像をCSSかJavaScriptで配置したように見えますが、CSSで普通に配置されたソリューションです。 テキストやリストが画像に重ならないように、marginを設定します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <h3>Contest Details</h3> <div class="imagery""> <img src="imagery.png" width="205" height="400" alt="Imagery" /> </div> <p>...the introductory paragraph...</p> <ol> <li>...various bullet points went here...</li> </ol> </textar
[JS]複数のコンテンツをドラッグ・スワイプでスライド表示するスクリプト -Minimit Gallery
1ページで構成された複数のコンテンツをデスクトップのドラッグ、スマフォ・タブレットのスワイプ操作でスライドして表示する単体で動作するスクリプトを紹介します。 Minimit Gallery Minimit Gallery -GitHub Minimit Galleryのデモ Minimit Galleryの使い方 Minimit Galleryのデモ Minimit Galleryは一つのHTMLファイル内に配置した複数のコンテンツをスライドで次々に表示するスクリプトで、各コンテンツはハッシュリンクでの表示にも対応しています。 デモはIE7+, Firefox 3.5+, Safari 3+, Opera 9+, Chrome, iPhone, iPad, Android, Windows Phoneなどでご覧ください。 デスクトップでデモを表示してみます。 次コンテンツへスライド中 上部
jQueryで作るAmazon流リキッドレイアウト (1/5)
国内外を問わず、多くのECサイトがお手本とする「Amazon.co.jp」。この連載でも以前、Amazonが採用する「カルーセル」（回転表示するスライドパネル）の作り方を紹介しましたが（関連記事）、Amazonは優れたユーザーインターフェイス（UI）の宝庫でもあります。 中でも、過去の閲覧履歴などからページの大半が動的に生成されるAmazon.co.jpのトップページは、ユーザーを商品購入へと導くさまざまな仕掛けが組み込まれています。今回は、このAmazon.co.jpのトップページに注目します。 今回のお手本サイト：『Amazon.co.jp』 米アマゾン・ドットコムの日本法人アマゾンジャパンが2000年から運営するECサイト。書籍販売から始まり、現在ではペットボトル飲料水や紙おむつ、キッチン家電まで1000万点超の膨大な商品を扱っている。取扱商品の拡大に合わせて、2008年4月に大規模
[JS]スマフォ・タブレットでの利用を前提に作られたタブを実装するスクリプト -Tabby
Demo: 垂直型のタブ タブレットやデスクトップなどの広いスクリーンでは垂直型で右側にコンテンツが表示され、小さいスクリーンでは水平型に表示されます。 Tabbyの使い方 ステップは2つです。 Step 1: 外部ファイル 当スタイルシートをhead内に、スクリプトとjQueryをbodyの下あたりに記述します。 <head> ... <link rel="stylesheet" href="tabby.css" type="text/css"> </head> <body> ... <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> <script src="tabby.js"></script> </body> Step 2: HTML HTMLはデモをベースに紹介します。 Demo: ベーシックタイプ
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
[JS]シンプル！軽量！簡単！三拍子揃ったスライドショーのスクリプト -jQuery.TinySlider
[JS]シンプル！軽量！簡単！三拍子揃ったスライドショーのスクリプト -jQuery.TinySlider jQuery.TinySlider デモ [ad#ad-2] jQuery.TinySliderの実装 HTML スライドで表示されているイメージはdiv要素の背景画像です。 <div id="slider"> <div class="image" style="background-image: url(img/img1.jpg);">Simple</div> <div class="image" style="background-image: url(img/img2.jpg);">Light</div> <div class="image" style="background-image: url(img/img3.jpg);">Easy</div> </div> JavaS
[JS]jQueryのプラグイン33+1選 -2010年5・6月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 simpleSli.de フレキシブルでシンプルで軽量なコンテンツスライダーの決定版。 Lightbox_me DOM要素を指定して
[CSS]画像に美しい角丸とボックスシャドウを適用する方法
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。
FlashとjQuery どちらで実装するか決める際の重要なファクター
ウェブサイトを構築する際、FlashとjQueryは非常に魅力的なツールです。コンテンツを実装する際にどちらを使用すべきか迷うこともあると思います。 両方の特徴を把握し、実装する際に適切に選択するための重要なファクターを紹介します。 A Closer Look at Choosing Between Flash and jQuery 下記は各ポイントを意訳したものです。 はじめに 1. FlashとjQuery どちらにするか重要なファクター 2. jQueryとFlashサイトのショーケース まとめ はじめに HTML5の登場により、それがFlashを破るか否かに関わらずこれらはウェブコミュニティで議論の的でした。この議論が活発に行われる中、Flash vs. JavaScriptの話題は少し失われていました。 ここではJavaScriptの中から特に人気の高い「jQuery」をとりあげ
waterfall.js
div要素などで配置した高さの異なるパネルをレンガ状に一定の隙間で配置するjQuery兼Zeptoのプラグインを紹介します。 左のサイドバーは適用なし、右だけレンガ状にできます。 waterfall waterfall -GitHub そういえば最近、デモにzeptoの方を使ってるプラグインが増えてきましたね。 waterfallのデモ waterfallの使い方 waterfallのデモ スクリプトのページ自体がデモになっています。 まずは、デスクトップサイズでの表示。 デモページ、幅780pxで表示 カラムの数はカラムの幅の最小値を設定することで、自動で表示されます。 ページ内の適用範囲も指定できるので、左のサイドバーはそのままの表示です。 waterfallの使い方 使い方は簡単です。 HTMLがあれば、数行加えるだけで完了です。 Step 1: 外部ファイル waterfallはj
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]jQueryのプラグイン33+1選 -2009年4月 | コリス
Site Under Maintenance
[CSS]ブラウザのサイズに合わせてスタイルシートを変更する方法
[JS]jQueryのプラグイン33+1選 -2011年8月