なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！ | ゴリミー
今のウェブデザインの流行りは「レスポンシブ・ウェブデザイン」！ 昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった「必読！5分でわかる流行のレスポンシブWebデザインまとめ」に載っていた「NHKスタジオパーク」のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する！これは本当にすごい！！ まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。 少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。 さらに狭めてみると、右のサイドバーが完全に無くなった。 さらに狭めると今度は左のサイドバーが消えた。 ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。 これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さ
jQueryでスムーススクロール [Cool Web Window]
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
[jQuery]透過PNGに対応したクロスフェードボタン – smoothRollOver.jsロールオーバーすると滑らかに画像が切り替わるライブラリ | レポート | 日本電子工藝社
ロールオーバーすると滑らかに画像が切り替わるライブラリ ボタン・リンクのロールオーバー効果を表現する際、CSSやJavaScriptによる画像の切り替えだけでは物足りない時があります。ロールオーバー時のデザインを活かすため、ボタンにロールオーバーすると滑らかに画像が切り替わるライブラリを作成しました。みなさまのデザイン表現の幅を広げるお手伝いができれば幸いです。（※個人利用・商用利用を問わず自由にご利用いただけますが、自己責任の上でご使用ください。） 動作サンプル このライブラリは、JPEG・GIF・透過PNGに対応しています。 JPEG/GIFの場合 透過PNGの場合 InternetExplorer6～8のPNG対応について InternetExplorerは、バージョン6までは透過PNG自体に対応しておらず、7・8になってもフェードイン表現の際に透過部分がギザギザになってしまう仕様で
403 Forbidden
＼閉鎖予定のサイトも売れるかも？／ アクセスがないサイトもコンテンツ価値で売れる場合も… ドメインの有効期限を更新してサイト売却にトライしてみましょう
クロスフェードでロールオーバーを行う「rollover2.js」
クロスフェードでロールオーバーを行う「rollover2.js」 Check Tweet 配布元：クロスフェードするロールオーバー処理をお手軽に実装するJavaScript ライセンス：MIT License rollover2.jsはロールーオバー処理にクロスフェードを適応できるJavaScriptライブラリだ。 使い方 配布元よりダウンロードした「rollover2.js」をhead要素などで読み込みます。UTF-8以外の文字コードのサイトでこのライブラリを利用する際には「charset=”utf-8″」の記述を忘れずに行う必要がある。 <script type="text/javascript" src="rollover2.js" charset="utf-8"></script> 画像はデフォルトの画像を「bottonA_rollout.jpg」など拡張子の直前に「_rollou
jQuery UI 日本語リファレンス
jQuery UI とは、jQuery公式のユーザインターフェース（UI）用ライブラリのこと。カレンダー、タブ、アコーディオン、ダイアログ、エフェクト、並べ替え、表示切替、ドラッグ移動、ドロップ、サイズ変更、スライダーなど、多様な UI を簡単に導入できる。 jQuery UI 導入方法 Accordion / アコーディオン AddClass / クラス追加 Autocomplete / オートコンプリート Button / ボタン Datepicker / カレンダー Dialog / ダイアログ Draggable / ドラッグ移動 Droppable / ドロップ Effects / エフェクト Hide / 非表示 Menu / メニュー Position / 位置指定 Progressbar / プログレス・バー RemoveClass / クラス削除 Resizable /
Skitter
30以上のアニメーションにプログレスバーの追加など多機能スライドショーSkitterが本当にすごい！導入方法など 公開日：2012年3月19日 カテゴリ：Web制作が捗るツール ぱくたそのトップページでも利用しているjQueryスライドショー"Skitter"が新しくなりましたよ。30種類以上のアニメーションにプログレスバーまで実装され『もうFLASHやめてこれでいいんじゃね？』的な高機能っぷりです。今回は導入方法とアニメーションのサンプルを動画にてUPしておきました。参考になったらGrow！してね。ｗ Skitter - Slideshow for anytime! Skitterを導入してWEBサイトをカッコよく魅せよう どこのWEBサイトもトップページに綺麗な写真をスライドショーさせるスタイルは定着しているけれど、未だにFlash使っていたり、フェードだけの画像切り替えで動きがなかっ
Xlune::Blog
可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる（？）ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008
当ブログで今まで紹介したjQueryプラグイン25選のまとめ 2011/09 – 2012/03 – bl6.jp
2011年9月〜2012年3月までに当ブログで紹介したjQueryプラグインをまとめてみました。一度整理する意味も含めて、まとめておくと今後なにかと便利かなと思いましたので。全部で25個ありました。どれも簡単なプラグインですが、個人的にはみんな使いやすくて便利なプラグインばかりです。ということで以下日付が古い順からのまとめです。 [ads_center] jQueryプラグインまとめ ColorBox Lightbox風のイメージギャラリーです。 Lightbox風のjQueryプラグインColorBoxの使い方 bxSlider シンプルでカスタマイズもしやすい大人気のjQueryスライダーです。 カスタマイズも自由にできるjQuery「bxSlider」の使い方 jQuery Masonry 各ボックスの要素を雑誌風に整列させることができます。 レイアウトを超簡単に雑誌風に整列してくれ
[js] 画面全体をオーバーレイする | おれせか
Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-settings.php on line 472 Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-settings.php on line 487 Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-setti
テーブルを使ったいろいろなjQueryプラグイン26個まとめ | Web活メモ帳
料金表や一覧を表示する際に欠かせないテーブルコーディングで、検索や並び替え、ページング、グラフ表示など色々なものがあったので、探しやすいようにjQueryプラグインをまとめてみました！ jQuery Visualize HTML5とjQueryを使ってテーブルの値をグラフで表示する事が出来ます。 jquery.csv2table.js エクセルなどで作ったCSVファイルを読み込み、クロスブラウザなテーブル表示を行うjQueryプラグイン。 行の絞り込みや文字列検索などかなり高機能になっています。 jExpand 表、画像、リスト、図やその他の要素を折りたたみ表示する事ができます。 Fixed Header Tables ヘッダーを固定して表示します。Excelでは良く使いますね。 縦に長い表を使う場合に非常に便利です。 treeTable テーブルの中にツリー構造を実装できます。 Flex
「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね
Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。jQuery
WebデザインにjQueryを使いたい人向けの動画チュートリアルサイト・jQuery for Designers
jQueryをWebデザインの為に使い たい、という方にお勧めのサイト・ jQuery for Designersのご紹介。 jQueryは様々なプラグインがあり ますが、ここはWebデザインに特化 しています。 jQuery for DesignersはデザイナーのためのjQuery情報サイトです。まだ数自体は少ないのですが、チュートリアルやデモを中心に情報を配信していますので今後の期待も込めてご紹介します。 Webデザイナー用のjQuery情報サイトです。右上に「Easy」、「Medium」、「Hard」とありますが、これは導入難易度を示しているようです。 チュートリアルは動画とテキストがあります。動画コンテンツ上部のdemo、View Codeでデモやコードのページに切り替えます。 例えば以下のような情報があります。 Automatic Infinite Carousel 自動でスラ
jQuery基礎文法最速マスター[to-R]
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
![jQuery基礎文法最速マスター[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
jQueryベースのグラフ作成ライブラリ·jqPlots MOONGIFT
Web上で見やすいグラフを作成する手法としては、画像で生成する、Flashで生成するかのどちらかが多かった。稀にJavaScriptで生成するタイプもあったが、Canvasタグを使う関係上、IE6では表示できず業務アプリなどでの利用は難しかった。 JavaScriptのみでグラフを表示する だが、例えCanvasを使っていたとしてもライブラリが対応していれば問題ない。そこで試したいのがjqPlotsだ。 今回紹介するオープンソース・ソフトウェアはjqPlots、jQueryベースのグラフ描画ライブラリだ。 jqPlotsはCanvasタグを使っているが、対応ブラウザはIE6〜IE8、Firefox、Safari、Operaとなっている。筆者環境では試していないが、IE6でも恐らく大丈夫なのだろう（ぜひ試していただきたい）。これだけ多数のブラウザに対応していれば一般向けWebサービスでも使え
Monolog: [jQuery] テーブルの行（TR要素）をスライドアニメーションで表示/非表示させる方法(2)
前回はサンプルだけ提示したが、今回はそのソースコードを解説する。 念のため、対応ブラウザ このページのサンプルは、下記ブラウザで確認した。 Firefox 2.0.0.10, Firefox 3.0.10 (Windows XP sp3, Mac OS X v10.5.6) IE6, IE7, IE8 (Windows XP sp3) Safari 3.2.1 (Mac OS X v10.5.6) jQueryのバージョンは、1.3.2である。 組み方のポイント 行の表示/非表示をスムーズに見せるには、jQueryの組み方だけでなく、HTML, CSSでもいくつか注意すべきところがある。概要は以下の通り。 [HTML] 各セル内部をdivで囲み、divをスライドさせるようにする。 [CSS] セルのパディング(cellpaddingまたはCSSのpaddingプロパティ)は0pxにする。
[jQuery]要素内部の先頭にコンテンツを追加
流れでもう一発。 概要 ある要素の先頭にコンテンツを挿入（追加）する方法と、使用例をメモします。 使用例には、一つ前のエントリーの「[jQuery]ドキュメント読み込み後スクリプトを実行」の内容も含まれています。 方法 function example() { $("要素").prepend("追加するコンテンツ"); } 使用例 ドキュメント読み込み時にul.attention liの先頭に「※」を追加する例。 $(document).ready(function() { $("ul.attention li").prepend("※"); }); 例によって、「こうした方がいいよ」「間違ってるよ」などございましたらご指摘よろしくお願いします。
![[jQuery]要素内部の先頭にコンテンツを追加](https://cdn-ak-scissors.b.st-hatena.com/image/square/f030b131c35083706d324b18308f4e9a924a9c82/height=288;version=1;width=512/https%3A%2F%2Fhappyquality.com%2Fwp-content%2Fthemes%2Fsimplicity2-child%2Fimages%2Fog-image.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://solidstate.jp/
http://tobia.github.io/CrossSlide/
http://www.designwalker.com/2010/06/jquery-forms.html
