一発でレスポンシブルなデザインのチェックが可能になる「Responsivator」:phpspot開発日誌
Responsivator 一発でレスポンシブルなデザインのチェックが可能になる「Responsivator」。 幅を自分で調整しなくてもOK。開くとIFRAMEで複数パターンのWindowサイズでサイトを開いてくれます。 いろいろな方法があると思いますが、これはかなりお手軽でいいですね。 レスポンシブWEBデザインは今後必須のスキルというのは言うまでもありませんが、こうしたツールで楽にチェックを行いたいですね。 関連エントリ 最初からレスポンシブなCSSデザインのHTMLテンプレート３５ IFrame内もレスポンシブ対応にするjQueryプラグイン「ResponsiveIframes.js」 レスポンシブなレイアウトをON/OFFできるようにするJS「ReView」 レスポンシブなナビゲーションの見本やチュートリアル
Pinterest風のWordPressテーマ集:phpspot開発日誌
10 Pinterest-Like WordPress Themes Pinterest風のWordPressテーマ集。 超人気のPinterestのUIはなかなか凄いと思っていますが、WordPressであのUIをテーマにしちゃおうというテーマ集です。 WordPressテーマになっても良い感じです。 どれも有償ですが50ドル前後と安価なので自分で作るより時間を節約できそう 関連エントリ フリーでレスポンシブなWordPressテーマ２８ 新しめのWordPressテーマ４０ TwitterBootstrapを使ったWordPressテーマ「BootstrapWP」 フリーのハイクオリティでレスポンシブなWordPressテーマ３０
スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
これは必見のWEBデザインの近未来。HTML5で構築されたサイト45:phpspot開発日誌
45 Examples Of Websites Designed With HTML5 | Free and Useful Online Resources for Designers and Developers これは必見のWEBデザインの近未来。HTML5で構築されたサイト45 CSS3なんかも取り入れてデザインは去ることながら、動きもいい感じに実装されています。 WEB業界に身を置く方ならばデザイナーならずとも、出来ることを知っておくという意味で必見のサイトが多数。 多くのプロフェッショナルなサイトにおいてこうした物が近い未来当たり前になっていきそうな予感。 今後、より多くの知識と動かし方に関する引き出しを身に付けた上でクリエイティブな仕事が求められそうで大変な反面、面白いことにもチャレンジできそうな可能性を感じます。 ソニーのタブレットのサイト。超カッコいいです 他にも多数の動き
TwitterBootstrapベースのテーマやテンプレートが入手できる「WrapBootstrap」:phpspot開発日誌
Themes for Twitter Bootstrap - WrapBootstrap TwitterBootstrapベースのテーマやテンプレートが入手できる「WrapBootstrap」 Bootstrapベースで作ると素早く作れて高品質なものが出来ますが、Bootstrapベースで作られたテンプレート、管理画面等が入手できます（但し有償です） 有償といっても＄10程度なので、手間を削減したい場合は使えるかもしれません 今後はこうした無料テンプレートなどもどんどん増えてきそうですね。 関連エントリ 綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」 Twitter Bootstrap で使えるカラーピッカー＆日付ピッカー Twitter Bootstrapじゃなくfacebook Bootst
可愛いツールチップを実装したjQuery＆CSS3のデモ「Sweet Tooltip」:phpspot開発日誌
Sweet Tooltip a jQuery & CSS3 Tooltips ? Webstuffshare ? Learn and share. The simplest harmony. 可愛いツールチップを実装したjQuery＆CSS3のデモ「Sweet Tooltip」 次のような可愛いモダンなデザインのツールチップの実装デモが公開されています。 目立たせたい時や注目してもらいたい場合に使うと効果的ですね。通常のデザインも入っているようなので使い分けられそうです ファイルをDLすればデモのHTMLとCSS, JSが入っているので変更して容易に利用できます 関連エントリ もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 簡単コードで実装＆カスタマイズできるツールチップ実装jQueryプラグイン「Poshy Tip」 シンプルなツールチップ実装ができるj
ネットワーク図を美麗にビジュアル化できるJSライブラリ「sigma.js」:phpspot開発日誌
sigma.js | a lightweight JavaScript graph drawing library ネットワーク図を美麗にビジュアル化できるJSライブラリ「sigma.js」。 HTML5 canvasベースのスタンドアロンライブラリだそうです。マウスでドラッグしたりマウス位置に応じてインタラクティブに変化させることができます。 次のようにグラフィックが美麗であるので、個人的にはグラフィック作成用途に使っちゃってもいい気がしました。 関連エントリ 複数要素の関連をビジュアライズできるライブラリ「arbor.js」 HTML5のキャンバスと連動させて音声をビジュアライズしたデモ 組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」
組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」:phpspot開発日誌
jQuery Org Chart ? a plugin for visualising data in a tree-like structure The Silver Lining 組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」 次のような組織図を作ることができます。ドラッグ＆ドロップでインタラクティブに再配置することも可能です ドラッグ＆ドロップで再配置可能 気になるマークアップですが、ul, li を階層的に記述するだけでよいものになっています。これを上記のようにビジュアライズしてくれるのは楽ですね 関連エントリ アニメーションするスピードメーターを実装できるjQueryプラグイン「Speedometer」 複数要素の関連をビジュアライズできるライブラリ「arbor.js」
画像のキャプションが美しいスライダー実装jQueryプラグイン「RefineSlide」:phpspot開発日誌
RefineSlide 画像のキャプションが美しいスライダー実装jQueryプラグイン「RefineSlide」。 スライドのアニメーション自体が美しいのもさることながら、個人的に言及したいのはキャプション部分で、次のように、元画像に半透明に重なって実に美しいではありませんか。 もともとそういう画像を作っていたんじゃないの？と一昔前の人なら思ってしまうはずです 右上に出したキャプション。文字の選択もできます。 右下にキャプションを出してみた例。う〜んやっぱりこのデザインはいいですね CSS3を使ってこれだけ出来るっていうのはいいですね。将来的には、画像は必要最小限で、CSS3でエフェクトをかけて主に使うっていう使い方が結構増えてそうです しかもIE7以降サポートです 関連エントリ 複数アニメーションを組み合わせられるスライダーを実装できるjQueryプラグイン「Sequence.js」 レ
オシャレなアイコンが詰まったアイコンフォント「PulsarJS」:phpspot開発日誌
PulsarJS オシャレなアイコンが詰まったアイコンフォント「PulsarJS」 画像じゃなくて ttf 形式なので font-face 等で使えそうです。オーサリングツールで画像化しちゃってもいいですね。 拡大してもクオリティは落ちないですし。 ピクトグラムは背景を何色にしようが使える上に拡大しても品質が下がらない上に他のアイコンと混ぜても違和感が少ないわけで、これからはどんどん増えていくんでしょうね 関連エントリ いい感じのOpenType形式ピクトグラムアイコン集100個「Entypo」 PSD形式のフレッシュなフリーアイコン素材３７ 15000ものAndroidアプリ用アイコンセット「Android icons Set」 Windows Phone7っぽいmetroアイコンセット
HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」:phpspot開発日誌
PxLoader | A Simple JavasScript Preloader#sample1 HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 時代はHTML5ですよ奥さん、と電車の中でも聞くようになった今日この頃ですが、HTML5ゲーム等で画像を大量に使う場合でもプレロードして読込状態等も取得できる機能を提供してくれるのがこのライブラリです。 画像に加えてサウンドの読込にも対応しています。 ローディング状態を表示するデモがサイト上で見れます メニュー、ゲーム、トータルといった感じで分割も出来ます。読込に時間がかかってもこういう進捗があれば落ち着きますね ブラウザが対応していないっていうのもあってPCだとまだまだFlashですが、スマホで使っちゃえるかもしれませんね 関連エントリ HTML5のcanvasを使ったアニメーションするタグクラ
カッコいい管理画面のHTMLテンプレート総まとめ:phpspot開発日誌
カッコいい管理画面のHTMLテンプレート総まとめ。 これまで紹介したエントリや、新しく発見したエントリで紹介されているものを全てマージしてみました。 有償のものも混じってますが、カッコいい管理画面を作りたいといった際にカタログ的に使ってみてもいいかも。 独断ですが、クオリティ順に並べ替えてます。 Simpla Admin Boxie Admin Complete Liquid Admin InAdmin Admin (FREE) Adminizio Lite – Admin Template Admin Templates - Professional XHTML Back-end Template Spring Time – Simple Admin Template Internet Dreams Admin Skin Visual Admin ThePixelDeveloper Ad
３ステップではじめるレスポンシブWEBデザイン:phpspot開発日誌
Responsive Design in 3 Steps ３ステップではじめるレスポンシブWEBデザイン。 今後新しくサイトを公開する時はスマホ対応なんていうのは当たり前になってきている時代で、デザイナーさんにとっては必須であるレスポンシブWEBデザインを３ステップで簡単に説明してくれています。 CSSが分かる人ならさほど難しいものではないのでサクッと理解しちゃえます。 METAタグを付与 IEでもMedia Queriesを使えるようにスクリプトをインクルード レイアウトを作る css3 media query を記述。ブラウザの幅によって要素を非表示にしたりしてCSSを切り替えられるというわけですね JavaScriptが不要っていうのは素晴らしいですね 関連エントリ 使うっきゃないレスポンシブWEBデザインなWordPressテーマ２５ レスポンシブWEBデザインのサンプル26 HT
facebookのフレンズセレクタ風UIを実装できるjQueryプラグイン「fcbkListSelection」:phpspot開発日誌
fcbkListSelection v 1.1 ? like facebook friends selector - Emposha facebookのフレンズセレクタ風UIを実装できるjQueryプラグイン「fcbkListSelection」 ul > li のリストで定義して初期化するだけで次のような、選択すると色がつくようなチェックリストを作ることができます。 HTMLは次のようにシンプル JavaScriptも実装部分はほぼ一行 デモページはこちら 使ってみるとその便利さがわかります。 関連エントリ Google＋風の円形リストを作成できるjQueryプラグイン「CircleList」 長〜いulリストを１行で複数行に分割できるjQueryプラグイン「Multi-column lists」 画像のリストを面白い見せ方で表示できるjQueryプラグイン「imageCloud」
これは新しい、回転する円形のイメージギャラリー実装サンプル:phpspot開発日誌
Image Gallery Wheel 記事 これは新しい、回転する円形のイメージギャラリー実装サンプル。 divを並べた簡単なマークアップなのに以下のような複雑なレイアウトを作れています（画像ではありません） svgを使ってマスク処理されていることで画像のマスキングは実現されているようで、更にradiusやrotateなどを使ってアニメーションも実装されています クリックでアニメーションしながら画像が切り替わります マークアップは超シンプル 色々と応用することでこういうことができるんですね。 関連エントリ CSS編集がブラウザ上でリアルタイムに行えホスティングもしてくれる「WebPutty」 ピュアCSSなソーシャルサイトのログインボタン CSSだけで実現したMac OS X風ドック「CSS Dock (V2)」 レスポンシブデザインのためのCSSフレームワーク１５
汎用に使える４５０のアイコンセット「Nortwood icons」:phpspot開発日誌
汎用に使える４５０のアイコンセット「Nortwood icons」 有償で１つ＄９、１セット１５０個のアイコンセットです。 有償ですが、かなり安くハイクオリティなベクターアイコンが揃えられるのでスマホ用やサイト用に色々と使えそうです フリーアイコンへのニーズが高いのですが、その分有料アイコンを使っておくと、どこかで見たアイコンだ、というのは避けられそうですね Volume 1 Volume 2 Volume 3 関連エントリ デザインが超良い感じのFacebook、Twitter等のソーシャルアイコン用PSDセット アイコンをフォントで実現すると便利だと分かるサンプル 秀逸なiOSアプリケーションアイコンのサンプル色々
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
垂直なタイムラインをデザインするHTML＋CSSチュートリアル:phpspot開発日誌
CSS3のブラウザ別対応がアイコンで超分かりやすいサイト:phpspot開発日誌
新しめのPhotoshopテキストエフェクトチュートリアル２５:phpspot開発日誌
最近のクリエイティブなFlashサイト５０:phpspot開発日誌