アダプティブ レイアウトとも呼ばれる CSS レスポンシブ レイアウトは、2010 年 5 月に Ethan Marcotte によって提案された概念です。このコンセプトは、モバイル端末での Web ブラウジングを解決するために生まれました。レスポンシブ レイアウトは、さまざまな端末を使用するユーザーに優れたユーザー エクスペリエンスを提供できます。また、大画面スマートフォンの普及により、「一般的な傾向」と言っても過言ではありません。
ブラウザ ウィンドウが 1200 ピクセル未満で 980 ピクセルより大きい場合、ページのスタイルは次の図のようになります。 
ブラウザ ウィンドウが 640 ピクセルより大きく 980 ピクセルより小さい場合、ページのスタイルは次の図のようになります。
レスポンシブ レイアウトを実現するには、いくつかの一般的な方法があります。
- CSS でメディア クエリを使用する (最も簡単)。
- JavaScript を使用します (使用コストは比較的高くなります)。
- サードパーティのオープン ソース フレームワーク (さまざまなブラウザーを適切にサポートできるブートストラップなど) を使用します。
次に、レスポンシブ レイアウトの実装を示すために、例としてメディア クエリを取り上げます。
コンテンツ
表示
メタタグを設定する
まず、以下に示すように、メタ タグを設定して、ビューポート (Web ページの表示領域) の幅をデバイスの幅と等しくし、ユーザーがページをズームできないようにするようブラウザーに指示する必要があります。 :
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
ビューポートを設定するときは注意が必要です.ビューポートはウェブページの可視領域のサイズです.ビューポートを設定するときは,幅を設定するだけでよく,幅を気にする必要はありません.高さ. 特定の高さは、Web ページのコンテンツによって自動的に拡張されます。上記の meta タグの内容の意味は次のとおりです。
- viewport: Web ページの可視領域を表すビューポート。
- width: ビューポートのサイズを制御します。600 などの特定の値、または device-width などのキーワードで構成される特別な値を指定できます。これは、デバイスの幅を意味します。
- initial-scale: 初期のズーム率、つまりページが最初にロードされたときのズーム率を示します。
- maximum-scale: ユーザーがズームできる最大スケールを 0 から 10.0 の範囲で示します。
- minimun-scale: ユーザーが 0 から 10.0 までの範囲の最小スケールにズームできることを示します。
- user-scalable: ユーザーが手動でズームできるかどうかを示します。「はい」はスケーリングを許可することを意味し、「いいえ」はスケーリングを禁止することを意味します。
メディアクエリ
CSS メディア クエリは、指定された条件に従って、さまざまなメディア タイプ (スクリーン プリント) に対してさまざまな CSS スタイルを定義できるため、さまざまなデバイスを使用するユーザーが最高のエクスペリエンスを得ることができます。
メディア クエリを実装するには、次の 3 つの方法があります。
1. CSS ファイルで直接使用します。サンプル コードは次のとおりです。
@media (max-width: 320px) {
/*0~320*/
body {
background: pink;
}
}
@media (min-width: 321px) and (max-width: 375px) {
/*321~768*/
body {
background: red;
}
}
@media (min-width: 376px) and (max-width: 425px) {
/*376~425*/
body {
background: yellow;
}
}
@media (min-width: 426px) and (max-width: 768px) {
/*426~768*/
body {
background: blue;
}
}
@media (min-width: 769px) {
/*769~+∞*/
body {
background: green;
}
} 2. @import を使用してインポートします。サンプル コードは次のとおりです。
@import 'index01.css' screen and (max-width:1024px) and (min-width:720px)
3. リンク タグで使用されるサンプル コードは次のとおりです。
<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>
<link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/> メディア クエリの詳細については、「 CSS メディア クエリ」セクションを参照してください。
包括的な例を使用して、レスポンシブ レイアウトの実装を示しましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>レスポンシブレイアウト</title>
<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />
<style>
*{
margin: 0px;
padding: 0px;
font-family: "Noto Sans";
}
#head, #foot, #main
{
height: 100px;
width: 1200px;
/*width: 85%;*/
background-color: goldenrod;
text-align: center;
font-size: 48px;
line-height: 100px;
margin: 0 auto;
}
#head div{
display: none;
font-size: 20px;
height: 30px;
width: 100px;
background-color: green;
float: right;
line-height: 30px;
margin-top: 35px;
}
#head ul{
width: 80%;
}
#head ul li{
width: 20%;
float: left;
text-align: center;
list-style: none;font-size: 20px;
}
#main{
height: auto;
margin: 10px auto;
overflow: hidden;
}
.left, .center, .right{
height: 600px;
line-height: 600px;
float: left;
width: 20%;
background-color: red
}
.center{
width: 60%;
border-left: 10px solid #FFF;
border-right: 10px solid #FFF;
box-sizing: border-box;
}
@media only screen and (max-width: 1200px) {
#head, #foot, #main{
width: 100%;
}
}
@media only screen and (max-width: 980px) {
.right{
display: none;
}
.left{
width: 30%;
}
.center{
width: 70%;
border-right: hidden;
}
}
@media only screen and (max-width: 640px) {
.left, .center, .right{
width: 100%;
display: block;
height: 200px;
line-height: 200px;
}
.center{
border: hidden;
border-top: 10px solid #FFFFFF;
border-bottom: 10px solid #FFFFFF;
height: 600px;
line-height: 600px;
}
#head ul{
display: none;
}
#head div{
display: block;
}
}
</style>
</head>
<body>
<div>
<header id="head">
<ul>
<li>ヘッダー1</li>
<li>ヘッダー2</li>
<li>ヘッダー3</li>
<li>ヘッダー4</li>
<li>ヘッダー5</li>
</ul>
<div>アイコン</div>
</header>
<section id="main">
<div class="left">
左
</div>
<div class="center">
中央
</div>
<div class="right">
右
</div>
</section>
<footer id="foot">
フッター
</footer>
</div>
</body>
</html> ブラウザ ウィンドウが 1200 ピクセル未満で 980 ピクセルより大きい場合、ページのスタイルは次の図のようになります。
「 CSSレスポンシブレイアウト（アダプティブレイアウト）」についてわかりやすく解説！絶対に観るべきベスト2動画
CSSによるレイアウト：レスポンシブレイアウトとは｜lynda.com 日本版
【HTML/CSS】カード型レイアウトのコーディング練習問題
![2021 年に Raspberry Pi Web サーバーをセットアップする方法 [ガイド]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
