レスポンシブ対応（スマホ、タブレットなどのデバイスごとのデザイン）
スマートフォンでウェブサイトを開いたときに、表示がスマホ用のデザインに変わったのを見たことがある方もいらっしゃるのではないでしょうか。
このように、パソコンやスマホなど、見るデバイスによってデザインが変わる仕組みを『レスポンシブデザイン』と呼びます。
レスポンシブ対応をする際は、メディアクエリ（media query）というCSSを書きます。
メディアクエリについて
メディアクエリ（media query）は、デバイスの種類や画面サイズなどの条件に応じてWebサイトのデザインを変更するために使用するCSSの機能です。
たとえば、スマホで見たときは文字を大きくする、パソコンで見たときは横に広く見せる、といったことが可能になります。
メディアクエリは以下のように記載します。
@media メディアタイプ and (画面幅を指定するCSS: 画面サイズpx) {
/* CSS ルールをここに記載 */
}
"メディアタイプ"とは、メディアクエリの中で「どんな表示環境で見ているか（画面・印刷・音声など）で見ているのか？」を定義するのがメディアタイプです。
メディアタイプには以下のようなものがあります。
・ all
→ すべてのデバイスに適用される
・ screen
→ PC、スマートフォン、タブレットなど、画面表示するデバイスに適用される
・ print
→ プリンターで印刷する際や、印刷プレビュー時に適用される
・ speech
→ スクリーンリーダーなど、音声読み上げ機能を持つデバイスに適用されます
"画面幅を指定するCSS: 画面サイズ"には、デザインを切り替える横幅の長さを指定します。
例えば、最大700px(max-width: 700px)と指定した場合、700pxまでの横幅の場合、メディアクエリのCSSが適用されるようになります。
デザインについて
スマートフォン（スマホ）表示の際は次のようなデザインです。
完成系のイメージ:
ヘッダのグローバルナビは横幅が広く、スマホ画面では、横一列で表示させると窮屈な印象を与えてしまいます。
よって、スマートフォン表示では、初期表示時にはグローバルナビを非表示にし、右上に配置したハンバーガーアイコン(三本線)のボタンをクリックすることでグローバルナビのメニューが縦に表示されるようにします。
グローバルナビの表示・非表示対応については、スマホ表示のハンバーガーアイコンクリック時にグローバルナビゲーションのメニューを表示させるの記事で解説致します。
コーディング
HTMLを以下のように修正します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプルサイト</title>
<link rel="stylesheet" media="all" href="css/style.css" />
<link rel="stylesheet" media="all" href="css/reset.css" />
</head>
<body>
<header class="header">
<div class="container">
<div class="header-top">
<h1 class="logo"><a href="index.html">Sample</a></h1>
<!-- ここから -->
<label for="toggle" class="toggle-btn-open">
<span></span>
<span></span>
<span></span>
</label>
<!-- ここまで追加 -->
<div class="tel">TEL：00-0000-0000</div>
</div>
<div class="nav">
<ul class="nav-list" role="list">
<li class="nav-item"><a href="#">ホーム</a></li>
<li class="nav-item"><a href="#">会社概要</a></li>
<li class="nav-item"><a href="#">事業内容</a></li>
<li class="nav-item"><a href="#">採用情報</a></li>
<li class="nav-item"><a href="#">お問い合わせ</a></li>
</ul>
</div>
</div>
</header>
<div>
<img src="img/mainimg.png" alt="メイン画像" class="main-img">
</div>
<div class="content">
<div class="container">
<div class="sidebar">
<ul role="list">
<li><a href="#"><img src="img/banner.png" alt="バナー画像" class="banner"></a></li>
<li><a href="#"><img src="img/banner.png" alt="バナー画像" class="banner"></a></li>
<li><a href="#"><img src="img/banner.png" alt="バナー画像" class="banner"></a></li>
</ul>
</div>
<div class="news">
<h2 class="h2">新着情報</h2>
<ul role="list">
<li>20XX.XX.XX 〜なニュースがありました</li>
<li>20XX.XX.XX 〜なニュースがありました</li>
<li>20XX.XX.XX 〜なニュースがありました</li>
</ul>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="footer-content">
<a href="index.html" class="logo">Sample</a>
<div class="copyright">Copyright © SAMPLE</div>
</div>
</div>
</footer>
</body>
</html>
続いて、サイトのレスポンシブ対応を行うため、メディアクエリを書いていきましょう。
スマートフォンの対応を行うので、メディアタイプはscreenで定義します。
style.cssに以下のcssを追加します。
@media screen and (max-width: 768px) {
.content .container {
flex-direction: column;
gap: 0;
margin: 10px auto 20px;
}
.sidebar {
order: 2;
}
.banner {
width: 100%;
}
.news {
order: 1;
}
.header-top {
flex-direction: column;
align-items: normal;
position: relative;
}
.toggle-btn-open {
display: block;
cursor: pointer;
max-width: 35px;
width: 100%;
position: absolute;
top: 5px;
right: 15px;
}
.toggle-btn-open span {
display: block;
width: 100%;
height: 5px;
background-color: #333;
margin: 5px 0;
}
.tel {
margin: 10px auto 0;
}
.nav {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
top:0;
right: -120%;
width: 100%;
height: 100vh;
background:#000;
}
.nav-list {
flex-direction: column;
}
.nav-item a {
color: #fff;
}
.footer {
padding: 25px 0 30px;
}
.footer .logo {
margin-bottom: 10px;
}
}
「.nav」〜「.nav-item a」のCSSでは、グローバルナビのデザインを実装しています。
「.nav」では、right: 120%を指定することで、画面幅768px以下（スマホや小さい画面）の時、初期設定として画面の右外（画面外）に隠れるようにしています。これは、スマホ表示のハンバーガーアイコンクリック時にグローバルナビゲーションのメニューを表示させるの記事での対応の、必要な初期設定となります。
レスポンシブデザインの確認方法
「パソコンでサイトを作っているのに、どのようにして別のデバイスのデザイン(スマホ版デザインなど)を確認すればいいのか？」と疑問に思われた方もいらっしゃるかと思います。
パソコンで作成中のサイトのスマホ表示を確認するには、先の記事で解説した開発者ツールを使用します。
ここでは、ブラウザにGoogle Chromeを使用して解説します。
ブラウザでindex.htmlを開きましょう。
開発者ツールを開き、Toggle Device Toolbar を選択します。
デバイス設定をiPhone SE にします。
すると、サイトは次のような表示になります。
