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:
スマホサイト案件の見積もりについて
スマホサイト案件の見積もりについて 「Android案件の見積り」や「スマホ案件の見積もりについて」を受けて、アプリではなくHTML+CSSでつくるスマホサイト制作の見積もりではまりやすいポイントをまとめています。 HTML+CSS構築ではPCの0.７倍くらいの単価 スマホサイトはPCより小さいのでHTML+CSSの構築コストも安くみます。ただ、CSS3で作ったほうが良いところで画象の切り出しより手間がかかることもあります。ならすとページ単価はPCの0.７倍くらいの感じじゃないでしょうか？ 検証コストは増大 対応端末が多く検証コストはPCと比較して増大します。iPhone3G、iPhone3GS、iPhone4、iPhone4Sの中から2端末ぐらい(iOS4.x系とiOS5系)。Android2.2、Android2.3から売れてる端末で2端末ぐらい検証するのがよいでしょう。(場合によって
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
Safariの開発者メニューでスマートフォン開発
Safariの開発者メニューでスマートフォン開発 AndroidやiPhoneのスマートフォンのサイト作成を行う際にSafariの開発者メニューを利用すると便利です。 開発者メニューは環境設定の詳細タブから設定が可能 「メニューバーに"開発"メニューを表示」にチェックを入れることでメニューバーに開発者メニューが追加されます。 開発者メニューではユーザーエージェントの切り替えができるので、ユーザーエージェントで処理を変えている場合もSafariで検証が可能です。 iPhoneやiPod touch、iPadなどだけではなく「その他」から任意のユーザーエージェントも選べます。複雑なユーザーエージェント分岐を行っていなければ「Android」などと入力するだけでAndroid用の処理が実行できます。 また、Webインスペクタを起動することでFirebugに似たデバッグツールが利用できるようになり
「Web Intents」でTwitterの機能をサイトに埋め込む
「Web Intents」でTwitterの機能をサイトに埋め込む 先日、AmazonがTwitterやFacebookによるシェア機能に対応したので、どうやって実装しているかを見ているとTwitterは「Web Intents」という機能を利用して実装していました。 ノーチェックだったのですがWeb Intentsは4月1日に公開された機能らしくすごく便利です。今までサイトにTwitterの機能を埋め込む際にはOAuth認証を利用しなくてはいけなかったのですが「Web Intents」を利用すれば簡単に埋め込めるようになっています。 Tweet機能の実装 つぎのようなシェアボタンを簡単に埋め込めます。 このページをシェア ソースコードは次のような感じになります。 <script type="text/javascript" src="http://twitter.com/intent/t
Android エミュレータでサイト制作
Android エミュレータでサイト制作 AndroidではWindows、Mac OS X 、Linuxで利用できる Android SDK が公開されており、SDKに含まれるAndroid エミュレータを利用することで効率よくサイト作成を行うことができます。 ダウンロードとインストール Android SDKからSDKファイルをダウンロードしてインストールを行います(今回はWindowsの「installer_r09-windows.exe」を利用します)。ダウンロード後はウィザードにそってインストールを進めます。(JDK（Java SE Development Kit ）がインストールされていない場合は、事前にJDKをインストールする必要があります。) インストール後に「Android SDK and AVD Manager」が立ち上がり、パッケージにインストールが求められるので「I
Googleの検索結果に表示されるパンくずリストがmicrodataとRDFaに対応
Googleの検索結果に表示されるパンくずリストがmicrodataとRDFaに対応 ネタ元:Google、パンくずリストでのURL表示にマークアップを利用可能に | 海外SEO情報ブログ・メルマガ これまでWEBサイト所有者が制御できなかったGoogle の検索結果に表示されるパンくずリストがmicrodataとRDFaで制御が可能になったようです。 パンくずリストは次のように検索結果のURL中に表示されます。 microdataでの記述 HTML5 で策定されているmicrodataは、特定の種類の情報（レビュー、人物、イベントなど）をラベル付けする方法の 1 つです。 <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/dresses" ite
iPhone/iPadでダブルタップをJavaScriptで実装する
iPhone/iPadでダブルタップをJavaScriptで実装する iPhone/iPadのJavaScriptでは「onclick≒タップ」なのに「ondblclick≠ダブルタップ」となるのでダブルタップを利用したい場合は独自に実装しなくてはいけない。 次のように記述するとjQueryで擬似的にダブルタップを実装することが出来ます。 $("p").data("dblTap",false).click(function(){ if($(this).data("dblTap")){ //ダブルタップ時の命令 console.log("ダブルタップ"); $(this).data("dblTap",false); }else{ $(this).data("dblTap",true); } setTimeout(function(){ $("p").data("dblTap",false);
SBO（ソーシャルブックマークオプティマイズ）のブックマークレット
SBO（ソーシャルブックマークオプティマイズ）のブックマークレット SMO（ソーシャルメディアオプティマイズ）の中でもソーシャルブックマークの最適化に重点を置いたSBO（ソーシャルブックマークオプティマイズ）。 SBOとしてWEBサイト上にソーシャルブックマークのブックマークレットを設置することの意味は大きいです。 特にIT系の読者の多いサイトでは、コンテンツさえよければ多大なトラフィックがソーシャルブックマークより見込めます。 メジャーなソーシャルブックマークのブックマークレット(htmlとMovableType用とWordPress用)とアイコンをまとめときます。 アイコンはダウンロードして使ってください。 (FireFoxは記号でも改行を行わない仕様なのでIEでの閲覧がお勧めです) はてなブックマーク 日本で一番有名なソーシャルブックマーク。人気エントリーは毎日チェックしてます。 h
Fireworksでfaviconを作成
Fireworksでfaviconを作成 CSS Nite in Omotesando, Vol.1 「Fireworksビギナーのための120分徹底トレーニング」でFireworksでは拡張機能を利用すればfavicon(ファビコン)を作成できると紹介されていたので早速試してみました。 拡張機能のダウンロードとインストール Favicon - Adobe Fireworks Extensionsより拡張機能（ExportAsFavicon-100.mxp）をダウンロードします。 mxpはAdobe Extension Managerで利用できる拡張子で実行することでAdobe製品に拡張機能をインストールすることができます。 実行後、Adobe Extension Managerが立ち上がり拡張機能インストールの免責が表示されますので承認してインストールを行います。 (注意:Windows
jQueryにおける:first-childと:firstの違い
jQueryにおける:first-childと:firstの違い jQueryには「:first-child」というセレクタと「:first」というセレクタが存在しており、混同されがちですが異なる意味を持っております。 例えば、次のようなHTMLがあるとします。 <ul> <li>list1-1</li> <li>list1-2</li> <li>list1-3</li> <li>list1-4</li> </ul> <ul> <li>list2-1</li> <li>list2-2</li> <li>list2-3</li> <li>list2-4</li> </ul> :first-childで指定できるのは「<li>list1-1</li>」と「<li>list2-1</li>」です。 $("li:first-child").css("color","red"); サンプル 一方:f
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
jQuery.suggestをIEの日本語に対応
jQuery.suggestをIEの日本語に対応 jQuery.suggestでサジェスト機能を実装しようとしたところIEでの日本語の認識が上手に行きませんでした。 調べてみたところ原因は100行目あたりの以下のコード。 } else if ($input.val().length != prevLength) { if (timeout) clearTimeout(timeout); timeout = setTimeout(suggest, options.delay); prevLength = $input.val().length; } 文字数で変化を取得しているので、たとえば「か」と入力したい場合、最初の「k」を入力した時点でサジェスト機能が動作し、「a」を入力して「か」になった段階では文字数が変わらないのでサジェスト機能が動作しない形になる。 } else if ($inpu
プログラムのコードを配色する「google-code-prettify」
プログラムのコードを配色する「google-code-prettify」 google-code-prettifyはプログラムのコードに色を付けるJavaScriptライブラリになります。 CやJava, Python, SQL, HTML, XML, CSS, Javascript,Ruby, PHP, Perlなど様々な言語に対応しております。 設置方法 ダウンロードしたprettify.cssとprettify.jsを読み込みます。 <link href="prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="prettify.js"></script> prettyPrint()を実行します。 配布元ではonloadイベントで追加と説明していますがaddEventL
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.webcreativepark.net/2007/06/09-100515.html_2007-08-10