投稿日: | 最終更新日:
メディアクエリで指定する条件
Media Queriesの概要と記述例について前回紹介しました。
Media Queriesの条件分岐に利用できる指定方法には、これまでにご紹介したものも含め、一例を以下でご紹介します。
記述例
width
横幅を条件にしてCSSを制御します。
※スクロールバーを表示する場合は、スクロールバーの幅も含みます。
max-width
表示領域が700px以下のとき適用します。
@media screen and (max-width: 700px) { /* 700px以下の場合 */ }
min-width
表示領域が700pxを超える場合適用します。
@media screen and (min-width: 700px) { /* 700px以上の場合 */ }
複数条件
andで最大幅と最小幅を両方指定します。
@media screen and (max-width: 800px) and (min-width: 400px) { /* 800px以下~400px以上の場合 */ }
height
縦幅を条件にしてCSSを制御します。
※スクロールバーを表示する場合は、スクロールバーの幅も含みます。
max-height
高さが700px以下のとき適用します。
@media screen and (max-height: 700px) { /* 高さ700px以下の場合 */ }
min-height
高さが700pxを超える場合適用します。
@media screen and (min-height: 700px) { /* 高さ700pxを超える場合 */ }
複数条件
andで横幅と縦幅を両方指定します。
@media screen and (max-width: 800px) and (max-height: 500px) { /* 横幅800px以下で、高さ500px以下の場合 */ }
device-width
画面の横幅を条件にしてCSSの適用を制御します。
PC:(ブラウザのウインドウ幅に関係なく)ディスプレイの幅を示。
スマートフォン:(端末の画面の物理的な解像度ではなく)ブラウザの仮想的な解像度での横幅を表示。
例)iPhone5の画面の横方向の物理的なピクセル数は640pxです。
しかし、device-widthの値は320pxです。
@media screen and (max-device-width: 1024px) and (min-device-width: 640px) { /* 1024px以下~640px以上の場合 */ }
device-height
画面の高さ(縦方向の長さ)を条件にしてCSSの適用を制御します。
「device-width」と同じく、PCならディスプレイの高さを示し、スマートフォンならなら、ブラウザの仮想的な解像度での高さを示します。
例)iPhone5なら画面の縦方向の物理的なピクセル数は1,136pxです。
しかし、device-heightの値は568pxです。
@media screen and (max-device-height: 768px) and (min-device-height: 480px) { /* 768px以下~480px以上の場合 */ }
orientation
端末の向きを条件にしてCSSの適用を制御します。
縦置き:「portrait」
横置き:「landscape」
@media screen and (orientation: portrait) { /* 縦置き(縦長)の場合 */ } @media screen and (orientation: landscape) { /* 横置き(横長)の場合 */ }
- Python 114
- 制作 54
- RaspberryPi 41
- Django 40
- WordPress 40
- Linux 27
- VPS 22
- JavaScript 21
- PHP 20
- HTML・CSS 19
- AWS 16
- 仮想環境 15
- レスポンシブデザイン 13
- マイコン 11
- WEB全般 11
- 動画製作 9
- Webサービス 8
- 統合開発環境 8
- 機械学習 8
- PyCharm 7
- jQuery 7
- AfterEffects 7
- 起業・設立 7
- Django REST framework 6
- C# 6
- デザイン 6
- SEO 6
- pydata 6
- Visual Studio 5
- 数学 5
- 携帯サイト 5
- heroku 5
- Mac 5
- illustrator 5
- node.js 5
- Anaconda 5
- Nginx 4
- Jupyter Notebook 4
- インフラ 4
- Google Colaboratory 4
- symfony 4
- Webスクレイピング 3
- photoshop 3
- Go言語 3
- PC 3
- ツール 3
- Docker 3
- facebook 3
- 作業効率化 3
- データベース 3
- Cloud9 3
- コマンド 2
- micro:bit 2
- Kali Linux 2
- Webサーバー 2
- MariaDB 2
- ドローン 2
- コンテナ 2
- DaVinci Resolve 2
- ネットワーク 2
- Java 2
- movie 2
- PCDJ 2
- 音楽 2
- XSERVER 2
- Ansible 1
- Vue.js 1
- JSON 1
- Bootstrap 1
- バージョン管理システム 1
- SSL 1
- S3 1
- ムームードメイン 1
- ネットワーク 1
- アニメーション 1
- D3.js 1
- Rhino 1
- アニメ 1
- git 1
- windows 1
- アクセス解析 1
- スマートフォン 1
- アフィリエイトノウハウ 1
- 知識 1
- TypeScript 1
- 役立つ本・書籍 1
- データサイエンス 1
- ESP32 1
- AI 1
- ownCloud 1
- API 1