マーカーネット株式会社

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でのbackground-sizeの記述方法色々と注意点

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

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

【CSS3】簡単なドロップシャドウや光彩(グロー)の付け方!

【CSS3】簡単なドロップシャドウや光彩(グロー)の付け方!

デザインを格好よくするためにシャドウを付けたりしますよね。 しかし、サイズが異なるたびに画像を背景に指定したりしなければならないのは大変です。 しかも、シャドウの幅の分だけはみ出ているということもあり …

超簡単!【CSS3】ロールオーバー効果

超簡単!【jQuery】ロールオーバー効果 こちらではjqueryで簡単にロールオーバーをかける方法をご紹介しました。実はCSS3でも全く同じ効果を再現できるので、今回はCSS3でロールオーバー効果を …

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

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

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

CSS3のみで吹き出しを作成してみました!上下左右どこでも大丈夫!

凝ったデザインなどには吹き出しなどを作成したりします。 ですが、内容を画像ではなくテキストにしたい場合があると思います。 吹出し画像を文字数に合わせて調節したり、分割して組み立てたりするのは大変ですよ …