Web制作における対応ブラウザの選定方法
Web制作における対応ブラウザの選定方法 「フロントエンドのテクニカルディレクションに求められるスキル」で出てきた話題として対応ブラウザの選定方法について掘り下げて解説を行います。 サイトのターゲット・予算・リソース・開発期間などビジネスにより選定方法は異なりますので、あくまで参考程度にしてください。 対応ブラウザを絞る意味 まず最初は「なぜ、対応ブラウザを絞るのか」という視点から。 理想論で言ってしまえばWebサイトを訪れるユーザー全てに最適なコンテンツを提供できれば申し分がありません。 しかし、現実的には各ブラウザ/OSによって実装が異なる機能があったり、実装されていない機能があったり、特有のバグを含んでいる物があったりすることもあり、そういった場合は個別のブラウザ/OSに対してデバッグやチューニングを行わなくてはいけません。 そのため対応ブラウザの数が多ければ多いほど、Webサイトの
iOS 8.4.1の:hover問題
iOS 8.4.1の:hover問題 追記(2015年10月23日) iOS 9.0.2で確認した所この問題は解決していました。 ネタ元：結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも１クリックカウントっぽいSafari | WEBスキルアップ君 上記の件、結構やっかいな問題なのでiPhone6+をiOS 8.4.1にアップデートして色々と検証してみました。 どんな現象になるの？ 以下のサンプルで確認できます。 a:hover img{ opacity:0.6; } <a href="http://blog.webcreativepark.net/"><img src="button.png" alt="button"></a> サンプルページ iOS 8.4.1をお持ちでない方は以下の動画で確認できます。 SPサイトなら:hoverを利用するケースは少ないので使わ
今どきのCSS3グラデーションの指定方法
意外とAndroid以外は最新ブラウザが正式な記述に対応しております。 正式な記述の対応が遅かったSafariやiOS、非対応のAndroidは比較的に古い段階から-webkit-gradientに対応してますので、-webkit-gradientも合わせて記述すると対応ブラウザを利用しているユーザーが一気に増えます。 IE9以下や上記の記述では対応できない古いブラウザにはちゃんとフォールバックを指定しましょう。 上記を踏まえると以下のように記述するのがシンプルでよいのではないかと落ち着きました。 /*Other Browser*/ background: #91bae4; /*For Old WebKit*/ background: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #b6e2fd), co
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オブジェクトとは?
jQueryオブジェクトとは? このエントリーは軽めのjQuery Advent Calendar 2012の20日目のエントリーです。 よくjQueryの解説などを見ていると「jQueryオブジェクト」という単語が出てきますね。今回はjQueryオブジェクトとは何者かを解説をします。読み終える頃には少しだけJavaScriptに詳しくなれるよ。（若干長いです。） そもそもオブジェクトとは? さて、「jQueryオブジェクト」を解説する前にJavaScriptのオブジェクトについて解説します。JavaScriptのオブジェクトは非常に複雑なのですが、基本だけでもわかるとJavaScriptやjQueryの学習効率が全然かわってきます。 まず、ざっくりと解説するとオブジェクトとは「プロパティ」と「メソッド」を持つ構造体のことです。 プロパティとは? ではプロパティとはなんでしょうか?プロパテ
jQuery1.8系のanimate()で一部のAndroid端末が落ちる件
jQuery1.8系のanimate()で一部のAndroid端末が落ちる件 jQuery1.8でjQueryのanimateメソッドが刷新されましたが、その影響で一部のAndroid端末(P01-Dとか)のブラウザでanimate()メソッドの処理でブラウザが落ちてしまう現象が発生します。 対応策としては jQuery 1.7.2に差し替える animate()をCSS3アニメーションに変更する なんかが考えられます。 追記 jQuery1.8.3で解決されました。発生していた端末はAndorid2.3.5のようです。 関連エントリー AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ iOS6でtransitionアニメーションが少し遅れて開始する問題 スマートフォンとposition:fixedのバグ Android4.0とiframe Androidと
iOS6でtransitionアニメーションが少し遅れて開始する問題
iOS6でtransitionアニメーションが少し遅れて開始する問題 よくあるスワイプギャラリーを作成しているとiOS6でアニメーションが少し遅れて開始する問題にぶつかりました。 どういった感じかというとスワイプ終了時に以下のようにしてtransitionを利用して規定位置までアニメーションさせようとすると一拍あいてから動き出す。iOS5だとちゃんと動作します。 $("#carouselInner") .css("-webkit-transition","-webkit-transform 600ms ease") .css("-webkit-transform","translate3d("+x+"px,0,0)"); 色々調べていると以下のページに行き当たりました。 iOS6 html hardware acceleration changes and how to fix them
Android4.0とiframe
Android4.0とiframe iframe内でコンテンツを展開するとAndroid4.0でシビレルくらい様々なバグが発生します。 弊社松田の調べによると見つけただけでも以下のような不具合があるようです(Galaxy Nexus調べ)。シビレますね。 a要素に display:block を指定しても、必ずインラインになる position:fixed で配置した要素そのものがタップできない document.body.scrollTop が取得できない -webkit-tap-hightlight-color の指定が効かない ページ内のアンカーリンクが効かない ページの最下部に配置したa要素はタップはできるが、リンク遷移せず、イベントも発火しない z-indexで下に重なる要素が、pointer-events の指定が全く効かなくタップできてしまう js等で要素を位置移動しても、要
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
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
14のjQueryベストプラクティス[to-R]
14のjQueryベストプラクティス 原文:14 Helpful jQuery Tricks, Notes, and Best Practices 良かったので翻訳してみました。かなりの意訳で、上手に訳せてない箇所も多いので詳しくは原文を参照してください。 1.メソッドはjQueryオブジェクトを返す ほとんどのメソッドがjQueryオブジェクトを返すのが重要です。 これにより次のようなメソッドチェーンが可能になっています。 $someDiv .attr('class', 'someClass') .hide() .html('new stuff'); jQueryオブジェクトを返すのがわかっていれば次のように分割して書くことも出来ます。 var someDiv = $('#someDiv'); someDiv.hide(); 次のように一行で書くことも出来ます。 var someDiv
複数のjsライブラリを利用する際にonloadを書き換える方法[to-R]
複数のjsライブラリを利用する際にonloadを書き換える方法 複数のJavaScriptライブラリを利用していて、正常に動作しないや、どちらか一方しか動作しないなどの状況に陥ることがあります。 原因は様々なのですが、一番多いのがJavaScriptライブラリのonload記法に依存する問題です。 onload記法とはJavaScriptを実行するタイミングをonloadイベント（ブラウザがすべてを読み込んでから実行）に設定する際の書き方です。 DreamWeaverを利用している方は、以下のようなソースをよく見るかもしれません。 <body onload="MM_preloadImages('hogehoge')"> これはonloadイベントにMM_preloadImagesという関数を設定しているという意味です。 他にもソースコード中の window.onload = functio
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホ用のブラウザ判別を行うための「 jquery.browser.sp.js 」