[CSS]Media Queries（メディア クエリ）を使用したデバイスごとの指定方法のまとめCSS3のMedia Queries（メディア クエリ）を使用して、デスクトップのブラウザ用をはじめiPhone, iPadなどのモバイル用にスタイルシートを分けるためのフレームワークを紹介します。 Hardboiled CSS3 Media Queries [ad#ad-2] スタイルシートの分け方は2種類あります。 プロパティ単位 ファイル単位 プロパティ単位でデバイスごとにスタイルシートを設定 「/* Styles */ 」の箇所にスタイルシートを記述。 スマートフォン（（縦長・横長）
HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ
iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。 iOS 6 がリリースされましたがアップデートされましたか？私はマップアプリをよく使うのですが、早速アップデートした方々の、マップがぁぁという叫びにびびってまだアップデートできておりません… で、まだ私の手元の iPhone 4S では iOS 5 が元気に動いている今日この頃ですが、iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。 原文 iPhone 5
jQuery lazy load pluginの導入と思わぬ不具合への対応！ – [NC]News Clipping
「jQuery lazy load plugin」というWordPress用のプラグインを利用すると、画像などがフワッとした感じでスクロールに応じて表示されるようになります。 プラグインを入れるだけなので、とても手軽なのですが、いくつか気になる点も。 ・サイドバーの画像にも影響してしまい、ページ下部までスクロールしないと表示されない ・「WPtouch iPhone Theme」プラグインを利用しているとiPhone等で画像が見れなくなる で、これらを解決するには、「jQuery lazy load plugin」の編集をクリック。 「jquery-image-lazy-loading/jq_img_lazy_load.php」を開きます。 この中に jQuery("img").lazyload({ という一文がありますので、そこの「img」の部分に、この機能を反映させたいIDやCLASS
jQuery Mobile 1.1、正式版が早くも登場！
昨年11月にjQuery Mobile 1.0として最初の正式版が登場してからわずか5カ月。最初の大きなバージョンアップとなるjQuery Mobile 1.1.0がリリースされました。 jQuery Mobileは、HTML5のタグを書くだけでプログラミングをせずにモバイルアプリケーションが作れるJavaScriptのフレームワーク。開発されたアプリケーションは、iOS、Android、WebOS、Windows Moblie、Symbianなどさまざまなモバイルプラットフォームで動作します。 jQuery Mobile 1.1では、画面上部もしくは下部につねに表示されるFixed Toolar（固定ツールバー）のちらつきがなくなった点、画面遷移がよりスムーズになった点などの改善が行われています。 固定ツールバーがCSSベースに モバイルデバイスのユーザーインターフェイスとして、画面上部
MdN Design｜総合情報サイト
iPhone 4はiPhone 3GSと同じ画面サイズのまま、2倍の解像度となった。 Androidでは機種により異なるが、1.5倍のものが多い。 同じ画面サイズで表示できるピクセル数が増えたため、細かい文字もくっきりとして読みやすくなった。 しかし、コンテンツの1pxをデバイス上の1pxとしてそのまま表示すると、全体的に小さく表示されてしまうことになる。 そこで、WebKitをベースとしたブラウザには「devicePixelRatio」というプロパティが用意されている【1】。 devicePixelRatioとは、直訳すると「デバイスのピクセル比率」で、コンテンツの1pxを実際のデバイス上で何pxとして描画するかを示すものである。 【1】スマートフォンのdevicePixelRatioと解像度の一例
アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール
モバイルデバイス用のWebサイトやWebアプリケーション開発で大変なものの1つが動作確認です。何台ものデバイスを机の上に並べて、ひとつひとつ確認しなければなりません。 アドビシステムズのAdobe Labsが公開した「Adobe Shadow」は、そうした苦労をしているデベロッパー、デザイナーにとって手放せないツールになるでしょう。 複数デバイスに対する同時表示とリモートインスペクション Shadowがどんなツールなのか解説用ビデオの説明を紹介しましょう。 iPhoneアプリのShadowを起動すると番号が表示されます。 その番号を、MacOSかWindows用Chromeブラウザのエクステンションとして配布されているShadowに入力します。これで、ChromeブラウザとiPhoneがペアになりました。 同じように、Android用ShadowもChromeブラウザとペアにすることができ
スマートフォンUSERAGENT一覧+モバイル版クローラ
以前、「スマートフォンUA一覧・2010夏」というエントリーを書きましたが、今後はこちらに統一しますので、ブックマーク等はこちらでお願いします。 自分用UA調査防備録 Luvpad（AD100）、LifeTouch Note（NEC）、Light-Tab（b-mobile）、XOOM（au）、OptimusPad（docomo）、京セラのデュアルディスプレイ搭載「Echo」（日本発売は未定ですが）あたりも調べないと。そう言えばPSPのゲームが出来る端末Xperia Playもついに発売ですか。欲しいなあ・・・。 参考URL 携帯向け開発者のための機種情報サイト ：： KEITAIALL：ケータイ・オール Android噂情報 | juggly.cn MOT：主にプログラム勉強メモ部屋 – 携帯用各クローラーのUSER AGENT Mobile-UserAgent検索システム – Happy
Screenfly
In an effort to improve our product and grow, Screenfly was recently acquired by BlueTree.ai. For the past three years Screenfly has helped web developers and readers around the world test their screens. As of 2020, Quirk Tools is under new management and will be redesigning and rebranding. Stay tuned for more information. 🤓
今から始めるiPhoneコーディング｜クロノドライブ
何だか周りにiPhoneを持ってる人が増えてきたなぁと思う今日この頃です。 それにつれてiPhone用のサイトをコーディングする案件も増えて来ましたので、コーディングするときのポイントをまとめました。 iPhoneの特徴 まずは、iPhoneの特徴を見てみましょう。 一つの端末で複数の解像度を持つ iPhoneの特徴の一つとして、縦持ち・横持ちのときで横幅の解像度が変わります。 例えば、縦持ちのときは320pxで、横持ちのときは480pxとなります。 ※縦持ちのとき ※横持ちのとき そのため、320pxに最適化したコーディングをすると、横持ちのときに160px分の余白が空いてしまうため、320pxにも480pxにも対応出来るコーディングをする必要があります。 ※そのためには、デザインをしっかりと考えたものにしなければいけませんが…。 HTMLやCSSの実装状況はパソコンと同様 iPhone
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
devicePixelRatioについて調べてみた - ぺーぺーエンジニアのおぼえがき
devicePixelRatioとは 1pxの画像をそのディバイス上では何pxで表示するかを指定した設定 webkit系に存在する なぜそんな設定があるのか？ iPhone3G,3GSの解像度と、iPhone4の解像度の違いから考える 機種 解像度 iPhone3G,3GS 480 x 320 iPhone4 960 x 640 iPhone4は前のiPhoneに比べて解像度が4倍ある。 画面のサイズは3.5インチと同じな為、1pxあたりの大きさがiPhone4の方が小さく敷き詰められている このことから、同じ5 x 5 の画像を表示しても通常はiPhone4の方が1/2に小さく表示されてしまう。 そのような自体を防ぐ為、1pxあたりの大きさが小さくなったiPhone4では1pxを2pxとして表示されるようにdevicePixelRatioで制御させれている。 縦と横の両方が2倍になること
スマートフォンサイトの作り方(6/8) - Viewportの設定 - シンプルな暮らし。 - 家族とWEBマーケティングな日々
問題児のViewport。いろんな端末でいろんな挙動を示すらしく、Viewportに何を指定するのか悩みました。 リキッドで横幅320pxをターゲットとしている場合 最低の横幅を320pxと想定して作成されたリキッドの画面であれば何も悩まずに以下を指定すればOKですね。 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> リキッドで横幅320px以上をターゲットとしている場合 今回の案件はPC画面とHTMLを共有している影響で、横幅320pxに収まりませんので、上記の指定ができません。なぜ320pxにこだわるかと言うと、個人的な経験則ですが以下の仕様が存在すると思われるから。 Viewportの
スマートフォン向けサイトの作り方 | ユージック
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないといえますが、iPhone4、4SやAn
Travellers Tales : ウェブサイトを iPhone/iPod touch 対応にする最も簡単な方法
ウェブサイトを iPhone/iPod touch 対応にする最も簡単な方法 viewport を設定して iPhone/iPod touch に対応しよう ぼちぼち iPod touch が届き始めましたね。 Safari on iPhone/iPod touch のために用意された meta 要素の viewport 属性1を使って、あなたのサイトをなんちゃって iPhone/iPod touch 対応にする方法を説明してみたいと思います。 方法は簡単です。 <meta name="viewport" content="width=1024" /> head 要素に上記のようなタグを入れるだけです。ただ、ここで width に指定する横幅を自分のサイトに合わせて最適化する必要があります。 ちなみに、上記の width=1024 となっている viewport の設定は Apple のホ
考察：Appleはスマホサイトを作らない。
今まで気づかずにいたが、Appleはスマホ(スマートフォン)向けサイトを作っていない。それは何故か。 予算がないとか、(どこぞのメーカーと違って)ウェブデザインや自社製品についての理解度が低いとか、おそらくそういったネガティブな理由ではない。Appleのウェブサイトには、自社のプロダクトデザインに通じる主張が表現されている。 Mobile Safari のUIデザインの本質を垣間見るウェブデザイン 自社のプロダクト(ここでは特にMobile Safari)のUIデザインが、何を理想として、どう調整されてきたのか、このサイトのデザインから読み取ることができる。 Appleのウェブサイトの裏側をちょっとだけ覗いてみると、viewport に width=1024 が記述されている。これは、iPhoneの小さな画面でも1024px分の幅があるものと仮想してレンダリングされるようにする、呪文のよう
モバイルアプリケーション開発のためのHTML/CSS/JavaScript関連技術まとめ
モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。 jQuery Mobile jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。 「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。 クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作
「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる － Publickey
このところHTML5関連のモバイルアプリケーション開発について調べていて、先週の水曜日にはSwapSkills主催のイベント「jQueryモバイルで簡単！ スマートフォンサイト作成」に参加してjQuery Mobileについて勉強してきました。 jQuery Mobileとは、jQueryのプラグインとして利用するモバイルアプリケーション用のライブラリです。そしてその驚異的なまでの簡単さは、これから業務用のモバイルアプリケーションの作り方を一変させてしまう可能性を感じさせます。 jQuery Mobileの大きな特徴は次の3つです。 1）HTMLを書くだけでモバイルアプリケーションができてしまう 2）モバイルのユーザーインターフェイス対応の部品が多く揃っている 3）iOS、Android、WebOS、Windows Moblie、Symbianなどクロスプラットフォーム対応である 具体的な
スマホサイトの作り方で、あんまり書かれてないことを書いてみた - Kaleidoscope
【スマホ対応サイト制作のより詳しい記事はこちら】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） スマホサイトの作り方関連のブログとかを見てて、viewport周りの基本的な設定は書かれているのですが、 個人的に重要だと思うポイントが、なかなかどなたも書いてらっしゃらないような気がするので、まとめてみました。 それは、 とにかく内側のHTML要素をハミ出さないように作る どうしてか？ ふつうは、スマホサイトというのは縦スクロールしかさせたくないですよね。 例えば、iPhoneで言うPortrait（縦）表示のとき、横幅320pxを超えたページ構成になると、 おかしな横スクロールが発生してしまいます。 viewportで拡大とかの禁止をおこなっていても、そうなります。 （まぁ、拡大とは意味が違うので当然なのですが。。。） 具体的にどうい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
iPad発売前に！iPad向けWebサイト制作についてのおさらい | tuglog!
