Web制作の学習や実務で役立つ、カウンターアプリの作り方を解説します。
この記事では、HTML・CSS・jQueryを使用して、シンプルかつ機能的なカウンターアプリを作成します。
初心者の方でもわかりやすく手順を解説しますので、ぜひチャレンジしてみてください。
🎯 完成イメージ
完成するアプリは以下のような機能を持ちます。
✅ 複数のカウンターを追加できる
✅ 各カウンターに「名前」を入力可能
✅ 各カウンターの値が合計値に反映される
✅ カウンターの順序をドラッグ＆ドロップで変更できる
✅ カウンターを削除する機能あり
🛠️ 使用する技術
このカウンターアプリでは、以下の技術を使用します。
- HTML：ページの構造を作成
- CSS：デザインとレイアウトの整備
- jQuery：インタラクティブな機能を実装
📋 手順
以下の3つのステップで実装します。
- HTMLのマークアップ
- CSSでデザインの調整
- jQueryでカウンターの機能を追加
🖥️ 1. HTMLのマークアップ
まずは、カウンターアプリの基本構造をHTMLで作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Counter App</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<header>
<h2>Counter-App</h2>
</header>
<div id="add-container">
<button id="add-counter">Add Counter</button>
<div id="total-container">Total: <span id="total-sum">0</span></div>
</div>
<div class="ads-container"></div>
<footer>
©Counter App | Created by <a href="https://codequest.work/" target="_blank">CodeQuest</a>
</footer>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="./js/script.js"></script>
</body>
</html>
🎨 2. CSSでデザインの調整
次に、カウンターアプリの見た目を整えます。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
text-align: center;
}
header {
width: 100%;
background-color: #26afbf;
padding: 20px;
color: #fff;
}
.button {
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
background-color: #f9f9f9;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
#add-counter {
margin: 10px 0 15px;
padding: 5px 10px;
background-color: #26b0bf;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.3s;
}
#add-counter:hover {
background-color: #228199;
}
.counter-name {
margin-right: 5px;
padding: 5px;
}
.counter {
font-size: 18px;
font-weight: bold;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: end;
transform: translateX(-2%);
}
⚙️ 3. jQueryでカウンターの機能を追加
最後に、カウンターの機能を実装します。
$(document).ready(function () {
var totalSum = 0;
// カウンターのイベントを追加する関数
function addCounterEvents($counter) {
var counter = 0;
var $counterSpan = $counter.find(".counter");
function updateTotalSum() {
totalSum = 0;
$(".button").each(function () {
var counterValue = parseInt($(this).find(".counter").text(), 10) || 0;
totalSum += counterValue;
});
$("#total-sum").text(totalSum);
}
$counter.find(".increment").click(function () {
counter++;
$counterSpan.text(counter);
updateTotalSum();
});
$counter.find(".decrement").click(function () {
counter--;
$counterSpan.text(counter);
updateTotalSum();
});
$counter.find(".reset").click(function () {
counter = 0;
$counterSpan.text(counter);
updateTotalSum();
});
$counter.find(".remove").click(function () {
$counter.fadeOut("fast", function () {
$(this).remove();
updateTotalSum();
});
});
}
// 新しいカウンターを追加
$("#add-counter").click(function () {
var $newCounter = $(
`<div class="button">
<h1 class="counter-title">: <span class="counter">0</span></h1>
<button class="increment">+</button>
<button class="decrement">-</button>
<button class="reset">Reset</button>
<button class="remove">Remove Counter</button>
</div>`
);
$newCounter.insertBefore(".ads-container").hide().fadeIn();
// 新しいカウンターにイベントを追加
addCounterEvents($newCounter);
});
// カウンターをドラッグ可能にする
$("body").sortable({
items: ".button",
containment: "body",
cursor: "move",
tolerance: "pointer",
});
});
🚀 デモサイト
以下のリンクから実際のカウンターアプリを確認できます。
➡️ カウンターアプリを見る
🔎 まとめ
今回のカウンターアプリでは、HTML・CSS・jQueryを使用して、
- 複数のカウンター作成
- カウンターの合計値計算
- ドラッグ＆ドロップ機能
といった機能を簡潔に実装しました。
「もっと機能を増やしたい！」という方は、以下のアイデアも試してみると良いでしょう。
✅ カウンターの初期値設定
✅ ローカルストレージを利用して値の保存
✅ アニメーションの追加
カスタマイズしやすい構成になっているので、ぜひ改造してみてくださいね。