手順
①HTMLを記述する ②CSSを記述する ③プレビューで表示を確認する
CSSの記述をする
copy_practice.css
/*main_picture(親要素)のデザイン*/
.main_picture {
width: 100px;
height: 100px
}
/*mainのロゴ写真の円形の表示(子要素の設定)*/
.main_picture img {
width: 100px;
height: 100px;
border-radius: 100px;
}
ポイント!
①画像を円形にして縦横比を維持したい場合は親要素のwidthとheightと子要素のwidthとheightには同値を指定する必要があります。
②border-radiusプロパティではwidthとheightの値と同値を指定します。
HTMLの記述を行う
copy_practice.html
<div class="main_picture">
<img src="flower_picture.jpg" alt="花畑の風景">
</div>
完成図
下記のような画像の状態になります。
参考サイト
以下のサイトを参考にさせて頂きました。