商品を買う時、お店を選ぶ時に必ずといっていいほどチェックするレビューサイト。実際に買ったり、お店に行ってサービスを受けた方の感想が書かれていたり、店内の雰囲気が写真を使って説明されていたり。他にも★を使ってランクを表現している物もよく見かけます。この★マーク、一つ星(★☆☆)、二つ星(★★☆)、三つ星(★★★)なら、文字の入力で表現する事ができます。星1.5とか星2.5といった、小数点を使った表現をしたいと思っても、変換では半分となった星マークが出ないので、表記が難しいですね。今回は表現の難しい半分の星を含めた星を使ったレートを、CSSを使って実装してみようというお話です。疑似要素を使って星を配置する::beforeや::afterといった、疑似要素を使って表現していきます。グレーアウトした星を::beforeへ設定し、色のついた星を::afterへ付けます。#FFA500;}そして色のついた方をpositionを使って、ぴたりと重ねてあげるのです。このままでは色付の星しか見えませんね。hidden;}上へ重ねた色のついた星に対して、overflow:hidden;を与えます。する事で、指定した横幅以上は隠れて見えなくなります。あとはもう簡単ですね。1文字分を意味する「em」を使って横幅を付けてあげればいいのです!例えば星2つなら2em、星2.5なら2.5emです。これで星印を使ったレート表現ができますね!星を5つにしたければ::beforeと::afterへ星を5つ書いて、emを使った分岐を必要な数だけ増やせば対応可能です。最後にまとめたCSSを記載しておきます。よければ参考にしてみてくださいね。弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。コンセプト制作プランCONTACTお問い合わせホームページ制作に関するご質問などございましたら、お気軽にお問い合わせください。※ブログ記事に関するご質問はお答えしかねます。お問い合わせはこちらTEL:0258-31-5005FAX:0258-37-7301ホームページ制作のアテンド|新潟・長岡|SEO・WEBデザインホームページ制作・Webデザインを始めとしたITソリューションでお客様のお手伝いをいたします。株式会社アテンドまで。会社案内リクルートFAQお見積り・ご相談お問い合わせリモートサポートソーシャルメディアFacebookFeedlyイイ感じの情報が集まる、アテンドパークシリーズ。ホームページ制作のアテンド|新潟・長岡|SEO・WEBデザイン。