Bootstrapのナビメニューにアニメーションを付けてかっこ良くする「Hoverify Bootnav」:phpspot開発日誌
Hoverify Bootnav 1.0.0 Bootstrapのナビメニューにアニメーションを付けてかっこ良くする「Hoverify Bootnav」 ナビゲーションメニューに様々なアニメーションを付けることが出来ます。 関連エントリ 画面サイズ目一杯使えるレスポンシブなナビゲーションメニュー実装「okayNav」 ナビゲーションとコンテンツが同期して分かりやすいナビ実装「NavSync」 レスポンシブで階層的なスライダーナビゲーション実装jQueryプラグイン「yohoho.slyder」 ページサイドにセクションのナビゲーションを自動生成する「Section Scroll」 CSS、jQueryでレスポンシブな高品質サイドバーナビゲーションを作成するデモ
これは衝撃的！CSS開発を爆速化する「Emmet LiveStyle」:phpspot開発日誌
Emmet LiveStyle ? live bi-directional CSS edit of new generation CSS開発を爆速化する「Emmet LiveStyle」。 ブラウザのDOMインスペクタの方でCSSを修正するとSublimeTextに反映され、またSublimeTextを編集するとブラウザに即反映されるというプラグインです。 ブラウザで編集しちゃえば簡単にカスタマイズはできるけど、テキストエディタにコピーが必要で、逆にテキストエディタで書くのもブラウザのリロードが必要といった具合に手間がかかりますが、その手間がなくなります 更に、複数のブラウザウィンドウに即座に反映されるため、横幅を小さくしたブラウザ、通常のブラウザを開けば、レスポンシブデザインのプレビューが同時に終わります。 片方のブラウザのDOMインスペクタでCSSをカスタマイズしてももう一方のブラウザ
レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」:phpspot開発日誌
FooTable | Themergency レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 レスポンシブなWEBデザインを作る際に一番やっかいなのではというのが、テーブルですね。 折り返しが出来ないのでどうやってレイアウトしようと悩むところですが、画面が小さい時は主要な物を選んで出す、といった事ができます テーブルのth 要素で出す出さないの定義をすることができて、あとはプラグイン関数で初期化するだけというお手軽さです。 iPhone。主要な部分を見せつつ、折畳みで他の要素もみせるUI ちょっと画面の大きなタブレットでの画面。表示要素は多くなるけどまだ折畳みで他の要素をみせる状態 PCの大きなディスプレイですべて開いた状態 次のように、data-class、data-hide の属性を付けておくことで挙動をカスタマイズ可能です 関連エントリ WEBデザインす
ソーシャルな活動を１個にまとめて配信できるjQueryプラグイン「LifeStream」:phpspot開発日誌
christianv/jquery-lifestream - GitHub ソーシャルな活動を１個にまとめて配信できるjQueryプラグイン「LifeStream」。 ソーシャルサイトは各種あるわけですが、最近のアクティビティを１個にまとめてぺたっと貼りつけたい場合に使えそう。 Delicious, Flickr, Github, Google Reader, Last.fm, Stackoverflow, Twitter ,Youtube に対応しているそうです。今のところFacebookは未対応。 使い方は .lifestreamメソッドのオプションとして、list プロパティにサービスとユーザIDをつなげて配列で渡してあげるみたいです。 ひと目で最近の活動がわかるのは便利ですね。 関連エントリ Twitter・mixi・facebook・はてブ等のソーシャルボタンを瞬時に埋め込めるW
リストを複数行に自動で分割してくれるjQueryプラグイン「Easy List Splitter」:phpspot開発日誌
リストを複数行に自動で分割してくれるjQueryプラグイン「Easy List Splitter」 2012年09月13日- jQuery plugin: Easy List Splitter リストを複数行に自動で分割してくれるjQueryプラグイン「Easy List Splitter」。 ul li 等でリスト定義すると縦に長〜くなってしまいますが、これを複数行に分割して横長にしてくれるプラグイン。 レイアウト上、分割したいんだけど、めんどくさいんだよなぁ、という方も、ライブラリを読み込んで、$(element).easyListSplitter({ colNumber: 3 }) みたいにやれば３列にしてくれます。 なんということでしょう。 地味〜かもしれませんが、これは便利だと、殆どのマークアップエンジニアの方は首を揃えて頷いてくれるでしょう。 関連エントリ ツイッターのつぶやき
WEBセーフなフォント一覧まとめ「CSS Font Stack」:phpspot開発日誌
CSS Font Stack :: A complete collection of web safe CSS font stacks :: Web Fonts WEBセーフなフォント一覧まとめ「CSS Font Stack」。 WEBセーフな英字フォントがプレビューつきでまとまっていて、クリックすると font-family: 〜の形式でクリップボードにコピーできます。 WEBフォントもいいんですが、そもそもマシンに入っているフォントが使えれば軽くてそっちの方がよい場合も多そうです。 (i) のアイコンにカーソルを合わせるとMacとWinでのシェアが表示されて分かりやすい Copy to Clipboard すると次のようなテキストがコピーされます。 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 関連エントリ フ
背景画像を全エレメントにブラーをかけつつ摘要できるjQueryプラグイン「blur.js」:phpspot開発日誌
blur.js 背景画像を全エレメントにブラーをかけつつ摘要できるjQueryプラグイン「blur.js」。 次のように、全体の背景をベースに、ブロックにブラーがかかった背景画像を設定するプラグインです ぼかしのレベルは制御可能です。 数年後、WEBページってどんな感じになってるんだろうって、こういうのを見るといつも思ってわくわくします 関連エントリ 画像ホバー時に２０種類以上の多彩なエフェクトがかけられるjQueryプラグイン「Adipoli」 時間の入力を楽にすることが出来るjQueryプラグイン スライダーとアコーディオンを組み合わせたカッコいいUI作成jQueryプラグイン「Slidorion」
他アイテムをボカして強調表示するCSS3＆jQueryサンプル:phpspot開発日誌
Item Blur Effect with CSS3 and jQuery 他アイテムをボカして強調表示するCSS3＆jQueryサンプル 次のようにアイテムを浮き上がらせることでアイテムを強調させる例です。アイテムが多いと分かりづらい場合がありますが、強調表示してあげることで分かりやすくできます。 色々な場面で活用することができそうですね どんどん表現力が上がっていくのはいいことですね。 関連エントリ カッコよくデザインされたピュアCSS3なアコーディオン実装デモ リボンが可愛いCSS3によるドロップダウンメニュー実装チュート フルスクリーン背景がスライドショーになるCSS3サンプル CSS3のブラウザ別対応がアイコンで超分かりやすいサイト
スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」:phpspot開発日誌
Curtain.js スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」 単なるスクロールする縦長ページではなく、スクロールするとブロック要素が別々に動いて面白い演出が作れます。 左下のナビゲーションでページ送りをしたりも出来るみたい 今なら、これを使ってサイトを作れば、玄人なWEB業界の人も目を丸くするかもしれませんね。 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル レスポンシブなスライドショーを実装できるjQueryプラグイン「ResponsiveSlides.js」 iTunesストアのトップのスライドショー風ウィジェットを実装できるjQueryサンプル HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」
プロクオリティでフリーの(X)HTML/CSSテンプレートいろいろ:phpspot開発日誌
55 High Quality Free and Premium (X)HTML/CSS Templates - DesignModo プロクオリティでフリーの(X)HTML/CSSテンプレートがいろいろまとまっています。 下の方は有償っぽいので注意ですがフリーも沢山掲載されています。正直どっちがフリーか有償かっていうのは区別がつかないぐらいフリー版もハイクオリティになってます 単なる枠でデザインしただけでなくCSSテクニックや画像も活用してフリー、というのはありがたいですね。 世の中どうなってるのという感じです 関連エントリ カッコいい管理画面のHTMLテンプレート総まとめ 超使えそうな新しめでフリーのHTML/CSSデザインテンプレート集 綺麗にデザインされたフリーのHTML/CSSテンプレート１０
ページ幅に応じてYoutube動画などを自動リサイズしてくれるjQueryプラグイン「FitVids.js」:phpspot開発日誌
ページ幅に応じてYoutube動画などを自動リサイズしてくれるjQueryプラグイン「FitVids.js」 2011年09月13日- FitVids.JS - A lightweight, easy-to-use jQuery plugin for fluid width video embeds. ページ幅に応じてYoutube動画などを自動リサイズしてくれるjQueryプラグイン「FitVids.js」 通常、リキッドなレイアウトではテキストは折り返されてもビデオは縮小されません。先日FitTextというソリューションを紹介しましたが、これはテキストと画像のみというものでした。 FitVids.jsを組み合わせることで、動画もページ幅に応じてリサイズが可能 ブラウザを縮小で動画も縮小 ソースを見ると、object, embedや iframe srcの vimeo や youtube
ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６:phpspot開発日誌
56 Pure CSS Effects Javascript Alternatives Including Demos | Designs Mag (Designs Magazine) ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６。 全部CSSでやっちゃうのはむしろ手間になったりしそうですが、CSSでもできるという引き出しをもっておくと思いの外簡単にできることもおおそうです。 というわけで、ひと通り見ておいてもよいかと思います。 どちらがらくちんで、マークアップの論理構造的に正しいか等を合理的に考えて、選べるようにしておくとよさそうですね。 関連エントリ ピュアCSSでスライドアウトインタフェースの実現 ピュアCSSなドロップダウンメニュー実装例 ピュアCSSでonclickイベントをシュミレーションするデモ
ピュアCSSでスライドアウトインタフェースの実現:phpspot開発日誌
Pure CSS Slide-out Interface ピュアCSSでスライドアウトインタフェースの実現。 ページの再度にちょこっとタブ風の画像を置いておいて、クリックするとアニメーションしながら表示されるあのUIがJSなしで実装されています。 具体的なサンプルCSSとマークアップが提供されています。 :hover と transition を使って実装されているようですが、こんなに簡単にできるのはいいですね。 IE7,8でもアニメーションはしませんが一応動くように作られています。 関連エントリ ピュアCSSなドロップダウンメニュー実装例 ピュアCSSでonclickイベントをシュミレーションするデモ JavaScript使ってないのに使ってる風のピュアCSSなテクニック集
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」:phpspot開発日誌
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 2011年04月12日- Slider Kit, sliding contents with jQuery 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 このプラグインを使うことで実に様々なスライダーが実現出来ます。以下にサンプルを。 一見普通の画像 カーソルを合わせるとページ送りが出るUI。これだけでもシンプルでかなり使えそう。無駄なUIは不要という方に。 ページインデックスを次のように○で表示したスライダーも作れます。 ページ番号がついたもの サムネイルがついた物 サムネイル＋ラベル付き サムネイルを横に配置したもの シンプルにサムネイルを敷き詰めた例 何らかの製品等の特徴を表示するようなおなじみのタブUI型スライダーも。 画像だけでなくHTMLも使える タ
ページに貼り付けができるFlashベースのMP3プレイヤー:phpspot開発日誌
MP3 Player It's an audio player for MP3 file, intended for the diffusion on websites. ページに貼り付けができるFlashベースのMP3プレイヤー。 次のようなタグを貼り付けるだけで簡単にMP3をページに貼り付けできます。 <object type="application/x-shockwave-flash" data="player_mp3.swf" width="200" height="20"> <param name="movie" value="player_mp3.swf" /> <param name="FlashVars" value="mp3=test.mp3" /> </object> mp3ファイルの指定も簡単ですね。 スキンも豊富にあって、サイトのデザインに合うものを選べばよいです
WordPressにFAQ管理機能を追加するプラグイン「FAQ Manager」:phpspot開発日誌
WordPress ? FAQ Manager WordPress Plugins WordPressにFAQ管理機能を追加するプラグイン「FAQ Manager」。 プラグインをインストールすると管理メニューにFAQsメニューが追加され、FAQの追加、管理、FAQのカテゴリ、タグ等の設定が出来ます。 この機能によって、WordPressをベースとしたFAQサイトが作れそうです。 記事やページ以外の括りとして、FAQのページ管理したい場合に使えます。 作成したFAQのURLは、「http://example.com/question/質問タイトル」 のようになり、FAQ内で各々にカテゴリやタグの設定が可能。 /question/ 以下をgoogle カスタム検索などで対象にすれば検索機能も付けられますね。 お問い合わせを出来るだけ減らし、無駄なやりとりを防ぐFAQですが、別に用意するのでは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像のホバーエフェクトが多数収録された「Imagehover.css」:phpspot開発日誌
HTML5動画を背景にできるjQueryプラグイン「vidbg.js」:phpspot開発日誌
木目、紙、錆などフリーで使えるリアルなテクスチャ画像集:phpspot開発日誌
小さくで可愛いグラフが描けるjQueryプラグイン「Piety」:phpspot開発日誌