デザイン
文字を横に並べて見だしを表現するのに次のことを行うことで実装することができる。
H3タグ：横並び,余白の設定,テキストの上下中央揃え
span(numberクラス)タグ:フォントサイズの設定,文字色の設定
HTML,CSS
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>
<span class="number">1</span>
<span>今日もフロントエンド学習！<br/>5時間/日は集中</span>
</h3>
<h3>
<span class="number">2</span>
<span>明日も元気に継続するぞ</span>
</h3>
</body>
</html>
style.css
h3 {
display: flex;
align-items: center;
gap: 10px;
}
.number {
color: #4bed6e;
font-size: 40px;
line-height: 1;
}