CSSでレスポンシブ画像を作成する方法【サンプルコード付きで解説】
Webページをスマートフォンやタブレットなど、さまざまなデバイスで美しく表示させるには、画面幅に応じて画像が自動的に拡大・縮小される「レスポンシブ画像」の実装が欠かせません。CSSでは、わずか数行のコードでこれを実現できます。
レスポンシブ画像の作成方法
以下は、CSSを使ってレスポンシブ画像を作成する基本的なコード例です。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
width: 100%;
max-width: 1000px;
}
</style>
</head>
<body>
<h1>Responsive Images Example</h1>
<h2>Resize the window to see responsive image scale up and down</h2>
<img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</body>
</html>
実行結果
上記のコードを実行すると、次のような出力が得られます。
ブラウザのウィンドウ幅を狭めると、画像は以下のように自動的に縮小されます。
コードのポイント
- width: 100%;
親要素の幅に対して画像の幅を100%に設定することで、画面サイズに合わせて画像が伸縮します。 - max-width: 1000px;
画像が必要以上に大きくならないよう、最大幅を1000pxに制限しています。この値はデザインに合わせて自由に変更できます。
なお、height: auto; を併せて指定しておくと、画像の縦横比が維持され、拡大・縮小時に画像が歪むのを防げます。また、<meta name="viewport"> タグの指定も忘れずに行いましょう。モバイルデバイスでの正しい表示に必須となります。
-
CSSで作るレスポンシブ対応のお客様の声（テスティモニアル）セクションの実装方法
Webサイトに掲載する「お客様の声（テスティモニアル）」は、信頼性を高めるための重要な要素です。CSSを活用すれば、デスクトップでもスマートフォンでも見やすい、レスポンシブなデザインを簡単に実現できます。 この記事では、メディアクエリとfloatを使って、画面幅に応じてレイアウトが自動的に切り替わるテスティモニアルカードの作り方を解説します。 実装のポイント 基本レイアウト： プロフィール画像を float: left; で左に回り込みさせ、名前とコメントを右側に配置します。 円形画像： border-radius: 50%; を指定することで、画像を丸く表示できます。 float の解除：
-
CSSでレスポンシブなブログレイアウトを作成する方法【完全なコード例付き】
CSSを使ってレスポンシブなブログレイアウトを作成するには、viewportメタタグの設定と、デバイスの画面幅に応じて柔軟に調整されるレイアウト構造の定義がポイントになります。以下に、ナビゲーションバー・ブログ本文・サイドリンク・フッターを備えた、ブログサイトの完全なコード例を紹介します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <