CSS(Sass)でレーティング評価の星(★)を表現する方法 - Design Color
仕上がりイメージ 表現したいのは以下のような５つ星のレーティング評価です。食べログやAppStoreなどのレビューでよく見かけますよね。星の数は0.5きざみで推移します。 このレーティング、スプライト画像で実装すると評価ごとにバージョンを量産する必要があったりと少し面倒です。しかも、やっぱり後から星の大きさや色を変えたい！なんてなった時にまた画像を作り直すのはさらに面倒。今回は、そんな手間を解決してくれたCSSでの実装方法を紹介します。 実装方法は以下の記事を参考にさせていただきました。本当にありがとうございます〜！こちらの記事では実際にスライダーを動かして星の数を操作することができるため、イメージがつかみやすいですよ！ CSS(Sass)での実装方法 以下が実装用のコードです！初めてCodepen使いました。便利ですね！ ※あとで説明しますが、管理が楽なのでSass形式で作っています。C
CSSのみとSass/SCSS、Lessに対応したレイアウト系CSSフレームワークについて調べて表にしてみた | DevelopersIO
みなさまこんにちわ。 Webサイト高速化やSCSSの連載を書いている野中です。 そういえばGoogle Readerが終了するとのことでとても残念ですね。 読者のみなさまも次の引っ越し先ツール探しで忙しいところだと思います。 そこで、クラスメソッド開発ブログのRSSも忘れずに登録をお願いします。 とても更新頻度の高いブログということもあり、いろいろな切り口のRSSを用意しています。 本題 それでは本題ですが、レイアウト系のCSSフレームワークって色々ありますよね。 個人的にはHTML上のクラスにあまり意味のない文字列は入れたくないので使っていませんでした。HTMLも編集しなければならないので。 ふとSass/SCSSでExtendしたりMixinsで制御できるものであれば無駄なクラス指定を減らして可変でレスポンシブなグリッド制御ができるんじゃないか思って探してみたら色々とありました。 最初
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
