レスポンシブなサイト、スマホ向けサイトの基本

レスポンシブなサイト、スマホ向けサイトの基本の画像HTML5
スポンサーリンク

この記事では、レスポンシブなサイト、スマホ向けサイトの基本として画面サイズに応じて画像のサイズも変化するサイトを作成してみます。

作成するサンプルページ

スポンサーリンク

はじめに

2017年頃からGoogleがサイトのランキングに影響する要素として、あらゆる端末で適切な表示が可能か?という部分を挙げました。
そのサイトをパソコンで見てもタブレットでみてもあるいはスマートフォンで見ても、見やすく使いやすいサイトであるかという事です。

パソコンとスマートフォンは縦横比が決定的に違います。
これに対応している意味合いのレスポンシブという言葉があります。

レスポンシブなサイトを分かりやすく言えば、パソコンでもスマホでも綺麗に表示されるサイトという意味になります。

HTMLのみではレスポンシブなサイトは実現出来ません。
ここでCSSを使います。

レスポンシブなサイトの作り方

レスポンシブなサイトのひな型を示します。
HTMLファイルをindex.html、CSSファイルをstyle.cssとして保存してください。
なお、CSSファイルから背景画像(lined_paper.png)とオラウータンの画像(oranutan.jpg)を呼び出しています。
以下のリンクから画像ファイルをダウンロードして使ってください。

サンプル画像ダウンロード

HTML部分

HTML部分全体です。
imgタグに画像ファイルを指定しています。
imgタグのwidthとheightは画面に合わせてサイズが変わるため、空欄としています。

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>レスポンシブなページ</title>
</head>
<body>
	<h1>レスポンシブなページ</h1>
	<article>
	<h2>レスポンシブなページとは?</h2>
	<p>画面サイズに応じて、サイトレイアウトも見やすく変化するページのことを指します。<br>
	最近はスマートフォンやタブレット、パソコンなど画面サイズや縦横比が異なる端末でサイトを閲覧するためサイト制作者は日々頭を悩ませています。</p>
	</article>
	<article>
		<p>ウインドウサイズを変化させてみてください。<br>
		下の画像サイズが変化します。</p>
		<figure>
			<img src="oranutan.jpg" width="" height="" alt="オランウータンの画像">
			<figcaption>シンガポール動物園で撮影したオランウータンです。</figcaption>
		</figure>
	</article>
	<footer>&copy; 2018 dianxnao.com</footer>
</body>
</html>

CSS部分

まずは、今回のサンプルのCSS部分全体を示します。

style.css

/* style.css */

*{
	margin: 0;
	padding: 0;
}
body{
	background-image: url("lined_paper.png");	/* 背景画像 */
	font-size: 16pt;
	font-family: '游ゴシック', 'メイリオ';
	margin: 50px;
}
h1{
	border-bottom: solid 1px skyblue;
	color: skyblue;
	font-size: 1.5em;
}
h2{
	font-size: 1.1em;
	padding-top: 1em;
}
p, figure{
	padding-top: 1em;
	padding-left: 1em;
	line-height: 1.5em;
	letter-spacing: 0.2em;
}
img{
	width: 80%;		/* 画面サイズに応じて変化する */
	height: auto;	/* 画面サイズに応じて変化する */
	box-shadow: 5px 5px 10px #777;		/* 画像に影をつける */
}
footer{
	color: #777;
	padding: 1em;
	text-align: right;
}

/* 横幅に応じた対処 */
@media screen and (max-width: 800px){	/* 800pxより小さくなったとき */
	body{
		margin: 2em;
	}
	h1, h2{
		font-size: 95%;
	}
	p, figure, footer{
		font-size: 13pt;
	}
}
@media screen and (max-width: 480px){	/* 480pxより小さくなったとき */
	body{
		margin: 0.8em;
	}
	h1, h2{
		font-size: 85%;
	}
	p, figure, footer{
		font-size: 11pt;
	}
}

imgタグの設定

CSSでレスポンシブなページにする設定を行います。

1つ目のポイントはimgタグです。
画像を縦長でも横長の画面でも画面にフィットさせる必要があります。

img{
	width: 80%;	/* 画面サイズに応じて変化する */
	height: auto;	/* 画面サイズに応じて変化する */
}

width要素は何%でも良いのですが、対応するheight(高さ)要素をautoにしています。
ここがポイントです。

メディアクエリによる画面サイズに応じたレイアウト

2つ目のポイントは画面サイズによってCSSの設定を変更する点です。
通常メディアクエリと呼んでいる設定方法です。

メディアクエリとは?

メディアクエリは、ディスプレイ表示とプリンタ出力でレイアウトや見た目(フォント等)を変えたい場合、あるいは特定の特性 (画面の解像度やブラウザーのビューポートの幅など) に応じてサイトの表示を変更したい場合などに用いる記述方法です。
メディアクエリを使いたい場合は、CSSに@mediaを先頭に記述して用います。

メディアクエリを使って画面幅に応じたfont-size(フォントサイズ)やpadding(余白)などを変更することは多いと思います。

以下の例では、メディアクエリを使って、横幅が800ピクセル以下の場合のCSS設定をしています。

@media screen and (max-width: 800px){	/* 800pxより小さくなったとき */
	body{
		margin: 2em;
	}
	h1, h2{
		font-size: 95%;
	}
	p, figure, footer{
		font-size: 13pt;
	}
}

以上、レスポンシブなサイト、スマホ向けサイトの基本でした。

コメント