表示はしたくないけどSelectタグの機能(ドラムロール)を使いたい場合 - Nobody is perfect.
Androidのことも踏まえ追記しました 例えばiPhoneなどで独自Selectorを作りたい場合があると思います。 そういうときどうしたらいいかを考えてみました。 フォーカスを当てるには以下の条件をクリアする必要があります。 表示されている状態(display:"")であること なおかつユーザーのイベントにフックしなければいけない ex. clickイベント ここから追記 どうも上記方法ではAndroidでは対応できない。 大変困った…が hiroki先生に「透明にしてみればいいじゃん」と言われたのでやってみた。 できた！ うまくしたのボタン的な要素の上に来るようにCSSを頑張れば怖い物無しになりそうだ。
Android4系でoverflow: hiddenとposition: fixedで位置がおかしくなるバグ
Android4系でoverflow: hiddenとposition: fixedで位置がおかしくなるバグ 表題のとおりですが、少しわかりにくいので詳しく説明します。 このバグはAndroid4.0とAndroid4.1のブラウザで発生を確認しました。ChromeやiPhoneのMobile Safariでは発生しません。 ページ内にposition: fixedした要素(A要素)が存在し、別の要素(B要素)にoverflow: hiddenを指定しています。B要素にはwidth:100%やwidth:autoでウィンドウ幅いっぱいになるように設定しています。そしてB要素の内側にはブラウザ幅を越える要素を配置します。 HTML/CSSはこんな感じ。 <div id="a"></div> <div id="b"><div></div></div> #a{ width:100%; heigh
jQuery（JavaScript）でiPhone、iPad、Android向けにアラートを表示してURLをリダイレクト（選択）させる方法｜BLACKFLAG
少し前に「jQuery（JavaScript）でiPhone、iPad、Androidなどデバイスを判別して URLをリダイレクトする方法」と題して、 スマホ系のデバイスを判別してURLをリダイレクトさせる方法を紹介しましたが、 ユニクロさんやほぼ日さんのサイトではスマホ系デバイスでアクセスすると アラートでスマホ向けのサイトがあることをメッセージで促し、 どっちのサイトへアクセスするかユーザーに選択させる方式をとっており このUIがおもしろかったので試しにｊQueryを使って同じ動作を作ってみました。 例として、サイト構成が以下の様なURLとします。 ——————————————————- 【PC向けサイト】 ｈｔｔｐ：//black-flag.net/sample/ 【スマートフォン向けサイト】 ｈｔｔｐ：//black-flag.net/sample/sp/ ————————————
iPhone,Android両対応スマホ画面回転のjavascriptイベントは orientationchange resize
iPhone,Android両対応スマホ画面回転のjavascriptイベントは orientationchange resize 回転イベントorientationchange 画面が回転したときに何かさせたいときはorientationchangeで設定できます。 ※Androidは2.2から対応しました。2.1の端末では動きません。 $(window).on(“orientationchange”,function(){ alert("画面が回転しました"); // ここに実行したい処理を書く }); 回転したときだけ実行する場合は、これでいけますが ページ読み込み直後にも処理を実行したい場合だったら、 resizeもセットで設定します。 $(window).on(“orientationchange resize”,function(){ alert("この端末の横幅は"+wind
スマートフォンで縦向き、横向き時のイベントを取得する - web-trigger
スマートフォン(iphone,android)で、横向きや縦向きに向きを変更した時、 media-queryを使ったcssで横幅等は自動的に変わりますが、 関連のjQueryのプラグイン等が変更されないということがありました。 その際、横向きにした時、縦向きにした時を検出して、 イベントを取得することにしました。 そのメモ・備忘録になります。 基本的には、 jQueryを使用しました。 jQueryのイベントで、 orientationchangeというイベントがあるということで、そちらをまず使用してみました。 $(document).ready(function(){ window.onorientationchange = function(){ alert("向きが変わりました"); }; }); iphoneでOK! Androidでは・・・、うーん、最新のは、対応していますが、
続：Androidブラウザでviewportのwidth指定
続：Androidブラウザでviewportのwidth指定 １年ほど前にAndroidブラウザでviewportのwidth指定という記事を書いたのですが、１年間いろんな端末や状況に対応しているうちに今は結構違うスクリプトを利用しています。 var portraitWidth,landscapeWidth; $(window).bind("resize", function(){ if(Math.abs(window.orientation) === 0){ if(/Android/.test(window.navigator.userAgent)){ if(!portraitWidth)portraitWidth=$(window).width(); }else{ portraitWidth=$(window).width(); } $("html").css("zoom" , por
【応用】Androidブラウザでviewportのwidth指定【しました】 « VITALIFY SMARTPHONE ARCHIVE |
最近書かれた「to-R」のこちらの記事、見られた方も多いと思います。 ◆続：Androidブラウザでviewportのwidth指定 スクリプトの量は増えてますが以前書かれていたものよりスマートぽい！ これはと思い早速スマホサイト構築で参考にさせていただきました。 が、どうもうまくいかない… 私が確認したGALAXY（android 2.3）では縦横切り替えても縦の小さい表示のまま。 用意されているサンプルでも同じくだったので、ここから改良を加えることにしました。 ▼元script var portraitWidth,landscapeWidth; $(window).bind("resize", function(){ if(Math.abs(window.orientation) === 0){ if(/Android/.test(window.navigator.userAgen
Android HTMLのページ内リンク
ご存知の通り、AndroidのインターネットブラウザはHTML5対応です。 これでスッキリした、HTML5さえ習得すればIETesterのお世話になることもない。 で、「工事メイト for Smart」のヘルプはインターネットを介してブラウザで表示することにした。 現場では、インターネット回線が拾えない状況もありえることも懸念されたが、現場でヘルプを読む機会は少ないと判断した。 ホームページ上にヘルプを置いておくと、アプリの機能改善などを行っても即座にそれをヘルプに反映でき、使い方によっては利用者に対しメッセージ伝達の手段としても活用できるメリットがあると考えました。 Android のHTMLページはどうしても細長くなる。どんどんスクロールして読み続けるパターンを採らざるを得ない。 で、使いたくなる機能がページ内リンク(href="#アンカー名")です。 ところが、Androidのブラウ
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
アクセス解析やランキングではわからない「女子高生のスマホ事情」 : LINE Corporation ディレクターブログ
こんにちは、デコミィチームディレクターの小出です。 「デコミィ」は、NHN Japanで運営している媒体の中では珍しく「10代女性」をターゲットにしているリアルタイムサービスです。そのサービスにマーケティング関連業務担当として関わる私は、ペルソナ形成や、媒体運営ノウハウの構築を目的とした10代女性へのインタビュー活動を行なっています。 今年は既に50人以上もの女子高生にインタビューを行い、彼女たちの思考・行動特性に迫まってきました。今回は、その中で見えてきた「アクセス解析やランキングではわからない女子高生のスマホ事情」をお伝えします。 フィーチャーフォンからiPhoneへの買換え需要と、その意外な理由。 これまでお会いしてきた女子高生の中の49名に対しては、所有している携帯電話の種類について伺っています。彼女たちの所有する携帯電話の内訳は以下のようなものでした。 フィーチャーフォン: 35
iPhoneサイト制作（スマートフォンサイト制作）最適化のために最低限必要なreset.cssをつくってみよう | HTML5でサイトをつくろう
iPhoneサイト制作（スマートフォンサイト制作）をする上で、ソースの無駄な記述を最低限に抑え、通信速度を上げることが「最適化」へとつながります。 スマートフォンサイト用に最適化したcssを制作する場合、reset.cssの記述を減らすことで、重複する命令を減らして、読み込みのスピードを上げることができます。 今回はスマートフォンサイトを制作する上で、最低限必要となるreset.cssの記述について紹介します。 iPhoneサイト制作（スマートフォンサイト制作）にreset.cssは必要？ そもそもreset.cssは各ブラウザ(IE・FireFox・safariなど)のブラウザ間のデフォルトのCSSの違いをなくすために読み込むものであり、必ずしもコーディングの際に必要となるものではありません。 PCサイトの場合は様々なブラウザやそのバージョンによって独自のデフォルトスタイルがあるため、r
スマートフォンアプリデザインに役立つ 基礎のまとめ！
スマートフォンアプリデザインに役立つ 基礎のまとめ！：一撃デザインの種明かし（14）（1/4 ページ） 各キャリアが新Android携帯を続々と発表し、スマートフォンへの注目がますます盛り上がる中、アプリケーションも、iPhone／Androidともに展開するものが増えてきました。 そういった中で、本稿ではスマートフォンアプリのデザインのコツをまとめてみます！ iPhone／Androidともに展開しているアプリ3例 まずは、iPhone、Androidともに展開している有名アプリを3つ紹介します。それぞれのスクリーンショットを見ながら違いを探してみてください。 【1】クックパッド レシピの投稿と検索ができるアプリです。PCサイトの雰囲気はそのままに、トップ画面を旬のキーワードと履歴、検索ボックスのみに絞ったシンプルなUIになっています。要素とコンテンツを極力減らすことで、レシピ検索に集中
スマホサイト作成のフレームワーク「iUI」が新しくなっている件:phpspot開発日誌
iUI - Mobile web framework for high-end devices スマホサイト作成のフレームワーク「iUI」が新しくなっている件。 jQueryMobileも便利なのですが、iUIはiPhone発売当初からあるフレームワークで、ルールにそってHTMLを記述するだけでiPhoneアプリのようなページを作れるのが魅力のフレームワークです。 公開当初はgoogle codeとかにホスティングされているだけでしたが専用のカッコいいページもできてる模様。 iPhone, iPad, Android にも対応していて、便利に使えるようになっているようです テーマデザインも色々選べるようになりました。 ビデオプレゼンテーションや、デモを落として試してみましょう 関連エントリ コンポーネント満載のスマフォ向けWEBサイト作成フレームワーク「ChocolateChip-UI」
iPhoneやAndroid向けのUIパターンギャラリー・Mobile Design Pattern Gallery
カテゴリがしっかり分けられていて 凄く見やすかったのでご紹介。iPhone やAndroid向けのUIパターンギャラリー です。アプリデベロッパーさんや アプリデザイナー、モバイル向けの デザインの参考にいかがでしょう。 パターンギャラリーはもうすでにいくつもありますけど、ここは特にちゃんと分けてくれているので見やすい印象でした。 左サイドに大まかなカテゴリーがあります。それぞれには更に細かいパターンに分けられています。たとえば、ナビゲーションならリストタイプ、メガメニュー、カルーセル真紀など。 こちらは検索のカテゴリ。検索ボックスや、オートコンプリート、ソート機能付きなどなど。 インビテーション・・・サイトツアーみたいなやつです。こういうのあんまり紹介されてませんよね。 パターンはその場でLightbox風に表示するのでページ推移も必要ありません。 みたいな感じのパターンギャラリーです。
ツイッターサービス「モバツイ」、Evernoteとの連携をスタート｜新着情報｜マインドスコープ株式会社
報道関係者各位 プレスリリース 2011年11月14日 マインドスコープ株式会社 ツイッターサービス「モバツイ®」、Evernoteとの連携をスタート ～第1弾は「お気に入り」の自動記録機能。順次連携範囲を拡大～ Webサービスの開発・運営を行うマインドスコープ株式会社（本社：東京都港区、代表取締役社長：藤川 真一）は、自社の運営する、モバイル機器向けツイッター接続サービス「モバツイ」において、クラウド型データ管理サービス「Evernote」との連携をスタートいたします。 第1弾として、スマートフォンに最適化したWebアプリ「モバツイ smart」にて、「お気に入り」機能との連携を本日よりスタートいたします。気になったツイートを「お気に入り」に登録すると、ツイッターのお気に入りへの登録と同時にEvernoteにも自動登録されます。（設定変更により可能となります。操作についての詳細説
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
勘違いだらけのAndroid UIデザイン
スマートフォンブラウザ不具合特集
スマホアプリの作り方【超まとめ】UI編：スマホアプリのデザイン／グラフィック描画に役立つ記事39選 - ＠IT
新学期も、【すごい時間割】│大学生の授業管理アプリ
