演習課題「ビューポートパーセンテージでボックスの横幅と高さを指定しよう」
現在、ブラウザでは、霧島京子、六村リオ、緑川つばめと表示されています。
ここでwidthプロパティやheightを用いて、article要素のビューポートの横幅をウィンドウの0.8倍に、高さをウィンドウの1.5倍に指定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃07:ビューポートパーセンテージ(vw/vh/vmin/vmax)
このチャプターでは、ビューポートパーセンテージを学習します。
widthプロパティやheightプロパティの値は、「px」の他にviewportのサイズの百分率を表す「ビューポートパーセンテージ」と呼ばれる単位で指定することもできます。
ビューポートパーセンテージは、表示領域の大きさによってボックスのサイズを簡単に変更できるため、レスポンシブデザインにも有用です。
ビューポートパーセンテージの単位には、
・ viewportの横幅に対する割合である「vw(ブイダブリュー)」
・ viewportの高さに対する割合である「vh(ブイエイチ)」
・ viewportの横幅とviewportの高さのうち、小さいほうに対する割合である「vmin(ブイミン)」
・ viewportの横幅とviewportの高さのうち、大きいほうに対する割合である「vmax(ブイマックス)」
があります。
@charset "UTF-8";
article {
width: 100vw;
height: 400vh;
background-color: yellow;}