By: Moyan Brenn – CC BY 2.0
今のところCSSが嫌いな言語ナンバーワンです.
エラーも吐かずにシレーっと変な表示をするから.
Rating Star
stackoverflow.com/questions/11875088/use-fontawesome-or-glyphicons-with-css-before
HTML
タイトルは適宜変えたほうがいい
1 2 3 4 5 6 7 | <div class="rating"> <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label> <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label> <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label> <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label> <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label> </div> |
SCSS
こういうときSCSSはコピペできるからいいよね
Font Awesomeのcontentの番号の調べ方はStackOverflowに書いてあるとおり、公式ページに行って知りたいアイコンをFireBugとかで調査すれば、CSSのところにcontent:指定があるのでわかります
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | .rating { margin-top: 25px; margin-left: 20px; float:left; } /* :not(:checked) is a filter, so that browsers that don’t support :checked don’t follow these rules. Every browser that supports :checked also supports :not(), so it doesn’t make the test unnecessarily selective */ .rating:not(:checked) > input { position:absolute; top:-9999px; clip:rect(0,0,0,0); } .rating:not(:checked) > label { float:right; width:1em; padding:0 .1em; overflow:hidden; white-space:nowrap; cursor:pointer; font-size:300%; line-height:1.2; color:#ddd; text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5); font-family: FontAwesome; font-weight: normal; font-style: normal; display: inline-block; text-decoration: inherit; letter-spacing: 1em; } .rating:not(:checked) > label:before { // content: '★ '; content: "f005"; } .rating > input:checked ~ label { color: #f70; text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5); } .rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label { color: gold; text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5); } rating > input:checked + label:hover, .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label { color: #ea0; text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5); } .rating > label:active { position:relative; top:2px; left:2px; } |
参考
Counter
こんな便利なのがあったとは
www.tohoho-web.com/css/reference.htm
counter(名前, 形式) は、名前で指定したカウンター値を挿入します。形式には decimal(数値)、lower-roman(小文字ローマ数字)、upper-roman(大文字ローマ数字)、cjk-ideographic(漢数字)、hiragana(あ、い、う・・・)、katakana(ア、イ、ウ・・・)などが定義されています。省略時は decimal になります。カウンター値は counter-increment: で増加させ、counter-reset: でリセットすることができます。下記の例では、章や節の前に、自動的に章番号、節番号を表示します。
