CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSメディアクエリで一般的なデバイス別ブレークポイントを設定する方法

CSSのメディアクエリ（@media）を活用すると、スマートフォン、タブレット、デスクトップPCなど、デバイスごとの画面幅（ブレークポイント）に応じてスタイルを柔軟に切り替えることができます。レスポンシブWebデザインを実現するうえで欠かせないテクニックです。

よく使われる一般的なブレークポイント

多くのWebサイトでは、以下のような画面幅がブレークポイントの目安として採用されています。

  • 600px以下 … スマートフォン
  • 600px〜767px … タブレット（縦向き）
  • 768px〜991px … タブレット（横向き）・小型ノートPC
  • 992px〜1199px … デスクトップPC
  • 1200px以上 … 大型デスクトップ画面

コード例

実際にメディアクエリを使って、各ブレークポイントごとに背景色を切り替えるサンプルコードは以下の通りです。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        color: white;
    }
    @media only screen and (max-width: 600px) {
        body {
            background: rgb(207, 60, 151);
        }
    }
    @media only screen and (min-width: 600px) {
        body {
            background: rgb(0, 128, 107);
        }
    }
    @media only screen and (min-width: 768px) {
        body {
            background: rgb(226, 136, 18);
        }
    }
    @media only screen and (min-width: 992px) {
        body {
            background: rgb(108, 25, 185);
        }
    }
    @media only screen and (min-width: 1200px) {
        body {
            background: rgb(13, 124, 63);
        }
    }
</style>
</head>
<body>
<h1>典型的なブレークポイントの例</h1>
<h2>
画面サイズを変更すると、ブレークポイントごとに背景色が変化します
</h2>
</body>
</html>

実行結果

上記のコードをブラウザで開き、画面幅が1200pxより大きい場合は、緑色の背景で次のように表示されます。

CSSメディアクエリで一般的なデバイス別ブレークポイントを設定する方法

一方、画面幅が0〜600pxの場合（スマートフォンなど）は、ピンク系の背景に切り替わり、次のように表示されます。

CSSメディアクエリで一般的なデバイス別ブレークポイントを設定する方法

ポイントのまとめ

  • min-widthは「指定した幅以上」、max-widthは「指定した幅以下」にスタイルを適用します。
  • <meta name="viewport">タグを必ず設定し、モバイル端末でも正しくレスポンシブ表示されるようにしましょう。
  • ブレークポイントの値はプロジェクトやデザインに応じて調整して問題ありません。
  1. CSSだけで作る！Webサイトの「About Us」ページの作り方【サンプルコード付き】

    「About Us（私たちについて）」ページは、企業の理念やチームメンバーの顔ぶれを訪問者に伝えるために欠かせないページです。本記事では、HTMLとCSSだけを使い、メンバーごとのプロフィールカードを並べたスタイリッシュなAboutページを作成する方法を、実際のコード例とともにわかりやすく解説します。 作成するページの概要 今回作成するAboutページには、以下の要素が含まれています。 濃い紫の背景に白文字の見出し（h1）を配置したページヘッダー メンバーごとの「顔写真・名前・役職・Contactボタン」をまとめたカード型デザイン 画面幅650px以下でカードが縦に並び替わるレスポンシブ対応

  2. EmacsをRSSリーダーに変える「Elfeed」の使い方徹底解説｜導入から自動タグ付け・カスタマイズまで

    Emacsは非常に拡張性の高いソフトウェアです。テキストエディタとしてだけでなく、メールクライアントやニュースグループ（USENET）リーダーとしても活用できます。さらに「Elfeed」というパッケージを使えば、Emacsを本格的なRSSフィードリーダーとしても使えるようになります。 Elfeedとは？ Elfeedは、Emacs向けに開発された軽量かつ高機能なRSSフィードリーダーです。シンプルなタグベースの仕組みでRSSフィードを整理できるのが特徴で、さらに「フックベース」の自動タグ付け機能も備えています。この機能を使えば、フィードの内容に応じてエントリーへ自動的にタグを付与できます。