見本を表示して正しくできているか見比べましょう。

課題がうまくできない場合は、「課題5完成ファイルのダウンロード」からファイルをダウンロードしてください。このファイルを使って課題6を行いましょう。

課題5完成ファイルのダウンロード

横並びに修正したWebページと見本のWebページを見比べるとアバウトの部分について見本通りでない箇所があることがわかります。

見本と異なる個所が3か所あります。それぞれ確認します。

• ①　画像と説明の横幅が異なる。

  横並びのために指定した「flex」は、横並びの要素のサイズを自動調整します。

  そのため、サイズを変えたい場合や固定したい場合は、横幅のサイズを指定します。

  

  プロパティwidthに指定できる主な値

  • % ：ブラウザの横幅に対する割合(%)で指定する。

  • px ：ピクセル数で横幅を指定する。

• ②　説明文の行間が異なる。

  見本は行間が広くなっています。

  CSSで行間の大きさを指定する場合は、行の高さの最小値を指定することにより調整します。

  

• ③　画像の表示されている範囲が広い。

  画像を表示をするときにトリミングをすることができます。

  表示するサイズの自動調整の仕方やトリミングの方法を指定することで、画像の好きな部分のみを表示することができます。

  

  プロパティobject-fitに指定できる主な値

  • fill：領域内を満たすように縦横比を変えながらリサイズします。

  • cover：縦横のうち小さい方を基準にして縦横比を保ちながら自動的にリサイズします。はみ出した部分はトリミングします。

  画像そのものをphotopeaなどの画像編集ソフトを利用して加工する場合もありますが、CSSで表示の仕方を変更することもでききます。

見本を表示して正しくできているか見比べましょう。

課題がうまくできない場合は、「課題6完成ファイルのダウンロード」からファイルをダウンロードしてください。このファイルを使って課題7を行いましょう。

課題6完成ファイルのダウンロード