マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

CSS

CSSカラーコードを16進数からRGBに変えた理由

投稿日:2014年7月24日 更新日:

最近コーディングをする際、特にスマフォサイトの場合は特に
スタイルシートのカラーコードを16進数ではなくRGBで記述する事が増えました。

私がカラーコードにRGBを使う様になった最大の理由がRGBの場合alphaの指定が出来る点です。

例題

背景色の黒色と灰色をCSSで指定する場合。

16進数を使った場合

rgb_sample0

/* 左側スタイル */
.sample0 {
background-color:#000000;
}

/* 右側スタイル */
.sample1 {
background-color:#7F7F7F;
}

RGBを使った場合

rgb_sample1

/* 左側スタイル */
.sample0 {
background-color:rgba(0,0,0,1);
}

/* 右側スタイル */
.sample1 {
background-color:rgba(0,0,0,.5);
}

まとめ

もうお分かりだと思いますが、RGBの場合だと透過が指定可能なのです!
16進数を普段使われている方には最初は分かりにくいかもしれませんが、
これが慣れると案外便利です!

カラーコード変換サイト等も多くありますので
興味のある方は使ってみて下さい。

カラーコード変換サイト紹介

rgb_img0
RGBと16進数カラーコードの相互変換ツール – PEKO STEP

rgb_img1
Devoth‘s HEX 2 RGBA Color Calculator

-CSS

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

知ってそうで知らないCSS3の便利な使い方【その3:box系プロパティ】

知ってそうで知らないCSS3の便利な使い方【その3:box系プロパティ】

今回はCSS3を使ったレイアウトで使えるbox系プロパティを使ってみました。 このbox系のプロパティを使えばCSS2等で使っていたfloatやtable-cellプロパティを使わずに横並びレイアウト …

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

画像のロールオーバーって面倒ですよね。 2枚の画像を用意してJavascriptで制御して、、や背景画像していしてh overで、、 というのが一般的ですが、 今回は画像1枚だけ。CSSに4行記載する …

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

「SVG」というイメージフォーマットをご存知でしょうか? SVG(Scalable Vector Graphics)とはIllustratorで制作されるような、ベクターデータをWEB上で表示すること …

CSS3でのbackground-sizeの記述方法色々と注意点

CSS3でのbackground-sizeの記述方法色々と注意点

最近ではスマフォサイトだけではなくPCサイトでもCSS3を使う事が多くなって来ました。 そこで私がよく使うbackground-sizeに関するメモ書きです。 分けて書く場合 background:u …

角丸のコーディングは大変?CSS3で簡単に角丸を再現する方法!

角丸のコーディングは大変?CSS3で簡単に角丸を再現する方法!

今まで角丸のデザインにするには画像を背景に設定したりしていましたが、 幅や高さが変わるとそれに沿った画像を作成しなくてはならない場合があります。 それだと効率も悪く、修正もしづらいためコーディングが大 …