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

CSSで丸みを帯びた画像を作成する方法｜border-radiusの使い方

CSSで丸みを帯びた画像を作成する方法

画像に丸み（角丸）を加えたい場合は、CSSの border-radius プロパティを使用します。このプロパティを指定するだけで、四隅の角を滑らかに丸めた画像を簡単に作成できます。

border-radiusの基本

border-radius プロパティには、ピクセル（px）やパーセンテージ（%）などの値を指定できます。値が大きいほど角の丸みが強くなり、小さいほど控えめな角丸になります。また、border プロパティと組み合わせれば、枠線付きの角丸画像も実現可能です。

サンプルコード

以下は、画像に20pxの角丸と青色の枠線を適用する例です。

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            border-radius: 20px;
            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% を指定すると、完全な円形の画像を作成することもできます。SNSのプロフィール画像などでよく使われるテクニックなので、覚えておくと便利です。

img {
  border-radius: 50%;
}

このように、border-radius プロパティを活用すれば、Webページのデザインの幅が大きく広がります。ぜひ実際のコードで試してみてください。

  1. CSSで背景画像をぼかす方法｜filter: blur()の使い方を解説

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

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

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