メディアからのお問い合わせ


レスポンシブ Web デザイン - メディア クエリ

メディア (メディア) クエリは CSS3 で導入されています: CSS3 @media queries。

@media クエリを使用すると、さまざまなメディア タイプにさまざまなスタイルを定義できます。

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8"> 
<title>php 中文网</title> 
<style>
body {
    background-color:lightgreen;
}

@media only screen and (max-width: 500px) {
    body {
        background-color:lightblue;
    }
}
</style>
</head>
<body>
<p>重置浏览器大小，当文档的宽度小于 500 像素，背景会变为浅蓝色，否则为浅绿色。</p>
</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

ブレークポイントを追加します

前のチュートリアルでは、行と列を使用してWebページを作成し、レスポンシブスタイルでした, ただし、小さな画面では表示に適していません。

メディア クエリは、この問題の解決に役立ちます。デザイン ドラフトの途中にブレークポイントを追加できます。ブレークポイントが異なれば、効果も異なります。

デスクトップ

1.png

モバイル

2.png

メディアクエリを使用して768ピクセルにブレークポイントを追加します:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"> 
<title>php 中文网</title> 
<style>
* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}
</style>
</head>
<body>

<div class="header">
<h1>Chania</h1>
</div>

<div class="row">

<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>

<div class="col-6">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>
<div class="col-3 right">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>

</div>

<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

インスタンスを実行 »

「」をクリック「インスタンスを実行」ボタンをクリックしてオンラインで例を表示します

モバイルファーストのデザイン

モバイルファーストとは、デスクトップやその他のデバイス向けにデザインするときにモバイルデザインを優先することを意味します。

これは、CSS にいくつかの変更を加える必要があることを意味します。

画面が 768px より小さい場合もスタイルを変更します。画面幅が 768px よりも大きい場合もスタイルを変更する必要があります。以下はモバイルファーストの例です:

/* モバイル用に設計: */
[class*="col-"] {
width: 100%;
}
@メディアのみの画面と (min-width: 16. 66%;}
.col-3 {
25%;} .col-4 {
width: 33.33%;} .col-5 {
wi dth: 41.66% ;} .col-6 {
幅: 50%;} .col-7 {
幅: 58.33%;} .col- 8 {
幅: 66.66%;} .col-9 {
幅: 75%;} .col-10 {
幅: 83.33%; } .col-11 {
width: 91.66%;} .col-12 {
width: 100%;}}

その他のブレークポイント

必要に応じてブレークポイントを追加できます。

タブレットデバイスや携帯電話デバイスにもブレークポイントを設定できます。

デスクトップデバイス

タブレットデバイス

2.png

モバイルデバイス

画面が600ピクセルの場合にメディアクエリを追加し、新しいスタイルを設定します(画面が600ピクセルより大きく、768ピクセルより小さい場合):

例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"> 
<title>php 中文网</title> 
<style>
* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-12 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
</style>
</head>
<body>

<div class="header">
<h1>Chania</h1>
</div>

<div class="row">
<div class="col-3 col-m-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>

<div class="col-6 col-m-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>

<div class="col-3 col-m-12">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>

</div>

<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

インスタンスの実行»

オンラインインスタンスを表示するには、「インスタンスの実行」ボタンをクリックしてください

上記のコードは冗長に見えるかもしれませんが、画面サイズに応じて異なるスタイルを自動的に設定できます。まだ非常に必要です。

HTML の例

デスクトップの場合:

最初の部分と 3 番目の部分は 3 列にまたがります。中央のセクションは 6 つの列にまたがります。

タブレットデバイスの場合:

最初の部分は 3 列、2 番目の部分は 9 列、3 番目の部分は 12 列です:

<div class="row"> ;
<div class="col-3col-m-3">...</div>
< ディビジョン class="col-6col-m-9">...</div>
<div class= "col-3 col-m-12"＆gt;...＆lt;

向き: 横向き/縦向き

CSS メディアクエリと組み合わせると、さまざまなデバイスの向き (横向きの横向き、縦向きの縦向きなど) に適応するレイアウトを作成できます。

構文:

orientation：portrait | landscape

  • portrait: 出力デバイスでのページの表示領域の高さが幅以上であることを指定します

  • landscape: portraitを除く値、すべて横向きです

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"> 
<title>php 中文网</title> 
<style>
body {
    background-color: lightgreen;
}

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}
</style>
</head>
<body>
<p>重置浏览器大小，当文档的宽度大于高度时，背景会变为浅蓝色。否则为浅绿色。</p>
</body>
</html>

インスタンスの実行»

オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください

←
→