ホーム プログラミング言語 Web関連 css3 CSSレスポンシブレイアウト(アダプティブレイアウト)

CSSレスポンシブレイアウト(アダプティブレイアウト)


 
 
アダプティブ レイアウトとも呼ばれる CSS レスポンシブ レイアウトは、2010 年 5 月に Ethan Marcotte によって提案された概念です。このコンセプトは、モバイル端末での Web ブラウジングを解決するために生まれました。レスポンシブ レイアウトは、さまざまな端末を使用するユーザーに優れたユーザー エクスペリエンスを提供できます。また、大画面スマートフォンの普及により、「一般的な傾向」と言っても過言ではありません。

 

レスポンシブ レイアウトを実現するには、いくつかの一般的な方法があります。

  • 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 ピクセルより大きい場合、ページのスタイルは次の図のようになります。

ブラウザ ウィンドウが 1200 ピクセル未満で 980 ピクセルより大きい場合、ページのスタイルは次の図のようになります。
ブラウザ ウィンドウが 1200 ピクセル未満で 980 ピクセルより大きい場合、ページのスタイルは次の図のようになります。
ブラウザ ウィンドウが 640 ピクセルより大きく 980 ピクセルより小さい場合、ページのスタイルは次の図のようになります。
ブラウザ ウィンドウが 640 ピクセルより大きく 980 ピクセルより小さい場合、ページのスタイルは次の図のようになります。
 
 

「 CSSレスポンシブレイアウト(アダプティブレイアウト)」についてわかりやすく解説!絶対に観るべきベスト2動画

CSSによるレイアウト:レスポンシブレイアウトとは|lynda.com 日本版
【HTML/CSS】カード型レイアウトのコーディング練習問題