CSS で作るスマートフォン向け片手操作メニュー
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
納期間近でIEで崩れてる！ そんな時にも慌てないCSS開発のワークフロー
まだまだIE7、そしてIE6のユーザーをターゲットに考えているウェブサイトは多くあると思います。 そんなIEユーザーをターゲットに含めたウェブサイトを制作する上で、より効率的にCSSの開発が行えるワークフローを紹介します。 Cross-Browser CSS Development Workflow [ad#ad-2] 下記は各ポイントを意訳したものです。 1. リセットかノーマライズか 2. 基本的なレイアウトはIEで 3. 最後の確認もIEで 4. 最後の手段：IEのみスタイル 5. 問題に取り組み続ける 6. おわりに 1. リセットかノーマライズか IE, Firefox, Chrome, Safari, Operaなどのブラウザには各要素ごとのデフォルトのスタイルが用意されており、制作する際にはこれらの相違を見出し、各要素を整える必要があります。 CSSリセットとは CSSリセッ
Mozilla Labs : Hackasaurus
Mozilla Labs is no longer active, so this website has been archived, and the information on it is no longer reliable. For more information about Mozilla, see Mozilla’s main website. About HackasaurusBuilding a generation of webmakers. Hackasaurus makes it easy for youth to learn about, explore and make stuff on the Web. Together we’re building a set of kid-friendly tools, local “hack jam” events a
スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog
最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ（chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください） download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blogger