演習課題「ビューポートを指定してみよう」
現在、ビューポートを指定しようとしています。
ビューポートを指定するため、metaタグとname属性、content属性を記述してください。
ただし、ビューポートの幅と初期倍率の両方をブラウザの幅に合わせた表示を行うよう設定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
＃07:ビューポート(viewport)
このチャプターでは、ビューポートについて学習します。
ビューポートとは、Webページを表示する領域のことです。ビューポートの大きさは、画面の大きさやブラウザが全画面モードであるかどうか、そしてユーザーがズームしているかどうかなどに依存して変化します。
たとえばPCのようにデバイスのモニターが大きい場合、ビューポートはブラウザのウィンドウの大きさに、全画面モードやモバイル端末はビューポートは画面全体になります。
なおビューポートの外にあるコンテンツは、スクロールして表示するまで画面上に表示されません。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/CSS/Viewport_concepts
name属性で指定する値の一つにviewportがあります。
viewportは「viewportとは」で説明したビューポートを指定する属性値で、指定するとモバイルデバイスのビューポートの設定ができます。
例えば、content属性の属性値に「width=」を入れることでビューポートの幅を設定できます。例えば「width=device-width」とすると、端末やブラウザの幅に合わせた表示をおこないます。
さらにcontent属性の属性値に「initial-scale」を入れることで初期倍率を設定できます。例えば「initial-scale=1」とすると、「width=device-width」と同じく端末やブラウザの幅に合わせた表示を行います。
「initial-scale=1」と「width=device-width」は同じ定義ですが、ブラウザの幅を画面幅に合わせる場合は、ブラウザの自動縮小を防ぐために両方を属性値に入れたほうがよいとされています。
また、content属性の属性値は複数指定することができます。その場合は属性値の間にスペースを入れる必要があります。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Viewport_meta_tag
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ビューポートを設定する</title>
<style>
.group{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.group > p {flex: 0 0 45%}
@media screen and (max-width:750px) {
html {
min-width:1200px;
}
}
</style>
<meta name="viewport" content="width=device-width initial-scale=1">
</head>
<body>
<div class="group">
<p>グループ1</p>
<p>グループ2</p>
</div>
</body>
</html>