スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
U2Kの覚え書き eclipseでエミュレーター起動時に「PANIC: Could not open: C:\Users\xxx\.android/avd/AVD2.1-2.ini」が出た時の対処法
eclipseでエミュレーター起動時に PANIC: Could not open: C:\Users\xxx\.android/avd/AVD2.1-2.ini と言うエラーが出た時の対処方法をメモ。 xxxは、ログインユーザー名。 まず、これが出るのは、windoiwsにログインしているユーザー名が日本語とか、スペースが含まれている時に起きるらしい。 その対処法は、下記参照。 ↓ 今から１時間で，Androidアプリの開発環境を構築し，Windows上でサンプルを動作させる手順 ユーザー名が上記に当てはまらずに、普通に英語名とかだった場合でも これがおきた。 原因はマイドキュメントとかの位置をDドライブに移動してたため。 元に戻しても解決出来るだろうけど、 そうしないで解決する方法。 １．Android SDKおよび AVDマネージャーを開く。 ２．Virtual devicesを選択
Android SDKを使おう・アンドロイドのエミュレータでマーケットなどのアプリを利用するには
パソコンでもアンドロイドが体験できます。 もちろん3G通信やカメラなど 利用できない機能もありますが、 大半のアプリはそのまま動作します。 ここではパソコンでアンドロイドSDK(エミュレータ)を動かし アンドロイドマーケットやGmail、Googleマップを使ったり 実機のスマートフォンにインストールした無料・有料アプリを エミュレータでも利用する方法を紹介します。 (Android2.2のほか2.3も同じ手順で可能です・1.5用ではない最新のマーケットが使えます) なお(マーケット以外の)普通のapk形式のアプリをインストールするだけなら、以下ような複雑な手順はいりません。APK形式のアプリを「アストロ」を使ってインストールする方法をご覧ください。 1.SDKのインストール ・まず、アンドロイドより先に「ジャバ」を入れる必要があります。 Java 6 JDKへのリンクにアクセスします。
Android SDKをインストールしてエミュレータを準備 [ホームページ作成] All About
Android SDKをインストールしてエミュレータを準備Androidスマートフォンのエミュレータを使うためには、「Android SDK Tools」のインストールが必要です。そのためには、事前に「JDK」のインストールも必要です。「Android SDK Tools」を使うための準備から、セットアップ完了までの手順を、豊富な画面イメージと共に解説しています。 Androidスマートフォンのエミュレータを使うためには、「Android SDK Tools」をインストールする必要があります。その「Android SDK Tools」を動かすためには、「JDK(Java Development Kit)」が必要です。ここでは、それらのダウンロード方法、インストール方法、設定方法をご紹介致します。 それらをインストールした後の、スマートフォンエミュレータ自体の設定方法や使い方に関しては、記事
![Android SDKをインストールしてエミュレータを準備 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
【新・初心者向け】Android SDKの最新インストール手順2011年10月版！少しだけシンプルに解説！
世の中、スマートフォンブームということでAndroidが普及してきたよね。 その上、Android4.0が発表されたよね。 もう、Android SDKをインストールしちゃいたい人が去年の今頃の倍くらいはいると思うんだ。 だからこそ、これからAndroid SDKをいじる人やスクリーンショット（画面キャプチャ）だけのためにAndroid SDKを使いたい人も倍くらいに増えてると思うんだ。 そういうわけで、インストーラーに頼らない、かつ迅速・丁寧な2011年10月時点でのAndroid SDKインストール手順を紹介しよう。 もっとシンプルにわかりやすくSDKをインストールするんだ以前のAndroid SDKインストール手順の紹介記事のコメント欄をみていただくとわかるが、sdkのインストーラー（exeのもの）、エラーばっかりなので正直面倒くさすぎなんだ。 肝心のパスを通したりなどを結局手動でや
Well formedなXHTMLを書くために気を付けるべき7つのこと | Webシステム開発／教育ソリューションのタイムインターメディア
えっ、世間ではHTML5の話題でいっぱいなのに、今更XHTMLの話？ XHTML 2.0は頓死したって聞いたよ？ まあ、その点についてはその通り。 しかし未だにIE6は爆発せず、 SafariにもOperaにもChromeにもFirefoxにも対応する必要があり、 IEに至っては何故か4バージョン(!)分も対応しなきゃならない現状を鑑みれば、 まだあと数年、場合によっては十数年はXHTMLも現役であることは十分に想定されるわけで、 そういう意味では正しいXHMLの知識というのは無駄にはならないはずだ。 それに、より正則なXHTMLの方が、HTML5に移行するときも楽に違いない。 さて、このトピックで扱うのは、要素の包含関係についてだ。 ただのXMLとしてみればきちんと入れ子になり、閉じタグがあって問題ないとしても、 XHTMLとしては不整なことはよくある。 良いことなのか余計なお世話なのか
Android端末でのHTMLの動作について - OKWAVE
(1) <form action="xxxxxxxx" method="post"> <p>メールアドレス</p> <p><input type="email" value="" name="mailaddress" autocapitalize="off" /></p> <input type="submit" value="送信" /> </form> (2) <form action="xxxxxxxx" method="post"> <p>電話番号</p> <p><input type="email" value="" name="mailaddress" autocapitalize="off" /></p> <input type="submit" value="送信" /> </form> GALAXY S端末で(1)、(2)のinput項目を入力した際の ソフトウェアキーボ
続：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端末におけるinputのバグ』
こんばんわ。 先の焼肉のショップはほぼ完成してるので、今度は親サイト？を修正しています。 今後展開していくサイトは子サイト。カテゴリが1階層。 親サイトは、商品自体も追加するけど、子サイトのポータル的な存在にする予定。 そうすると、カテゴリの階層が1段深くなる。 先の焼肉であれば、 亀山社中 石垣牛 アグー豚 国産黒毛和牛 ・ ・ ・ これがカテゴリ。 でも、親サイトの場合は階層が1つ深くなって、 焼肉 亀山社中 石垣牛 アグー豚 国産黒毛和牛 美容 ダイエット 美白 ・ ・ ・ 階層が1つ深くなることでCSSが少し複雑になる。 他にもいくつか修正すべき点があり、数箇所修正した。 でも、1箇所だけ修正できなかったのが、表題の件。 サイトをスマホで表示した時、 横画面では通常のPCとほぼ同じ感じで表示、 ヘッダー メイン サイドバー フッター 縦画面の場合は ヘッダー メイン サイドバー
[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)
はてなブログ | 無料ブログを作成しよう
来年も作りたい！ふきのとう料理を満喫した 2024年春の記録 春は自炊が楽しい季節 1年の中で最も自炊が楽しい季節は春だと思う。スーパーの棚にやわらかな色合いの野菜が並ぶと自然とこころが弾む。 中でもときめくのは山菜だ。早いと2月下旬ごろから並び始めるそれは、タラの芽、ふきのとうと続き、桜の頃にはうるい、ウド、こ…
[CSS]Responsiveデザイン対応のページ制作に役立つ5つのスタイルシートのテクニック
Responsiveデザイン対応ページを制作する際に役立つ、max-width, min-width, overflowなどの役立つ5つのテクニックを紹介します。 5 Useful CSS Tricks for Responsive Design [ad#ad-2] 下記は各ポイントを意訳したものです。 動画コンテンツの配置 max-width, min-widthの小技 値を相対値に overflow: hiddenを使ったテクニック 長いテキストは折り返す 動画コンテンツの配置 Responsiveデザインに対応した動画コンテンツの配置方法です。 デモページ CSS: 動画コンテンツの配置 .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video iframe,
離婚回避マニュアルを購入したいと思っているなら・・・ ｜ 口コミ・レビュー投稿 E-BOOKデータベース
離婚回避マニュアルを購入しようとしているなら、こちらのリンクをよく確認したほうがいいです。 このWEBサイトで、女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～の購入によって一体何ができるのかを、よく理解してから購入されることをおすすめします。 また、レビューや口コミが掲載されていれば、それもよく確認しましょう。 次の女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～に関した情報も購入の参考になるかもしれません。 販売商品名称：女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～ 教材説明：画期的な究極の離婚回避マニュアルをご紹介します。絶対に離婚したくない夫に徹底的な女性目線でお伝えする、離婚回避バイブルです。市販のマニュアルの多くは、男性が男性目線で書いたものであり、「妻の感情」をまったく無視しています
千と千尋のアドレスバー隠し - スタジオ・アルカナ技術ブログ
こんにちは、ともよーんです。 先日この技術ブログきっかけで寄稿させていただくことになった雑誌が発売になりました。皆さまのおかげで素敵な機会が持ててとてもありがたく思っています！ 詳しい掲載内容はこちらをご参照ください。 さて、今回もまたスマートフォンに関するトピックです。 アドレスバーを非表示にする方法について書きたいと思います。 狭い狭いスマホの画面ではアドレスバーを非表示にして、少しでも表示領域を広げたいものです。 最近関わった案件の仕様書にも当然のようにこの要望がありました。 まず、アドレスバー非表示の基本的な仕組みから見ていきましょう。 コアになるコードはこちら↓ window.scrollTo(0, 1); 「ページ読込み完了時に1px上にスクロールさせろ」という指示です。 アドレスバーは1pxより全然あるやんか！全然隠れへんやんか！と思った方、（私だけ？） モバイルSafari
iPhoneとAndroidのユーザーエージェントの判定方法: WEBプログラム＆コードの逆引きリファレンスとIT情報日記
PHPやCGI、HTML、CSS、Javascript等のコードやプログラム逆引きリファレンスや小技集。素材集やサンプル無料コードプログラムのご紹介。PCやスマホ、アプリなどのITネタも。 企業のホームページ、WEBサイトのスマートフォン対応化が急がれています。 無線LANの環境も職場や自宅で整いつつあり、スマートフォン経由でのネットサーフィンが急増しているからでしょう。 今後のスマートフォン対応は必ずといっていいほど行っておく必要があります。 それが出来ない場合はなるべくデータ容量の軽いWEBサイトを構築しておく必要があります！ PHPでiPhoneとAndroidのユーザーエージェントの判定方法、スマートフォンを判別していく方法をご参考までに。 様々な方法がありますが、とりあえずこのくらいで充分でしょう！ ユーザーエージェントを判定し判断するプログラム、コードは多くありますし、携帯電話
今から使いたい! スマートフォンページの構築に役立つ Media Queries | HTML5GOGO
Media Queries については「第19回 HTML5とか勉強会」レポートの記事で少しご紹介していますが、 今回はもう少し詳しく解説させていただきます。 Media Queries（メディアクエリー）とは Media Queries はCSS2のMedia typesの拡張です。 Media typesで指定できた「screen」「print」などのメディアの指定に加え、 「width」「height」「color」 などの特徴（media features）を指定することができるようになりました。 ちなみにMedia typesでは下記のような感じで印刷用のスタイルを適応させるときに重宝しましたが </p> <link rel="stylesheet" type="text/css" media="print" href="/css/print.css" /> Media Quer
デバイスに合わせてCSSを振り分ける「Media Queries」 | DevelopersIO
Media Queriesは、読み込まれるCSSや、CSSの記述のインラインに条件を加えること出来るようになる仕様です。 今までもCSS2のMedia typesを使い、screenやprintなど大まかなメディア用スタイルを設定することはできました。ですが、それでけでは昨今のスマートフォン、タブレット端末事情にはとても対応できません。JavaScriptで対応する方法もありますがシンプルではありません。そこで、CSS3だけで振り分けが可能になるのがMedia Queriesという仕様です。 Media Queries Media Queriesはユーザーの端末、スクリーンサイズをもとに適したスタイルシートを適用することができます。Media Queriesを利用することで、PC用スタイルシート、タブレット用スタイルシート、スマートフォン用スタイルシートと個別にスタイルを指定することができ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Androidスマートフォンエミュレータの使い方 [ホームページ作成] All About![Androidスマートフォンエミュレータの使い方 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/b244d91faded6224bc0528f1f19e0d84f513ef21/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F3%2F8%2F1%2F2%2F2%2F5%2Ftopimg_large.jpg)
公海555000kk线路检测—首页（欢迎您）
html5-memo.com
