htmlとCSSでレビューを作ってみよう！
記事IT・テクノロジー
今回はhtmlとCSSを使って、レビューのレイアウトを作ってみます。動的に動かすわけでないので、レビューを更新したかったら自分で追加や削除をしなくてはいけませんが、とりあえずレビューを表示したいって時にいかがでしょうか？😊
コピペできるようにコードも載せておきますね！よかったら参考にしてみてください🌈
完成見本
https:// tsuyu0102.github.io/css-sample/review-design/index.html
▼1500px幅
▼601px幅
▼600px幅（600以下で画像を非表示にしています）
html
<section class="review-section">
<h2>REVIEW</h2>
<ul>
<li>
<img class="user" src="img/user01.png" alt="" />
<div class="review-area">
<p class="name">購入者さん</p>
<p class="star3"></p>
<p class="comment">いつもポイント倍や送料無料セールなどの時に利用しています。セールの時は売れ切れの商品が多いですが、メンズに絞って検索すると希にコスパの良い商品があります。対応も発送もとても早いです。リピさせて頂きます。</p>
<p class="date">2023年06月03日</p>
</div>
<a href="#"><img class="item" src="img/item01.jpg" />商品を見る</a>
</li>
<li>
<img class="user" src="img/user02.png" alt="" />
<div class="review-area">
<p class="name">購入者さん</p>
<p class="star4-5"></p>
<p class="comment">165cmMサイズを購入しました。少しオーバーサイズですが、生地もしっかりしていて、とても着やすくお気に入りです♪スキニーパンツやロングスカート、何にでも合わせやすく、これからの季節重宝しそうです(^^)</p>
<p class="date">2023年06月03日</p>
</div>
<a href="#"><img class="item" src="img/item02.jpg" />商品を見る</a>
</li>
</ul>
</section>
⭐️hrefの＃のところに商品のURLを入れてください
⭐️user01.pngは丸く切り抜いた画像でなくても、CSSで指定してますので大丈夫です
⭐️<li>〜</li>までが一人分です
⭐️class="star○" のところで★を表示しています。star3, star3-5, star4, star4-5, star5 とクラス名変えることで、星の色（評価数）を変更します
CSS
<style>
body {
background: oldlace;
margin: 0;
}
.review-section {
background: #fff;
padding: 3rem 0;
}
.review-section h2 {
text-align: center;
letter-spacing: 0.5rem;
}
.review-section ul {
max-width: 1000px;
list-style-type: none;
margin: 2rem auto;
padding: 0 1.5rem;
}
.review-section li {
display: grid;
grid-template-columns: 100px 1fr 100px;
gap: 1.5rem;
border-top: 1px solid #ccc;
padding: 1rem 0;
}
.review-section li:last-child {
border-bottom: 1px solid #ccc;
}
.review-section .user,
.review-section .item {
max-width: 100%;
}
.review-section .user {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: solid 1px #eee;
}
.review-area {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.review-area p {
margin: 0;
}
.review-area .name,
.review-area .date,
.review-section a {
font-size: 0.8rem;
}
.review-area .star5:before {
content: '★★★★★';
font-size: 1.2rem;
background: #cda85a;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.review-area .star4-5:before {
content: '★★★★★';
font-size: 1.2rem;
background: linear-gradient(to right, #cda85a 90%, #d9d9d9 91%);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.review-area .star4:before {
content: '★★★★★';
font-size: 1.2rem;
background: linear-gradient(to right, #cda85a 80%, #d9d9d9 81%);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.review-area .star3-5:before {
content: '★★★★★';
font-size: 1.2rem;
background: linear-gradient(to right, #cda85a 70%, #d9d9d9 71%);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.review-area .star3:before {
content: '★★★★★';
font-size: 1.2rem;
background: linear-gradient(to right, #cda85a 60%, #d9d9d9 61%);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.review-area .comment {
text-align: justify;
position: relative;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.review-section a {
text-align: center;
}
＠media (max-width: 600px) {
.review-section li {
display: block;
}
.review-section .user,
.review-section .item {
display: none;
}
.review-area {
margin-bottom: 0.5rem;
}
.review-section a {
font-size: inherit;
}
}
</style>
⭐️＠マークは半角にしてください
⭐️body{}部分は不要でしたら削除してください
いかがでしたか？自分で修正するのが面倒だなと感じたら、賑わいシステムを使ってみると良いかもしれませんね。
今回は以上です。お疲れ様でした🎶
