アイコン - I
Coddyの「スライダー | フロントエンド・プロジェクト」コースのレッスン 13/23。
チャレンジ
簡単.wrapper i (アイコン) セレクターをターゲットにします：
1. position を absolute に設定します。
2. top を 50% に設定します。
3. height と width を 50 ピクセルに設定します。
4. お好みの背景色を設定します。
5. ボーダーの半径 (border radius) を 50% に設定します。
6. お好みに合わせてボックスシャドウ (box shadow) を設定します。
7. transform を translateY(-50%) に設定します。
8. cursor を pointer に設定します。
9. お好みのフォントサイズを設定します（これによりアイコンのサイズが変わります）。
10. テキストを中央に配置します（水平方向の中央揃え）。
11. line-height を 50px に設定します（垂直方向の中央揃え）。
12. transition を transform 0.1s linear に設定します。
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>