マーカーネット株式会社

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

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

関連記事

ウェブ上学習プログラム「Dash」!ブラウザでWEB制作(HTML, CSS, JavaScript)の基礎を学べ

ウェブ上学習プログラム「Dash」!ブラウザでWEB制作(HTML, CSS, JavaScript)の基礎を学べ

この「Dash」と呼ばれるプログラムはGeneral Assemblyが起業家などを育てる教育分野に転身したのをきっかけにもともと自社内の教育ツールとして開発されたものだったらしいのですが、評判が良か …

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

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

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

脱初心者!CSSのちょっとしたテクニック!CSSが効かない問題を回避!

脱初心者!CSSのちょっとしたテクニック!CSSが効かない問題を回避!

「CSSを設定したのに効かない!?」っていうことありますよね。 その場合、一概には言えませんが、もしかしたらCSSの書き方が原因かもしれません。 下記を参考に、CSSを書き直せば直る可能性もぐっと高ま …

知ってそうで知らないCSS3の便利な使い方【その1:構造疑似クラス編】

CSS3のセレクタは幾つもありますよね。 今回はその中の構造疑似クラスで、私がよく使う便利な構造疑似クラスをご紹介します。 E:first-child 親要素の最初の子要素であるE要素に適用 E:fi …

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

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

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