HTML/CSS入門 10分で時計盤をつくってみよう

2020年7月29日

HTML/CSSで以下のような時計盤をつくってみます。

タスク一覧

円を描く
円の縁を描く
12を描く
1を描く
２から11を描く

円を描く

divで正方形を作り、border-radius: 50%;　で円にします。分かりやすくするために背景をlightgreenで塗っています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="clock.css">
    <title>clock</title>
</head>
<body>
<div class="clock"></div>
</body>
</html>

.clock{
    width: 500px;
    height: 500px;
    background: lightgreen;
    border-radius: 50%;
}

円の縁を描く

borderを指定して縁だけ色をつけます。

.clock{
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 20px solid lightgreen;
}

12を描く

時計のdivの子要素にdivを追加します。時計のdivと同じサイズになるようにします。文字は中央寄せにします。

<body>
<div class="clock">
    <div class="number">12</div>
</div>
</body>

.clock{
    position: relative;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 20px solid lightgreen;
}
.number {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    text-align: center;
}

1を描く

1のdivを追加します。そして、transform-origin と transform を使って、30度傾けます。

<body>
<div class="clock">
    <div class="number">12</div>
    <div class="number one">1</div>
</div>
</body>

.clock{
     position: relative;
width: 500px;
height: 500px;
border-radius: 50%;
border: 20px solid lightgreen;
}
.number {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    text-align: center;
}
.one {
    transform-origin: center;
    transform: rotate(30deg);
}