HTMLとCSSだけで、絵を描けるのをご存知ですか？
今回は、「鉢植えチューリップ」の描き方をご紹介します。
HTMLとCSSの基本も楽しく学べますよ！
コード全体
まずはコード全体を見てみましょう。その後、各部分を詳しく解説します。
詳細解説
＜1. HTMLの構造＞
<body>
<div class="tulip-container">
<div class="pot"></div>
<div class="stem"></div>
<div class="leaf left"></div>
<div class="leaf right"></div>
<div class="flower"></div>
</div>
</body>
とてもシンプルなHTMLです。
- `tulip-container`：チューリップ全体を囲むコンテナ
- `pot`：鉢の部分
- `stem`：茎の部分
- `leaf left`と`leaf right`：左右の葉
- `flower`：花の部分
各要素をdivタグで作り、CSSで装飾していきます。
＜2. body要素のスタイリング＞
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
- `display: flex`：フレックスボックスレイアウトを使用
- `justify-content: center`と`align-items: center`：コンテンツを水平・垂直方向に中央揃え
- `min-height: 100vh`：ビューポートの高さいっぱいに表示
- `margin: 0`：余白をなくす
- `background-color: #f0f0f0`：薄いグレーの背景色
＜ 3. コンテナのスタイリング＞
.tulip-container {
position: relative;
width: 200px;
height: 300px;
}
- `position: relative`：子要素の絶対位置決めの基準点となる
- `width: 200px`と`height: 300px`：チューリップ全体のサイズを指定
＜4. 花の部分＞
.flower {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 130px;
height: 120px;
background-color: #FF0000;
clip-path: polygon(
0% 50%,
16.6% 0%,
33.3% 50%,
50% 0%,
66.6% 50%,
83.3% 0%,
100% 50%,
75% 100%,
25% 100%
);
z-index: 3; /* 前面に表示 */
}
- `position: absolute`：親要素（コンテナ）を基準に配置
- `top: 0, left: 50%, transform: translateX(-50%)`：上端に配置し、水平方向に中央揃え
- `width: 130px, height: 120px`：花のサイズ
- `background-color: #FF0000`：赤色の花
- `clip-path: polygon(...)`：チューリップの花びらの形を作る多角形パス
- 各座標ペアが花びらの形を作り、山と谷の繰り返しパターンを作成
- `z-index: 3`：他の要素より前面に表示
＜5. 茎の部分＞
.stem {
position: absolute;
top: 110px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 150px;
background-color: #4CAF50;
z-index: 1; /* 鉢より前、葉より後ろ */
}
- `top: 110px`：花の下に配置
- `left: 50%, transform: translateX(-50%)`：水平方向に中央揃え
- `width: 20px, height: 150px`：茎の幅と高さ
- `background-color: #4CAF50`：緑色の茎
- `z-index: 1`：鉢（z-index: 0）より前、葉（z-index: 2）より後ろに表示
＜6. 葉の部分＞
.leaf {
position: absolute;
width: 150px;
height: 30px;
background-color: #2E7D32;
z-index: 2; /* 茎より前、花より後ろ */
}
.leaf.left {
top: 180px;
left: 61%;
transform: translateX(-95%) rotate(60deg);
clip-path: polygon(0% 50%, 40% 100%, 100% 50%, 40% 0%);
}
.leaf.right {
top: 180px;
left: 39%;
transform: translateX(-5%) rotate(-60deg);
clip-path: polygon(0% 50%, 60% 100%, 100% 50%, 60% 0%);
}
共通のスタイル
- `position: absolute`：親要素を基準に配置
- `width: 150px, height: 30px`：葉のサイズ
- `background-color: #2E7D32`：濃い緑色の葉
- `z-index: 2`：茎より前、花より後ろに表示
左の葉：
- `top: 180px, left: 61%`：位置指定
- `transform: translateX(-95%) rotate(60deg)`：左に移動して60度回転
- `clip-path: polygon(...)`：葉の形状を定義
右の葉：
- `top: 180px, left: 39%`：位置指定
- `transform: translateX(-5%) rotate(-60deg)`：少し左に移動して-60度回転
- `clip-path: polygon(...)`：左の葉と少し異なる形状
＜7. 鉢の部分＞
.pot {
position: absolute;
bottom: -18%;
left: 50%;
transform: translateX(-50%);
width: 140px;
height: 120px;
background-color: #8B4513;
clip-path: polygon(0% 20%, 100% 20%, 85% 100%, 15% 100%);
z-index: 0; /* 背面に表示 */
}
- `bottom: -18%`：コンテナの下から少しはみ出すように配置
- `left: 50%, transform: translateX(-50%)`：水平方向に中央揃え
- `width: 140px, height: 120px`：鉢のサイズ
- `background-color: #8B4513`：茶色の鉢
- `clip-path: polygon(...)`：台形の鉢の形状を定義
- `z-index: 0`：一番背面に表示
重要なCSSプロパティの解説
position: absolute
絶対位置決めを行うプロパティです。
親要素（ここでは.tulip-container）が`position: relative`を持っているため、その内側での絶対位置を指定できます。
transform
要素の変形を行うプロパティです。今回は主に2つの目的で使用しています。
- `translateX(-50%)`：要素の横幅の半分だけ左にずらし、中央揃えにする
- `rotate(60deg)`や`rotate(-60deg)`：葉を回転させる
clip-path
要素を特定の形状に切り抜くプロパティです。
`polygon()`関数を使って複数の点を指定し、それらを結んだ多角形の形にします。
各点は`X% Y%`の形式で指定します。
例えば、花の`clip-path`は複数の点を指定して、チューリップの特徴的な形状を作っています。
z-index
要素の重なり順を指定するプロパティです。数値が大きいほど前面に表示されます。
- 花：`z-index: 3`（最前面）
- 葉：`z-index: 2`
- 茎：`z-index: 1`
- 鉢：`z-index: 0`（最背面）
ぜひこのコードを基に、自分だけのオリジナルチューリップを作ってみてください！
色や形を変えるだけで、まったく違った印象になりますよ。
コーディングって面白いですね！
・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・
【PR】
