Loading...
カラー指定方法と数値の単位

カラー指定方法と数値の単位

公開
2018.07.16
更新
2018.10.29
  • 講座

  • CSS

本講座ではカラー指定方法と数値の単位について学んでいきます。

カラー指定方法

カラーの指定にはいくつか方法がありますが、特によく使う方法を取り上げます。

hex(16進数)

0から9、aからfまでの16進数と呼ばれる文字列の組み合わせて、色を指定する方法です。

Gieerの文字色・ベースカラー・アクセントカラーはそれぞれ以下の様になっています。

  • 文字色: #404040
  • ベースカラー: #09a3b2
  • アクセントカラー: #990057

これはPhotoshopなどのデザインツールから取得できます。

16進数のアルファベットは大文字・小文字を区別しません。
そのため、#09A3B2#09a3b2も同じ色を正しく表示します。
実際にサイトを作る際には、どちらかの表記に統一しておくと良いでしょう。

rgba

Red・Green・Blue、加えてAlphaの組み合わせで色を指定する方法です。
不透明度の設定が不要な場合は「rgb」のみでの指定も可能です。

Red -> Green -> Blue -> Alphaの順番で、カンマ区切りで指定します。
Red・Green・Blueは0から255までの整数、Alphaは0から1までの小数で記述します。

当サイトの文字色・ベースカラー・アクセントカラーをrgbで表現すると以下の様になります。

  • 文字色: rgb(64, 64, 64)
  • ベースカラー: rgb(9, 163, 178)
  • アクセントカラー: rgb(153, 0, 87)

例えば、文字色の不透明度を下げたい場合は、以下の様にAlpha値を設定します。

  • 文字色(不透明度70%):rgba(64, 64, 64, 0.7)

1は完全不透明、0は完全透明になります。

transparent

transparentは透明を表します。

background-color: transparent;とした場合、背景色は透明になります。

ちなみにbackground-colorの初期値はwhiteではなく、このtransparentです。

数値の単位

数値に使える単位はいくつかありますが、特によく使う方法を取り上げます。

px

ブラウザ上の1ドットを基準にする単位です。

例えば、1280 x 720の解像度のディスプレイを使用している場合、1280px x 720pxで最大表示のブラウザを覆うことができます(実際にはメニューバーやスクロールバーがあるため、もう少し小さくなります)。

em

文字列のサイズを基準にする単位です。

例えば、font-size: 16px;のスタイルが適応された要素の場合、1em16pxということになります。

余白などで1行開けたい、という場合にはmargin-top: 1em;で実現できます。

%(percent)

親HTML要素のサイズを基準にする単位です。

例えば、width: 100%;というCSSを記述した場合

  • body要素直下など、親要素がブラウザいっぱいの幅の場合:ブラウザいっぱいの幅
  • 親要素にwidth: 300px;と指定されていた場合:300px

となります。

その他の単位

本講座では取り上げませんが、他にも非常に便利な単位が存在します。
pxem%を使いこなせるようになったら、他の単位についても調べてみると良いでしょう。

まとめ

本講座では

  • カラー指定方法
  • 数値の単位

について学びました。

カラーは指定方法によって不透明度が設定でき、数値は指定方法によって様々な場面に対応することが可能となります。
これらの指定方法を使いこなし、バリエーション豊かなWEBサイトを作っていきましょう!

次の記事

これまでの記事

  • ふむふむ・・・

イア

イア(er)
独学する美少女エンジニア

当サイトのナビゲーターであり、あなたと一緒に勉強する同志でもあります。
今はナビゲーターとして未熟のため、ひたすら勉強をさせています。

隠します!