AIRTIGHT - SimpleViewer flashno
Twitter BootstrapでさくさくWeb開発 : アシアルブログ
<div class="container-fluid"> <div class="row-fluid"> <div class="span4"> Span4の中身 </div> <div class="span8"> Span8の中身 </div> </div> </div> Preタグで囲むコード エンジニアの皆さんなら、ブログにコードを書きたいですよね。 Twitter Bootstrapでも、かっこ良くコードを見せる手法を提供しています。 ・codeタグで囲む 赤くなります。 ・preタグで囲む 囲み枠がつき、灰色になります。 ・Preタグ+Google Prettifyを使う preタグのclassに、prettyprint linenums を入れましょう。 これが超かっこいい！！コードを見せるならこれがよさそうですね！ さて、かっこいいGoogle Prettifyですが、こ
Rails3 と jQuery で真面目にオシャレなエロサイトをつくってみました
いつぞやの飲み会で、 これだけウェブの技術が進化しているのだから、もっとオシャレなエロサイトがあってもいいんでないかい？ << という話になりまして。 だけどどうせ作るんならということで、Rails3 と jQuery を使って結構マジメにつくってみました。 （※大人の事情により、リンクはやむなく削除しました） 当初はエロにオシャレは必要ないのかなーと思ったときもありましたが、いざつくってみると、やっぱり選べるならオシャレなやつの方ががいいよね、という結論に落ち着きました。 今回つくったのは試験的なものなので 90日間限定でしか公開しないつもりですが、日本のエロサイトが今後もっとオシャレに発展していくきっかけになってくれたら嬉しいです。 以下、サイトのコンセプトや使っている技術についてまとめてみます。 **Rails3 と jQuery で真面目にオシャレなエロサイトをつくってみました 1
超定番の jQueryプラグインをサンプルと一緒に集めました。（商用利用OKなもの多め） | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
超定番のjQueryのプラグインを厳選して集めました。 商用利用が可能なものを優先的にピックアップしています。 （利用する際はそれぞれライセンスをご確認くださいね） 超定番プラグイン アニメーションのイージングを簡単に扱えるプラグイン jQuery.easing jQuery.easing
2011年に配信したjQueryやWordPressなどのWeb制作向け情報・総まとめ
早いもので今年も残すところあとわずか となりました。今年は年をまたいで仕事 しないとならないので早めに総まとめ的 な記事を書いておきます。と言っても 完全に自分用のまとめですのでご覧に なっても役に立たないと思いますがｗ というわけで、後で復習するのに、探さなくていいようにしただけの自分用リンク集です。 jQueryとWordPressにやたら偏ってます。過去記事のまとめですので目新しいものは一切ありません。 ネタは省いてます。あと、種類で細かく分ける気力が残ってないので順不同です。 スマフォ向けが多いのでスマフォ関連は※印を振っておきました。復習用なのでリンクは全て当サイトの記事にしてます。他の方には二度手間ですがご了承下さいマウスを乗せるとキャプチャが表示されます。130個くらいです。普段から小ネタばっかりなのでそんな感じのまとめです。 【追記】（僕が）リンク見にくいので色を変えました
[JS]jQueryのプラグイン100選 -2011年総集編
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
[JS]使いやすく高性能なフォームが簡単に設置できるフレームワーク -jFormer
簡単なログインフォームをはじめ、お問い合わせフォーム、コメント用フォーム、ショッピングカート用フォーム、アンケート用フォームなど多種多様なタイプが用意された、バリデーション機能も備えたフォームのフレームワークを紹介します。 jQuery Form Framework - jFormer [ad#ad-2] jFormerの特徴 クライアントサイドのバリデーション サーバーサイドのバリデーション AJAXを使ったページ変更機能 CSSベースの簡単なカスタマイズ Botの防止（CAPTCHAは無し） 入力データのレジューム機能 フィールドのロック機能 フォームのテンプレートも多数用意 jFormerのデモ デモには、さまざまな実用的なフォームがあります。
David DeSandro: jQuery Masonry
Masonry is a layout plugin for the ever-popular Javascript library jQuery. Download jQuery Masonry Think of Masonry as the flip side of CSS floats. Where as floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. The result leaves no vertical gaps between elements of varying height, just like a mason fitting stones in a wall. Invoking Masonry only
1.5KBで実装できるスライドショー用JavaScript ライブラリ「TinySlider」:phpspot開発日誌
1.5KBで実装できるスライドショー用JavaScript ライブラリ「TinySlider」。 次のような、左右のナビゲーションとページ番号がついたスライドショーの実装スクリプトの紹介です。 jQueryプラグインではありませんが、jQueryバリに簡単に実装できる模様です。 var slideshow=new TINY.slider.slide('slideshow',{ id:'slider', // スライドショー用のdivのID auto:3, // 自動再生の秒数 vertical:false, // 垂直方向に移動するかどうか navid:'pagination', // ナビゲーションのID activeclass:'current', // ナビゲーションLIのアクティブなクラス名 position:0 // 最初のスライド位置 }); カスタマイズも容易ですね。 デモと
[JS]画像やテキストをフォーカスした際に不透明度をコントロールするスクリプト -Opacity Focus
画像やテキストをフォーカスした際に、不透明度をコントロールするスクリプトをdavid walsh blogから紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $(document).ready(function() { //area 1 $('.fade-area-1').children().hover(function() { $(this).siblings().stop().fadeTo(500,0.5); }, function() { $(this).siblings().stop().fadeTo(500,1); }); //area 2 $('.fade-area-2').children().hover(function() { $(this).siblings().stop().fadeTo(500
[JS]これ最強かものツールチップスクリプト -BeautyTips
シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト「BeautyTips」を紹介します。 BeautyTips demo BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基本性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチップ元の変更なども可能です。 ツールチップはcanvasで描かれており、画像は必要ありません。 対応ブラウザはIE6.x+, Fx3.x, Op8+, Safari3.xとのことで、canvas非対応ブラウザにはExplorerCanvasが使用されています。また、IE6のz-indexへの対応にbgiframe、ホバー処理にhoverIntentが使用されています。 ※Chrome 1, Fx2で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
会社ロゴマーク デザインアーカイブ
http://www.designwalker.com/2010/05/grid-design.html
CSS, JavaScript, jQuery, WordPressなどのよく使うコードをまとめたスニペット集
IDEA * IDEA
[JS]HTMLを汚さないで実装できる、シンプルでクールなツールチップのスクリプト -Simpletip
[JS]簡単に画像のプレビューを設置できる超軽量スクリプト -imgPreview