CSSとJavaScriptで「いいね／よくないね」ボタンを切り替える方法
CSSとJavaScriptを組み合わせれば、クリックするたびに「いいね（サムズアップ）」と「よくないね（サムズダウン）」のアイコンが切り替わるボタンを簡単に実装できます。ここでは、Font AwesomeのアイコンとclassList.toggle()メソッドを使った具体的な実装例を紹介します。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.fa {
font-size: 50px;
cursor: pointer;
user-select: none;
}
.fa-thumbs-up {
color: blue;
}
.fa-thumbs-down {
color: red;
}
.fa:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<h1>Like dislike button example</h1>
<i class="fa fa-thumbs-up"></i>
<script>
document.querySelector(".fa").addEventListener("click", function(event) {
toggleLike(event);
});
function toggleLike(ele) {
ele.target.classList.toggle("fa-thumbs-down");
}
</script>
</body>
</html>コードのポイント
- Font Awesomeの読み込み： CDN経由でバージョン4.7.0を読み込み、サムズアップ・サムズダウンのアイコンを使用しています。
- スタイル設定：
.faクラスでアイコンサイズを50pxにし、cursor: pointerでクリックできることを示し、user-select: noneでテキスト選択を防止しています。 - 色分け： 「いいね」は青色（
.fa-thumbs-up）、「よくないね」は赤色（.fa-thumbs-down）で表示されます。 - ホバー効果：
:hoverでtransform: scale(1.2)を適用し、マウスを重ねるとアイコンが少し拡大されて押しやすさが向上します。 - 切り替え処理：
document.querySelector(".fa")でアイコン要素を取得し、クリックイベントでtoggleLike関数を呼び出します。classList.toggle("fa-thumbs-down")により、クリックするごとにクラスが追加・削除され、アイコンが切り替わります。
出力結果
上記のコードを実行すると、次のように青い「いいね」ボタンが表示されます。
ボタンをクリックすると、赤い「よくないね」アイコンに切り替わります。
-
CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説
CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini
-
CSSとJavaScriptでダークモード／ライトモードを切り替える方法を解説！
ダークモードとは？導入のメリット ダークモードは、夜間や暗い場所での閲覧時に目への負担を軽減できるうえ、有機EL（OLED）ディスプレイ搭載のスマートフォンやPCではバッテリー消費を抑えられる効果も期待できる、近年多くのWebサービスで標準となっている機能です。この記事では、CSSとJavaScriptを組み合わせて、ボタン操作ひとつでダークモードとライトモードを切り替える方法を、実際に動くサンプルコード付きで解説します。 切り替えの仕組み 実装の考え方は非常にシンプルです。まず、ライトモード（白背景・黒文字）のスタイルをbody要素のデフォルトとして定義し、ダークモード（黒背景・白文字）用の