装飾：clip-pathで図形を切り抜いてみよう

📷 完成イメージ

📁 作成ファイル・保存場所

css-practice フォルダに以下のファイルを作成してください。

ファイル名	内容
clip-path-shapes.html	clip-path練習用のHTMLファイル
clip-path-shapes.css	CSSでclip-pathを使った表現を行うファイル

👉 HTMLファイルとCSSファイルは <link> タグで連携してください。
HTMLとCSSはこのページ下部のコードを参考に模写して作成します。

そもそもclip-path とは？

clip-path プロパティは、要素の表示される領域（クリップ領域）を図形で制限するためのCSSプロパティです。
画像やボックス要素を 円形・多角形・楕円形 など、自由な形に切り抜くことができます。

たとえば、四角い画像を circle() で丸くしたり、polygon() を使って星型やひし形に見せるといった、視覚的にインパクトのある表現が可能です。

css
.clip-circle {
  clip-path: circle(50%);
}
.clip-polygon {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

目的

clip-path プロパティを使って、要素を図形で切り抜く表現を体験する
circle(), polygon() を使って、円形や多角形のデザインを作れるようになる
図形の構造を理解し、自由なビジュアル表現に応用できる力を養う

チェックポイント

clip-path の書き方（circle・polygon）の構文を理解できているか
図形が崩れず、意図した形に切り抜けているか
width / height / overflow などが適切に調整されているか
グラデーションやシャドウなど他のCSSと組み合わせられているか

HTMLを模写しよう

以下の構造を参考に、css-practice04.html を作成してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>CSS Practice 04 - clip-path</title>
    <link rel="stylesheet" href="clip-path-shapes.css">
</head>

<body>

    <main class="clip-list">
        <section class="clip-shape clip-shape--triangle">
            <p class="clip-shape__label">三角形</p>
        </section>

        <section class="clip-shape clip-shape--circle">
            <p class="clip-shape__label">円形</p>
        </section>
    </main>

</body>

</html>

トレーニングスタート！

この課題では、CSSの指定も模写して入力してみましょう。

clip-path は構文が少し特殊なので、まずは下記のコードを写して正確に書くことを目的にします。

👉 CSS模写用コードは▼をクリックして確認してください。

body {
    margin: 0;
    padding: 2rem;
    font-family: sans-serif;
    background-color: #f7f7f7;
}

.clip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

/* 共通の図形スタイル */
.clip-shape {
    width: 200px;
    height: 200px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
}

/* 三角形 */
.clip-shape--triangle {
    width: 200px;
    height: 200px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background: linear-gradient(180deg, #e87a58, #ff4d8e);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}


/* 円形 */
.clip-shape--circle {
    background-color: #58c0e8;
    clip-path: ellipse(50% 40% at center);

    /* 縦に細長い楕円 */
    /* clip-path: ellipse(30% 60% at center); */

    /* 左上寄りの小さな楕円 */
    /* clip-path: ellipse(25% 25% at 20% 20%); */

}

CSS構成と効果

.clip-shape は図形のベース要素です。width・height・background-color を設定して表示領域を整えます。
.clip-shape--triangle には clip-path: polygon(...) を指定し、三角形に切り抜きます。
- polygon の中では、0〜100% の座標を使って頂点を指定します。
.clip-shape--circle には clip-path: circle(...) を指定して円形に切り抜きます。
- 例：circle(40% at center) は中心から40%の半径で円を描きます。
.clip-shape__label は図形内に表示されるテキストです。text-align や display: flex を使って中央に配置します。

左にオレンジの三角形、右にグリーンの円形
それぞれの図形の中にラベルテキストが中央配置で表示される
モバイルでは縦並び、PCでは横並びで整列する

応用ポイント

clip-path: inset(...) や ellipse(...) など他の形にも挑戦してみよう
背景に linear-gradient(...) を使うと、個性的な図形デザインが可能！

🧐 気になるところ・実践上の注意点

clip-path を使った図形は、環境やサイズによって輪郭が少しガタガタ（ジャギー）して見えることがあります。
特に polygon() を使った鋭角な形では、境界がピクセル単位でズレやすいためです。

📱 スマホでは？

最近のスマホは高解像度（Retinaなど）が多く、あまり気にならないことがほとんどです。
むしろPCやタブレットなど、画面が大きく拡大表示される場合にジャギーが目立つことがあります。

実践での工夫

大きな要素やロゴ・重要な装飾には、SVG を使うと滑らかで確実です。
小さなアイコンや装飾なら clip-path で十分なことが多いです。
背景とのコントラストが強いと目立ちやすくなるので、色のバランスも意識しましょう。

💬 見た目に違和感がある場合は、まずスマホとPCで見比べてみて、必要に応じて調整や代替手段（SVG）も検討してみましょう。