レスポンシブWebデザインを簡単に実現！インライン @media ルールとその他の方法

2024-04-13

HTML、CSS、メディアクエリにおけるインライン @media ルール

例：

<p style="font-size: 16px; @media (max-width: 768px) { font-size: 12px; }}">これは段落です。</p>

上記の例では、p 要素のフォントサイズはデフォルトで 16px ですが、画面幅が 768px 以下の場合は 12px に変更されます。

インライン @media ルールの利点:

外部 CSS ファイルを使用する必要がなく、コードがより簡潔になります。
特定の要素にのみメディアクエリを適用できます。
コードの可読性が向上します。

すべてのブラウザでサポートされているわけではありません。
メンテナンスが難しくなる可能性があります。
複雑なメディアクエリを使用すると、コードが読みづらくなる可能性があります。

一般的に、インライン @media ルールは、単純なメディアクエリを少数使用する場合にのみ推奨されます。複雑なメディアクエリや多くのメディアクエリを使用する場合は、外部 CSS ファイルを使用するのがおすすめです。

代替手段:

メディアクエリを使用する代わりに、JavaScript を使用してデバイスごとにスタイルを動的に変更することもできます。
CSS フレームワークを使用すると、レスポンシブ Web デザインを簡単に作成できます。

HTML:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>インラインメディアクエリ</title>
</head>
<body>
  <p style="font-size: 16px; @media (max-width: 768px) { font-size: 12px; }}">これは段落です。</p>
  <img src="image.jpg" alt="画像" style="width: 100%; @media (max-width: 480px) { width: 50%; }">
</body>
</html>

説明:

この HTML コードには、2 つの要素があります。
- 段落要素 (p)
- 画像要素 (img)
段落要素には、デフォルトのフォントサイズ 16px が設定されています。画面幅が 768px 以下の場合は、フォントサイズが 12px に変更されます。

この例は、インライン @media ルールを使用して、デバイスごとに異なるスタイルを適用する方法を示しています。

補足:

上記のコードはあくまで一例です。ご自身のニーズに合わせて変更してください。
複雑なメディアクエリを使用する場合は、外部 CSS ファイルを使用することをおすすめします。

インライン @media ルール以外の方法

外部 CSS ファイルを使用する

最も一般的な方法は、外部 CSS ファイルを使用してメディアクエリを定義することです。これにより、コードをより整理し、メンテナンスしやすくなります。

例:

/* style.css */

@media (max-width: 768px) {
  p {
    font-size: 12px;
  }
  img {
    width: 50%;
  }
}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>外部 CSS ファイルによるメディアクエリ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>これは段落です。</p>
  <img src="image.jpg" alt="画像">
</body>
</html>

CSS フレームワークを使用する

Bootstrap や Foundation などの CSS フレームワークを使用すると、レスポンシブ Web デザインを簡単に作成できます。これらのフレームワークには、メディアクエリを含む、あらかじめ定義されたスタイルセットが用意されています。

JavaScript を使用して、デバイスごとにスタイルを動的に変更することもできます。これは、より複雑なレスポンシブデザインが必要な場合に役立ちます。

const mediaQuery = window.matchMedia('(max-width: 768px)');

if (mediaQuery.matches) {
  const paragraphs = document.querySelectorAll('p');
  paragraphs.forEach(paragraph => {
    paragraph.style.fontSize = '12px';
  });

  const images = document.querySelectorAll('img');
  images.forEach(image => {
    image.style.width = '50%';
  });
}