【8】CSSの「色」と「透明度」の指定

今回は、CSSでの 指定と 透明度 の指定について。

CSSでの色指定の に関しては「はじめてのHTML」ですでに詳しく紹介しています。
こちらのほうをぜひご覧ください。
[14-4] 色指定について(16進数, 色名, 10進数, HSL, accessibility)

また、CSSではグラデーションも指定することができます。
こちらもすでに紹介していますので、今回の記事では割愛しています。
グラデーションに関しては、こちらを参考にしてください。
[13-3] サイト背景にCSS3で線形グラデーションをつけよう
[18-4] CSS3で、円形(放射)グラデーションを作ろう (radial-gradient)

ということで今回は、
●CSSの色指定は具体的にどんなプロパティで使うのか とか、
●透明度の指定の「rgba や hsla」と「opacityプロパティ」の使い分け
RGB ←→ HSL の互換サイト
配色で迷ったときに使えるサイト
をメモっておきます。

本日のINDEX
  1. 色指定の値(カラーネーム, RGB(16進数, 10進数), HSL)
  2. CSSの色指定は具体的にどんなプロパティで使うのか
    1. よく使うのは color、background、border、outlineプロパティ
    2. グラデーションやシャドウにも
    3. 文字の装飾線に色指定(CSS3で新しくなった text-decoration)
    4. カラムの境界線に色指定(CSS3で新しくできた column-rule)
  3. 透明度の rgba や hsla と、opacityプロパティの使い分け
  4. RGB ←→ HSL の互換サイト
  5. 配色で迷ったときに使えるサイト

色指定の値(カラーネーム, RGB(16進数, 10進数), HSL)

色指定で使う「値」を、下記の表にまとめてみました。
それぞれの特徴を活かして使い分けます。と言っても下記のどれで指定したっていいんです。

私の場合は、16進数は慣れてるし、Photoshop などで表示されるので使いやすいからメインに、rgba や hsla は透明度の指定の時に...といったかんじで使い分けています。ウェブカラーネームはあんまり使わないかなあ。なんとなく。
でも、全部 rgba に統一してもOKだし、チョイスは自由。とにかく自分が使いやすければいいんです。

ウェブカラーネーム red、blue、yellow など名前で指定できる色が140色ほど決まっています。
古くからある色指定の方法で、どんなオールドブラウザでも表示します。
「原色大辞典」さんが、カラーネームを見やすくまとめてくださっています。
RGBの16進数 記述例:#dc143c(3桁に省略できる場合: #f00
これも古くからある方法。どんなオールドブラウザでもいけます。
光の三原色 R (red), G (green), B (blue) をそれぞれ16進数の2桁で表します。
1つの原色がぞろ目なら、1桁に省略することもできます(#ff0000 → #f00とか)
RGBの10進数 記述例:rgb(255,0,0)(透明度を指定する場合: rgba(255,0,0,0.5)
光の三原色 RGB を10進数の3桁(しかも0〜255までの256の数値)で表します。
rgbの最後に「a(アルファ値=透明度)」を足す記述もできます。
rgbはオールドブラウザでもOKですが、rgba は IE9から対応。
HSL 記述例:hsl(0,100%,50%) (透明度を指定する場合: hsla(0,100%,50%,0.5)
CSS3からの新しい値です。IE9から対応。
色相(Hue)を0から359までの数値で、彩度(Saturation)と輝度(Luminance)を%で表します。
hslの最後に「a(アルファ値=透明度)」を足す記述もできます。

これらの「値」については、
[14-4] 色指定について(16進数, 色名, 10進数, HSL, accessibility)
で詳しく説明しています。
特にHSL色空間についての図説がわかりやすい(たぶん)と思いますので、見てみてください。

CSSの色指定は具体的にどんなプロパティで使うのか

では、具体的にどのようなプロパティで色指定するのか見てみましょう。

よく使うのは color、background、border、outlineプロパティ

★ color、background-color、border-color プロパティ

文字の色、ボックスの背景色、ボックスの枠線の色は、ウェブサイト制作で必ず使いますね。
モノトーンのサイトを作ろうったって使うから。
文字の色 = colorプロパティ
ボックスの背景色 = background-colorプロパティ
ボックスの枠線の色 = border-colorプロパティ
といった具合で、それぞれ決められたプロパティで色を指定します。

サンプルを見てみましょう。

テキストカラーは maroon、背景は #fff5ee、ボーダーカラーは hsl(262,29%,59%)
<div id="sample1">
テキストカラーは maroon、背景は #fff5ee、ボーダーカラーは hsl(262,29%,59%)
</div>
div#sample1 {
	padding:1em;
	color:maroon;   /*ウェブカラーネームで指定*/
	background-color:#fff5ee;   /*RGBの16進数指定*/
	border-style:solid;
	border-width:2px;
	border-color:hsl(262,29%,59%);}   /*HSL指定*/

上のCSSソースを、CSSのショートハンドを使って、もっと短くすることもできます。

div#sample1 {
	padding:1em;
	color:maroon;
	background:#fff5ee;
	border:solid 2px hsl(262,29%,59%);}

4行目は、background のショートハンド。
他のプロパティ(background-color, background-image、background-repeat、background-positionなど)をまとめて指定するショートハンドプロパティ「background」で、背景色のみ指定した書き方です。
(backgroud-color以外を省略すれば、background-image は初期値の none になり、背景画像無しとブラウザが判断します)

5行目は、border のショートハンド。
ボーダーの border-style、border-width、border-color をまとめて指定したものです。

ショートハンドはこのように「値」を「半角スペース」で区切ってまとめることができます。
(ショートハンドについては、後日詳しくまとめる予定です。)

★ outlineプロパティ

もうひとつ、borderによく似たoutlineプロパティは、使ったことが無くても、意外といつも目にしているプロパティなんです。
フォームの部品(input要素のテキストフィールドやラジオボタンなど)フォーカス時に付く枠線や、
a要素の a:visited, a:focus のときに付く点線の枠が outlineです。
ブラウザのデフォルトスタイルで、これらのoutlineが設定されているんですね。

ブラウザのデフォルトをリセットしたい時には、outlineプロパティを編集します。
border と outline の違いは、
outline は上下左右の線を別々に指定できず、全部一括で指定するところ。

outline のサンプルを見てみましょう。



ココにマウスオーバーするとoutlineが付きます。
<div id="sample2">
<input class="sample2_1" type="text" size="30" placeholder='outline: solid 5px peachpuff'><br>
<input class="sample2_2" type="text" size="30" placeholder='outline: double 5px #87cefa'><br>
<a href="#" class="sample2_3">ココにマウスオーバーするとoutlineが付きます。</a>
</div>
div#sample2 {padding:0.5em 1em; border:solid 1px #ccc;}
div#sample2 input {margin:0.7em 0;}
div#sample2 input.sample2_1 {outline:solid 5px peachpuff;}
div#sample2 input.sample2_2 {outline:double 5px #87cefa;}
div#sample2 a.sample2_3:hover {outline:dotted 2px rgb(0,102,255); text-decoration:none;}

上のソースの outlineプロパティも、ショートハンドを使っています。
outline-style、outline-width、outline-color の値を「半角スペース」で区切ってまとめています。

outlineプロパティについては、
「*Web Design 覚え書き*」で説明しています(若干あっさりですが)。ご参考に。

グラデーションやシャドウにも

CSS3から使えるようになった「グラデーション」や「シャドウ(ボックスシャドウ・テキストシャドウ)」にも、色指定の値を使いますね。
特にグラデーションでは、rgba や hsla を使えば、透明度のグラデーションもできて便利です♪

透明度のグラデーション

<div id="sample3">
<p>透明度のグラデーション</p>
</div>
div#sample3 {
	padding:1em;
	border:solid 1px #ccc;
	background: url(img/tile_xy.gif) repeat;}
div#sample3 p {
	margin:0;
	padding:2em;
	color:#fff;
	font-weight:bold;
	text-align:center;
	background: linear-gradient(to right, hsla(181, 100%, 45%, 0.2), hsla(181, 100%, 45%, 1) 50%, hsla(181, 100%, 45%, 0.2));}

サンプルでは、まず親要素(div)に背景画像を指定。その子要素の<p>の背景の 線形グラデーション(linear-gradient)で、同じ色の透明度を、左から「0.2、1、0.2」としています。

グラデーションやシャドウについては、コチラをご覧ください。
*線形グラデーション→ [13-3] サイト背景にCSS3で線形グラデーションをつけよう (linear-gradient)
*円形グラデーション→ [18-4] CSS3で、円形(放射)グラデーションを作ろう (radial-gradient)
*ボックスシャドウ→ [18-2] CSS3で、ボックス要素にシャドウをつけよう(box-shadow)
*テキストシャドウ→ [18-3] CSS3で、テキストにシャドウをつけよう(text-shadow)

文字の装飾線に色指定(CSS3で新しくなった text-decoration)

text-decoration プロパティは、テキストに下線・上線・打ち消し線などを付けるものでしたが、
CSS3から、これらの線のスタイルや色を指定できるようになりました。
text-decoration-line でかつての text-decoration の値(none, underline, overline, line-through)を指定。
text-decoration-color で装飾線の色を指定、
text-decoration-style で装飾線の種類(solid, double, dotted, dashed, wavy (波線) )を指定します。
これらをtext-decoration でひとまとめにショートハンドで書けます。
(*CSS2までの text-decoration の指定もイキ。無くなったわけではありません。)

CSS3 での text-decoration プロパティでのサンプルです。

text-decoration: underline skyblue solid

text-decoration: overline #b8e600 wavy

text-decoration: line-through hsla(0, 100%, 45%, 0.5) double

<div id="sample4">
lt;p id="t_deco1">text-decoration: underline skyblue solid</p>
<p id="t_deco2">text-decoration: overline #b8e600 wavy</p>
<p id="t_deco3">text-decoration: line-through hsla(0,100%,45%,0.5) double</p>
</div>
div#sample4 {
	padding:0.7em;
	border:solid 1px #ccc;}
div#sample4 p {margin:0.3em 0;}
div#sample4 p#t_deco1 {text-decoration: underline skyblue solid;}
div#sample4 p#t_deco2 {text-decoration: overline #b8e600 wavy;}
div#sample4 p#t_deco3 {text-decoration: line-through hsla(0,100%,45%,0.5) double;}

*2015年9月現在 プレビューするブラウザは少ないようです。ベンダープレフィックスも使えないようで。
 Firefox ver.40 ではこのように↓プレビューされています。
Firefoxでのプレビュー

カラムの境界線に色指定(CSS3で新しくできた column-rule)

CSS3 から columns (カラム)という新しいプロパティができました。要素内の文章を自動的に段組みにすることができます。
カラム幅=column-width、カラム数=column-countで指定し、それを columnsプロパティでひとまとめにショートハンド指定できます。
column-rule プロパティは、カラムの区切り線のスタイル・幅・色を指定します。
線のスタイル=column-rule-style、幅=column-rule-width、色=column-rule-colorで指定しますが、これをひとまとめにショートハンドで指定できるのがcolumn-rule プロパティというわけ。

column-countcolumn-rule を使ってみたサンプルがコチラです。
カラムの数は3つに指定。カラムの区切り線は、3pxの太さで、二重線(double)、色はブルー(rgb(0,180,230))にしてみました。
また、column-gap というプロパティも使って、カラムからカラムまでの距離を指定しています。

columns プロパティは、現時点(2015年8月記)では、まだベンダープレフィックスが必要です。
Chromeでは「-webkit-」、Firefox では「-moz-」を付けて指定します。
詳しくは下記のCSSソースをご覧ください。

<div id="sample5">
<p><b>column-count</b> と <b>column-rule</b> を使ってみた...(略)</p>
<p>columns プロパティは、現時点(2015年8月記)では...(略)</p>
</div>
div#sample5 {
	padding:1em;
	border:solid 1px #ccc;
	-moz-column-count: 3;
	-moz-column-gap: 1.7em;
	-moz-column-rule: 3px double rgb(0,180,230);
	-webkit-column-count: 3;
	-webkit-column-gap: 1.7em;
	-webkit-column-rule: 3px double rgb(0,180,230);
	-o-column-count: 3;
	-o-column-gap: 1.7em;
	-o-column-rule: 3px double rgb(0,180,230);
	-ms-column-count: 3;
	-ms-column-gap: 1.7em;
	-ms-column-rule: 3px double rgb(0,180,230);
	column-count: 3;
	column-gap: 1.7em;
	column-rule: 3px double rgb(0,180,230);}
div#sample5 p {margin:0 0 1em;}

色指定のプロパティって、ざっとこんなところかなあ。まだあるかもだけど。

とにかく、「○○-color」となってるプロパティは色を指定するためのもの。
ですから、そこに色のための値を書いてあげればいいんです。
「-color」が見当たらないのに色指定の値があれば、それはショートハンドでの指定ってわけ。
ですので、他の人が書いたCSSを解読するときに、ショートハンドの知識って大事ですね。
(ショートハンドについては、後日まとめますね)

透明度の rgba や hsla と、opacityプロパティの使い分け

透明度を指定する「値」では「rgba」「hsla」をよく使いますが、
CSS3から、値ではなくプロパティで opacityプロパティ が登場しました。
opacity(オパシティ)= 不透明度 という意味です。
(本文中では「透明度」のほうがわかりやすい(私が)ので、そういう言い方をしています。)

opacity は「opacity:0.5」といった書き方で、0〜1までの数値で指定します。
0が透明、1で不透明、0.5で半調です。
ちなみにCSSでは、値が 小数点以下の場合「0」を省略してもOK です。
「opacity: 0.5」だったら「opacity: .5」と書いても結果は同じです。

opacityプロパティと、rgba や hsla との違いは、
opacityプロパティは、中の子要素も含めて全部まるごと透明度が変わります。
rgba や hsla は「値」なので、透明度を使いたいところだけにピンポイントで使えます。

サンプルで確認してみましょう。

OPACITY

親要素にopacityで指定すると、子要素も同じ透明度です。

RGBA or HSLA

親要素の背景を rgba や hsla で指定すれば、子要素には影響しません。

<div id="sample6">
  <div id="sample6_1">
    <h4>OPACITY</h4>
    <p>親要素にopacityで指定すると、子要素も同じ透明度です。</p>
  </div>
  <div id="sample6_2">
    <h4>RGBA or HSLA</h4>
    <p>親要素の背景を rgba や hsla で指定すれば、子要素には影響しません。</p>
  </div>
</div>
div#sample6 {
	padding:2em;
	border:solid 1px #ccc;
	background: rgb(156,100,210) url(img/bg.jpg) no-repeat center bottom;}
div#sample6 div {
	padding:1em;
	text-align:center;
	background:rgb(156,100,210);
	color:#fff;}
div#sample6 div h4 {
	font-size:3em;
    line-height:1em;}
div#sample6 div p {
	margin:1em 0 0;
    padding:0.5em;
    background:#fff;
    color:rgb(93,59,186);}
div#sample6 div#sample6_1 {
	opacity:0.7;       /*全部まるごと 0.7の透明度に*/
	margin:0 0 2em;}
div#sample6 div#sample6_2 {
	background:rgba(156,100,210,0.5);}  /*背景だけを透明度 0.5に*/

opacity は、マウスオーバー時の変化、未選択のタブなど、要素まるごと透明度を変えたい時に。
rgba, hsla は、部分的に透明にしたいけど、他はいじりたくないときに便利です。
それぞれの特徴を生かして使い分けましょう。

RGB ←→ HSL の互換サイト

さて、いろいろな色指定を見てきましたが、
例えばこの色 E7B6D8 を指定したいとき、Photoshopなどのソフトで #16進数や RGB は簡単にわかります。(ちなみに↑この色は、#E7B6D8、rgb(231,182,216) です。)
では、HSL値を知るには? またはその逆(HSLからRGB)はどうする?
そんな時に便利な、互換サイトがあります。

HSL Color Picker - by Brandon Mathis

こちらはスライダーで色を作れて、それぞれの値もペースト・コピーできます。
カラーピッカーや互換ツールは、ググればいろいろ出てきますが、今はこれが一番イイかんじ。
(いくつか紹介しようと思ったけど、結局コレ↑ひとつでコトが足りるので、1個しか紹介しませんでしたww )

配色で迷ったときに使えるサイト

ウェブサイトのカラー計画を練っているとき、
すでにメインビジュアル(写真やイラスト)が決まっていたり、ロゴなどの関係で メインカラーが決まっているなら、サイトの配色はわりとすんなり決まります。
そうでない場合は、腕の見せ所。
とはいえ、配色にいろいろ迷ってしまった...というときに、役に立つサイトがあります。

いちばんのオススメはこちら。感覚的に色をチョイスできます。
何よりも、操作の反応が美しくてワクワクします。
color.hailpixel.com

最初の画面は真っ黒(#000)ですが、マウスカーソルを移動させると、滑らかに色が変化します。
画面の x軸が色相環、y軸が明度として反応するようです。
クリックでその場の色を保存します。

その後は同じ要領で色を選んでクリック。
各色の「歯車マーク」をクリックすると、RGB値、HSL値を確認でき、編集もできます。
同じく各色の「×マーク」をクリックで、その色を削除。

また、選んだ色の #16進数が、URLに記録されるのがこのサイトの秀逸なところ。

ブックマークもできますし、アドレスバーを編集して画面の色を変えることもできます。

こちらは、もう少しロジックに考えたいときに。
[ HUE / 360 ] The Color Scheme Application

こちらは色相(Hue)をカラーホイール(色相環)で見やすく整理してくれているサイトです。
もうだいたい使いたい色のトーン(ビビットかダルか、ブライトかソフトか)を決めていて、同系色や補色を 理論的にチョイス したい時には、こちらが便利です。

PLTTS - Popular

配色のセットがダ〜ッと出てくる。画面下にあるページャーで次々見ていく作りです。
ほんっとにな〜んにも配色を思いつかないとき、とにかくコレを見て刺激を得るのにいいかもw。

Coolors - The super fast color schemes generator!

配色のセットを選ぶのは上の "PLTTS-Popular" 同じですが、こちらはそのあと色の編集ができます。
(一覧で1つ選んでビュー(目のマーク)をクリックすると、上の画像のようなプレビュー画面になります)
iPhone, Android のアプリ、Photoshop や Illustrator のアドオンもあるようです。

こちらはグラデーション専用のカラーパレット。
広い範囲で使う重要なグラデーションを考えるときにオススメです。
uiGradients - Beautiful coloured gradients

ロードするとランダムにグラデーションが表示されます。
画面の左右にある「<」「>」でグラデーションを切り替えます。
画面左下の「See All Gradients (Shift)」をクリックするか「Shiftキー」を押すと一覧を表示でき、
そこからグラデーションをチョイスすることもできます。
タイトルどおり Beautiful なサイトです。

次回予告

今回は CSSでの色指定について、わりとランダムでしたがメモってみました。
各要素のスタイルを指定するCSSの中で、色の指定がいちばんオモシロイんじゃないでしょうか。
CSSの色指定を自由に使いこなせると、楽しいですよね。

さて次回は、HTML要素の「インライン」「ブロックレベル」について。
「インラインブロック」というスタイルも出てきます。

HTML5から、要素の分類は「カテゴリー」によるものに変わりました。
でも、各要素に「インライン」「ブロックレベル」のデフォルトスタイルがあるのは変わりません。
それぞれの要素のデフォルトスタイルを知っておくことが、CSSを指定するときに大事です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

わかりやすいですが、cssが閲覧出来ません。

Re: タイトルなし

高田さま
コメントありがとうございます。
CSSが閲覧できない...ソースが見れないってことでしょうか?
私の環境で見たところ、Firefox, Chrome, Safari, Opera、iPhoneのSafariではソースが表示されています。
スマホの場合は表示領域でソースが折り返される設定にしていないので、ソース部分を横方向にスクロールしてご覧ください。
よろしくお願いいたします。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.