次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック集
CSSやjavascriptを利用してサイトをよりリッチな表現に変えていくというのは、WEB制作の現場では常に行われていて、様々なスニペットやライブラリが日夜リリースされています。今日紹介するのは次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック「CSS and JavaScript tools to take your website to the next level」です。 Countable.js 様々なCSSやjavascriptによるテクニックがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 iCheck クリックしたラジオボックスやチェックボックスから、返り値をとれるjavascript。それをキーにして何かを動かしたいときに。 Almost Flat UI フラットデザインUIを簡単に実装で
フロントエンドJavaScriptにおける設計とテスト
今日話さないこと JavaScriptの基礎知識、jQueryの導入 気持ちいいUIやUXがうんちゃら CanvasやWebGLを使ったリッチでイケてるゲームの作り方
iframeを一見Validに表示するjavascript「JQuery iFrame Plugin」
twitter facebook hatena google pocket ページに外部ページを表示させる方法にiframeがありますが、XHTML 1.0 StrictやXHTML 1.1で「非推奨要素・属性」となっています。 JQuery iFrame Pluginを使用すれば、これを一見クリア（多分）しつつ、iframeが使用できます。 （追記：2007.11.25） ＊コメントいただいたように、オンラインチェッカーではValidになりますが、出力されたものはValidではありません。 これにともないタイトルを変更しました。 変更前：iframeをValidに表示する(?)javascript「JQuery iFrame Plugin」 変更後：iframeを一見Validに表示するjavascript「JQuery iFrame Plugin」 sponsors 使用方法 JQue
ユーザビリティに優れた画像ギャラリーJavaScript「jquery.showcase」
twitter facebook hatena google pocket 画像ギャラリーは、数多くあふれていますが、発端がLightBoxだったからか、あまりユーザビリティに優れているとはいえません。 jQueryプラグインのjquery.showcaseを使用すると、今何を見ていて、後何枚あるのかを明示することができ、わりとユーザビリティに配慮できます。 sponsors 使用方法 jquery.showcaseからjquery.showcase.1.0.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.showcase.1.0.js"></script> <sc
jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. What's New in jQuery UI 1.14? Compatibility with recent jQuery versions (up to 3.7): Usage of deprecated jQuery API
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
Webデザイナーのための美しいjQueryプラグイン22 – creamu
Tutorial9で、Webデザイナーのための美しいjQueryプラグインが紹介されています。 ざっといくつかご紹介。 » jQuery.popeye – an inline lightbox alternative lightboxをギャラリーのようなインターフェースに代替したjQuery.popeye » jPlayer – jQuery mp3 player plugin jQueryで作るmp3ミュージックプレーヤー » jQuery form plugin jQueryで非同期通信のフォームを実装 » easyDrag jQuery plugin 簡単にコンテンツをドラッグ&ドロップできるようにするプラグイン » jQuery accordion plugin – vertical 垂直方向のアコーディオンメニュー » Switch stylesheets with jQuery
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
Webシステム開発者に送る便利なテンプレート·Web App Theme MOONGIFT
正直、Webデザインは苦手だ。システムは構築できても、その後のデザインで行き詰まって頓挫したサービスは数知れない。最近ではWebデザインテンプレートを使うようになったが、汎用性の低いものが多くカスタマイズも困難な場合が多い。 Basecampにも似たWebアプリケーションテンプレート 例えばWebシステムの管理画面を考えた場合、ユーザ向けの画面は気合いが入っているのに管理画面は酷いものが多い。そこで使ってみたいのがWeb App Themeだ。 今回紹介するオープンソース・ソフトウェアはWeb App Theme、テーマにも対応した汎用的テンプレートだ。 Web App ThemeはLighthouse、Basecamp、RadiantCMSにインスパイアされたWebアプリケーション向けテンプレートだ。右上のユーザ情報、タブを使った機能の振り分け、個別のタブの中にさらにセカンダリーのタブを
bassistance.de » jQuery plugin: Accordion
This plugin is now part of jQuery UI and this standalone version won’t be updated anymore. The page will remain as a reference. This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs. Options are available to specify the structure, if necessary, the active element (to display at first) and to customize animations. The navigation-option automaticall
javascript タブUI導入の参考になるサイト - WEBデザイン BLOG
JavaScript でタブ切り替え UI を実装する | WWW WATCH(http://hyper-text.org/archives/2007/09/javascript_tab.shtml) のエントリーをみていいなコレっと思ったので、タブUI導入で参考になるいいサイトなんかを紹介してみたいと思います。 以前のエントリーブログGTD WEBデザイナー独立するために（その１） - WEBデザイン BLOG「jQuery・javascriptを使ってのさまざまなアプローチ方法を実践する」の中でとWEB標準でのC O U L D長谷川様の「解体Apple.com」のPDFを見て、ユーザーアプローチに使えるってことで紹介しようと思っていたネタです。実際に、自分サイトを立ち上げる時もタブの実装は考えていましたので今日の勢いで。 タブでもさまざまなタイプがあって、導入してみたいものと実際に使
jScrollPane
jScrollPane is a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style. You can easily control the apperance of the custom scrollbars using simple CSS. jScrollPane is crossbrowser, working on all browsers that support jquery and it also degrades gracefully. If a user's browser doesn't support jQuery or has J
Parker Fox Recruitment Consultancy – Manchester
The North West’s Premier Recruitment Consultancy. For over 30 years we have specialised in matching candidates with outstanding companies. Take a look at our current roles to find your perfect role today. 30 years of experience within the security systems sector. We know the market. Whether you are looking for one person or an entire specialised team, we have the ability to source and match high-c
第2回 Lightbox風プラグインでダイアログ表示（1） | gihyo.jp
はじめに 第2回はLightbox風に画像などを表示するプラグインと、一歩進んだ利用方法を紹介します。 LightBoxは、今や同一ページ内で画像などを上乗せした形で表示させる表現効果の総称となっており、Javascriptの定番ライブラリの一つとなっています。 図1 元祖Lightbox お薦めLightbox風プラグイン Lightbox風の表現を実現するJavascriptライブラリは実際に探してみると、非常に多くのものを見つけることができます。この中からjQueryのプラグインとして開発され、さらに特徴的な以下のプラグインを3点ピックアップし、今回と次回、2回にわたり解説します。 jQuery Fancyzoom jQuery Fancyzoomは画像表示に特化しており、拡大表示のアニメーションが非常に凝ったものとなっています。百聞は一見にしかずなので、あえてアニメーションの説明を
タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」:phpspot開発日誌
タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」 2009年06月16日- jQuery TOOLS - The missing UI library for the Web タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」。 同様のライブラリは他にあるかもしれませんが、アニメーションや見た目の点で非常に洗練されていて覚えておく価値アリなものになってます。 Expose 該当部分だけを目立たせることが出来る ↓↓クリックするとクリックした位置以外がグレー表示になります Tooltip イカしたスタイルがかかったツールチップ Tab 綺麗なタブUI Overlay LightBox風のページ内ウィンドウ実装 Scrollable 少ないスペースでコンテンツをスクロールするウィジェット実
Create an apple style menu and improve it via jQuery - Kriesi.at - Premium WordPress Themes
Create an apple style menu and improve it via jQuerySince I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done. Since the Apple-flavored Leopard-text-in
stu nicholls dot com | menu - Professional dropdown #2
Information The second menu in this series using my javascript routine to write the IE5.5 and IE6 specific styles for us and monitor the mouse hover states. As with the first dropdown menu, if you examine the stylesheet you will only see the li:hover styling. This menu also styles the path taken through the menu so that it works in IE5.x and IE6 as well as IE7 and all other browsers. This is a
わたしのこと。詐欺じゃない！無料占いが一番良かった – 無料占いラボ
良く当たる占い師、電話占いウィルで人気・・・・・・。 そして、この先運勢がさらに上がると言ってたけど。 照山先生の鑑定。 典型的な関係の修復もできるのが現状なのですが、凄く見えてるなあと驚きました。 先輩と二人の口から伝わったものがメインになっています。 数日前の話。 宮益先生～。 ここで聞いてくる会社は危ない。 不景気なのに客多いのがLunette先生でしたら、恋愛面でも特に複雑であればあるほどに聖呼（せいこ）霊能者は電話占いを利用した結果を伝えてきた.生年月日などからの評判で聞いてこないからオススメ・・・・。 音波先生（おとは）先生霊場天扉は、先生によって違いがあります自分専用の鑑定は、パートナーとの親密度がアップして下さいます。 ここはアドレスいらないから信用してると聞いたけどホントかな？。 的確な判断をつけたいという方は多いことかと思われるでしょうか！見えている先生プロフィールを見
ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集:phpspot開発日誌
25 jQuery Tutorials for Improved Navigation Menus ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集が紹介されています。 How to Make a Smooth Animated Menu with jQuery アニメーションする、おしゃれなメニュー Create an Apple Style Menu and Improve it via jQuery Apple風のクールなメニュー。アニメーションしつつ、アイコンも表示してくれなかなかクール Create a Slick Tabbed Content Area Using CSS and jQuery 少ないスペースにタブを設置してメニューにしている例。アニメーションもあり。 Using jQuery for Background Image Animat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
moto-mono.net