[CSS]Media Queries（メディア クエリ）を使用したデバイスごとの指定方法のまとめCSS3のMedia Queries（メディア クエリ）を使用して、デスクトップのブラウザ用をはじめiPhone, iPadなどのモバイル用にスタイルシートを分けるためのフレームワークを紹介します。 Hardboiled CSS3 Media Queries [ad#ad-2] スタイルシートの分け方は2種類あります。 プロパティ単位 ファイル単位 プロパティ単位でデバイスごとにスタイルシートを設定 「/* Styles */ 」の箇所にスタイルシートを記述。 スマートフォン（（縦長・横長）
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倍になること
スマートフォンで解像度ごとに最適な画像サイズにするdevicePixelRatioの設定 | ユージック
スマートフォンで解像度ごとに最適な画像サイズにするdevicePixelRatioの設定 2011年8月31日 スマートフォンでは機種によって解像度がことなるのは周知のとおり。 100px×100pxの画像をiphone3で表示すると100px×100pxで表示されるが、iPhone4では解像度が2倍なので50px×50pxになってしまいます。 スマートフォンの解像度は横幅320pxを標準として480px、640px、720pxなど機種により様々な違いがあります。そこでCSSのmedia query を利用して最適なサイズに書き分けを行います。 /* devicePixelRatio=1（iPhone3～3GS、低解像度Android端末）とdevicePixelRatio未対応ブラウザ */ .className { width: 100px; height: 100px; backgr
【レビュー】自由に使えるiPhone/iPad/Android/PC向け切り分けCSSテンプレート | エンタープライズ | マイコミジャーナル
Fantastic website design in Flintshire, North Wales from Stuff and Nonsense iPhoneやAndroid携帯といったスマートフォンからiPadのようなポータブルデバイス、従来のPCやノートPCにいたるまで、ネットワークにアクセスするデバイスの種類は多様化している。こうしたディスプレイサイズも解像度密度も異なるデバイスに対してそれぞれに適したデザインを提供するというのが、最近のWebデザイナの間で取り上げられることが多いトピックになっている。 こうしたトピックで取り上げられることが多いテクニックがCSS3のMedia Queryを使う方法だ。デバイスの解像度や密度の情報を取得して、それに応じて適用するCSSを切り替えるというもの。これまで多くのブログでこのテクニックが取り上げられ、サンプルコードとともに紹介されている
iPhone & iPad それぞれにCSSを切り替える方法｜BLACKFLAG
これからiPhone & iPadを制作想定環境にしっかりと取り入れてコーディングしていくことが多くなりそうですが そんな際に役立ちそうなCSS切り替え方法の紹介。 まだiPhone & iPad向けCSSハックは発見されていないようですが（そもそも無理な気がしています…） iPhone & iPadそれぞれに別々のCSSファイルを読み込ます、といった方法がありました。 ≫HOWTO: CSS for the iPad [Update] « Thomas Maier – web & communication designer CSSを読み込む際の『media』属性を使ってiPhone & iPad向けのメディアタイプを入れることで、 他のブラウザはそれを無視する構成のもよう。 指定方法については以下。 ◆iPhone ＜link rel="stylesheet" media="only
Less Framework
An adaptive CSS grid system. What It Is Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid. Default Layout 10 columns at 992 px. For desktops, laptops, tablets in landscape orientation, and all old browsers. Can be split according to the Golden Ratio at 6 columns, which is also the optimal width
【レポート】黄金比でどのスクリーンにも適したデザインを「Less Framework 3」 | エンタープライズ | マイコミジャーナル
Less Framework is a cross-device CSS grid system based on using inline media queries. iPhone、iPad、PC、Androidベースのスマートフォンやタブレットデバイスなど、インターネットを利用するデバイスの多様化が進んでいる。スクリーンサイズの異なるデバイスで動作するブラウザ向けにそれぞれ最適化されたWebデザインを提供するテクニックのひとつに、CSS3で策定が進められているメディアクエリを使う方法がある。このテクニックをベースにして開発されたCSSフレームワークのひとつにLess Framework 3がある。 Less Framework 3は、言ってしまえばデバイスのスクリーンサイズや表示領域サイズに応じて幅を変更するシンプルなフレームワークだ。Less Framework 3のサイトにアクセ
[iPad] CSS3Machine: ウェブデザイナー必須！CSS3をGUIでつくって即プレビューできる！3395 | AppBank
あのCSS3独特の、丸角・影付きボタンがすぐつくれます！ CSS3MachineはCSS3のルールに則ったCSSファイルが簡単につくれてしまうアプリ。 CSSファイルと言えば手作業で編集する場合、「編集→保存→ブラウザのページを更新→プレビュー」の繰り返しでしたが、このアプリは値を編集すればプレビューは即更新！ ほぼリアルタイムに編集した結果を見ることができます。 また複雑な構文になりがちなCSSを、セレクタというフォルダをつくってその中にプロパティを設け、値はスライドバーで調整するという単純な階層で管理できるも良いですね。 詳しくご紹介します。 CSSだけでロゴをつくる 今回はAppBankのロゴをサクっと新しく作ってみます。 左側にCSSのセレクタやプロパティ、右側にプレビューとプロパティの値を表示します。 なお、プレビューで表示される内容（HTML）は編集可能です。 HTMLタグの入
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iPad発売前に！iPad向けWebサイト制作についてのおさらい | tuglog!
認証がかかっています