こんにちは！
UPSTARTSのSベンです！
今回はいろいろなプロパティの値を使ってみていきましょう。
こちらのhtmlにスタイルをあてていきます。
|
1 2 3 4 |
<body> <p>三千世界</p> <div></div> </body> |
長さの値
まずは長さの値になるpx,em,%から見ていきましょう。
px
まずpxですが、スクリーンの1ピクセルの長さを1とした単位になります。
ではpxを使い、フォントサイズを指定してみます。
|
1 2 3 |
body { font-size: 16px; } |
こうすることにより、body内のフォントサイズを16pxにすることができます。
em
次にemですが、これは親要素があって相対的に決まるサイズになります。
ではp要素に対して、emを使いフォントサイズを指定してみます。
|
1 2 3 4 5 6 |
body { font-size: 16px; } p { font-size: 2em; } |
p要素のフォントサイズを2emと指定しました。
今回p要素の親要素はbodyになります。
bodyのフォントサイズは16pxなので、p要素はその2倍のサイズ32pxになります。
%
次に%ですが、下記を設定しボックスを作り、そちらを使っていきます。
|
1 2 3 4 5 |
div { width: 50px; height: 50px; background: red; } |
このボックスの横幅を50％と指定してみます。
|
1 2 3 4 5 |
div { width: 50%; height: 50px; background: red; } |
すると、ブラウザのサイズを変えても、
ブラウザのサイズに合わせて50％を維持します。
色の値
次に色の値になるrgb,rgbaをやっていきましょう。
色を指定するにはredとかblueなど色名が用意されているものがあります。
そちらは色名を指定することにより、自動的にその色にすることができます。
その他にrgb, rgbaといった指定方法があります。
rgb
まずrgbですが、
red, green, blueの3色でいろんな色を表現するものになります。
書き方が3パターンあります。
16進数で指定
まず1つ目は16進数で書く方法です。
|
1 2 3 4 5 |
div { width: 50%; height: 50px; background: #f00; } |
このように#で書くと赤色を指定することができます。
数値で指定
2つ目が数値を指定する方法です。
|
1 2 3 4 5 |
div { width: 50%; height: 50px; background: rgb(0,255,0); } |
先ほどの書き方とは違いrgb()でカッコの中に数値を指定します。
上限が各255になるので、このようにrが0、gが255、bが0と書くとgreenの色になります。
％で指定
3つ目が数値ではなく、%で指定する方法です。
書き方は先ほどのrgb()で一緒で、単位を％で指定します。
|
1 2 3 4 5 |
div { width: 50%; height: 50px; background: rgb(0%,0%,255%); } |
こうすると文字色はblueになります。
rgba
最後にrgbaですが、先ほどのものに書き加えてみます。
aというのは透明度になります。
先ほどのrgbにaを追加し、カッコの中にも値を追加します。
この透明度は0～1を指定でき、0が完全な透明で1が素の色になります。
今回は0.7としてみます。
|
1 2 3 4 5 |
div { width: 50%; height: 50px; background: rgba(0,255,0,0.7); } |
ちゃんと透明度が付き、先ほどとは違う色になっているかと思います。
今回は長さの値と色の値についてやっていきました。
次回は「フォント関連」の内容についてやっていきます。
ではまた次回！
