どうも7noteです。レビューや口コミがとても重要な時代になってきましたね。
ホームページでもレビューを見て商品を購入するかどうか決める人がとても増えてきたと思います。
となると実装できないと困りますよね。
そこでCSSだけでできるレビューの星を作って評価できるものを作っていきます。
データを記録させるためにはサーバーと連携させたり、javascriptの組み込みが必要になります。
ここでは見た目の動きについての作り方を解説します。
見本
ソース
index.html
<divclass="review"><p>レビュー</p><divclass="stars"><span><inputid="review01"type="radio"name="review"><labelfor="review01">★</label><inputid="review02"type="radio"name="review"><labelfor="review02">★</label><inputid="review03"type="radio"name="review"><labelfor="review03">★</label><inputid="review04"type="radio"name="review"><labelfor="review04">★</label><inputid="review05"type="radio"name="review"><labelfor="review05">★</label></span></div></div>style.css
.starsspan{display:flex;/* 要素をフレックスボックスにする */flex-direction:row-reverse;/* 星を逆順に並べる */justify-content:flex-end;/* 逆順なので、左寄せにする */}.starsinput[type='radio']{display:none;/* デフォルトのラジオボタンを非表示にする */}.starslabel{color:#D2D2D2;/* 未選択の星をグレー色に指定 */font-size:30px;/* 星の大きさを30pxに指定 */padding:05px;/* 左右の余白を5pxに指定 */cursor:pointer;/* カーソルが上に乗ったときに指の形にする */}.starslabel:hover,.starslabel:hover~label,.starsinput[type='radio']:checked~label{color:#F8C601;/* 選択された星以降をすべて黄色にする */}解説
ラジオボタンで星を用意して、選択された星以降の星に色がつくようなCSSをかいていきます。
まず、予め星を逆順に並べます（flex-direction: row-reverse;）。そのうえで、input[type='radio']:checked ~ labelの指定をすることでラジオのチェックがついた星以降の星に色が付きます。
逆順に並んでいるので、見た目的には左から順番に色がついているような状態になります。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ