CSS #07 プロパティの値

  • このエントリーをはてなブックマークに追加
  • LINEで送る

 

こんにちは!
UPSTARTSのSベンです!

 

今回はいろいろなプロパティの値を使ってみていきましょう。

こちらのhtmlにスタイルをあてていきます。

 

長さの値

まずは長さの値になるpx,em,%から見ていきましょう。

 

px

まずpxですが、スクリーンの1ピクセルの長さを1とした単位になります。

ではpxを使い、フォントサイズを指定してみます。

 

こうすることにより、body内のフォントサイズを16pxにすることができます。

 

em

次にemですが、これは親要素があって相対的に決まるサイズになります。

ではp要素に対して、emを使いフォントサイズを指定してみます。

 

p要素のフォントサイズを2emと指定しました。

今回p要素の親要素はbodyになります。
bodyのフォントサイズは16pxなので、p要素はその2倍のサイズ32pxになります。

 

%

次に%ですが、下記を設定しボックスを作り、そちらを使っていきます。

 

このボックスの横幅を50%と指定してみます。

 

すると、ブラウザのサイズを変えても、
ブラウザのサイズに合わせて50%を維持します。

 

色の値

次に色の値になるrgb,rgbaをやっていきましょう。

色を指定するにはredとかblueなど色名が用意されているものがあります。
そちらは色名を指定することにより、自動的にその色にすることができます。

その他にrgb, rgbaといった指定方法があります。

 

rgb

まずrgbですが、

red, green, blueの3色でいろんな色を表現するものになります。

 

書き方が3パターンあります。

 

16進数で指定

まず1つ目は16進数で書く方法です。

 

このように#で書くと赤色を指定することができます。

 

数値で指定

2つ目が数値を指定する方法です。

 

先ほどの書き方とは違いrgb()でカッコの中に数値を指定します。

上限が各255になるので、このようにrが0、gが255、bが0と書くとgreenの色になります。

 

%で指定

3つ目が数値ではなく、%で指定する方法です。

書き方は先ほどのrgb()で一緒で、単位を%で指定します。

 

こうすると文字色はblueになります。

 

rgba

最後にrgbaですが、先ほどのものに書き加えてみます。

aというのは透明度になります。
先ほどのrgbにaを追加し、カッコの中にも値を追加します。

 

この透明度は0~1を指定でき、0が完全な透明で1が素の色になります。

今回は0.7としてみます。

 

ちゃんと透明度が付き、先ほどとは違う色になっているかと思います。

 

 

 

 

 

今回は長さの値と色の値についてやっていきました。

次回は「フォント関連」の内容についてやっていきます。

 

ではまた次回!


  • このエントリーをはてなブックマークに追加
  • LINEで送る