[初心者向けCSS練習問題]レスポンシブデザインをメディアクエリで作ってみよう

Q③ 横3列並びをスマホでは1列にする

今回はCSSのメディアクエリを利用して画面幅を変更したらPC用のスタイルからタブレットやスマホ用のスタイルに切り替わるレスポンシブデザインを書くための練習問題を用意しました。

レスポンシブデザインとは?

レスポンシブデザインとは?

一つのHTMLで作成されたWEBサイトにおいて、端末の画面サイズに応じてCSSを使い分けることによって表示を自由に変えることができるWEBデザインの手法。

つまりPC用のレイアウトとスマホ用のレイアウトなどのように端末によっていくつもレイアウトを構成することなく、一つのHTMLで端末毎に表示を変えられる大変便利な機能です。

練習問題を始める前に、レスポンシブデザインを作るにあたってやっておかなければいけないことがありますので先に解説しておきます。

HTMLのheadタグ内に下記のコードを入れてください。

<meta name="viewport" content="width=device-width,initial-scale=1">

このコードの意味は少々ややこしいので説明は省略しますが、レスポンシブデザインを作るにはビューポートの設定というものが必ず必要になりますので、最初はコピペで良いので入力しておくことを忘れないようにしましょう。

それでは、上記を踏まえた上で練習問題を見ていきましょう。

Q① 画面幅を小さくするとスタイルを変更する

まずは画面サイズを変更することでスタイルを変更させてみましょう。下のデモサイトを開いて画面のサイズを変更させてみてください。

完成デモ

レスポンシブデザイン練習問題のデモ画像

画面サイズを大きくしたり小さくしたりすることで、文字の色や画像の大きさなどスタイルが変更されることが分かったかと思います。下のHTMLコードがレスポンシブデザインの対応をしていない状態なので、このコードにメディアクエリを追加して完成デモと同じようにスタイルを当ててみましょう。

    画面を小さくした時のスタイルの変更点
  • 画面幅が500px以下になったらスタイルを変更
  • 親要素のwidthが100%
  • テキストの色がred
  • テキストのサイズが1rem
  • 画像のwidthが100%
  • 画像を4方向角丸50px
<html>
<head>
	<title></title>
	<style type="text/css">
		#main{
			width: 70%;
			margin: 0 auto;
			padding: 100px 20px;
			background: #DFDFDF;
			text-align: center;
			box-sizing: border-box;
		}

		#main p{
			font-size: 1.2rem;
		}

		#main img{
			width: 50%;
		}

		/* ここにメディアクエリを追加しましょう */

	</style>
	<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
	<div id="main">
		<p>
			こちらはレスポンシブデザインを学ぶためのデモサイトです。
		</p>
		<img src="https://web-firstlog.com/wp-content/uploads/2018/03/009.jpg">
	</div>
</body>
</html>

Q① 画面幅を小さくするとスタイルを変更する 解説

完成デモサイトのようにスタイルを変更するには以下のように記述します。

<html>
<head>
	<title></title>
	<style type="text/css">
		#main{
			width: 70%;
			margin: 0 auto;
			padding: 100px 20px;
			background: #DFDFDF;
			text-align: center;
			box-sizing: border-box;
		}

		#main p{
			font-size: 1.2rem;
		}

		#main img{
			width: 50%;
		}

		/* 以下、レスポンシブデザイン用に追加した記述 */

		@media(max-width:500px){
			#main{
				width: 100%;
			}

			#main p{
				color: red;
				font-size: 1rem;
			}

			#main img{
				width: 100%;
				border-radius: 50px;
			}
		}

		/* ここまで */

	</style>
	<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
	<div id="main">
		<p>
			こちらはレスポンシブデザインを学ぶためのデモサイトです。
		</p>
		<img src="https://web-firstlog.com/wp-content/uploads/2018/03/009.jpg">
	</div>
</body>
</html>

24行目~38行目の記述を追加したことでレスポンシブデザインを実装させています。それではポイントとなる部分を細かく解説していきます。

24行目

メディアクエリを使って、「画面の横幅が500px以下になった時にスタイルを追加する」という意味の記述になります。
ちなみに、「横幅が○○以上」とする場合はmin-widthを使います。

25行目~27行目

親要素の横幅を100%にしています。このように変更したいCSSを上書きすることで、その部分だけメディアクエリの条件にあった時にスタイルを変更することができます。

29行目~32行目

文字色を赤にして、文字サイズを1remにしています。

34行目~37行目

画像の横幅を100%にして、50px分角を丸くしています。

解説は以上になります。

いかがでしたでしょうか?このようなやり方が一般的なレスポンシブデザインの書き方の基本になりますので、まずはレスポンシブデザインを使える準備とメディアクエリの記述の仕方をしっかり覚えるようにしましょう!

第二問からはこの書き方を使った実践的なテクニックの問題になります。

Q② ナビメニューをスマホ用メニューに変更する

次はレスポンシブデザインをするにあたって必ずと言っていいほど出くわすPCのナビメニューをスマホではハンバーガーメニューにする方法をやってみましょう。

ちなみにハンバーガーメニューとはスマホでメニューを開くときのこれのことです。

ハンバーガーメニュー
ハンバーガーメニュー

それでは下の完成デモを開いて画面幅を小さくしたり大きくしたりしてみてください。ナビメニューがハンバーガーメニューに変わることがわかるかと思います。

完成デモ

レスポンシブデザイン完成デモ

メディアクエリを使って、完成デモのように画面サイズを小さくした時にナビメニューが消えてスマホ用のハンバーガーメニューを表示させてみましょう。レスポンシブデザインを施していないHTMLを下記に用意しましたので、完成デモと同じような挙動になるようにメディアクエリを追加してください。

    画面を小さくした時のスタイルの変更点
  • 画面幅が500px以下になったらスタイルを変更
  • 親要素全体のwidthを100%
  • PC用のナビメニューを消す
  • SP用のハンバーガーメニューを表示させる
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<style type="text/css">
		#wrapper{
			width: 70%;
			margin: 0 auto;
			position: relative;
		}

		#menu ul{
			display: flex;
			justify-content: space-between;
			margin: 0;
			padding: 0;
		}

		#menu ul li{
			width: 25%;
			height: 80px;
			border: 1px solid #333;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.sp-menu{
			width: 50px;
			position: absolute;
			top: 10px;
			right: 10px;
			display: none;
			cursor: pointer;
		}

		#main{
			border: 1px solid #333;
			height: 500px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		/* ここにメディアクエリを追加してください */

	</style>
</head>
<body>
	<div id="wrapper">
		<div id="menu">
			<ul>
				<li>メニュー1</li>
				<li>メニュー2</li>
				<li>メニュー3</li>
				<li>メニュー4</li>
			</ul>
		</div>
		<img src="https://web-firstlog.com/wp-content/uploads/2018/04/humberger.png" alt="ハンバーガーメニュー" class="sp-menu">
		<div id="main">
			<p>
				#main
			</p>
		</div>
	</div>
</body>
</html>

Q② ナビメニューをスマホ用メニューに変更する 解説

完成デモサイトのようにスタイルを変更するには以下のように記述します。

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<style type="text/css">
		#wrapper{
			width: 70%;
			margin: 0 auto;
			position: relative;
		}

		#menu ul{
			display: flex;
			justify-content: space-between;
			margin: 0;
			padding: 0;
		}

		#menu ul li{
			width: 25%;
			height: 80px;
			border: 1px solid #333;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.sp-menu{
			width: 50px;
			position: absolute;
			top: 10px;
			right: 10px;
			display: none;
			cursor: pointer;
		}

		#main{
			border: 1px solid #333;
			height: 500px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		/* 追加するメディアクエリ */

		@media(max-width:500px){
			#wrapper{
				width: 100%;
			}

			#menu{
				display: none;
			}

			.sp-menu{
				display: block;
			}
		}

		/* ここまで */

	</style>
</head>
<body>
	<div id="wrapper">
		<div id="menu">
			<ul>
				<li>メニュー1</li>
				<li>メニュー2</li>
				<li>メニュー3</li>
				<li>メニュー4</li>
			</ul>
		</div>
		<img src="https://web-firstlog.com/wp-content/uploads/2018/04/humberger.png" alt="ハンバーガーメニュー" class="sp-menu">
		<div id="main">
			<p>
				#main
			</p>
		</div>
	</div>
</body>
</html>

ポイントとなる部分を細かく解説していきます。

54行目~56行目

画面幅が500px以下になったらPC用のナビメニューにdisplay:noneで非表示状態にしてしまいます。

58行目~60行目

画面幅が500px以下になったらスマホ用のハンバーガーメニューをdisplay:blockにして、非表示にしていたメニューを表示します。
※ポイントは元々スマホ用のハンバーガーメニューを作っておいて、500px以上の状態では非表示にしておく必要があります。

解説は以上になります。

今回はレスポンシブデザインにすることでメニューが切り替わるところまでを解説しています。スマホ用のハンバーガーメニューを押したらメニューが出てくるようにするにはJavascriptなどの言語を使って実装出来ますが、ここでは解説していません。

Q③ 横3列並びをスマホでは1列にする

最後は横並びに配置していた要素をスマホでは縦一列に並べるようにする方法です。これもレスポンシブデザインをするにあたって利用される頻度は非常に多いので是非使いこなせるようにしておきましょう。

完成デモ

レスポンシブデザインのデモサイト

デモサイトのようなレスポンシブデザインを作ってみましょう。HTMLを用意しましたので下のコードにメディアクエリを追加してレスポンシブデザインを実装してみてください。

ちなみにデモサイトのブロックはフレックスボックスを使って横並びにしています。フレックスボックスのことがよくわからない方はFlexboxの使い方を4つの役立つ場面を想定して解説しますの記事も参考にしてみてください。

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<style type="text/css">
		#wrapper{
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		.block{
			width: 31%;
			margin: 20px 0;
		}

		.block img{
			width: 100%;
		}

		/* ここにメディアクエリを追加してください */

	</style>
</head>
<body>
	<div id="wrapper">
		<div class="block">
			<img src="https://web-firstlog.com/wp-content/uploads/2018/03/006.jpg" class="sp-menu">
			<p>
				こちらはレスポンシブデザインを理解するためのサンプルサイトです。画面幅を変更すると、このブロックが横3列から縦1列に変わります。
			</p>
		</div>

		<div class="block">
			<img src="https://web-firstlog.com/wp-content/uploads/2018/03/004.jpg" class="sp-menu">
			<p>
				こちらはレスポンシブデザインを理解するためのサンプルサイトです。画面幅を変更すると、このブロックが横3列から縦1列に変わります。
			</p>
		</div>

		<div class="block">
			<img src="https://web-firstlog.com/wp-content/uploads/2018/03/010.jpg" class="sp-menu">
			<p>
				こちらはレスポンシブデザインを理解するためのサンプルサイトです。画面幅を変更すると、このブロックが横3列から縦1列に変わります。
			</p>
		</div>
	</div>
</body>
</html>
    画面を小さくした時のスタイルの変更点
  • 画面幅が500px以下になったらスタイルを変更
  • 子要素のdiv(class名がblock)の横幅を100%

Q③ 横3列並びをスマホでは1列にする 解説

完成デモサイトのようにスタイルを変更するには以下のように記述します。

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<style type="text/css">
		#wrapper{
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		.block{
			width: 31%;
			margin: 20px 0;
		}

		.block img{
			width: 100%;
		}

		@media(max-width:500px){
			.block{
				width: 100%;
			}
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div class="block">
			<img src="https://web-firstlog.com/wp-content/uploads/2018/03/006.jpg" class="sp-menu">
			<p>
				こちらはレスポンシブデザインを理解するためのサンプルサイトです。画面幅を変更すると、このブロックが横3列から縦1列に変わります。
			</p>
		</div>

		<div class="block">
			<img src="https://web-firstlog.com/wp-content/uploads/2018/03/004.jpg" class="sp-menu">
			<p>
				こちらはレスポンシブデザインを理解するためのサンプルサイトです。画面幅を変更すると、このブロックが横3列から縦1列に変わります。
			</p>
		</div>

		<div class="block">
			<img src="https://web-firstlog.com/wp-content/uploads/2018/03/010.jpg" class="sp-menu">
			<p>
				こちらはレスポンシブデザインを理解するためのサンプルサイトです。画面幅を変更すると、このブロックが横3列から縦1列に変わります。
			</p>
		</div>
	</div>
</body>
</html>

意外と簡単でメディアクエリにCSSプロパティを一つを追加するだけでそれっぽいレスポンシブデザインを実装できてしまうんです。

23行目~26行目

Flexboxを使って横並びにしているdivのwidthが31%なので、メディアクエリを使って画面幅が500px以下になればwidthが100%になるように記述しています。このやり方を使う場合、親要素へflex-wrapプロパティにwrapの値を指定しておかなければ思うような挙動になりませんのでご注意下さい。(11行目)

解説は以上になります。

Flexboxを使って要素を整列させていればレスポンシブデザインを施す際も少しのコードで済むので楽になります。ちなみに、メディアクエリのwidthを50%にして二列にしたり25%にして四列にしたりと数値を変えるだけで好きな配置にすることができます。

まとめ

今回はレスポンシブデザインを作る際に必要となるメディアクエリの練習問題を書いてみましたがいかがでしたでしょうか?

Flexboxを上手く使って作っていたサイトであればレスポンシブデザインを施す際も簡単に出来るので、Flexboxと組み合わせて綺麗なコーディングをしておくようにしましょう。