ウノウラボ by Zynga Japan: iPhone向けのサイトを作るときのちょっとした気配り
yamaokaです。 だいぶiPhoneやAndroidといったスマートフォン向けのwebページを作ることが増えてきたのではないでしょうか。ちょっとした気配りで使いやすくなるケースもあるかなと思うので、いくつか使えそうな工夫について書いてみたいと思います。 ただし、今回はiPhone向けです。 タップされた場所をハイライトする iPhoneのSafariでは「-webkit-tap-highlight-color」という拡張された属性があり、タップされた箇所に色を付けることができます。CSS3ではRGBaによる色指定ができるので、半透明の色を指定すればタップされた箇所をわかりやすく示すことができます。例えば、-webkit-tap-highlight-color:rgba(255,0,0,0.40);と指定すると薄い赤色を付けることができます。「outline:none;」と併せてリンク文
Showcase of 40 Pricing Tables and Signup Pages - SpyreStudios
A well-designed pricing table and sign-up page can make or break your online business. Getting users to hit the signup button is one thing, but making the actual signup process easier and helping people chose the right plan or package is a science in itself. Today we’ll have a look at some great pricing table examples. I hope you’ll find some inspiration from the examples showcased below: TypeKit
PayPal の寄付ボタンを設置してみんなでお昼ごはんを奢り合おう
何日経っても解決できなかった問題とかを解決してくれたブログとかにはお礼がしたくなるもので、寄付とか用意してくれてると便利です。私の場合は「お昼ごはんを奢る」（いちご牛乳を奢るとかサンドイッチを奢る）という形で寄付を募集しています。設置の仕方を説明致します。 追記: 今回紹介した寄付ボタンは日本の法律に引っかかるため利用できません PayPal に直接問い合わせたところすぐにメールでの返答がありましたので、そのまま引用させて頂きます。 寄付ボタンを作るページから寄付ボタンを作ることは問題ですか？ xxさまのウェブサイトを拝見させていただきましたところ、寄付のために「ショッピングカートボタン」をご利用いただいておりますことを確認させていただきました。 大変申し訳ございませんが、「ショッピングカートボタン」は発送を伴う有形物やサービス（オンラインでの英会話講座など）の支払にご利用いただくためのボ
あなたのWebサイトに導入できるFacebookソーシャルプラグイン5個
多くのサイトでFacebookのソーシャル プラグイン（いいね！ボタンとか）の導入 を見かけるようになりましたが、プラグイン の種類はいくつかあります。殆ど使われ ているのを見かけないので、なんとなく ご紹介してみようと思いエントリー。 ハードなFacebookユーザーなら知ってて当たり前かもしれませんけど、まだ普及し初めて間もないので一応ご紹介したいと思います。現状使われているソーシャルプラグインとさほど大差無いので特に使い分ける必要が無いのかも知れませんけど・・・一人でも「こんなのあったのか」と思って頂ければ幸いです。 Like Button 最もよく見かける「いいね！ボタン」です。こちらは、いいね！している友達のアイコンの表示も可能ですが、噴出しを利用している方が大半のようです。アイコンは後述するFacepileで実装可能です。 Demo Like Button Facepile F
WordPressの「ページ」をツリー形式で表示・管理出来るプラグイン・CMS Tree Page View
WordPressをCMSとして利用する場合は 「ページ」で作成するコンテンツが多くなる かと思います。その管理をしやすくしよう、 というプラグインがCMS Tree Page View です。ツリー形式にしてくれるので、Web に不慣れなクライアントさんでも視覚的に 管理しやすいのでは無いかと思います。 WPもかなり高機能ですが、基本的にはブログエンジンの為か、「ページ」の管理がしやすいインターフェースとは言えません。そこを補うプラグインです。 こんな感じでページを管理できます。CMSとしての利用となるとどうしても「ページ」の数が増えてしまいます。こうして表示してくれると俄然分かりやすいですね。 使い方 マウスを乗せるとメニューが表示。Viewで確認、Editで編集です。 下書き状態のページも分かりやすく。 普段使わない時もスッキリさせておけます。 クライアントさんが管理するなら入れてお
ヘッダーやナビゲーション等、Webデザインをパーツ別に収集しているギャラリーサイトまとめ
いくつか知っておいた方が、必要な時に 探しやすいと思ってメモします。Webサイト のデザインをヘッダーやフッターなど、 パーツ別に収集しているギャラリーサイトが いくつかあるのでまとめます。 そんな大量に有るわけではないですけど。パーツのデザインはいつも迷うのでこの手のギャラリーはいくつあっても結構重宝しますよね。 ブブンデザインアーカイブ 国内でおそらく唯一のパーツ別デザインギャラリーです。ナビゲーションやフッターなどで探せて、収集しているサイトも国内メインなので参考になるのでは。 ブブンデザインアーカイブ MephoBox ヘッダーやフッター、ナビゲーションやフォームデザインだけでなく、404やカレンダーなど全てのコンテンツをカテゴリにしてパーツデザインを収集しています。おすすめ。 MephoBox Pattern Tap こちらもナビゲーションやボタン、フォームデザインなどに分けてデ
ピクサーの「脚本の書き方講座」が素晴らしかった - Gamers, Be Ambitious
今回はゲームとあまり関係ない話。 『トイ・ストーリー』シリーズを始めとする数々の傑作でおなじみアニメ制作会社、ピクサー。この会社の作品のDVDソフトには、たいていピクサー社内における制作現場のメイキング映像が特典として収録されている。最新作『トイ・ストーリー3』のブルーレイ版にも豪華な特典映像がたっぷり付いていたが、その中のひとつ「脚本の書き方講座」が、映像をまじえてとてもわかりやすく作られており、非常に面白いものだった。 まず前提として、ハリウッドの娯楽映画の多くは「映画の尺の1/4が第1幕（発端）、1/2が第2幕（葛藤）、残りの1/4が第3幕（解決）」という3幕で構成されている。ピクサー作品の場合「脚本はおおよそ100ページで、3幕の配分は25/50/25ページ」とのこと。 この特典映像「脚本の書き方講座」では、ピクサーの『トイ・ストーリー』『ファインディング・ニモ』『Mr.インクレデ
Guidelines For Successful Communication With Clients — Smashing Magazine
Whether you are a freelancer or run a digital agency, learn to get the client management right from the beginning. In this article, Sam Barnes shares some tips for maintaining project productivity and momentum when working with clients. OK, so this is a yet another article about dealing with clients. But let’s face it — it doesn’t matter how well you can design or code; as a freelancer or if you’r
Basic Beginners' Guide to Installing a jQuery Lightbox
Home » Tutorials » Basic Beginners’ Guide to Installing a jQuery Lightbox Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more Learn how to install a jQuery lightbox, by following this easy, step by step tutorial. Check it out and start learning! Have you always wanted to add those cool Javascript lightbox
複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」:phpspot開発日誌
複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」 2011年01月25日- jQuery File Upload Demo 複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」。 「Upload files」ボタンを選択するとダイアログが開き、複数ファイルを一括して選択。その後すぐアップロードが始まり、プログレスバーを通して進捗を表示、アップされたファイルのサムネイルも次のように表示してくれるという、ファイルアップロードのフルセットを提供してくれます。 アップされたファイルの横に表示されているごみ箱アイコンをクリックすればすぐさま削除も可能。 HTML5ベースなプラグインなのでFlashも不要です。 アップロードの受け口としてphpのソースも同
[JS]省スペースに最適、コンテンツをローテーションで拡大表示するチュートリアル
複数のコンテンツをサムネイルで配置し、ローテーションで打ち出しエリアに拡大表示するフィチャーボックスを実装するチュートリアルを紹介します。 Rotating Feature Boxes デモページ [ad#ad-2] デモでは右側に配置されたサムネイルのコンテンツをクリックすると、打ち出しエリアにアニメーションでスライド移動して、全文が表示されます。 ※アニメーションはCSS3で実装されているためChrome, Safariのみで、非対応ブラウザはアニメーション無しです。 デモページ 2番をクリックして、2番が打ち出しエリアに。 [ad#ad-2] ローテーションするフィチャーボックスの実装 HTML 3つのコンテンツはdiv要素で実装されており、それぞれidとclassを付与し、全部をdiv要素で内包します。 <div id="rotator"> <div id="block-1" cl
主要なCSS Resetのスタイルシートとドキュメントのまとめ -CSS Reset.com
ブラウザのスタイルを初期化するCSS Resetのスタイルシートとドキュメントをまとめたポータルサイトを紹介します。 CSS Reset.com [ad#ad-2] 現在、登録されているCSS Resetは下記の7つです。 Eric Meyer's "Reset CSS" Eric Meyer's "Reset CSS"のドキュメント HTML5 Doctor CSS Reset TML5 Doctor CSS Resetのドキュメントメント Yahoo! CSS Reset (YUI 3) YUI 3のドキュメント Vanilla CSS Un-Reset Vanilla CSS Un-Resetのドキュメント Tripoli CSS Reset – David Hellsing Tripoli CSS Resetのドキュメント 'undohtml.css' – Tantek Celik
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
