コンテナ内の円形アバターの作成方法

この記事では、HTMLとCSSを使用して、コンテナ内に円形のアバターを作成する方法を説明します。以下に、いくつかの方法とコード例を示します。

方法1: border-radius を使用する方法 以下のHTMLとCSSコードを使用して、border-radiusプロパティを設定することで円形のアバターを作成できます。

HTMLコード:

<div class="avatar-container">
  <img src="avatar.jpg" alt="アバター" class="avatar">
</div>

CSSコード:

.avatar-container {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
}
.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

方法2: CSSの:before 疑似要素を使用する方法 以下のHTMLとCSSコードを使用して、:before疑似要素を利用してアバターを円形にします。

HTMLコード:

<div class="avatar-container">
  <img src="avatar.jpg" alt="アバター" class="avatar">
</div>

CSSコード:

.avatar-container {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: relative;
}
.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-container:before {
  content: "";
  display: block;
  padding-top: 100%;
  border-radius: 50%;
}

方法3: SVGを使用する方法 SVGを使用してアバターを作成することもできます。以下はSVGコードの例です。

<svg class="avatar-container" width="150" height="150" viewBox="0 0 150 150">
  <circle cx="75" cy="75" r="75" fill="#eaeaea" />
  <image href="avatar.jpg" width="150" height="150" clip-path="url(#avatar-clip)" />
  <defs>
    <clipPath id="avatar-clip">
      <circle cx="75" cy="75" r="75" />
    </clipPath>
  </defs>
</svg>