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

CSSで背景画像をレスポンシブ対応させる方法

CSSで背景画像をレスポンシブ対応させる方法

Webページの背景画像は、ブラウザのサイズが変わっても自然に表示されるよう、レスポンシブ対応しておくことが重要です。CSSではbackground-sizeプロパティを使うことで、背景画像をコンテナの大きさに合わせて自動的に拡大・縮小できます。

以下のコードを実行し、ブラウザのウィンドウ幅を変更してみてください。背景画像が画面サイズに応じて調整される様子を確認できます。

サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      div {
        width: 100%;
        height: 300px;
        border: 2px dashed blue;
        background-image: url('https://www.tutorialspoint.com/python/images/python-data-science.jpg');
        background-repeat: no-repeat;
        background-size: contain;
      }
    </style>
  </head>
  <body>
    <p>効果を確認するには、ブラウザのサイズを変更してください。</p>
    <div></div>
  </body>
</html>

コードのポイント

  • viewportメタタグ： スマートフォンなどのモバイルデバイスでも正しく表示されるよう、<meta name="viewport">の指定は必須です。
  • width: 100%： div要素を画面幅いっぱいに広げ、リサイズに追従させます。
  • background-size: contain： 背景画像全体が表示領域内に収まるようスケーリングされ、アスペクト比（縦横比）も維持されます。
  • background-repeat: no-repeat： 画像の繰り返し表示を防ぎ、見た目をすっきりさせます。

containとcoverの違い

background-sizeでよく使われる値には、主に次の2つがあります。目的に応じて使い分けましょう。

  • contain：画像全体が必ず見えるように縮小します。その代わり、表示領域との比率によっては余白が生まれることがあります。
  • cover：表示領域を完全に覆うように拡大します。余白はできませんが、画像の一部が切り取られる場合があります。

たとえばヒーローイメージのように全面を埋めたい場合はcover、ロゴや図版のように画像全体を見せたい場合はcontainが適しています。これらを組み合わせることで、より柔軟なレスポンシブデザインを実現できます。

  1. CSSで背景画像をぼかす方法｜filter: blur()の使い方を解説

    Webサイトのヒーローセクションなどで、背景画像をぼかして奥行きのあるおしゃれなデザインにしたい場面は多くあります。CSSではfilterプロパティのblur()関数を使うだけで、誰でも簡単にぼかし効果を実現できます。この記事では、実際のコード例とともにその実装方法を詳しく解説します。 実装のポイント：背景画像専用の要素を分ける blur()は指定した要素だけでなく、その中にある子要素（テキストなど）にも適用されてしまいます。そのため、背景画像だけをぼかしたい場合は、背景画像専用の要素を別途用意し、テキストなどのコンテンツとは分離して配置するのが重要なポイントです。 コード例 <!DOC

  2. CSSでHTML動画や要素のアスペクト比を維持する方法【padding活用テクニック】

    Webページに動画や画像を埋め込む際、ウィンドウサイズが変わってもレイアウトが崩れないようにアスペクト比（縦横比）を維持したい場面は多くあります。実は、CSSのpaddingプロパティにパーセンテージ値を指定するだけで、要素のアスペクト比を簡単に維持できます。 このテクニックが機能する理由は、paddingにパーセンテージを指定した場合、その基準が親要素の「幅」になるという仕様によるものです。つまり、幅に応じて高さも連動して変化するため、縦横比が保たれるのです。 使用できるpaddingプロパティ padding-bottom：要素の下側の余白（パディング）を指定します。 padding-t