なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！ | ゴリミー
今のウェブデザインの流行りは「レスポンシブ・ウェブデザイン」！ 昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった「必読！5分でわかる流行のレスポンシブWebデザインまとめ」に載っていた「NHKスタジオパーク」のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する！これは本当にすごい！！ まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。 少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。 さらに狭めてみると、右のサイドバーが完全に無くなった。 さらに狭めると今度は左のサイドバーが消えた。 ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。 これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さ
Twitter Bootstrapでカッコいいカルーセルを実装するサンプルとチュートリアル:phpspot開発日誌
Twitter Bootstrap 101: The Carousel | Webdesigntuts Twitter Bootstrapでカッコいいカルーセルを実装するサンプルとチュートリアルが公開。 Twitter Bootstrapのクールさを壊さないでなかなか良い感じに実装できます。いくらBootstrapが多機能だからといって足りないものもあったりしますが、そういうものを別プラグインで持ってきちゃうとそこだけ違和感が、っていう風になっちゃいますがこれなら安心。主にトップページなんかでプロダクトの説明なんかをする際に使えそう jQueryベースなので再利用も簡単ですね 関連エントリ レスポンシブなカルーセル実装jQueryプラグイン「Slastislide」 高機能なカルーセルを実装するjQueryプラグイン５０まとめ ホイールも効いて超いい感じのカルーセル実装jQueryチュート
拡大時にアコーディオンのように画像が広がるカルーセルを実装するjQueryプラグイン・Accarousel
クリックで画像を拡大する際に アコーディオンのように広がる カルーセルを実装するjQueryの プラグイン・Accarousel。機能 はシンプルですが、動きが好み だったので備忘録。 カルーセルを実装するjQueryプラグインです。 見た目は普通のカルーセルですが、画像をクリックすると以下のように拡大されます。 なんと言うか、横にブワッと広がる感じ。ブワッと。 頭悪いから上手く言えないのでサンプル見てください。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script type="text/javascript" src="jquery.cjAccarousel.min.js"></scri
jQueryでリンク先のファビコンをリンク脇にアイコンとして表示する方法
少し前にCSS-TricksにあったTipsを 見たんですが、利用している外部の サイトがあまり信頼性があると思え ないので代替案をいくつか書いてみ ようと思います。 この記事を見たんですが、 Favicons Next To External Links getFaviconっていうサービスを利用して短いコードでファビコンを取得する、っていう方法ですが、このサイトのサーバーが落ちたり、サービスが終了したら何も表示されません。GAE(Google App Engine)を使ってるみたいですけど、GAEはある程度無料だからどう、とかそういう意味ではなくてリスクの話。規模の大きな企業のサービスなら信頼できるんですけど・・海外サイトならgetFavicon.orgのほうがまだ信頼性はありそうですね。クライアントワークでは不安で使えない。と思った方も多いかと思います。 正直getFaviconって
jQuery Mobileでスマホサイトを作ろう！国内外で制作されているサイトやjQuery Mobileについて | jQeryMobileでサイトをつくろう
jQuery Mobileとは？ jQuery Mobileは、jQueryをベースとした、「スマートフォン向けフレームワーク」です。 もっと簡単に言うと、「スマートフォン向けコンテンツ制作の土台を作ってくれるソフトウェア」です。 スマートフォン向けの直観的かつ使いやすい、ネイティブアプリケーションさながらのページやUI※1が、瞬時にしてできあがります。開発者はわずかなHTMLやJavascriptを書くだけです。 「UI」 ※1ユーザーインターフェースの略。jQuery MobileはわずかなHTMLの記述のみで、リストやボタン、ナビゲーションバーなどのスマホ向けUIを自動構築してくれる。 2010 年10 月にアルファ版がリリースされ、2011 年11 月ついにjQuery Mobile 1.0正式版が公開されました。現在も、jQuery の開発者であるJohn Resig 氏（@je
グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト！ - Shinichi Nishikawa's
グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト！ 2011 10/11 グラフを描画してくれるjQueryプラグインを紹介します。 グラフを動的に作ってくれるものとしては、他のjQueryプラグインやGoogle Chartというサービスなどがあります。 が、今回の”jQuery Visualize”は、中でも一番使いやすそうでしたので、ご紹介します。 他のプラグインについては、【jQuery】IEでも使えるグラフ描画ツール | 岡山のWebプログラマーがつぶやくブログ | 神歌.blogでまとめて紹介されています。 作れるグラフの種類 グラフは以下のものを使うことができます。 棒グラフ 線グラフ 線グラフで線の下を薄く塗れるやつ 円グラフ デザインは二種類 冒頭写真の黒っぽいCoolなのと別に、白っぽいのも用意されています。 また、背景画
見逃してない？最近注目されているjQueryプラグイン・JavaScriptライブラリ
Retina.js | Retina graph... / lake.js / Timeline他...全5件 Retinaディスプレイかどうかを判別して、高解像度の画像（@2x）をサーバーにアップしておけば、自動的に呼び出してくれるJavaScriptライブラリ。
かわいらしいツールチップ
デモページ：Big Yellow Sweet Tooltipの使い方 外部ファイル スタイルシートをhead内に、スクリプトをページの下部に外部ファイルとして記述します。 <link rel="stylesheet" href="sweet-tooltip.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="sweet-tooltip.js"></script> HTML ツールチップはa要素を使用して実装します。 <a href="#" class="sweet-tooltip" data-style-tooltip="style name" data-text-tooltip="Tooltip's text to be disaplayed"
jQuery UIのデザインをオリジナルに変更したサンプル
分かりやすいタイトルが思い浮かばない ので適当な感じになりましたが。jQuery UIのデザインをちょっと今風に変更した サンプルが配布されていたので備忘録。 jQuery UI、凄く機能的で良いんですが、 用意されているデザインが若干使いにく いんですよね。 jQuery UIのデザインを変更するやつです。正直、公式で用意してくれているデザインは沢山あるんですが、どれも少々使いにくい感じなので自分で作るしか無いわけですが、結構面倒です。 で、今日紹介するサンプルはBootstrapっぽい感じで割りと使いやすいのではないかと思ってメモがてら記事にします。 Selene こんな感じ。以下動作サンプルです。 Sample 使い方は変わらないです。CSSだけSeleneっていうのを使えばいいだけ。 <link type="text/css" href="ui-selene/jquery-ui-1
サイトの表現力を高められるjQueryプラグインまとめ「Fresh and Useful jQuery Plugins and Tutorials」
TOP > plugin > サイトの表現力を高められるjQueryプラグインまとめ「Fresh and Useful jQuery Plugins and Tutorials」 ユーザーが滞在しやすいwebサイトの構築には、デザイン性の高さはもちろん、利用しやすいインターフェース設計が重要。そこで今回紹介するのが、サイトの表現力を高められるjQueryプラグインまとめ「Fresh and Useful jQuery Plugins and Tutorials」です。 （JQuery Plugin For Rotating Image） webサイトに動的な表現を加えられるさまざまなプラグインが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Password strength verification with jQ
多数のアイテムから目的の物を見つけやすくするjQueryフィルタリングプラグイン集:phpspot開発日誌
30 Useful jQuery Filter and Sort Plugins - tripwire magazine 多数のアイテムから目的の物を見つけやすくするjQueryフィルタリングプラグイン集 沢山のアイテムをずらっと並べただけだと探しにくいわけですが、フィルタリングをすることで目的の物をすぐに見つけられます。 画面遷移もないというのがいいんですが、そういった機能を実装するためのプラグインが３０個もまとまっていて、自分にマッチしたものを探せそうです よくこんなにあったもんだなという感じですが、便利に活用させていただきましょう 関連エントリ レスポンシブな背景画像スライドショーを実現するjQueryプラグイン「bgStretcher」 ユーザへの通知UI全部のせなjQueryプラグイン「noty」 レスポンシブなスライドショーを実装できるjQueryプラグイン「Responsiv
綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」:phpspot開発日誌
綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」 2012年01月10日- jQuery UI Bootstrap 綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」 Twitter Bootstrapでデザインがあまり出来ずともTwitter風の綺麗なUIが作れる事で話題を集めましたが、jQuery UIにTwitter BootstrapのCSSでをあてはめた物が出たようです。 Twitter Bootstrapのメリットを享受しつつjQuery UIも使えてしまいます。 サンプルでは１ページにjQuery UIのウィジェットが配置されているのですが、１ページにあることで、削ったり切り貼りすることでデザ
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
表示サイズに合わせてフォントのサイズやレイアウトを最適化できるjQueryプラグイン・jFL - かちびと.net
ちょっと気になってたjQueryプラグイン だったのでテストしてみました。表示 しているサイズに応じてレイアウトや フォントサイズを最適なものにしてく れる、というもの。Media Queryは使用 していないのでcssも綺麗に保てます。 場合によっては軽量化に繋がるかも、と思ったのでちょっとテストしてみたかったライブラリ。説明されてもあんまりピンとこないライブラリですけどｗなんというか、かゆいところに手が届く的なやつです。 このようにサイズを表示変えるとフォントサイズやdivの幅も指示通り変わってくれます。Media Query択一だと、どうしても面倒になってくることもあるので、こういうスクリプトも覚えておくと保険になるかもですね。スクリプトはたったの6KBですので軽量化にも役に立つかもしれません。 尚、IE6と7には対応していません。 日本語でも問題ありませんでした。以下サンプルどうぞ
階層構造が作れるテーブルを実現できるjQueryプラグイン「treeTable」:phpspot開発日誌
jQuery treeTable Plugin Documentation 階層構造が作れるテーブルを実現できるjQueryプラグイン「treeTable」 次のようなエクスプローラ風の階層を持ったテーブルを作ることができます。 カラムも別れており、それぞれ情報を表示でき、階層の折りたたみもできます。 テーブルを決められたルールに従って定義したら、$(element).treeTable();として初期化するだけです。 シンプルですがなかなか使えそうです 関連エントリ ヘッダ固定の分かりやすいテーブルを簡単実装できるjQueryプラグイン「jQuery.FixedTable」 縦長テーブルをスクロール対応にするシンプルなjQueryプラグイン「Lightweight Scrollable Tables」
[JS]HTML5の「プレースホルダーテキスト」をスクリプトで実装する旧式と今時の方法
HTML5のウェブフォームの機能「プレースホルダーテキスト」をHTML5に対応していないブラウザにも実装する旧式の方法、ModernizrとjQueryを使った今時の方法、の二つを紹介します。 HTML5対応ブラウザでは、「placeholder」の値がテキストフィールドに表示されます。 <form class="form"> <p><input type="text" placeholder="Your name please"></p> <p><input type="text" placeholder="Enter your email"></p> <p><input type="search" placeholder="Search"></p> <p><textarea placeholder="Write your comments here"></textarea></p> <
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrapをもっと活用するためのカスタマイズツールやリソースのまとめ
IDEA * IDEA