実現したいこと

商品名の横にハートマークのいいねボタンを作りたい

発生している問題・分からないこと

いろいろネットで調べたけどうまくできなかった

該当のソースコード

CSS
1<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
2<%@ page import="java.sql.*" %>
3<%@ include file="../header.jsp" %>
4
5<%
6    // 文字エンコーディングの設定
7    request.setCharacterEncoding("UTF-8");
8    response.setCharacterEncoding("UTF-8");
9
10    // パラメータの取得
11    String id = request.getParameter("id");
12    String itemName = request.getParameter("title");
13    String currentPrice = request.getParameter("price");
14    String current_price = request.getParameter("current_price");
15    String condition = request.getParameter("condition");
16    String description = request.getParameter("description");
17    String imageUrl = request.getParameter("imageUrl");
18    String formattedEndDate = request.getParameter("formattedEndDate");
19
20
21%>
22
23<!DOCTYPE html>
24<html lang="ja">
25<head>
26    <meta charset="UTF-8">
27    <title>入札ページ</title>
28    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
29    <style>
30   .like-btn {
31 width: 25px;
32 height: 30px;
33 font-size: 25px;
34 color: #808080;
35 margin-left: 20px;
36 }
37
38.example2{
39    display: flex;
40}
41.example2 label{
42  position: absolute;
43  width: 50px;
44  height: 40px;
45  /*keep #heart inside the #favorite*/
46  right:  10%;
47  bottom: 10%;
48}
49.example2 label:before,
50.example2 label:after {
51  position: absolute;
52  content: "";
53  left: 25px;
54  top: 0;
55  width: 25px;
56  height: 40px;
57  background: #f88dc8;
58  border-radius: 50px 50px 0 0;
59  transform: rotate(-45deg);
60  transform-origin: 0 100%;
61}
62.example2 label:after {
63  left: 0;
64  transform: rotate(45deg);
65  transform-origin :100% 100%;
66}
67
68}
69.example2 input{
70    display: none;
71}
72.unlike-btn {
73 width: 25px;
74 height: 30px;
75 font-size: 25px;
76 color: #e54747;
77 margin-left: 20px;
78 }
79
80.like-button i {
81    color: white; /* アイコンの色 */
82    font-size: 24px; /* アイコンのサイズ */
83}
84
85/* ボタンのスタイル */
86button {
87    background-color: #ff8000;
88    color: white;
89    border: none;
90    padding: 10px 20px;
91    font-size: 20px;
92    border-radius: 5px;
93    cursor: pointer;
94    width: 300px;
95    max-width: 100%; /* 幅を超えないように */
96}
97
98/* モーダルの背景 */
99.modals {
100    display: none; /* 初期は非表示 */
101    position: fixed;
102    z-index: 1;
103    left: 0;
104    top: 0;
105    width: 100%;
106    height: 100%;
107    background-color: rgba(0, 0, 0, 0.5);
108    justify-content: center;
109    align-items: center;
110}
111
112/* モーダルのコンテンツ */
113.modals-content {
114    background-color: white;
115    padding: 20px;
116    border-radius: 10px;
117    text-align: center;
118    width: 400px;
119}
120
121/* 閉じるボタン */
122.close {
123    color: black;
124    float: right;
125    font-size: 28px;
126    cursor: pointer;
127}
128
129.close:hover {
130    color: red;
131}
132
133input[type="text"] {
134    font-size: 18px;
135    padding: 5px;
136    width: 100px;
137    margin-top: 10px;
138    color: black; /* 文字色を黒に変更 */
139    border: 1px solid #ccc; /* ボーダーを設定 */
140    outline: none; /* デフォルトのアウトラインを消す */
141}
142
143.confirm-button {
144    margin-top: 20px;
145    padding: 10px 20px;
146    background-color: #e0e0e0;
147    border: none;
148    cursor: pointer;
149}
150
151/* 最高入札額ラベルのスタイル */
152.highest-bid-label {
153    color: #000000; /* ここで色を変更 */
154    font-weight: bold; /* 太字にする場合 */
155}
156.new-bid-button {
157    background-color: #d32601; /* 新しい色 */
158    color: white;
159    border: none;
160    padding: 10px 20px;
161    font-size: 20px;
162    border-radius: 5px;
163    cursor: pointer;
164   width: 300px
165}
166#myModal2 {
167    display: none; /* 初期状態では非表示 */
168    position: fixed;
169    z-index: 1;
170    left: 0;
171    top: 0;
172    width: 100%;
173    height: 100%;
174    background-color: rgba(0, 0, 0, 0.4); /* 半透明の背景 */
175}
176
177/* モーダルコンテンツ */
178.modals-content {
179    background-color: white;
180    margin: 15% auto;
181    padding: 20px;
182    border-radius: 10px;
183    width: 300px;
184    text-align: center;
185    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
186}
187
188/* 閉じるボタン */
189.close {
190    color: black;
191    font-size: 24px;
192    font-weight: bold;
193    float: right;
194    cursor: pointer;
195}
196
197/* タイトル */
198.modals-content h2 {
199    color: #666666;
200    font-size: 18px;
201    margin-bottom: 10px;
202}
203
204/* テキスト */
205.modals-content p {
206    color: black;
207    font-size: 16px;
208    margin: 8px 0;
209}
210
211/* 強調表示用の価格テキスト */
212.highlight-price {
213    font-size: 24px;
214    font-weight: bold;
215    color: #e60000; /* 赤色 */
216    margin: 10px 0;
217}
218
219/* ボタン */
220.modals-content button {
221    background-color: #f76a0e; /* ボタン色 */
222    color: white;
223    border: none;
224    padding: 10px 20px;
225    font-size: 16px;
226    border-radius: 5px;
227    cursor: pointer;
228}
229
230.modals-content button:hover {
231    background-color: #e55a00; /* ホバー時の色 */
232}
233
234.disclaimer {
235position: fixed;
236bottom: 0px; /* 余白を少し追加して下に配置 */
237left: 0;
238width: 100%;
239background-color: #D3D3D3; /* 白い背景 */
240padding: 15px;
241border-top: 1px solid #ddd;
242display: flex;
243align-items: center;
244justify-content: center;
245z-index: 10;
246font-size: 17px; /* 文字サイズを小さくする */
247color: black; /* 文字の色を調整 */
248}
249
250.disclaimer-image {
251    margin-right: 20px;
252    width: 80px;
253    height: 80px;
254}
255.disclaimer-text {
256    text-align: center;
257    flex-grow: 1;
258}
259.left-image {
260    margin-left: 100px;
261    width: 80px;
262    height: 80px;
263}
264
265.col-md-6 {
266    display: flex;
267    flex-direction: column;
268    justify-content: flex-start;
269    height: 700%; /* 高さを100%に設定 */
270 }
271
272 .product-name {
273    display: inline-block; /* インラインブロックにすることで文字列にフィット */
274    background-color: #f0f0f0; /* 任意の背景色 */
275    padding: 10px 15px; /* 文字と背景の間に適切なスペース */
276    border-radius: 5px; /* 角を丸くする */
277    font-size: 24px; /* フォントサイズを調整 */
278    word-wrap: break-word; /* 長い単語が改行されるようにする */
279}
280
281body {
282    background-color: white; /* 背景色を薄いグレーに変更 */
283}
284
285.topp a {
286    display: inline-block; /* インライン要素として表示 */
287    white-space: nowrap; /* テキストを改行せずに表示 */
288    font-size: 15px; /* フォントサイズ */
289    text-decoration: none; /* 下線を削除 */
290    margin-left: 1000px;
291}
292
293.img-fluid {
294    max-width: 400px; /* 最大幅を設定 */
295    height: 300px;    /* 固定高さを設定 */
296    object-fit: cover; /* 画像をコンテナ内でカバーするように表示 */
297    border-radius: 10px; /* オプション: 角を丸める */
298}
299
300.topp {
301    position: fixed; /* 画面に固定 */
302}
303
304</style>
305</head>
306<body>
307<div class="container mt-5">
308    <div class="row">
309        <div class="col-md-6">
310    <img src="<%= imageUrl %>" class="img-fluid" alt="商品画像">
311</div>
312
313        <div class="col-md-6">
314        <h2 class="product-name">
315    <%= itemName != null ? itemName : "<span style='font-size: 14px;'>商品名未設定</span>" %>
316    <!-- いいねボタン -->
317   <button id="likeButton">いいね</button>
318    <span id="likeCount"></span>
319    <script src="script.js"></script>
320</h2>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

ボタンはできたのですがハートマークに変わらないです

補足

特になし

yambejp

2025/01/27 04:12

ダブった投稿であればどちらかを削除依頼してください

juner

2025/01/27 04:21

css の切り抜きプロパティである clip-path と任意パスを表す path() 関数は確認されましたでしょうか？ https://developer.mozilla.org/ja/docs/Web/CSS/clip-path https://developer.mozilla.org/ja/docs/Web/CSS/basic-shape/path

行動規範の内容に同意します

回答2件

fontawesomeでサンプル

html
1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
2<style>
3.fa-solid{color:red;}
4.fa-regular{color:gray;}
5</style>
6<script>
7document.addEventListener('click',({target})=>{
8  if(target.closest('span:has(.fa-heart)')){
9    const faheartclass=target.closest('span').querySelector('.fa-heart').classList;
10    faheartclass.toggle('fa-regular');
11    faheartclass.toggle('fa-solid');
12  }
13});
14</script>
15<span>商品名A<i class="fa-regular fa-heart"></i></span>
16<span>商品名B<i class="fa-regular fa-heart"></i></span>

jsなし、html+cssで対応

html
1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
2<style>
3.fa-solid{color:red;}
4.fa-regular{color:gray;}
5label [type=checkbox]{display:none;}
6label [type=checkbox]:checked ~ .fa-regular ,
7label [type=checkbox]:not(:checked) ~ .fa-solid{
8display:none;
9}
10</style>
11<label>商品名A<input type="checkbox"><i class="fa-solid fa-heart"></i><i class="fa-regular fa-heart"></i></label>
12<label>商品名B<input type="checkbox"><i class="fa-solid fa-heart"></i><i class="fa-regular fa-heart"></i></label>

投稿2025/01/27 05:32

編集2025/01/27 06:03

yambejp

総合スコア118066

ベストアンサー

例えば clip-path を使って次の様な感じはどうでしょうか？

html
1<button class="like-button">いいね</button>
2<style>
3  .like-button {
4    display: inline flex;
5    flex-flow: row nowrap;
6    align-items: center;
7    font-size: 1rem;
8    gap: 0em;
9    &::after {
10      display: inline-block;
11      content: "";
12      height: 1.5em;
13      width: 1.5em;
14      background: red;
15      clip-path: path("M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z");
16      transform: scale(0.5);
17    }
18  }
19</style>