外部サイトのJSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由 あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。 ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読み込んでくれないのです。 上の例ではjQueryの読み込みに失敗していますが、エラーメッセージ「Uncaught ReferenceError: jQuery is not defined 」を見てもHTTPS/HTTPのプロトコルが原因だとはすぐ気づかないので、わかりにくいバグになってしまいます。 結論 JSファイル(とかCSSとか画像とか)を読み込むときは、"http:"の部分を省
長らく仕様策定に手間取っていたHTML5が大きく推進することになった理由の一つには、やはりAppleがiPhoneのFlashへの非対応を発表したことがあるでしょう。HTML5自体はいまだ完全には標準化されていませんが、主要ブラウザでは既にcanvasによる描画処理をサポートするようになっており[1]、今後徐々にFlashからHTML5への移行が進んでゆくものと思われます[2]。 FlashのプロジェクトをHTMLに変換するツールにはSwiffy(Google)、SWF Animation Converter(マルチでバイスlab.)など何種類かありますが、今のところブラウザ互換性や、ActionScript部分への対応状況などの問題により、これといった決め手がないのが現状です。 その中で、Adobe Flash Professional CS6にcanvasアニメーション用フレームワーク
[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-
斉藤さん(@cssradar)が紹介していた20 Mobile/Desktop Browser bugs and tricks any Senior Frontend Web Developer should knowがおさらい的に参考になったので各項目の表題だけ訳しておきました。ほとんど邦訳するということがないのでおかしい部分などありましたらご指摘頂けると幸いです。 各内容の詳細については訳していません。本文とサンプルのソースを見れば大体わかると思います。 また、Gistにも置いています。 20 Mobile/Desktop Browser bugs and tricks any Senior Frontend Web Developer should know Link outlines / highlights are misaligned on the Kindle Fire リン
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:
Flash Lite 1.1でビットマップ画像(GIF、JPEG、PNG画像)を配置した際に正しく配置されないバグの対処法をリストにしました。 まずこのリストの(1)~(6)を同時に試し、それでもだめなら(7)~(9)をやってみることで大抵解決できる(はず)。 (1)画像をシンボル化する ビットマップ画像をステージに配置したら、シンボル化を行います。 シンボルのタイプをグラフィックに、基準点を右下に設定してください。 (2)画像の大きさを変更する 縦横が奇数 px の大きさの画像の場合、width、height 共に偶数 px になるよう加工します。 (3)配置位置に小数点がないか確認する 小数点があると、補間が行われるためずれが発生することがあります。 (4)縮小・拡大がされていないかを、[変形]タブで確認する 画像の拡大縮小が行われていると配置がずれてしまうことがあります。 ビットマッ
あ、ども僕です。 最近、何かとスライダー的なやつを扱う機会が増えております。 よくあるスライダーですね。 こんな感じのやつですね。 画像がスーっと行くやつ。バナーなんかで良く見かけますよね。 これをスマフォンサイトでも実装しているのですが、マークアップは単純に <div class="slider"> <ul class="sliderLi"> <li><img src="yes.jpg" alt="no"></li> <li><img src="yes.jpg" alt="no"></li> <li><img src="yes.jpg" alt="no"></li> </ul> </div> こんな感じだったりします。 liの親要素であるulに-webkit-transform:translate(-350px,0px);などで 動かしてスライドしているかの様に実装するのですが、 スライ
ページの先頭に戻るなどのリンクにアンカーリンクをつけることがある。 しかしアンカーリンクはAndroidだと1回しか動作しない。 たとえば以下の画像のように<a href="#top">ページの先頭に戻る</a>という リンクを貼り、Androidのブラウザで表示してクリックしてみると 1回目のクリックは動作するが2回目以降は効かなくなってしまう。 これを防ぐためには下記のようにアンカーリンクの代わりに JavaScriptを使用して目的の箇所に移動する必要がある。 function backtop(){ Element.scrollTo("top"); //ページの先頭へ戻るのなら scrollTo(0,0); も可能 }
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く