Angular Ansible Apache HTTP Server C C++ CMake Composer CSS Cypress date-fns Django Django REST Framework Eigen3 ESLint FastAPI Git GNU Make HTML htmx HTTP JavaScript Julia LaTeX MariaDB Node.js NumPy Octave pandas Perl PHP PostgreSQL Pygame Python PyTorch Qt R SQLite Tailwind CSS

CSSにおける丸い表現：border-radiusプロパティの詳細解説


基本的な丸め

最も基本的な丸め方は、border-radiusプロパティに半径の値を指定する方法です。半径の値は、ピクセル（px）またはパーセンテージ（%）で指定できます。

  • パーセンテージ単位
    要素のサイズに対する相対的な丸みを設定できます。
    • 例： border-radius: 50%; // 要素を完全に丸くする
  • ピクセル単位
    具体的な丸みを描画したい場合に有効です。
    • 例： border-radius: 10px; // 角を10ピクセル丸める

楕円形の作成

border-radiusプロパティに複数の値をカンマ区切りで指定することで、楕円形の作成も可能です。この場合、最初の2つの値が横方向の半径、次の2つの値が縦方向の半径を表します。

  • 例： border-radius: 20px 40px; // 横方向に20px、縦方向に40pxの楕円形

角の個別設定

さらに、border-radiusプロパティをスラッシュ（/）で区切ることで、各角の丸みを個別に設定できます。

  • 例： border-radius: 10px 20px 30px 40px; // 左上、右上、右下、左下の順に丸みを設定

上記の基本的な丸め以外にも、border-radiusプロパティを用いて様々な表現が可能です。

  • 影付きの丸いボタン
    box-shadowプロパティと組み合わせて、影付きの丸いボタンを作成できます。
  • 長方形の角丸
    border-radiusに大きな値を設定することで、長方形の角を丸くできます。
    • 例： border-radius: 9999px; // 長方形の角を大きく丸める
  • border-radiusプロパティの詳細については、MDN Web Docsなどのドキュメントを参照してください。
  • 丸みを付けた要素は、古いブラウザでは正しく表示されない場合があります。
  • border-radiusプロパティは、すべての主要なブラウザでサポートされています。

基本的な丸め

<!DOCTYPE html>
<html>
<head>
<style>
  .rounded-element {
    border-radius: 10px; /* 角を10ピクセル丸める */
    width: 100px;
    height: 100px;
    background-color: #ccc;
  }
</style>
</head>
<body>
  <div class="rounded-element"></div>
</body>
</html>

このコードは、rounded-elementというクラスにborder-radius: 10px;を設定することで、幅と高さ100ピクセルの四角形を、角を10ピクセル丸めた状態で表示します。

楕円形の作成

<!DOCTYPE html>
<html>
<head>
<style>
  .rounded-element {
    border-radius: 20px 40px; /* 横方向に20px、縦方向に40pxの楕円形 */
    width: 100px;
    height: 80px;
    background-color: #ccc;
  }
</style>
</head>
<body>
  <div class="rounded-element"></div>
</body>
</html>

このコードは、rounded-elementというクラスにborder-radius: 20px 40px;を設定することで、横方向に20ピクセル、縦方向に40ピクセルの楕円形を描画します。

角の個別設定

<!DOCTYPE html>
<html>
<head>
<style>
  .rounded-element {
    border-radius: 10px 20px 30px 40px; /* 左上、右上、右下、左下の順に丸みを設定 */
    width: 150px;
    height: 100px;
    background-color: #ccc;
  }
</style>
</head>
<body>
  <div class="rounded-element"></div>
</body>
</html>

このコードは、rounded-elementというクラスにborder-radius: 10px 20px 30px 40px;を設定することで、左上を10ピクセル、右上を20ピクセル、右下を30ピクセル、左下を40ピクセル丸めた四角形を描画します。

長方形の角丸

<!DOCTYPE html>
<html>
<head>
<style>
  .rounded-element {
    border-radius: 9999px; /* 長方形の角を大きく丸める */
    width: 300px;
    height: 200px;
    background-color: #ccc;
  }
</style>
</head>
<body>
  <div class="rounded-element"></div>
</body>
</html>

このコードは、rounded-elementというクラスにborder-radius: 9999px;を設定することで、300ピクセルx200ピクセルの長方形の角を大きく丸めています。

<!DOCTYPE html>
<html>
<head>
<style>
  .rounded-button {
    border-radius: 50%; /* ボタンを丸くする */
    width: 100px;
    height: 100px;
    background-color: #4CAF50; /* 緑色 */
    color: white;
    text-align: center;
    padding: 10px 0;
    display: inline-block;
    border: none;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
  }
</style>
</head>
<body>
  <button class="rounded-button">クリック</button>
</body>
</html>

border-imageプロパティ

画像を使用して要素の縁を装飾するborder-imageプロパティを用いる方法です。丸い画像を用意することで、要素を丸く表現できます。

  • デメリット: 画像ファイルが必要になる。パフォーマンスへの影響が懸念される場合もある。
  • メリット: 柔軟なデザインが可能。複雑な形状にも対応できる。
<!DOCTYPE html>
<html>
<head>
<style>
  .rounded-element {
    border-image: url('circle.png') 1 repeat; /* 丸い画像を繰り返し表示 */
    width: 100px;
    height: 100px;
  }
</style>
</head>
<body>
  <div class="rounded-element"></div>
</body>
</html>

clip-pathプロパティ

SVGパスを使用して要素の形状を定義するclip-pathプロパティを用いる方法です。円形のパスを定義することで、要素を丸く表現できます。

  • デメリット: border-radiusプロパティに比べて複雑な記述が必要になる。古いブラウザでは対応していない場合がある。
  • メリット: ベクター画像なので、拡大縮小しても画質が劣化しない。
<!DOCTYPE html>
<html>
<head>
<style>
  .rounded-element {
    clip-path: circle(50%); /* 半径50%の円形にくり抜く */
    width: 100px;
    height: 100px;
    background-color: #ccc;
  }
</style>
</head>
<body>
  <div class="rounded-element"></div>
</body>
</html>

maskプロパティ

要素の上に別の要素を重ねてマスクするmaskプロパティを用いる方法です。丸いSVG要素をマスクとして使用することで、要素を丸く表現できます。

  • デメリット: 複雑な記述が必要になる。パフォーマンスへの影響が懸念される場合もある。
  • メリット: clip-pathプロパティと同様に、ベクター画像を使用できる。
<!DOCTYPE html>
<html>
<head>
<style>
  .rounded-element {
    mask: url('#mask'); /* 丸いSVG要素をマスクとして適用 */
    width: 100px;
    height: 100px;
    background-color: #ccc;
  }

  #mask {
    width: 100px;
    height: 100px;
    mask-mode: alpha; /* マスクを透過させる */
  }

  #mask circle {
    fill: white; /* マスクする領域を白色にする */
    width: 50%; /* 半径50%の円形 */
    height: 50%;
  }
</style>
</head>
<body>
  <svg id="mask">
    <circle cx="50%" cy="50%" r="50%"/>
  </svg>
  <div class="rounded-element"></div>
</body>
</html>

上記以外にも、以下のような方法で「丸い」表現を作成できます。

  • positionプロパティとtransformプロパティを使用して要素を丸く変形する
  • ::before擬似要素と丸いボーダーを作成する
  • background-clipプロパティと丸いグラデーションを使用する

どの方法を選択すべきか

それぞれの方法にはメリットとデメリットがあり、状況によって適切な方法が異なります。

  • ベクター画像で高品質な丸い表現が必要な場合は、clip-pathプロパティまたはmaskプロパティが有効です。
  • 柔軟なデザインや画像を使用したい場合は、border-imageプロパティが適しています。
  • シンプルな丸い表現であれば、border-radiusプロパティがおすすめです。