Life is Tech! Lesson
オリジナル制作サンプル集
写真を丸くする
難易度：
プロパティ：border-radius
関連レッスン：Chapter 1 レッスン 5
できあがりイメージ
つくりかた
Step1
丸くする要素をHTMLから探す
HTML
<div class="big">
<img src="img/cro-big.jpg" width="500">
<h3>サクサククロワッサン</h3>
</div>
HTMLの"big"というクラス名のdivタグの中にある、画像 (imgタグ) に対してCSSを反映させていきます。
Step2
丸くする要素のCSSセレクタを作る
CSS
.big img {
}
CSSで クラス名"big"内の img を指定します。
Step3
角丸を指定する
border-radius を追加して、角丸を指定しましょう。
CSS
.big img {
border-radius: 50%;
}
border-radius を 50% に指定すると、全ての角がなめらかに丸まります。
Step4
コードを書くかコピー＆ペーストする
CSS
border-radius: 50%;
コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。
Step5
実際の見え方を確認する
画像の角が全て丸くなっていたら完成です。
