サイト画像をどんな端末でもフィットさせたい

サイト公開

スマートフォン、タブレット、パソコン…etc
それぞれ魅力的な機械ですが、サイト制作する場合、これらの端末の画面サイズの違いは頭を悩ませることの一つです。

文章は長くても改行してくれてみる事ができますが、画像は改行という訳にはいきません。

そこで魔法のCSSです。

img{
     width: 100%;
     height: auto;
}

画像を表示するためのimgタグの幅(width)に100%を、高さ(height)にautoを指定すると画面横幅一杯にフィットして縦横比もそのままで表示してくれます。

ただし注意が必要です。
画像サイズがどんなに小さくてもあるいは大きくても見た目は横幅一杯になるため、適切な画像サイズを考える必要があります。

小さい画像を画面一杯に引き延ばしたら荒く見えますし、大き過ぎる画像は表示速度が遅くなる原因になります。

現在のネット環境や端末の画面サイズを考えるとだいたい横幅が1280ピクセルくらいが適当だと思います。

ただしパソコンで横幅一杯に表示されてしまうとほぼ画像で埋まってしまうため、画像タグをdivタグなどでくくってコンテンツ枠の幅を制限しておいたり、metaタグのviewport設定を行う、メディアクエリ設定をして端末幅に合わせた設定をする、なども併せて必要になってきます。

以下は魔法のimgタグとの組み合わせ例です。
画面幅を変更したりして確認してみて下さい。

imgfit
dianxnao.com
2021.04.23

参考までにソースコードを示します。
正直長いですが、ここまでやらないと思うようにはいきません。

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<meta name="robots" content="INDEX,FOLLOW">
	<meta name="description" content="画像を端末幅にフィットさせる方法です">
	<link rel="stylesheet" href="style.css">
	<title>画像を端末幅にフィットさせる</title>
</head>
<body>
	<header>
		<h1>画像を端末幅にフィットさせる</h1>
	</header>

	<div id="contents">

		<div class="simple-link">
			<div class="text">
				<p class="title">玄関の花</p>
				<p class="description">小さなかわいい花が咲きました！<br>
				<img src="small_flower.jpg" width="720" height="405" alt="小さいかわいい花">
				</p>
			</div>
		</div>

	</div>

	<footer>
		<p><small>&copy; 2021 <a target="_blank" href="https://dianxnao.com/">dianxnao.com</a></small></p>
	</footer>
</body>
</html>

style.css

/* style.css */
@charset "utf-8";
 
*{
	margin: 0;
	padding: 0;
}
body{
	font-family: Helvetica, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック', meiryo, sans-serif;  /* フォント */
}
/* ヘッダ */
header{
	background-color: #333;
	color: white;
}

header h1{
	font-size: 24pt;
	padding: 20px 3em;
	line-height: 1.7em;
	letter-spacing: .2em;
	text-align: justify;
}

/* コンテンツ */
div#contents{
	font-size: 16pt;
	background-color: white;
	width: 800px;
	margin: 1em auto;
	padding: 0;
}

div#contents img{	/* 画像を横幅にフィットさせる */
	width: 100%;
	height: auto;
}

div#contents p{
	line-height: 1.7em;
	letter-spacing: .2em;
	text-align: justify;
}

/* フッタ */
footer{
	text-align: right;
	padding: 20px 40px;
	font-size: 14pt;
	background-color: #333;
	color: white;
}

/* 汎用タグ */
small{
	font-size: 14pt;
}
a{
	color: white;
	text-decoration: none;
}
a:hover{
	color: yellow;
}
 
/* リンクボタン部分 */
.simple-link{
	box-shadow: 3px 3px 7px #ddd;   /* ボタンの影 */
	padding: 10px;
	margin-bottom: 0.5em;
	transition: all 0.3s ease 0s;   /* イベント毎の表示を0.3秒後にする*/
}
 
.simple-link:hover{ /* マウスが乗ったとき */
	box-shadow: 3px 3px 7px #555;   /* 少し影を濃く */
	transform: translateY(-0.18em); /* 上方向に少し移動 */
}

.simple-link p.title{       /* サイトタイトルの文字色 */
	font-size: 1.2em;
	font-weight: 900;
	color: #333;
}
.simple-link p.description{     /* 説明文の文字色 */
	font-size: 0.8em;
	color: #555;
}
 
/* メディアクエリ設定 */
@media screen and (min-width:376px) and (max-width:960px) {
/* タブレット用のcssを記述 */
	header h1{
		padding: 20px;
		text-align: center;
		font-size: 16pt;
	}
	div#contents{
		width: auto;
		margin: 10px 10px;
		padding: 1em;
		font-size: 14pt;
	}
	footer{
		padding: 20px;
		text-align: center;
	}
	p.title{
		font-size: 1.1em;
		font-weight: 900;
		color: #555;
	}
}
 
@media screen and (max-width:376px) {
/* スマホ用のcssを記述 */
	header h1{
		padding: 20px;
		text-align: center;
		font-size: 14pt;
	}
	div#contents{
		width: auto;
		margin: 0 0;
		padding: 5px 10px;
		font-size: 12pt;
	}
	footer{
		padding: 20px;
		text-align: center;
	}
	small{
		font-size: 11pt;
	}
	p.title{
		font-size: 1.0em;
		font-weight: 900;
		color: #555;
	}
}

コメント

タイトルとURLをコピーしました