このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

CSS Media Queries(メディアクエリ)を使用した指定方法

iPhone

2011.09.20

この記事は最終更新日から1年以上が経過しています。

CSS Media Queries(メディアクエリ)を使用したデバイスごとの指定方法です。

CSS3のMedia Queries(メディア クエリ)を使用して、デスクトップのブラウザ用をはじめ

iPhone, iPadなどのモバイル用にスタイルシートの分ける方法です。

スタイルシートの分け方は

※プロパティ単位

※ファイル単位

の2種類になります。

プロパティ単位でデバイスごとにスタイルシートを設定

スマートフォン(縦長・横長)

@media only screen and (min-device-width : 320px)
  and (max-device-width : 480px) {
}

スマートフォン(横長)

@media only screen and (min-width : 321px) {
}

スマートフォン(縦長)

@media only screen and (max-width : 320px) {
}

iPad(縦長・横長)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}

iPad(横長)

@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and
(orientation : landscape) {
}

iPad(縦長)

@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and
(orientation : portrait) {
}

デスクトップのブラウザ用(横長)

@media only screen and (min-width : 1224px) {
}

大きいモニター用

@media only screen and (min-width : 1824px) {
}

iPhone4などの高解像度用

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
}

ファイル単位でデバイスごとにスタイルシートを設定

スマートフォン(縦長・横長)

<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">

スマートフォン(横長)

<link rel="stylesheet" href="smartphone-landscape.css" media="only screen and (min-width : 321px)">

スマートフォン(縦長)

<link rel="stylesheet" href="smartphone-portrait.css" media="only screen and (max-width : 320px)">

iPad(縦長・横長)

<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">

iPad(横長)

<link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)">

iPad(縦長)

<link rel="stylesheet" href="ipad-portrait.css"
media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)
and (orientation : portrait)">

デスクトップのブラウザ用(横長)

<link rel="stylesheet" href="widescreen.css" media="only screen and (min-width : 1224px)">

大きいモニター用

<link rel="stylesheet" href="widescreen.css" media="only screen and (min-width : 1824px)">

iPhone4などの高解像度用

<link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5)">

Comment

Related Article

【保存版】iPhoneだけで web開発できる 無料アプリをまとめてみました。2016年版

2016.04.22

iPhone6でバックアップから復元出来ない問題

2014.09.23

iPhone5 バッテリー交換プログラム 交換出来ず!

2014.09.15

iTunesで 「iPhoneの内容を読み込めません」エラー等の回避 「DiskAid」アプリでiPhoneのデータをバックアップ

2014.04.29

iPhoneの画面をキャプチャし動画撮影する方法 Reflector

2013.03.24

iPhoneで未開封メール全て開封済みにする

2012.10.13

iOS6にて-webkit-fillterプロパティが対応

2012.10.03

無料で使えるiPhone5のモックアップ用ベクター素材が早くも登場

2012.09.23

CSS3で作成 iPhone風 アイコン

2011.09.20

CSS Media Queries(メディアクエリ)を使用した指定方法

2011.09.20

CATEGORY LIST

LATEST NEWS

Mac Home brewでSDL2.0を簡単に環境設定

C

2020.06.24

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その3

Python

2020.06.14

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その2

Python

2020.06.08

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その1

Python

2020.06.07

このコロナ禍で、飛沫感染防止など求められる中「電子メモパッド」が重宝。 1300円で購入可能な電子メモパッドが超絶便利な件。

tool

2020.06.02

OAuthのフローを可視化できるツールを作ってみました。

JavaScript

2020.05.17

Django django-allauthで、サクッとソーシャルログイン機能を実装

Python

2020.04.12

部下を育てる技術

イベント

2020.04.08

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

JavaScript

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

JavaScript

2020.01.31

まだ間に合う!!ラズベリーパイ購入なら「RSコンポーネンツ」で!最大40%オフの年に1度の大特価期末セール中!

RaspberryPi

2020.01.25

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

JavaScript

2020.01.24

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US