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

CSS3のメディアクエリとは？基本の書き方と実装例を解説

メディアクエリ（Media Queries）は、スマートフォンやタブレット、デスクトップPCなど、画面サイズの異なるデバイスごとに異なるスタイルルールを適用できるCSS3の機能です。

レスポンシブWebデザインを実現するうえで欠かせない技術であり、画面幅に応じて配色やレイアウトを柔軟に切り替えることができます。

実装例

以下のコードは、CSS3でメディアクエリを実装するシンプルなサンプルです。実際にブラウザで表示して動作を確認してみましょう。

<html>
   <head>
      <style>
         body {
            background-color: lightpink;
         }
         @media screen and (max-width: 420px) {
            body {
               background-color: lightblue;
            }
         }
      </style>
   </head>

   <body>
      <p>画面サイズが420px未満の場合は水色（lightblue）、それ以外の場合はピンク色（lightpink）が表示されます</p>
   </body>
</html>

コードの解説

このコードでは、まずbody要素の背景色をlightpink（ライトピンク）に設定しています。続いて、@media screen and (max-width: 420px)という条件を指定したメディアクエリを記述しています。

この条件は「画面メディアであり、かつ表示領域の幅が420px以下である場合」を意味します。条件に一致するデバイスで閲覧すると、背景色がlightblue（ライトブルー）に上書きされます。

このように、同一のHTMLファイルでも閲覧環境に応じて異なる見た目を提供できるのが、メディアクエリの大きなメリットです。max-width以外にもmin-widthやorientationなど、さまざまな条件を組み合わせることで、より高度なレスポンシブ対応が可能になります。

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

    CSSのメディアクエリ（@media）を活用すると、スマートフォン、タブレット、デスクトップPCなど、デバイスごとの画面幅（ブレークポイント）に応じてスタイルを柔軟に切り替えることができます。レスポンシブWebデザインを実現するうえで欠かせないテクニックです。 よく使われる一般的なブレークポイント 多くのWebサイトでは、以下のような画面幅がブレークポイントの目安として採用されています。 600px以下 … スマートフォン 600px〜767px … タブレット（縦向き） 768px〜991px … タブレット（横向き）・小型ノートPC 992px〜1199px … デスクトップPC 120

  2. CSSの::first-letter疑似要素で文章の最初の一文字をおしゃれに装飾する方法

    ::first-letter疑似要素とは？ CSSでは、::first-letter（ファーストレター）疑似要素を使うことで、要素の最初の一文字だけを自由に装飾できます。雑誌や書籍の冒頭でよく目にする「ドロップキャップ」と呼ばれる演出効果も、追加のHTMLマークアップや画像を用意することなく、CSSだけで手軽に実現可能です。 なお、::first-letterの適用対象となる「最初の文字」は、句読点などの記号、ダイグラフ（合字）、contentプロパティによって生成されるコンテンツなどが存在する場合には変化することがあるため、注意が必要です。 それでは、CSSの::first-letter疑似