カテゴリー別アーカイブ: CSS

[CSS] line-heightの「%」設定と「単位なし」設定では挙動が違う!

行ブロックの基準となる高さを指定する line-height。

指定できる値は、「px」を用いた絶対値指定、「%」を用いた相対値指定、単位をつけない相対値指定などがある。

「%」を用いた場合と、単位をつけない場合はどちらも相対値指定だが、実は挙動が違うらしい。(ずっと同じだと思っていた)

例えば、

line-height:150%

line-height:1.5

は同じことを表しているように見えるが、実は「%」の方は要素の計算値が子要素に継承される。

つまり・・・

例えばフォントサイズ16pxで行間100%とした場合、子要素のフォントサイズが12pxだろうが10pxがろうが、行間は16pxとなる。

個人的には「%」指定の挙動が、嫌ですw

だから単位なしで行きたいと思います。

(もちろん「%」が便利な時はある!フォントサイズの違う子要素を交えながらもずっと同じ行間キープしたい時とか・・・)

 

[CSS]1つの画像で星レベル(ランク)を表示

【参考】
http://allabout.co.jp/gm/gc/24018/

以下のように、星の数でランクを表したい時があります。

ハンドリング ★★★★☆(4.0)
燃費 ★★★☆☆(3.0)
静粛性 ★★★★★(5.0)

そんな時に、1つの画像とCSSだけで実現するテクニックです。
今回メモするテクニックなら、3.5や4.5など、0.5単位の星も付けることができます。

画像の準備

次のような画像を準備する。

星が19個並んだ一つの画像です。
右から5つめの星は0.5を表すために半分だけ色の付いている星になっています。
この画像の、星一つあたりの幅は空白も含めて15pxになっています。等間隔に星が並んでいることがポイントです。
この画像の任意の場所75pxを表示させれば、
0~5.0のランクを0.5単位で表示することができます。

CSSソース

スタイルシートは以下の様になります。たったこれだけです。
(星の画像は「star.gif」とする)


.starlevel5 {
  background-image: url('star.gif');
  background-repeat: no-repeat;
  width: 75px;                  /* 横幅→星5つ分 */
  height: 15px;                 /* 高さ→星1つ分 */
}
.star50 { background-position: left top; }
.star40 { background-position: -15px top; }
.star30 { background-position: -30px top; }
.star20 { background-position: -45px top; }
.star10 { background-position: -60px top; }
.star00 { background-position: -75px top; }

.star45 { background-position: -150px top; }
.star35 { background-position: -165px top; }
.star25 { background-position: -180px top; }
.star15 { background-position: -195px top; }
.star05 { background-position: -210px top; }

HTMLソース


攻撃力:<div class="starlevel5 star30"></div>
守備力:<div class="starlevel5 star35"></div>
回復力:<div class="starlevel5 star40"></div>
信頼性:<div class="starlevel5 star05"></div>
エロさ:<div class="starlevel5 star50"></div>

▼表示例

星の最大値をカスタマイズ

今回の例は星の最大値が「5」だったが、CSSを少しいじるだけで「4」や「3」にすることもできる。