コード・実装

【CSS】デバイスが縦長か横長か判定メディアクエリ

CSSでデバイスが縦長か横長かをメディアクエリで判定します。

CSSでデバイスが縦長か横長かをメディアクエリで判定

デバイスが縦長の状態の場合

スマホやタブレットを縦方向にみる場合などに使用します。

@media screen and (orientation: portrait) {
// ここに処理を書く
}

 

デバイスが横長の状態の場合

通常のパソコン画面や、タブレットやスマホを横方向にみる場合の指定

@media screen and (orientation: landscape) {
// ここに処理を書く
}

 

デバイスが縦長かつ、横幅が400px以下の場合

@media screen and (orientation: portrait) and (max-width: 400px) {
    // ここに処理を書く
}

 

デバイスが横長かつ、横幅が400px以上の場合

@media screen and (orientation: landscape) and (min-width: 400px) {
    // ここに処理を書く
}

 

以上です!

ABOUT ME
WEBクリ開発者
当ブログでは主にWeb制作・HTML・ CSS・SCSS・JavaScript・jQuery・Vue.js・Wordpress・個人開発情報の情報を発信。 WEBデザイナー・コーダー・プログラマー向けのサイトです。 また、個人開発のサービスやアプリのお知らせもさせていただいています。

未経験からでも技術を学べる

Udemy

Udemyとは、100,000以上の講座があるオンライン学習プラットフォームです。主に社会人が対象で、教えたい人が講座を開き、学びたい人が学ぶことができます。

何か新しいプログラミング言語を勉強したい。技術を習得したいという時に、Udemyはおすすめです。

動画学習のため、最初につまづきがちな環境構築も実際の画面で確認しながら、自分で動かすことができます。

 

世界最大級のオンライン学習サイトUdemy

 

MENTA

プログラミングの学習をサポートしてくれる人を探したいのならMENTAがおすすめ。

メンターさんや他のメンティさん(自分と同じようにプログラミングを学習している方々)とやりとりをし、学習を進める形が多いです。

\新規登録で300円割引クーポンプレゼント/プログラミング学習のスキルプラットフォーム【MENTA】