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

CSSで丸く囲んだ画像を作成する方法

CSSで画像を丸く表示するには、border-radiusプロパティを使用します。値を50%に設定することで、正方形の画像を簡単に完全な円形に変換できます。

基本的な仕組み

border-radiusは要素の四隅を丸めるためのプロパティです。画像に対してborder-radius: 50%を指定すると、角が最大限に丸められ、結果として円形の画像になります。さらにborderプロパティを組み合わせることで、円の周囲に枠線を追加することも可能です。

コード例

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        border-radius: 50%;
        border: 1px solid blue;
      }
    </style>
  </head>
  <body>
    <h2>Coding Ground</h2>
    <img src="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" alt="Online Compiler" width="300" height="300">
  </body>
</html>

ポイント解説

  • border-radius: 50%：画像を完全な円形にする指定です。幅と高さが同じ（正方形）である必要があります。
  • border: 1px solid blue：円の周囲に青色の1pxの実線の枠を追加します。
  • 縦横比が異なる長方形の画像に適用すると楕円形になるため、あらかじめ画像を正方形にトリミングしておくのがおすすめです。
  1. CSSで背景画像をぼかす方法｜filter: blur()の使い方を解説

    Webサイトのヒーローセクションなどで、背景画像をぼかして奥行きのあるおしゃれなデザインにしたい場面は多くあります。CSSではfilterプロパティのblur()関数を使うだけで、誰でも簡単にぼかし効果を実現できます。この記事では、実際のコード例とともにその実装方法を詳しく解説します。 実装のポイント：背景画像専用の要素を分ける blur()は指定した要素だけでなく、その中にある子要素（テキストなど）にも適用されてしまいます。そのため、背景画像だけをぼかしたい場合は、背景画像専用の要素を別途用意し、テキストなどのコンテンツとは分離して配置するのが重要なポイントです。 コード例 <!DOC

  2. CSSでスティッキーイメージ（追従画像）を作成する方法【初心者向け解説】

    Webページをスクロールしても画像が画面上に固定され続ける「スティッキーイメージ」は、position: sticky を使うことで簡単に実装できます。この記事では、CSSだけでスティッキーイメージを作成する具体的なコード例と、その仕組みをわかりやすく解説します。スティッキーイメージとは？スティッキー（sticky）配置とは、要素が通常のドキュメントフロー内に表示されつつ、スクロールして指定した位置に達すると、その位置に「貼り付いて」動かなくなる配置方法です。画像に対してこの設定を行うことで、ページを下にスクロールしても画像が画面上部に留まり続ける効果が得られます。実装コード例以下は、CSSで