たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js
[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js
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
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例:phpspot開発日誌
CSS: Elastic Videos これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例。 ブロックのサイズが変更された際において動画を固定サイズにしてしまうとレイアウトが崩れてしまいますが、公開されているサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。 解像度の違う、iPhone等でも動作を確認しているそうで、どんな環境でも動画をページにフィットさせたい用途に有用です。 通常サイズ。ブロックいっぱいに広がる動画 幅をiPhoneなみに小さくしてみた例。動画も縮んでます。 IEでも動くみたいです。 これは覚えておいたほうがよさそうです。 関連エントリ フリーで新しめのXHTML/CSSで書かれたサイトテンプレート４５ ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６ Ajaxスタ
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」:phpspot開発日誌
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。 普通に並べるとちょっと残念なことに。空白ができちゃいます。 プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。 まず、必要な
[CSS]画像に美しい角丸とボックスシャドウを適用する方法
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。
ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」:phpspot開発日誌
PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_Sho... 次の記事 ≫：Windows7風ナビゲーション作成チュートリアル ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」。 このプラグインを使えば、画像のサイズをブラウザサイズの変更があったとしてもページのサイズに合うように調整してくれ、デザイン崩れを防ぐことが出来ます。 以下にその機能を紹介してみます。 活用例１ 背景画像自動 背景画像をブラウザサイズ変更に合わせて自由に伸縮 ブラウザのサイズを変えても違和感がないようにすることが可能 活用例２ ブラウザ幅にあわせた画像の自動伸縮 ページの右端に画像があって、自由に伸縮します。 サイズを変えてもこの通り、画像が残りスペースのサイズになります 活用例３ ブラウザ幅に合わせる、がオ
[JS]ホバー時に光源が移動するエフェクトがかっこいいスクリプト
マウスのホバー時に、光源がカーソルに追従するエフェクトがかっこいいスクリプトをcoders.meから紹介します。
一工夫でページのクオリティをアップする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
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
[JS]セレクトボックスにアイコンを配置してグラフィカルにするスクリプト -image combobox
セレクトボックスの各アイテムにアイコンを配置して、グラフィカルに認識しやすくするスクリプトをMarghoob Sulemanから紹介します。
利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」:phpspot開発日誌
Notimo Demos site 利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」。 次のリンクをクリックしてみてください。 → 通知を表示してみる ページの右上にフェードインで表示するのはなかなかインパクトが大きいですね。 スクロールしても、いやみではない感じにちゃんとついてきてくれます。 使い方もかなり簡単で、必要なJSとCSSを読み込んだ後、インスタンスをnewして show メソッドを呼び出すだけです。 showは２回連続で呼び出しても、ちゃんと１個目と区別して表示してくれます。 <script type="text/javascript"> var notimooManager = new Notimoo(); // 通知を表示 notimooManager.show({ title: 'タイトル', message: 'メッセージ
JSでアニメーションするならコレかもというぐらい多機能な「GX」ライブラリ:phpspot開発日誌
GX - Full-Featured Javascript Animations Framework JSでアニメーションするならコレかもというぐらい多機能な「GX」ライブラリ。 jQueryと組み合わせて使うアニメーションライブラリです。 jQueryやscript.aculo.usにもアニメーション機能は備わっているけど、ここまでではないというアニメーションに特化したアドオンです。 勿論、jQuery単体でも、組み合わせて実現できるのかもしれませんがアニメーションに特化している分簡単に出来ます。 以下でその凄さが分かるはず $('#el1').gx({'width': 200, 'height': 200, 'border-width': 8}, 2000, 'Linear', function(el) { el.html('Completed!'); });
これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」:phpspot開発日誌
これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」 2009年03月12日- jQuery Context Menu Plugin これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」。 ちょっと前までだと独自の右クリックメニューを作るのはすごく大変でした。特にクロスブラウザで動作することなんかを考慮すると本当に大変でした。 が、このライブラリを使えば簡単に実装できてしまいます。 特定のエレメント上のみに右クリックメニューを設定できるという、柔軟なつくりになっています。 どのアイテム上でクリックしたかっていうのがイベントハンドラで受けられるところも汎用的になっていていいです。 このライブラリ１つとってみても、jQueryを使う意味が出てきそうです。 jQueryは本当にデフ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5509.me
JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」:phpspot開発日誌
Use jQuery
[JS]高さの異なるカラムを揃えるスクリプト -equalHeights.js | コリス