CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでアバター画像を作成する方法｜border-radiusで丸型アイコンを実現

CSSを使えば、通常の画像を簡単におしゃれな丸型アバター画像（プロフィールアイコン）に変換できます。鍵となるのは border-radius プロパティです。値を「50%」に設定することで、正方形の画像を完全な円形として表示できます。

サンプルコード

以下は、CSSでアバター画像を作成するコード例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.avatarImage {
    vertical-align: middle;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border:3px solid black;
    margin: 10px;
}
</style>
</head>
<body>
<h1>Avatar Images Example</h1>
<img src="https://images.pexels.com/photos/2128807/pexels-photo-2128807.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="avatarImage">
<img src="https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="avatarImage">
</body>
</html>

コードのポイント

  • border-radius: 50%; … 画像を円形に切り取るための最重要プロパティです。
  • width / height: 250px; … アバターのサイズを指定します。縦横比を同じ（正方形）にすると、きれいな円になります。
  • border: 3px solid black; … アバターの周囲に黒い枠線を追加し、デザインを引き締めます。
  • vertical-align: middle; … テキストと並べたときに画像を中央揃えに配置します。
  • margin: 10px; … アバター同士や周囲の要素との間隔を調整します。

実行結果

上記のコードをブラウザで実行すると、次のように2つの丸型アバター画像が表示されます。

CSSでアバター画像を作成する方法｜border-radiusで丸型アイコンを実現

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>