演習課題「ボックスの横幅と高さを設定しよう」
現在、ブラウザでは、霧島京子、六村リオ、緑川つばめと表示されています。
ここでmax-widthプロパティを用いて、article要素の横幅の最大値を600pxに設定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
※有料会員になるとこの動画をご利用いただけます
詳しい説明を読む
＃08:コンテンツの横幅と高さの最大値と最小値(min-width/max-width/min-height/max-height)
このチャプターでは、コンテンツの横幅と高さの最大値と最小値を学習します。
コンテンツの横幅や高さの最小値や最大値をプロパティを使って指定することができます。
そのプロパティには、以下のものがあります。
・ 横幅の最小値を指定するmin-width
・ 横幅の最大値を指定するmax-width
・ 高さの最小値を指定するmin-height
・ 高さの最大値を指定するmax-height
これらのプロパティの利用方法として、たとえばレスポンシブWebデザインでは大きい画面でレイアウトが横に広がりすぎないようにするために、max-widthで横幅の最大値を指定しておくなどがあります。
@charset "UTF-8";
article {
max-width: 800px;
background-color: yellow;
}
プログラミング学習
>
新・HTML/CSS入門編
>
新・HTML/CSS入門編12: ボックスモデルを理解しよう
>
コンテンツの横幅と高さの最大値と最小値(min-width/max-width/min-height/max-height)