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

CSSで画像を円形・角丸にする方法｜border-radiusの使い方を解説

Webページのデザインでは、プロフィール画像やアイコンなどを円形に表示したいケースがよくあります。CSSの border-radius プロパティを使えば、画像の四隅を丸めるだけでなく、正方形の画像を完全な円形に加工することも簡単に行えます。

border-radiusプロパティとは

border-radius は、要素の角の丸みを指定するためのプロパティです。px や % などの単位で値を設定でき、幅と高さが同じ正方形の要素に対して 50% を指定すると、真円として表示されます。

実装例：円形の画像を作成する

以下は、border-radius: 50% を使って円形の画像を作成するコード例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
   border-radius: 50%;
   width: 300px;
   height: 300px;
}
</style>
</head>
<body>
<h1>Rounded Images Example</h1>
<img src="https://i.picsum.photos/id/271/400/400.jpg">
</body>
</html>

実行結果

上記のコードを実行すると、300×300px の正方形画像の四隅が完全に丸められ、円形の画像として表示されます。

応用：角丸だけを付けたい場合

完全な円ではなく、少し角を丸めたい程度であれば、% の代わりに px 単位で値を指定します。例えば border-radius: 20px; とすれば、四隅が柔らかい印象の角丸画像になります。さらに border-radius: 20px 0; のように対角ごとに異なる値を指定すれば、リーフ型（葉っぱ型）のようなユニークな形状も作成できます。

まとめ

  • border-radius: 50% を指定すると、正方形の画像が円形になる
  • px 値を指定すれば、好みの強さの角丸に自由に調整できる
  • 幅と高さが異なる画像に 50% を指定すると楕円になるため注意が必要
  1. CSSとJavaScriptでリスト表示とグリッド表示を切り替える方法【サンプルコード付き】

    Webアプリケーションや管理画面などでは、コンテンツの表示形式を「リスト表示」と「グリッド表示」で切り替えられるUIがよく使われています。本記事では、CSSとJavaScript（バニラJS）だけを使って、ボタンクリックでリスト表示とグリッド表示を切り替える機能を実装する方法を解説します。実装のポイントこの機能は、以下の3つの要素で構成されています。カラムレイアウト：float を使って各カラムを横並びに配置します切り替えボタン：アクティブ状態のスタイルを持つボタンを配置しますJavaScript関数：カラムの幅（width）を変更し、ボタンの active クラスを付け替えますサンプルコード

  2. CSSとJavaScriptで拡張グリッド（クリックで展開するグリッド）を作成する方法

    CSSとJavaScriptを組み合わせることで、カードをクリックすると詳細パネルが展開される「拡張グリッド（Expanding Grid）」を簡単に実装できます。本記事では、3カラム構成のグリッドを例に、具体的な実装手順をわかりやすく解説します。 実装のポイント クリックイベント：各カラムにonclick属性を設定し、クリックされたカラムに対応するタブを開きます。 表示の切り替え：新しいタブを開く前に既存のタブをすべて非表示にすることで、常に1つのタブだけが展開された状態を保ちます。 閉じるボタン：タブ右上の「×」ボタンをクリックするとパネルが閉じ、元のグリッド表示に戻ります。 サンプル