使うっきゃないレスポンシブWEBデザインなWordPressテーマ２５:phpspot開発日誌
25 Quality Responsive WordPress Themes | Design Woop | The Web Design and Development Blog 使うっきゃないレスポンシブWEBデザインなWordPressテーマ２５。 WordPressを使うことで、いろんなことがプラグインで簡単に実現できてしまいますが、レスポンシブWEBデザインのテーマが出てきている模様。 更にレスポンシブなだけじゃなくて、めちゃめちゃカッコいいテーマが揃ってます 幅を少なくするとスマホ用のインタフェースに早変わり。 他にも以下のようなデザインが。是非幅を少なくして試してみましょう。 テーマとしての利用だけでなく、デザインの参考にもかなり使えそうです 関連エントリ フレッシュなWordPressテーマ１００ プロフェッショナルでクリエイティブで参考になるWordPressテーマ４０
組織図っぽい図を簡単に作れる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」
Facebook,Twitter,Google＋の独自デザインのソーシャルボタン作成用jQueryプラグイン「Sharrre」:phpspot開発日誌
Facebook,Twitter,Google＋の独自デザインのソーシャルボタン作成用jQueryプラグイン「Sharrre」 2011年12月01日- Sharrre - A plugin for sharing buttons Facebook,Twitter,Google＋の独自デザインのソーシャルボタン作成用jQueryプラグイン「Sharrre」 どれだけシェアされたか、といった数値を表示しつつすべてのボタンのデザインし統一感をもたせることができます。 デザイナーさんならこうしたボタン部分もきっちりデザインしたい気になる人も多いのではないでしょうか。 テンプレートを独自に定義して引数として渡すことで独自デザインにすることができたりするようです。 以下、本プラグインを使って作られたサンプル集です。それぞれの具体コードもサイト上に掲載されているのでカスタマイズしちゃってもよさそうです
複数要素の関連をビジュアライズできるライブラリ「arbor.js」:phpspot開発日誌
arbor.js 複数要素の関連をビジュアライズできるライブラリ「arbor.js」 JavaScriptベースですが、Chromeで見るとなめらかに動作して良い感じです。 動きがカッコイイのでデモなんかで見せるとよい印象を得られるかも。 更に子要素をアニメーション 階層的にデータを現せます 関連エントリ HTML5のキャンバスと連動させて音声をビジュアライズしたデモ ブログのプチリニューアルに使った技術要素色々 HSL形式のカラーがブラウザ上で作れる「HSL Color Picker」
iOSシュミレーター上でのWEBサイト開発に使える「iWebInspector」:phpspot開発日誌
Debugging tool for Safari on iPhone, iPad and PhoneGap apps - Remote Inspector (Firebug) for JavaScript, HTML and CSS iOSシュミレーター上でのWEBサイト開発に使える「iWebInspector」 iPhone用サイトはSafariやChromeでテストして後は実機で動作確認なんていう手順をとっていましたが、iOSシュミレーター上でやるとより状態が再現できてよさそうですね。 更にこのツールを使えば、FirebugやChromeのDeveloperTool風の機能も提供してくれてデバッグに便利そうです。 PhoneGapをAdobeが買収したり、今後はHTMLベースのアプリの躍進が予想され、開発環境周りも整っていきそうですね 関連エントリ 秀逸なiOSアプリケーションアイコ
jQueryの必要なところだけを取り出せる「jQuip」:phpspot開発日誌
jQuip - jQuery in parts :: Builder jQueryの必要なところだけを取り出せる「jQuip」。 ajaxの機能だけを使いたいのに、全部インクルードしちゃうのは回線のムダでパフォーマンスにも影響しますね。 ということでajaxの機能だけとかcssの機能だけといった風にチェックボックスでチェックすればコードをWEB上で取得できてそのままコピペで使えるというものです。 サイト上でminifyしたり逆も可能です。 いらない機能は読み込みたくないものですがこれはナイスですね 関連エントリ 円形で回転するタイマーを実装できるjQueryサンプル Twitter OAuth認証をポップアップで行うjQueryプラグイン 良い感じで動作するニュースティッカー実装jQueryサンプル
プロクオリティでフリーの(X)HTML/CSSテンプレートいろいろ:phpspot開発日誌
55 High Quality Free and Premium (X)HTML/CSS Templates - DesignModo プロクオリティでフリーの(X)HTML/CSSテンプレートがいろいろまとまっています。 下の方は有償っぽいので注意ですがフリーも沢山掲載されています。正直どっちがフリーか有償かっていうのは区別がつかないぐらいフリー版もハイクオリティになってます 単なる枠でデザインしただけでなくCSSテクニックや画像も活用してフリー、というのはありがたいですね。 世の中どうなってるのという感じです 関連エントリ カッコいい管理画面のHTMLテンプレート総まとめ 超使えそうな新しめでフリーのHTML/CSSデザインテンプレート集 綺麗にデザインされたフリーのHTML/CSSテンプレート１０
ブラウザ上で複雑なレイアウトが作れる「Layzilla.com」:phpspot開発日誌
HTML layout generator - Layzilla.com ブラウザ上で複雑なレイアウトが作れる「Layzilla.com」 空白のキャンバスにボタンをポチポチ押していってドラッグ＆ドロップすることでレイアウトをどんどん組み立てられます。 レイアウトを配置した例。それぞれ、ふちをドラッグすればリサイズ可能 終わったらソースコードをジェネレート 次のようなそこそこ綺麗なHTMLが出力できます。 勿論、CSSも出力できます。 関連エントリ 複雑なCSSレイアウトをウェブ上で簡単に作成できる「The 1Kb CSS Grid」 レイアウト作成に役立つCSSグリッドレイアウトジェネレーター集
秀逸なFacebookファンページデザイン集４０:phpspot開発日誌
40 Great Examples of Facebook Fan Pages 秀逸なFacebookファンページデザイン集４０ 予めレイアウトが決まっていますが、各社違和感なくかつ美しくデザインしているところが素晴らしいです。 最近自分のまわりでも殆がFacebookをやっているような状態で、今後もユーザ数が増えていきそうなFacebook。 ファンページ作成に関するデザイン力なんかも求められる時代になってきそうな気がします。 大手企業のきれいにデザインされたページがまとまっていましたので参考にできそうです。 各社デザインがいいのも去ることながら、Facebookファンページという仕組み自体も、Facebook自体の世界観を壊すことなくサードパーティのコンテンツを載せられているという意味でうまく出来ているなぁと感心してしまいますね。 関連エントリ facebookのファンページ用ウィジェ
テキストの量に応じてtextareaが自動でリサイズするようにできるjQueryプラグイン「Autosize for textarea」:phpspot開発日誌
テキストの量に応じてtextareaが自動でリサイズするようにできるjQueryプラグイン「Autosize for textarea」 2011年11月14日- jQuery Autosize for textarea elements テキストの量に応じてtextareaが自動でリサイズするようにできるjQueryプラグイン「Autosize for textarea」 次のようにテキストを入力するとちょうどテキストにフィットするようにtextareaのサイズが変わります。最初からあまり大きくしたくないけどスクロールさせたり利便性を損なうのは嫌、という場合に使えます。 この手のプラグインは過去にも紹介しましたが、jqueryプラグインなので、必要プラグインを読み込んだら、$('textarea').autosize(); のように初期化しちゃえば使えちゃうというのもいいですね jQue
とりあえず入れておくと使えそうな２０フォント:phpspot開発日誌
20 High Quality Free Fonts Every Design Should Own とりあえず入れておくと使えそうな２０フォントが紹介されています。 汎用的にデザインされており色々な局面で使えそうなのが特徴です。 Photoshopでフォントを切り替えてる時になかなかイメージが合わない時があったりしますが、そうした時に選択肢が多いほうがいいですね。 個性的すぎると、違うなっていうことが多いんですが、こうした汎用フォントは取り合えず入れておくと便利ですね というわけで自分もあとでインストールしたいと思います 関連エントリ WEBページに使えそうなアイコンっぽい図形フォント 手作り風フォントが入手できる「Handmadefont」
使うときだけ表示できるiOS風独自スクロールバー実装jQueryプラグイン「nicescroll」:phpspot開発日誌
使うときだけ表示できるiOS風独自スクロールバー実装jQueryプラグイン「nicescroll」 2011年11月02日- nicescroll : stylish scrollbars ios look-alike | jQuery Plugins 使うときだけ表示できるiOS風独自スクロールバー実装jQueryプラグイン「nicescroll」 OSによってスクロールバーデザインが違ったり、常に表示されていたりというのが当たり前でしたが、独自スクロールバーにするのが最近のトレンドっぽいですね。 今回紹介するプラグインを使えばiPhoneのあのスマートなスクロールバーをPCブラウザでも実現出来ます。 エレメントにカーソルを合わせると次のような独自実装のスクロールバーが現れます スクロールすると当然、スクロールバーの位置も変化 時間を置くと勝手にスクロールバーがフェードアウトで消えます。
ページの目次ナビゲーションを自動で作ってくれるjQueryプラグイン「AutoAnchors」:phpspot開発日誌
AutoAnchors jQuery Plugin ページの目次ナビゲーションを自動で作ってくれるjQueryプラグイン「AutoAnchors」 見出しに<h3>なんかを使っていたとして、このプラグインを初期化すると次のような目次があらわれてクリックすれば指定の場所に移動できるという物が作れます。 h3で記事を書いておいてとりあえず後で見返してナビゲーションを作るなんていう作業をしたことがありますが、自動でやることで文書の変更にも対応できますね。 次のように、h3とか好きなタグは自分で選ぶことが出来ます。 ナンバリングもやってくれちゃいます。 関連エントリ ゴージャスなドロップシャドウをクロスブラウザで実現できるjQueryプラグイン「pShadow」 Twitter OAuth認証をポップアップで行うjQueryプラグイン ファンシーなデザインのカウントダウンタイマー実装jQueryプ
ページ下部で折りたためるメニュー実装サンプル:phpspot開発日誌
Creating a Toggle CSS3 Bottom Navigation Bar ? Script Tutorials ページ下部で折りたためるメニュー実装サンプル。 次のように、クリックで開閉して折りたためるメニューを実装するCSS3+jQueryなサンプルが公開されています サンプルのダウンロードも出来るので実装は簡単にできます。 スタイルもCSSで変えられるということで独自デザイン調整は簡単ですね。 サイトに収まり切らないようなメニューを入れておくと使いようによってユーザビリティ向上に繋げられそうです。 関連エントリ CSSのナビゲーションメニューサンプル５５ ミニマムで場所を取らないCSSメニューの実装例
PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」:phpspot開発日誌
PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 2011年10月27日- Asketic Swipe Gallery | jQuery Plugins PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 この手のものはスマホ限定だったりするのですがPCでもドラッグ＆ドロップのようにしてスワイプさせて画像を送ることができるようになっています。 両方に対応させる場合に個別に対応するよりも一緒に作ってしまいたいという場合に使えますね デモページはこちら 今後はもっとこうしたクロス環境でも似たように動作する物が出てくるかもしれませんね。 数年後にはスマホがPCを追い抜くという予測もあるぐらいなので、スマホありきでPCもとりあえず対応なんていう流れになっ
ゴージャスなドロップシャドウをクロスブラウザで実現できるjQueryプラグイン「pShadow」:phpspot開発日誌
pShadow ? a jQuery extension for gorgeous drop shadows | Matthew Dawkins ゴージャスなドロップシャドウをクロスブラウザで実現できるjQueryプラグイン「pShadow」 $(elmeent).pShadow() だけで次のようなドロップシャドウ効果を付けられます。オプションを渡して強さや深さを指定できます PNGを使うのでクロスブラウザでも動作します 同梱されている画像を変えることで違った効果を得られそうですね 関連エントリ CSSでリアルでクールなドロップシャドウ効果を描画するサンプル例色々 ５０の様々なデザインのドロップシャドウ効果適用素材Photoshopファイル
電話番号の入力欄等を使いやすくできるjQueryプラグイン「EasyType」:phpspot開発日誌
EasyType Dev 電話番号の入力欄等を使いやすくできるjQueryプラグイン「EasyType」。 このプラグインを使うと予め指定したフォーマットで特定のインプットフィールドを初期化すると、指定の文字しか入れられないようにしつつ、背景に入力ヒントを表示させられます。 初期化を次のようにします $('#phone_number').easytype('(###) ###-####'); 入力には ###-###-#### という形式の数字しか入れられなくなります。 フィールドを分けるのも面倒ですし、かといって単なるinputをおくだけだとちょっと不親切かもしれないですね。 ifとかelseも使えるので、携帯番号でも、固定電話でも使うことはできそうです。 電話番号以外にも 2011/10/01 のような日付を入れるのにも使えます。 ソフトウェアのシリアル番号っぽい入力をしてもらうことも
秀逸なiPhoneサイト38:phpspot開発日誌
38 Mobile (iPhone) Sites 秀逸なiPhoneサイト38がまとまっております。 日本でも新規リリースの携帯はほとんどスマホということになってきて、もう一年もすればシェアはかなり変わっているのだなというのは誰もが予測が付きそうですが、スマホサイトのデザイン知識は必須の物になりそうですね。 個人的にも徐々に慣れてきましたが、こうしたうまくデザインされているサイトは参考になります。 将来的にはスマホがPCを逆転するなんていう予測もあるぐらいなので、ちゃんとやっておきたいところ。 関連エントリ スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ スマフォでもイケてるクールなドロップダウン実装jQueryプラグイン「DropKick」 コンポーネント満載のスマフォ向けWEBサイト作成フレームワーク「ChocolateChip-UI」 スマフォ向けのPHP/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5&CSS3を利用した美しい４０のフリーテンプレート集:phpspot開発日誌
映画のロゴみたいな超カッコイイロゴが一瞬で作れるPhotoshopスタイル集:phpspot開発日誌