CSS のボーダー半径を使って丸い角を作成する

はじめに

この実験では、参加者は CSS のボーダー半径プロパティを使って、ウェブ要素に視覚的に魅力的な丸い角を作ります。段階的なアプローチを通じて、学習者は基本的な HTML ドキュメントをセットアップし、様々なボーダー半径のテクニックを徐々に適用して、要素の角を動的に操作する方法を理解します。

この実験では、一様な丸い角を作ること、個々の角に異なる半径を適用すること、ボーダー半径のバリエーションを試すことなどの基本的なスキルがカバーされます。実際の例を通じて学ぶことで、学生たちは CSS を使って鋭い角の div 要素を滑らかな丸いデザインコンポーネントに変換し、ウェブインターフェイスの美的魅力を高める実践的な経験を得るでしょう。

HTML ドキュメントをセットアップする

このステップでは、CSS のボーダー半径プロパティを調べるための基本的な HTML ドキュメントをセットアップします。CSS のスタイリング実験の基盤となる簡単な HTML ファイルを作成します。

WebIDE を開き、~/projectディレクトリに移動します。ファイルエクスプローラで右クリックして「新しいファイル」を選択することで、index.htmlという新しいファイルを作成します。

次の HTML 構造をコピーして貼り付けてindex.htmlファイルに入れます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Border-Radius Exploration</title>
    <style>
      /* 次のステップで CSS スタイルをここに追加します */
    </style>
  </head>
  <body>
    <div class="container">
      <h1>CSS Border-Radius Examples</h1>
      <!-- 次のステップで div 要素をここに追加します -->
    </div>
  </body>
</html>

この基本的な HTML ドキュメントは、CSS のボーダー半径の調査のための簡単な構造を提供します。重要なコンポーネントを分解しましょう。

<!DOCTYPE html>宣言は、最新の HTML 標準を使用するようにブラウザに指示します
<meta>タグは、文字エンコーディングとレスポンシブデザインに役立ちます
後続のステップで CSS を追加するための内部<style>タグを含めています
<body>には、例として使用するコンテナ div が含まれています

このファイルをブラウザで開いたときの例の出力：

CSS Border-Radius Examples

ファイルを保存し、~/project/index.htmlに配置されていることを確認します。

div 要素に基本的なボーダー半径を適用する

このステップでは、div 要素に丸い角を作成するために基本的なボーダー半径プロパティをどのように適用するか学びます。border-radiusプロパティを使えば、HTML 要素に簡単に滑らかな丸い角を作成できます。

WebIDE でindex.htmlファイルを開きます。<style>タグの中に、丸い角を持つ基本的な div を作成するために次の CSS を追加します。

<style>
  .rounded-box {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    border-radius: 20px;
    margin: 20px;
  }
</style>

次に、HTML の<body>セクションの中にrounded-boxクラスを持つ div を追加します。

<body>
  <div class="container">
    <h1>CSS Border-Radius Examples</h1>
    <div class="rounded-box"></div>
  </div>
</body>

CSS プロパティを分解してみましょう。

widthとheightは div のサイズを設定します
background-colorは div に実色を与えます
border-radius: 20pxは半径 20 ピクセルの丸い角を作成します
marginは div の周りに余白を追加します

この HTML ファイルをブラウザで開くと、丸い角を持つ青い四角が見えます。border-radiusプロパティは div の 4 つの角すべてに同じ曲線を適用します。

例の視覚的な出力：

+--------------------+
|                    |
|   Blue box with    |
|   rounded corners  |
|                    |
+--------------------+

border-radiusの値を変更して、角の曲がり具合にどのような影響があるか試してみましょう。10px、50px、さらには100pxのような値を試して、異なる丸みの効果を見てみましょう。

異なる角の半径を持つ div を作成する

このステップでは、個々の角の丸みをより細かく制御できる、異なる角の半径を持つ div をどのように作成するか学びます。border-radiusプロパティを使って、ユニークで面白い形状を作成できます。

index.htmlファイルの<style>セクションを次の CSS で更新します。

<style>
  .different-corners {
    width: 250px;
    height: 200px;
    background-color: #2ecc71;
    margin: 20px;
  }

  .top-left-corner {
    border-top-left-radius: 50px;
  }

  .bottom-right-corner {
    border-bottom-right-radius: 30px;
  }

  .mixed-corners {
    border-top-left-radius: 40px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 60px;
  }
</style>

次に、HTML の body に対応する div を追加します。

<body>
  <div class="container">
    <h1>CSS Border-Radius Examples</h1>
    <div class="rounded-box"></div>

    <div class="different-corners top-left-corner"></div>
    <div class="different-corners bottom-right-corner"></div>
    <div class="different-corners mixed-corners"></div>
  </div>
</body>

異なるボーダー半径の適用方法を分解してみましょう。

border-top-left-radius: 50pxは左上の角だけを丸くします
border-bottom-right-radius: 30pxは右下の角だけを丸くします
mixed-cornersの div は、各角に独立して異なる半径を設定できる方法を示しています

例の視覚的な出力：

+--------------------+
|  Green box with   |
|  varied corner    |
|  roundings        |
+--------------------+

ピクセル値を変更して、異なる角の半径がどのようにユニークな形状を作成するか試してみましょう。ピクセル (px)、パーセント (%) などの様々な単位を使ったり、水平と垂直の半径に異なる値を使ったりできます。

個々の角の半径のプロパティを調べる

このステップでは、個々の角の半径のプロパティについてもっと深く掘り下げ、異なる単位とテクニックを使ってより複雑で精密な丸い角を作成する方法を学びます。

index.htmlファイルの<style>セクションを次の CSS で更新します。

<style>
  .individual-radius {
    width: 300px;
    height: 200px;
    background-color: #e74c3c;
    margin: 20px;
  }

  .elliptical-corners {
    border-top-left-radius: 50px 25px;
    border-top-right-radius: 25px 50px;
    border-bottom-right-radius: 40px 20px;
    border-bottom-left-radius: 20px 40px;
  }

  .percentage-corners {
    border-top-left-radius: 30%;
    border-bottom-right-radius: 30%;
  }
</style>

HTML の body に対応する div を追加します。

<body>
  <div class="container">
    <h1>CSS Border-Radius Examples</h1>
    <div class="individual-radius elliptical-corners"></div>
    <div class="individual-radius percentage-corners"></div>
  </div>
</body>

新しいボーダー半径のテクニックを調べてみましょう。

楕円形の角：
- 各角に 2 つの値を使います：border-radius: 水平半径垂直半径
- 完全な円ではなく楕円のような曲線を作成します
- 例：border-top-left-radius: 50px 25pxは非対称な曲線を作成します
パーセントベースの角：
- レスポンシブで比例する角の半径を作成するためにパーセントを使います
- border-top-left-radius: 30%は要素のサイズに基づいて角を丸くします
- 適応型のデザインを作成するのに適しています

例の視覚的な出力：

+--------------------+
|  Red boxes with   |
|  unique corner    |
|  roundings        |
+--------------------+

半径の値と単位を変更して、要素の外見にどのような影響を与えるか試してみましょう。

ボーダー半径のバリエーションを試す

この最後のステップでは、CSS を使ってユニークで創造的な形状を作成できる高度なボーダー半径のテクニックを調べます。複雑な幾何学的デザインを作成するためにボーダー半径をどのように使うかを示します。

index.htmlファイルの<style>セクションを次の CSS で更新します。

<style>
  .creative-shapes {
    width: 250px;
    height: 250px;
    margin: 20px;
    background-color: #9b59b6;
  }

  .circle {
    border-radius: 50%;
  }

  .leaf-shape {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
  }

  .complex-shape {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
</style>

HTML の body に対応する div を追加します。

<body>
  <div class="container">
    <h1>CSS Border-Radius Creative Shapes</h1>
    <div class="creative-shapes circle"></div>
    <div class="creative-shapes leaf-shape"></div>
    <div class="creative-shapes complex-shape"></div>
  </div>
</body>

これらの創造的なボーダー半径のバリエーションを調べてみましょう。

完全な円：
- border-radius: 50%を使って完全な円を作成します
- 半径を要素の幅/高さの半分に等しくすることで機能します
葉のような形状：
- 特定の角を選択的に丸くして有機的な形状を作成します
- border-top-left-radius: 50%は曲がった角を作成します
複雑な非対称形状：
- 高度な構文border-radius: 水平 / 垂直を使います
- border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%はユニークな非対称形状を作成します

例の視覚的な出力：

+--------------------+
|  Purple shapes    |
|  with creative    |
|  border-radius    |
+--------------------+

パーセント値を変更して、要素の形状がどのように変化するかを観察して試してみましょう。

まとめ

この実験では、参加者は段階的な探究を通じて CSS のボーダー半径プロパティを使って丸い角を作成する方法を学びます。この実験は、内部スタイルタグ付きの基本的な HTML ドキュメントを設定することから始まり、CSS スタイリングの実験のための基盤を提供します。参加者はまず単純な HTML 構造を作成し、その後徐々に div 要素にボーダー半径のテクニックを適用します。

学習の旅には、滑らかな角を作成するための基本的なボーダー半径の適用、異なる角の半径の実験、および個々の角の半径のプロパティの探究が含まれます。実際の例を通じて作業することで、参加者は CSS を使って要素の形状を操作する実践的な経験を得、シンプルで直感的なスタイリング技術を使ってボーダー半径がウェブページ要素の視覚的外観をどのように変えるかを理解します。