チャット型のデザイン ③

画像を円形に切り抜く

正方形の画像を円形に切り抜くには

要素を円形に切り抜く

画像と組み合わせて使用するテクニック

要素を円形に切り抜くために必要な CSS に加えるスタイル

プロパティを 50% にすることで、一辺の角丸の半径が 50% になる

border-radius: 50%;

一辺の角丸の半径を幅や高さの 50% にしているので、幅と高さが違うと円形に切り抜くことが出来ない

画像を丸く切り抜く場合は、元画像を正方形にする

class 属性の class とは、グループやカテゴリーという意味

class 属性の値（クラス名）には、その HTML 要素の名前を付けると考えがちだが、同じスタイルを適用する要素をグループと捉えて、そのグループに相応しい名前を付けるようにする

クラス名がグループ名やカテゴリー名であることから、同じクラス名を複数の要素に付けることができる

1つの要素に複数のクラス名を付けることもできる

複数のクラス名を付けるときは、ひとつひとつのクラス名を半角スペースで区切って指定する