checkboxやradioをアイコン付きでよりオシャレにできるjQueryプラグイン「Labelauty」:phpspot開発日誌
Labelauty jQuery Plugin checkboxやradioをアイコン付きでよりオシャレにできるjQueryプラグイン「Labelauty」。 ボタンの横にアイコンを表示させてON/OFFでアイコンを変えたりすることが可能。 通常のデザインが分かりやすい時もあれば、そうでない時もあるかもしれないので、そういう場合の選択肢にこれを知っておいても良さそう 関連エントリ チェックするといい感じにアニメーションするcheck,radioが作れるjQueryプラグイン「checkBo」 押しやすいカスタムデザインのcheck/radioボックスを実現できる「jquery-asCheck」 radioボタンをかっちょいいスライダーにしてくれるjQueryプラグイン「radiosToSlider」
Flipboard風エフェクトをブラウザ上で実現するためのjQueryプラグイン「flip」:phpspot開発日誌
Jquery-flip Flipboard風エフェクトをブラウザ上で実現するためのjQueryプラグイン「flip」。 次のように、縦にも横にもページをめくる風のUIが作れます。アプリ程ではないにせよ、面白いエフェクトがブラウザ上で作れるのはいいですね 使い方次第だとは思いますが、１から作ろうとすると大変そうなので覚えておくとよさそう 関連エントリ １ページ内で複数ページに分割できるjQueryプラグイン「windows」 マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maskify Slider」 レスポンシブなカバーフローっぽいスライドショーが作れるjQueryプラグイン「Flipster」 レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」 テーブル内容を入力値でフィルタリングできるjQueryプラグイン「FilterTable
画像を使わない擬似フォームUIの作り方 第01回 「CSS3を使った装飾」｜クロノドライブ
ブラウザ標準のフォームUI（チェックボックスやセレクトボックス）のデザインは、標準ゆえに「フォーム」だと分かりやすいデザインですが、どうしてもサイトカラーに合わずに野暮ったい印象になるときがあります。そういった場合にデザインを自由に変更できるといいのですが、フォームUIへのスタイル適用は制限があり、自由に変更できません。 そういったときに、実際のフォームUIを隠し独自のフォームUIを表示し、それに対して行ったアクションを隠してあるフォームUIに反映させる手法があります（ここでは擬似フォームUIと呼びます）。 本コラムでは主にスマートフォン向けにCSS3とJavaScript（jQuery）を使い、画像を使わない擬似フォームUIの作り方を4回に分けて紹介していきます。 ※PCではGoogle Chromeのみ動作確認をしています。 第01回目の今回はCSS3を使った装飾と後ほどjQueryで
HTMLでカーニング！手軽に文字詰めできる「FLAutoKerning.js」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、机に置いたおもちゃの日焼けが気になるもりたです。 今回は、前からちょっと気になっていたウェブフォントをカーニングできるJS「HTMLで文字詰めするタイポグラフィー用JS」を試してみました。 http://fladdict.net/blog/2011/02/auto-kerning.html ※現在はアクセスできなくなっています。 ご存知のとおり、jsを使わなくてもletter-spacingを使ってcssだけで設定しようと思えばできるんですが、ひと文字ずつの設定となるとhtmlもcssもすっきりしなくなる上にめんどくさい！ こうパッとガッとスッと設定したい！ そんな希望を叶えてくれるのが「FLAutoKerning.js」です！ ポイント1：導入が楽です 手順は簡単、サイトからファイルをダウロードしてjqeryと一緒に読み込ませて<head>内に設定を書くだけ。 入れてみたデモ
jQuery 1.9 日本語リファレンス | js STUDIO
このサイトについて jQueryの日本語リファレンスです。 jQueryの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 News 2013.03.13 ver1.9の内容に更新しました。 2012.12.02 jQueryの似ているAPIまとめ 2012.10.13 サイトをオープンしました。 API APIのカテゴリー分けについては、本家サイトでは1つのAPIが複数のカテゴリーに所属していますが、 このリファレンスでは分かりやすさを重視して1つのカテゴリーに絞っています。 また、一部本家サイトのカテゴリーを削り、別のカテゴリーに所属させているAPIがありますので、 予めご了承ください。 Ajax Ajaxに関する処理 Attri
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
iPhone AppのPathみたいなナビゲーションを実装できる Swpnav.js :: 5509
PathみたいなナビゲーションをWebページに実装するライブラリです。同じようなのは他にもあると思いますけど、これの特徴は対象に当たっている他のライブラリと干渉しにくいということでしょうか。iScrollみたいなイベントキャンセルが強力なやつはだめだと思います。 サンプルがまさにそれなんですけど、同僚の@が作った flipsnap.jsとは共存できます。レイヤー毎にスワイプ判定をしてるので、上位レイヤーで一度キャンセルすると Swpnav が実行されてる下位レイヤーにはイベントが飛ばなくなるような感じで、この Swpnav とか flipsnap のような作り方をしているライブラリとは共存できると思います。 サンプル（Webkitのみ ホスト githubにあります 5509/Swpnav – GitHub 使い方 ソースコードをダウンロードして、任意の場所に swpnav.js を置き、
jQueryを使って実装する、かっこいいナビゲーションのまとめ | コリス
利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。
HTML+CSS主体のJavaScriptエフェクト！ 簡単で「使える」jQueryテクニック（解説つき）
4月から入社した2011年度新卒社員です。 ハロこんにゃんセヨ がぜんウェブウェブしているほんだです。 今年4月より、意匠部のME課（めか）でマークアップエンジニアとして働いているほんだです。 入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType（ブログ構築ツール）での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。 そんな中でも最近多い業務はjQueryを使ったビジュアル面でのちょっとしたJavaScript（以下 JS）プログラミングです。 jQueryってとっても便利ですなぁ。HTML+CSSの知識を持っている人なら、簡単に「使える」エフェクトをつくれます。 この記事では僕が入社して2ヶ月間に学んだ、簡単で「使える」jQueryテクニックを紹介します。 jQueryってなんぞってとこと、使う前の準備をざっくり解説 jQuer
http://neteye.github.com/activity-indicator.html
NETEYE Activity Indicator A jQuery plugin that renders a translucent activity indicator (spinner) using SVG or VML. Features Lightweight script No images required No external CSS Resolution independent Alpha transparency Highly configurable appearance Works in all major browsers Uses feature detection Degrades gracefully Supported Browsers The plugin has been successfully tested in the following b
スクロールバーをデザインするのに使えるjQueryプラグイン「Custom Scrollbar」 | Web活メモ帳
「Custom Scrollbar」はスクロールバーのデザインとスクロール量をカスタマイズできるjQueryプラグインです。 デザイン以外にも、イージング、マウスホイールへの対応など多彩なオプションが設定可能になっています。 OSが変わっても同じ見せ方をしたい場合などに良さそうですね。 詳しくは以下 デモ 多彩なオプション機能 以下のようなオプションが設定可能です。 スクロールの方法（縦か横） スクロール量 イージング量（スクロールを停止した後の慣性の量） スクロールバーの幅と高さ マウスホイールのサポート 使い方 jQueryやjQUery.uiなどのライブラリをheadタグで読み込みます。 <link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" /> <script src="http://aj
CSS3とjQueryでフォームを美しく装飾する方法
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
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」をとりあげ
JavaScriptを上手くデザインに生かしたサイトのみを集めているギャラリーサイト・Not Coffee - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 JSを使ったWebデザインをしたい方 のインスピレーションに良さそうだっ たので記事に。jQueryやmootools、 Prototypeなど、人気のライブラリを 駆使したサイトのみをショーケース化 しているギャラリー、Not Coffeeの ご紹介です。 数はさほど多くは有りません（150~160ほど）が、今後に期待したいギャラリーです。デザインも素敵なものばかりなのでインスピレーションと更なるjsの使い方の勉強にもいいかもですよ。 ギャラリー形式になっています。jQuery、mootoolsなどのカテゴリで分けられているのでライブラリ別で探せます。 サムネイルにマウスオーバーすると必要な情報が出てきます。どのライブラリがどこに使われているか（これはタグで分けて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]1ページで構成されたサイトに豊富なコンテンツをスライドで表示するスクリプト -Slideme
BackgroundCheck
iOSスタイルのヘッダーが作れるjQueryプラグイン「Stacks」:phpspot開発日誌
小さくで可愛いグラフが描けるjQueryプラグイン「Piety」:phpspot開発日誌
jQuery Mobile: Demos and Documentation
Ａ４折形