デバイスに合わせてCSSを振り分ける「Media Queries」 | DevelopersIO
Media Queriesは、読み込まれるCSSや、CSSの記述のインラインに条件を加えること出来るようになる仕様です。 今までもCSS2のMedia typesを使い、screenやprintなど大まかなメディア用スタイルを設定することはできました。ですが、それでけでは昨今のスマートフォン、タブレット端末事情にはとても対応できません。JavaScriptで対応する方法もありますがシンプルではありません。そこで、CSS3だけで振り分けが可能になるのがMedia Queriesという仕様です。 Media Queries Media Queriesはユーザーの端末、スクリーンサイズをもとに適したスタイルシートを適用することができます。Media Queriesを利用することで、PC用スタイルシート、タブレット用スタイルシート、スマートフォン用スタイルシートと個別にスタイルを指定することができ
マルチデバイス対応方法(viewport,CSSの出し分け)をまとめてみた【URL変更】
前回の続きで、マルチデバイスの具体的な対応方法をviewportの設定とcssの出し分けの2点でまとめてみました。 スマホ、タブレットに対応させるための方法として、やることは主に以下の二つです。 1,viewportの設定 2,cssの出しわけ それぞれまとめてみました。 viewportの設定 viewportとは、スマートフォンのブラウザのウィンドウサイズに該当するものです。 一方、スマートフォンの画面サイズ、いわゆるdevice-widthは980pxもありません。 iPhoneでいえば、viewportは横幅980px、device-widthは横幅320px、縦幅480pxです。 通常のPCサイトを見ると、ブラウザ上で縮小されて表示されます。 例えば、コンテンツ幅が800pxのサイトでは、縮小されて横幅が左右合計180pxの余白がでます。 また、スマホの画面サイズが横幅32
モバイルアプリケーション開発のためのHTML/CSS/JavaScript関連技術まとめ
モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。 jQuery Mobile jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。 「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。 クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
