マーカーネット株式会社

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

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

関連記事

<WordPress>カスタムフィールドテンプレートのテキストエディター(TinyMCE Advanced)で プラグインの設定通り反映されないとき

知ってそうで知らないCSS3の便利な使い方【その2:属性セレクタ編】

前回構造疑似クラスについて便利な使い方をご紹介しましたが、 (知ってそうで知らないCSS3の便利な使い方【その1:構造疑似クラス編】) 今回はCSS3の属性セレクタをご紹介します。 E[foo] fo …

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

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

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

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

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

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

Media Queries(メディアクエリ)でページトップに戻るボタンの位置を変えてみる

Media Queries(メディアクエリ)でページトップに戻るボタンの位置を変えてみる

ページ右下によくある「トップに戻るボタン」。クリックするとスルスル~っとページの先頭にスクロールするやつですね。 ウィンドウの右下に固定だと、ウィンドウ幅が広いとコンテンツから離れすぎていてちょっと・ …

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

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

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