01 レスポンシブホームページ基本講座
レレスポンシブホームページ基本講座の第1回目です。前回、レスポンシブデザインに必要な「デベロッパーツール」を解説しました。まだ確認されていない方は、初回講座をご覧ください。
目次
meta viewportビューポートの設定は必須
meta viewport？メタビューポートって何ですか？
パソコンで見ているホームページをスマートフォンで見ると、全体が縮小されて表示されることがあります。この場合、文字を読むために拡大する操作が必要ですよね。ビューポート設定は、スマートフォンなどのデバイスで最適化された表示を実現するためのものです。
meta要素ってUTF-8だけじゃなくて、他にも使うんですか？
その通り！meta要素にはさまざまな用途があります。今回は、meta要素にname属性を使って、ビューポートの設定を行います。
Viewportとは？
レスポンシブウェブサイトでは、以下のようなmeta要素を使ったビューポートの設定が必須です
<meta name="viewport" content="width=device-width, initial-scale=1>
- ビューポート（viewport）とは？
ディスプレイの表示領域を指します。この領域をmeta要素のcontent属性で指定することで、スマホやタブレットなどのデバイスに適した表示を実現します。 - viewport指定がない場合の問題
ビューポート指定がないと、PC用のデザインがそのまま縮小されてスマートフォンで表示され、文字が非常に小さく見えるなど、使い勝手が悪くなります。
左: ビューポート指定なし → PCサイトが縮小表示される。右: ビューポート指定あり → スマホ用に最適化。
content属性について
ビューポート設定の際、content属性に以下のような値を指定します
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width: 現在使用しているデバイスの画面幅に合わせます。- 推奨設定: 各デバイスに対応する柔軟な設計が可能。
initial-scale=1: 初期のズーム倍率を1倍（そのままの倍率）に設定。
固定幅を指定（非推奨）した場合・・・
<meta name="viewport" content="width=375">
固定幅（例: 375px）はGoogleでは非推奨とされています。理由は、柔軟性を欠き、さまざまなデバイスに対応できないからです。
メディアクエリとは？
CSSで画面サイズに応じたスタイルを適用する仕組みです。HTMLは1つで統一し、デバイスごとのデザインをCSSで制御します。ブレイクポイントを設定し、画面サイズの範囲ごとに異なるデザインを適用します。
/* PC向けスタイル */
body {
font-size: 16px;
}
/* スマートフォン向けスタイル（最大幅768px以下） */
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
/* タブレット向けスタイル（最大幅1024px以下） */
@media screen and (max-width: 1024px) {
body {
font-size: 15px;
}
}
Media属性とは？
かつて、異なるメディア（スクリーンやプリンター）ごとに異なるスタイルシートを適用するため、HTMLのmedia属性を使用していました。
<!-- PC用スタイルシート --> <link rel="stylesheet" href="css/style.css" media="screen"> <!-- プリンター用スタイルシート --> <link rel="stylesheet" href="css/print.css" media="print">
その後進化し画面サイズごとのスタイル指定。media属性の値を用いて画面サイズを指定する方法が登場
<link rel="stylesheet" href="css/media_480.css" media="screen and (max-width:480px)">
screen and (max-width: 480px)：表示メディアが「スクリーン（ディスプレイ）」で、最大幅480pxの画面（例：iPhone 6, 7, 8）でのみこのスタイルシートを適用します。
上記の方法では、異なる画面サイズ（例：480pxから768px、768px以上など）のCSSを別々のファイルに分ける必要があり、管理が非常に非効率でした。そのため、現在ではCSS内でメディアクエリを使用して、1つのファイルにまとめる方法が一般的です。
@media を使う
HTMLではmedia属性でデバイスのサイズを指定せず、CSS内で@mediaクエリを使うことで、効率的な管理が可能になります。
/* デフォルトスタイル（指定なしの場合） */
p {
color: red;
}
/* 画面幅が480px以上の場合のスタイル */
@media screen and (min-width: 480px) {
p {
color: blue;
}
}
/* 画面幅が768px以上1024px以下の場合のスタイル */
@media screen and (min-width: 768px) and (max-width: 1024px) {
p {
color: yellow;
}
}
- 指定なし: 画面幅480px未満 → テキストの色は赤。
- 480px以上767px以下: テキストの色は青。
- 768px以上1024px以下: テキストの色は黄色。
この「画面幅の値」をブレイクポイントと呼びます。レスポンシブデザインでは、このブレイクポイントを基に、デバイスごとの適切なデザインを作成します。
screenは省略可
@media screenのscreen部分は、ディスプレイ（スクリーン）を指しているため、省略可能です。
/* スマートフォン向け（576px以上） */
@media (min-width: 576px) { ... }
/* タブレット向け（768px以上） */
@media (min-width: 768px) { ... }
/* 小型ラップトップ向け（992px以上） */
@media (min-width: 992px) { ... }
/* ラージスクリーン向け（1200px以上） */
@media (min-width: 1200px) { ... }
/* デスクトップ向け（1400px以上） */
@media (min-width: 1400px) { ... }
一般的なブレイクポイント例
/* 超小型デバイス（スマートフォン・縦向き） */
@media screen and (max-width: 480px) {
/* スタイル設定 */
}
/* 小型デバイス（スマートフォン・横向き） */
@media screen and (max-width: 768px) {
/* スタイル設定 */
}
/* 中型デバイス（タブレット） */
@media screen and (max-width: 1024px) {
/* スタイル設定 */
}
/* 大型デバイス（小型デスクトップ） */
@media screen and (max-width: 1200px) {
/* スタイル設定 */
}
/* 超大型デバイス（大型デスクトップ） */
@media screen and (min-width: 1201px) {
/* スタイル設定 */
}
- デバイスファースト
- スマートフォンや小型デバイスを基準にスタイルを作成し、次第に大きなデバイス向けに拡張する「モバイルファースト」を推奨します。
- 具体的な範囲指定
- 必要に応じて、
min-widthとmax-widthを組み合わせて特定の範囲だけに適用することも可能です：cssコードをコピーする@media screen and (min-width: 768px) and (max-width: 1024px) { /* スタイル */ }
- 必要に応じて、
- 目的に応じて柔軟に調整
- 上記のブレイクポイントは一般的な例です。プロジェクトの要件に応じて調整してください。
レスポンシブデザインのHTMLとCSSを作ってみよう！
以下は、ヘッダーと段落のスタイルを画面幅に応じて変化させるシンプルな例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レスポンシブデザイン例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<h1>レスポンシブデザインの例</h1>
<nav class="navigation">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main class="main-content">
<section class="content">
<h2>メインコンテンツ</h2>
<p>ここにメインのコンテンツが入ります。画面サイズによって表示が変わります。</p>
</section>
<aside class="sidebar">
<h2>サイドバー</h2>
<p>こちらはサイドバーの内容です。</p>
</aside>
</main>
<footer class="footer">
<p>© 2024 Example Company. All rights reserved.</p>
</footer>
</body>
</html>
/* 全体の初期スタイル */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
/* ヘッダー */
.header {
background-color: #007bff;
color: white;
padding: 1em;
text-align: center;
}
.header h1 {
margin: 0;
}
.navigation ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
margin-top: 1em;
}
.navigation li {
margin: 0 1em;
}
.navigation a {
color: white;
text-decoration: none;
}
/* メインコンテンツとサイドバー */
.main-content {
display: flex;
flex-direction: column;
padding: 1em;
}
.content, .sidebar {
margin-bottom: 1em;
}
.content {
background-color: #f4f4f4;
padding: 1em;
}
.sidebar {
background-color: #ddd;
padding: 1em;
}
/* フッター */
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
}
/* タブレット向け（768px以上） */
@media (min-width: 768px) {
.main-content {
flex-direction: row; /* 横並びに変更 */
gap: 1em; /* コンテンツ間の余白 */
}
.content {
flex: 3; /* メインコンテンツの幅を広く */
}
.sidebar {
flex: 1; /* サイドバーの幅を狭く */
}
}
/* デスクトップ向け（1200px以上） */
@media (min-width: 1200px) {
.header {
text-align: left;
padding: 1.5em;
}
.navigation ul {
justify-content: flex-start; /* ナビゲーションを左揃えに */
}
.content, .sidebar {
padding: 2em; /* 内側の余白を広く */
}
.footer {
font-size: 0.9em;
}
}
スマートフォン（デフォルト）
- ヘッダーは青色（#007bff）で、段落の文字サイズは小さめ（14px）。
タブレット（768px以上）
- ヘッダーが少し濃い青色（#0056b3）に変化し、段落の文字サイズが16pxに。
デスクトップ（1200px以上）
- ヘッダーはさらに濃い青色（#003f7f）で、段落の文字サイズが18pxに。