スマートフォンサイト用に、フリック・スワイプ対応が簡単に出来るjQueryプラグインいろいろ | Web活メモ帳
最近スマートフォン対応やタブレット対応の案件が増えてきて、スワイプに対応させたいと言われる事が結構多いです。 知ってる人も居るかもしれませんが、スワイプが出来るようになるjQueryプラグインをまとめてみました。 画像ギャラリー専用のものから、ページ全体をスワイプで区切るものまで色々ありますよ。 参考になれば幸いです。 jQuery Touchwipe iPhone、iPad、Android用にスワイプでスライドショーを移動できます。 スワイプした時のイベントが簡単に取得できるので、画像切替意外にも色々使えそう。 PCの場合には、アンカーテキストで画像の切替ができます。 サイズも1kB程度なので、モバイル端末に優しいですね。 PhotoSwipe jQuery Mobile対応の全画面イメージギャラリー。 写真を大きく表示させて、ツールバーで操作するタイプです。 jquery.flicks
そうじ週間【その1】～部屋をスッキリ整理整頓するための合言葉は「SPACE」 | ライフハッカー・ジャパン
とかくモノが増えがちな現代人にとって、定期的な整理整頓は必須。そこで、整理整頓の達人Julie Morgenstern氏は、著書『Organizing from the Inside Out: The Foolproof System for Organizing Your Home, Your Office, and Your Life（ワーキング・ウーマンのための超整理法）』で、「SPACE」という整理整頓法を提唱しています。 Photo by chris.corwin. 「SPACE」の説明に入る前に、自分の整理整頓法を見直す際、気をつけるべきポイントを確認しておきましょう。 この書籍によると、整理整頓の仕組みは、すでに自分がやっていることをベースにすべきだとか。他人の整理整頓術にそのまま順応しようとすると、難しくて挫折しがちです。たとえば、家に入ったらすぐに鍵を置く習慣のある人は、
サンプルで学ぶjQuery Mobileまとめ（後編） (1/5)
前編、中編に続き、jQuery Mobileの機能について解説します。 グリッドレイアウト スマートフォンはPCに比べて画面幅が狭いので、1ページを複数カラムに分割するレイアウトはスマートフォンサイトに向きません。しかし、タブナビゲーションを実装する場合など、複数カラムに分割したい場合もあります。jQuery Mobileでは要素を均等に分割して並べる「グリッドレイアウト」の機能が用意されています。 2カラム 2カラムにしたい場合は、class属性「ui-grid-a」を付けた要素の内側に、class属性「ui-block-a」とclass属性「ui-block-b」を付けた要素をそれぞれ配置します。 ■サンプル01[HTML] <div class="ui-grid-a"> <div class="ui-block-a"><strong>I'm Block A</strong></div
iPhone対応サイトをPCブラウザで見る方法 | alt
以前iPhoneに対応しているサイトを調査してみましたが これらのサイトがどんな作りになっているか、 リキッドデザインだったり、幅固定だったり、 HTML5だったり、Javascriptライブラリ使ってたり、 ソースが気になるときは見てみるのが一番です。 ということでPCブラウザでチェックしたいときどうするか？ よく忘れるのでメモ。 ■Firefox>にアドオン「>User Agent Switcher」を入れて UA（ユーザーエージェント）を変更する場合 User Agent Switcher http://chrispederick.com/work/user-agent-switcher/ ↓ 「Download for Firefox/Flock/Seamonkey/Songbird」をクリックしてインストール。 ↓ Firefoxを再起動。 ↓ 「
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版) Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！ 特に明記がないものはすべてWebkitについてです。 見つけ次第順次追加予定。 タイトル変更、増えてきたので目次追加しました。 この記事はiOS5、Android 3以前について記載したものです 【css】 タップ時にz-indexを無視して下の要素に枠がつく(Android) 【html, css】 マルチバイト文字にfont-weight:boldが効かない(Android) 【css】 border-radiusのコーナーがジャギる(Android) 【css】 box-shadow、text-
![[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。 - CSS HappyLife
前回の更新日が見たくない程に時が流れている今日この頃・・・。 ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。 こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。 なので、これからはちょろっとでもネタが有れば更新していきたいなーと。 何をモチベーションに更新するかはまだ見つかってないけど＞＜ さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。 【スマートフォン向け】新規でサイトを
Responsive Web Design用のHTML5+CSS3のテンプレート素材
iPhone, Androidのスマートフォンなどの小さいスクリーンから、デスクトップの大きいスクリーンまで、それぞれの表示サイズに合わせて最適なレイアウトを提供するHTML5+CSS3のテンプレートを紹介します。 サイズ変更時はレイアウトの一部がアニメーションで移動し、面白い仕掛けにも利用できそうです。 デモページ：幅480pxで表示 [ad#ad-2] HTMLの構造 テンプレートはブログを想定して作成されています。 ヘッダ、ナビゲーション、特集記事、最近の記事、サイドバー、フッタ、とシンプルな構成です。 HTML: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Onextrapixel - Responsive Web Design Template</title>
今から始めるiPhoneコーディング｜クロノドライブ
何だか周りにiPhoneを持ってる人が増えてきたなぁと思う今日この頃です。 それにつれてiPhone用のサイトをコーディングする案件も増えて来ましたので、コーディングするときのポイントをまとめました。 iPhoneの特徴 まずは、iPhoneの特徴を見てみましょう。 一つの端末で複数の解像度を持つ iPhoneの特徴の一つとして、縦持ち・横持ちのときで横幅の解像度が変わります。 例えば、縦持ちのときは320pxで、横持ちのときは480pxとなります。 ※縦持ちのとき ※横持ちのとき そのため、320pxに最適化したコーディングをすると、横持ちのときに160px分の余白が空いてしまうため、320pxにも480pxにも対応出来るコーディングをする必要があります。 ※そのためには、デザインをしっかりと考えたものにしなければいけませんが…。 HTMLやCSSの実装状況はパソコンと同様 iPhone
スマートフォン向けサイトの作り方 | ユージック
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないといえますが、iPhone4、4SやAn
スマートフォン対応してみた。
当ブログをスマートフォン対応したいなーと思ってはいたけど、iPhone持ってないしXperiaの需要はどうなんだろうとか考えたり言い訳しつつずっと放置してましたが、今回 iPod Touch （先代の）を借りたので、勉強がてらiPhone対応と言うかスマートフォン対応してみました。 何かを実験するには自分のサイトが一番手っ取り早くて良いですね。 サイト持ってない方は、ホント何でもいいので、何かしら作ったほうがいいかなーと思います。 ドメイン取得して、サーバレンタルして、構成練って、デザイン・コーディングして、FTPクライアントでファイルアップしてみたり、MTやWPインストールしていじったり、CSS3の実験したり色々使えて便利ですし、カッチリ作れば実績にもなりますしね。 と、それは良いとして、スマートフォン対応したんです。えぇ。 CSS HappyLife for iPhone URLのオシ
Xperiaを買ったのでアプリを色々入れてみたっ
Xperiaを買おうかどーしようか結構悩んでいたのですが、途中から物欲に負けて発売日に買ってしまったhirasawaです。 今まで、スマートフォンやiPhoneを使った事が無いので、Xperiaでスマートフォンデビューした人の一人です。 とは言え、Androidケータイ自体はHT-03Aをちょっとだけいじってたりしたので特に戸惑う事無く使い始める事が出来ました。 今回購入した動機は、Androidケータイに元々興味が有りましたし、iPhoneもいらない！とか思いつつも内心欲しかったりしたのも有りますね。 べ、べべべ別に、ソニエリを待ってたわけじゃ無いんだからっ！！ ＞＜ ・・・はい。 えっと、個人的に「docomoでソニエリのAndroidケータイ」が欲しかったので、不満が有っても有る程度は飲み込むことができますが、メーカーとかキャリアに関係なく「Androidケータイ」が欲しいのなら、現
Xperiaって使ってみてどう？
2 ： 集気ビン(福岡県)：2010/04/05(月) 23:02:16.17 ID:x8bR0Neu 普通のスマフォ、ガラケー機能が搭載されるまでは時期が悪い 25 ： ラジオメーター(アラバマ州)：2010/04/05(月) 23:10:07.19 ID:XDW+ETVP さっさとキャリアメール付けろ 話はそれからだ 31 ： 木炭(catv?)：2010/04/05(月) 23:12:03.79 ID:Oh6um9Wt ようつべとかニコニコはサクッと見れますか？ 42 ： 金槌(catv?)：2010/04/05(月) 23:16:02.72 ID:u2qDeQvv >>31 パソコンよりは劣るけど、携帯とは思えない画質ではある 静止画はぶっちゃけパソコンより綺麗 41 ： 筆ペン(ネブスカ州)：2010/04/05(月) 23:15:48.61 ID:ofes3pvv emonst
本格的なスマートフォン時代に突入！「docomo」「au」「Softbank」3社の動向は - はてなニュース
いよいよ明日4月1日にNTTdocomoから発売される、Android OSを搭載したスマートフォン「Xperia SO-01B」。“iPhoneキラー”と呼ばれるほど、iPhoneに近い一台として注目を浴びている一台ですが、このほかにも「Softbank」が Android OSを搭載した「X06HT」を4月下旬に発売、「au by KDDI」が「IS01」・「IS02」のリリースを発表と、携帯電話大手3キャリア間で熾烈なスマートフォン戦争が繰り広げられています。 ■スマートフォンとは ▽スマートフォン - Wikipedia そもそも、スマートフォンとは、携帯電話・PHSと携帯情報端末 (PDA) を融合させた高機能な携帯端末のこと。日本国内でも、さまざまなOSを搭載したスマートフォンがこれまでに発表されてきましたが、現在注目を浴びているのが米Apple社の「iPhone」と米Goog
ソニエリのXperia購入を検討してる人に役立つテンプレ＆リンク集まとめ 無題のドキュメント
1 ：以下、名無しに変わりまして無題のドキュメントがお送りします[] ：2010/03/24(水) 23:15:32 ID:mudainodqnment この記事は、【ソニー・エリクソン Xperia™ SO-01B】の購入を考えている人に役立つ、 テンプレ＆リンク集＆スレまとめです。 管理人自身が現在Xperiaの購入を検討しているため、半分自分のために制作したものですが、 まだXperiaにこういうまとめ記事がなかったことと、 どうせまとめブログをやってるんなら記事にした方がよいと思い公開に至りました。 現在docomoユーザーでXperiaへの乗り換えを検討している方や、 他キャリアからXperiaへの乗り換えを検討されている方などは、宜しければ参考にしてみて下さい。 スレまとめはなるべく信頼性の高いレスを抽出して掲載しているつもりですが、 いわゆる「ネットの情報」ですので、鵜呑みに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサイトをスマートフォン対応してと言われた時に見ておきたいサイトまとめ｜caraldo.net | WebとiPhoneとロードバイクが大好き！