edy hub

プログラミングやライフスタイルについて書き綴っています

フロントエンドのあれこれ

rgba

例えば、background-color: rgba(0, 0, 0, 0.85); という記述があったとする。

最後の0.85はアルファチャンネル=不透明度を表す。

つまり、 rgba(0, 0, 0, 0.85) とは、#000と同じ真っ黒を、不透明度85%の半透明にする、ということ。

vhとvw

vhは、 view height の略。 ブラウザの高さを100vhと定義する。 ブラウザの高さの半分なら50vh、10%なら10vhという用法で使う。

似たような単位として、 vw があり、これはview width の略。 ブラウザの横幅を100vwとして大きさを指定する時の単位となる。

line-hight

line-hightは1行あたりの高さを決めてくれる。 例えば、font-size が20pxのテキストに対して、line-height: 140% とすると、20 × 1.4で、行の高さは28pxになる。 このとき、line-hight: 1.4としても同様の値になる。

letter-spacing

letter-spacing は、テキストの文字間隔を指定するCSSプロパティ。 line-heightと同じく、font-sizeに対してどれくらいの広さを空けるかという考え方をする。

このときemという単位がよく用いられる。 その要素のfont-sizeを基準に、font-size の 1% が 0.01emとなる。