[CSS]スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル
iPhoneなどの小さいサイズのモニターをはじめ、2560pxの大きいサイズのモニターなど、それぞれの幅に適したレイアウトを自動的に適用するMedia Queriesをしっかりと身につけるためのスタイルシートのチュートリアルを紹介します。 Adaptive & Mobile Design with CSS3 Media Queries [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページの確認 HTML CSS Media Queries 完成したデモの確認 デモページの確認 チュートリアルの前にまず、それがどのように見えるかデモページをチェックしてみてください。 このデモページはHTML5+CSS3 Media Queriesで作成されており、ユーザーが使用しているビューポートのサイズに適したレイアウトに自動調整して表示されます。 デモページ 左から、ノーマル、ナロウ、ス
iPadやiPhoneなど、デバイスごとに最適化したCSSを読み込む Media Queries
iPhoneとかiPadとか、デバイスに応じて最適化する @tee_suzuki さんに、Media Queries なる実装が存在すると聞いて、早速トライしてみました。Media Queries自体はCSS3の実装の一環のようです。media属性の中に、デバイスの種類や解像度、向きなどの条件文を記述することで、適用するCSSを分岐させる仕組み。 こんな感じのものをheader要素へ width: 〜480pxの端末のときには iphone.css width: 481〜1024の端末が縦（portrait）のときには ipad-portrait.css width: 481〜1024の端末が横（landscape）のときには ipad-landscape.css width: 1025〜の端末のときにはpc.css Media Queries デモ ためしに、Media Queriesを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
