HTMLを使用して簡単なランキングリストを作成することは可能です。以下に、初心者向けの基本的なHTMLコードの例を示します。この例では、3つの項目がランキングされています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ランキング</title>
<style>
body {
font-family: Arial, sans-serif;
}
.ranking {
max-width: 400px;
margin: 20px auto;
}
.ranking-item {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="ranking">
<h2>ランキング</h2>
<div class="ranking-item">
<span>1.</span>
<span>項目1</span>
</div>
<div class="ranking-item">
<span>2.</span>
<span>項目2</span>
</div>
<div class="ranking-item">
<span>3.</span>
<span>項目3</span>
</div>
</div>
</body>
</html>このHTMLコードでは、<div> 要素を使用してランキングリストを作成しています。各項目は .ranking-item クラスでスタイル付けされており、ランキング順位と項目名が表示されています。この例では、CSSを使用して基本的なスタイルを設定しています。
この基本的な例から、より複雑なデザインや機能を追加することができます。例えば、JavaScriptやサーバーサイドのプログラムを組み合わせて、ユーザーが投票したりデータベースから動的に取得したランキングを表示することが可能です。
